Migration path : 1.x to 2.x - Talend/ui GitHub Wiki
- EditableText: no more default font style
- Typeahead and Datalist: extra element rendering in dropdown
- React-bootstrap upgrade: Panel breaking change
- Headings: style update to match the guideline
- React-CMF router: extraction in a dedicated module
- React-CMF injected props: some props are not injected by default anymore
The text mode style in EditableText has changed. We don't apply any default font style because you can insert any component you'd like. To have the same rendering as before you must style yourself the text
.tc-editable-text-wording {
color: $black;
font-size: 1.4rem;
font-weight: 900;
}
Use case
- you are passing an renderItemContainer props to
Typeahead
orDatalist
- you rely on
children
props to condition the render of extra elements
Previous behavior
The extra elements are rendered even if the input value is empty (''
).
Next behavior
It won't render anymore if the value is empty (''
). In this case, children is empty, so you have to replace your implementation with a simpler one : render prop passed as children.
What to do
-function renderItemsContainer({ children }) {
- return (
- <div>
- {children}
- {children && <button>Click</button>}
- </div>
- );
-}
<Typeahead
{...props}
- renderItemsContainer={renderItemsContainer}
>
+ (content, {searching, loading, noResult, isShown}) =>(
+ <div>
+ {content}
+ {isShown && <button>Click</button>}
+ </div>
+ )}
</Typeahead>
The library has been upgrade from 0.31.5 to 0.32.4.
What to do
- Upgrade
react-bootstrap
in your app (you can useTalend/ui > version > version.js
script to align all lib versions) - CollapsiblePanel has been adapted to a breaking change
- Check in your app if the components that you use directly from
react-bootstrap
are still ok - If you have automated tests involving CollapsiblePanel, they may fail as the HTML markup has changed
Headings font-size has been adapted to fit guideline.
What to do
- Check your apps headings compared to the guideline
- Remove the custom styles you may have.
The router has been extracted to its own module.
What to do
- Setup: reading the @talend/react-cmf-router documentation.
import cmf from '@talend/react-cmf';
import { browserHistory } from 'react-router';
+import getRouter from '@talend/react-cmf-router';
+import AppLoader from '@talend/react-containers/lib/AppLoader';
+// Example of sagaRouterConfig
+const sagaRouterConfig = {
+ '/preparations': { saga: refresh, runOnExactMatch: true },
+ '/preparations/:folderId': { saga: refresh, runOnExactMatch: true },
+}:
+const router = getRouter({ history: browserHistory, sagaRouterConfig });
cmf.bootstrap({
- history: browserHistory,
- sagaRouterConfig,
+ modules: [router.cmfModule],
+ AppLoader,
+ RootComponent: router.RootComponent,
});
- matchPath
-import matchPath from '@talend/react-cmf/lib/sagaRouter/matchPath';
+import matchPath from '@talend/react-cmf/lib/matchPath';
- Selectors
-import cmf from '@talend/react-cmf';
+import { routerAPI } from '@talend/react-cmf-router';
-cmf.selectors.router.getPath(state);
-cmf.selectors.router.getLocation(state);
+routerAPI.selectors.getPath(state);
+routerAPI.selectors.getLocation(state);
- Saga documentTitle
This saga is started by the module so if you have written down the following you have to update:
-import cmf from '@talend/react-cmf';
-function* mainSaga() {
- yield fork(cmf.sagas.changeDocumentTitle);
-}
- Redirect container rename
It is exported and registered as Redirect
but has a displayName="RedirectContainer".
{
"props": {
- "RedirectContainer#default": {
+ "Redirect#default": {
to: "/datastores"
}
}
}
- Register
@talend/react-containers
To be able to use Talend React containers, you have to register them as module.
import cmf from '@talend/react-cmf';
+import ContainersModule from '@talend/react-containers';
cmf.bootstrap({
- modules: [router.cmfModule],
+ modules: [
+ router.cmfModule,
+ ContainersModule,
+ ],
});
By default, cmfConnect()
set an omitCMFProps to true
(previously false
).
This means that the following props are not injected by default in your component
- getComponent
- componentId
- dispatch
- dispatchActionCreator
- state props : setState, deleteState, updateState, state, initState
What to do
- configure your cmfConnect using
defaultState
,withComponentRegistry
,withComponentId
,withDispatch
,withDispatchActionCreator
cmfConnect({
mapStateToProps,
...
+ defaultState: { myStateKey: 'my state value' }, // this injects state props
+ withComponentRegistry: true, // injects getComponent
+ withComponentId: true, // injects componentId
+ withDispatch: true, // injects dispatch
+ withDispatchActionCreator: true, // injects dispatchActionCreator
})(MyComponent);
- to have the same behavior as before, injecting all props, pass the option to
false
cmfConnect({
mapStateToProps,
...
+ omitCMFProps: false,
})(MyComponent);