From c1a46c23e3f5cc57088d1911968f835b7c423678 Mon Sep 17 00:00:00 2001 From: Jean-Michel FRANCOIS Date: Thu, 27 Apr 2017 10:47:04 +0200 Subject: [PATCH 1/4] chore: improve composition --- .../src/ActionBar/ActionBar.component.js | 44 ++++++++++++++++--- .../ActionBar.snapshot.test.js.snap | 10 +++++ .../containers/src/Action/Action.component.js | 2 + .../src/ActionBar/ActionBar.container.js | 10 ++++- .../__snapshots__/ActionBar.test.js.snap | 8 ++++ .../src/Actions/Actions.component.js | 2 + 6 files changed, 69 insertions(+), 7 deletions(-) diff --git a/packages/components/src/ActionBar/ActionBar.component.js b/packages/components/src/ActionBar/ActionBar.component.js index 20e973c1972..3a53887373e 100644 --- a/packages/components/src/ActionBar/ActionBar.component.js +++ b/packages/components/src/ActionBar/ActionBar.component.js @@ -20,6 +20,17 @@ const actionsShape = { children: PropTypes.node, }; +function getComponents(props) { + return Object.assign( + { + Action, + Actions, + ActionSplitDropdown, + }, + props.components, + ); +} + function getActionsToRender({ selected, actions, multiSelectActions }) { if (selected > 0) { return multiSelectActions || {}; @@ -57,7 +68,8 @@ Content.propTypes = { tag: PropTypes.oneOf(['p', 'button', 'form', 'a', 'div']), }; -function SwitchActions({ actions, left, right, selected }) { +function SwitchActions({ actions, left, right, selected, components }) { + const SafeComponents = getComponents({components}); return ( { selected > 0 && !right ? ( @@ -68,15 +80,15 @@ function SwitchActions({ actions, left, right, selected }) { switch (displayMode) { case DISPLAY_MODES.SPLIT_DROPDOWN: return ( - + ); case DISPLAY_MODES.BTN_GROUP: return ( - + ); default: return ( - + ); } }) } @@ -88,6 +100,13 @@ SwitchActions.propTypes = { left: PropTypes.bool, right: PropTypes.bool, selected: PropTypes.number, + components: PropTypes.shape( + { + Action: PropTypes.func, + Actions: PropTypes.func, + ActionSplitDropdown: PropTypes.func, + } + ), }; SwitchActions.defaultProps = { actions: [], @@ -118,11 +137,23 @@ function ActionBar(props) { return ( ); @@ -132,6 +163,7 @@ ActionBar.propTypes = { selected: PropTypes.number, children: PropTypes.node, className: PropTypes.string, + components: PropTypes.shape(SwitchActions.propTypes.components), }; ActionBar.DISPLAY_MODES = DISPLAY_MODES; diff --git a/packages/components/src/ActionBar/__snapshots__/ActionBar.snapshot.test.js.snap b/packages/components/src/ActionBar/__snapshots__/ActionBar.snapshot.test.js.snap index 14ea56c7f0f..60e9a1dcf18 100644 --- a/packages/components/src/ActionBar/__snapshots__/ActionBar.snapshot.test.js.snap +++ b/packages/components/src/ActionBar/__snapshots__/ActionBar.snapshot.test.js.snap @@ -26,6 +26,7 @@ exports[`ActionBar should render a btn-group 1`] = ` }, ] } + components={undefined} left={true} selected={undefined} /> @@ -69,6 +70,7 @@ exports[`ActionBar should render no-selected actions, all on left 1`] = ` }, ] } + components={undefined} left={true} selected={0} /> @@ -112,6 +114,7 @@ exports[`ActionBar should render no-selected actions, all on right 1`] = ` }, ] } + components={undefined} right={true} selected={0} /> @@ -133,6 +136,7 @@ exports[`ActionBar should render no-selected actions, some on left, the other on }, ] } + components={undefined} left={true} selected={0} /> @@ -163,6 +167,7 @@ exports[`ActionBar should render no-selected actions, some on left, the other on }, ] } + components={undefined} right={true} selected={0} /> @@ -205,6 +210,7 @@ exports[`ActionBar should render selected count and multi-selected actions, all }, ] } + components={undefined} left={true} selected={1} /> @@ -217,6 +223,7 @@ exports[`ActionBar should render selected count and multi-selected actions, all > @@ -252,6 +259,7 @@ exports[`ActionBar should render selected count and multi-selected actions, all }, ] } + components={undefined} right={true} selected={1} /> @@ -272,6 +280,7 @@ exports[`ActionBar should render selected count and multi-selected actions, coun }, ] } + components={undefined} left={true} selected={1} /> @@ -302,6 +311,7 @@ exports[`ActionBar should render selected count and multi-selected actions, coun }, ] } + components={undefined} right={true} selected={1} /> diff --git a/packages/containers/src/Action/Action.component.js b/packages/containers/src/Action/Action.component.js index 4196c56c710..82f119d8e9f 100644 --- a/packages/containers/src/Action/Action.component.js +++ b/packages/containers/src/Action/Action.component.js @@ -28,4 +28,6 @@ Action.contextTypes = { registry: PropTypes.object, }; +Action.displayName = 'CMFContainer(Action)'; + export default Action; diff --git a/packages/containers/src/ActionBar/ActionBar.container.js b/packages/containers/src/ActionBar/ActionBar.container.js index 01f16cd19c4..c94ae8b77e1 100644 --- a/packages/containers/src/ActionBar/ActionBar.container.js +++ b/packages/containers/src/ActionBar/ActionBar.container.js @@ -1,7 +1,8 @@ import React, { PropTypes } from 'react'; - import { ActionBar as Component } from 'react-talend-components'; import { getActionsProps } from '../actionAPI'; +import Action from '../Action'; +import Actions from '../Actions'; function getActions(context, idOrInfo, model) { if (typeof idOrInfo === 'string') { @@ -35,6 +36,10 @@ function ActionBar({ actions, actionIds, ...props }, context) { return ( ); @@ -49,6 +54,9 @@ const actionPropTypes = PropTypes.oneOfType([ }), ]); +Object.keys(Component).forEach((key) => { + ActionBar[key] = Component[key]; +}); ActionBar.displayName = 'CMFContainer(ActionBar)'; ActionBar.propTypes = { ...Component.propTypes, diff --git a/packages/containers/src/ActionBar/__snapshots__/ActionBar.test.js.snap b/packages/containers/src/ActionBar/__snapshots__/ActionBar.test.js.snap index 8db38692675..de2711f5ecf 100644 --- a/packages/containers/src/ActionBar/__snapshots__/ActionBar.test.js.snap +++ b/packages/containers/src/ActionBar/__snapshots__/ActionBar.test.js.snap @@ -89,6 +89,10 @@ Object { }, ], }, + "components": Object { + "Action": [Function], + "Actions": [Function], + }, } `; @@ -144,5 +148,9 @@ Object { }, ], }, + "components": Object { + "Action": [Function], + "Actions": [Function], + }, } `; diff --git a/packages/containers/src/Actions/Actions.component.js b/packages/containers/src/Actions/Actions.component.js index eb530a2575d..652398a9824 100644 --- a/packages/containers/src/Actions/Actions.component.js +++ b/packages/containers/src/Actions/Actions.component.js @@ -32,4 +32,6 @@ Actions.contextTypes = { store: React.PropTypes.object, }; +Actions.displayName = 'CMF(Actions)'; + export default Actions; From 35d54a438be993425b95d0e22fd944553dde6ed7 Mon Sep 17 00:00:00 2001 From: travis Date: Thu, 27 Apr 2017 08:59:00 +0000 Subject: [PATCH 2/4] test(ci): update code style outputs --- output/components.eslint.txt | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/output/components.eslint.txt b/output/components.eslint.txt index b016688375d..28c62c85078 100644 --- a/output/components.eslint.txt +++ b/output/components.eslint.txt @@ -5,6 +5,10 @@ Scoping to packages that match 'react-talend-components' > eslint --config .eslintrc src +/home/travis/build/Talend/ui/packages/components/src/ActionBar/ActionBar.component.js + 72:39 error A space is required after '{' object-curly-spacing + 72:50 error A space is required before '}' object-curly-spacing + /home/travis/build/Talend/ui/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.test.js 7:27 error 'name' is missing in props validation react/prop-types @@ -34,7 +38,7 @@ Scoping to packages that match 'react-talend-components' 2:1 error '@kadira/react-storybook-addon-info' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies 7:2 error Unexpected require() global-require -✖ 15 problems (15 errors, 0 warnings) +✖ 17 problems (17 errors, 0 warnings) Errored while running command 'npm' with arguments 'run lint:es' in 'react-talend-components' Errored while running ExecCommand.execute From c2a06cb05ddd3f74d64392a372b610915a29ddbd Mon Sep 17 00:00:00 2001 From: Jean-Michel FRANCOIS Date: Thu, 27 Apr 2017 14:11:30 +0200 Subject: [PATCH 3/4] chore: rename components -> renderers --- .../src/ActionBar/ActionBar.component.js | 24 ++++++++------- .../src/ActionBar/ActionBar.test.js | 30 +++++++++++++++++++ .../ActionBar.snapshot.test.js.snap | 20 ++++++------- .../__snapshots__/ActionBar.test.js.snap | 9 ++++++ .../src/ActionBar/ActionBar.container.js | 2 +- .../__snapshots__/ActionBar.test.js.snap | 4 +-- 6 files changed, 65 insertions(+), 24 deletions(-) create mode 100644 packages/components/src/ActionBar/__snapshots__/ActionBar.test.js.snap diff --git a/packages/components/src/ActionBar/ActionBar.component.js b/packages/components/src/ActionBar/ActionBar.component.js index 3a53887373e..2f4b9c9168a 100644 --- a/packages/components/src/ActionBar/ActionBar.component.js +++ b/packages/components/src/ActionBar/ActionBar.component.js @@ -20,14 +20,14 @@ const actionsShape = { children: PropTypes.node, }; -function getComponents(props) { +function getRenderers(props) { return Object.assign( { Action, Actions, ActionSplitDropdown, }, - props.components, + props ? props.renderers : {}, ); } @@ -68,8 +68,8 @@ Content.propTypes = { tag: PropTypes.oneOf(['p', 'button', 'form', 'a', 'div']), }; -function SwitchActions({ actions, left, right, selected, components }) { - const SafeComponents = getComponents({components}); +function SwitchActions({ actions, left, right, selected, renderers }) { + const Renderers = getRenderers({ renderers }); return ( { selected > 0 && !right ? ( @@ -80,15 +80,15 @@ function SwitchActions({ actions, left, right, selected, components }) { switch (displayMode) { case DISPLAY_MODES.SPLIT_DROPDOWN: return ( - + ); case DISPLAY_MODES.BTN_GROUP: return ( - + ); default: return ( - + ); } }) } @@ -100,7 +100,7 @@ SwitchActions.propTypes = { left: PropTypes.bool, right: PropTypes.bool, selected: PropTypes.number, - components: PropTypes.shape( + renderers: PropTypes.shape( { Action: PropTypes.func, Actions: PropTypes.func, @@ -138,7 +138,7 @@ function ActionBar(props) { @@ -70,8 +70,8 @@ exports[`ActionBar should render no-selected actions, all on left 1`] = ` }, ] } - components={undefined} left={true} + renderers={undefined} selected={0} /> @@ -114,7 +114,7 @@ exports[`ActionBar should render no-selected actions, all on right 1`] = ` }, ] } - components={undefined} + renderers={undefined} right={true} selected={0} /> @@ -136,8 +136,8 @@ exports[`ActionBar should render no-selected actions, some on left, the other on }, ] } - components={undefined} left={true} + renderers={undefined} selected={0} /> @@ -210,8 +210,8 @@ exports[`ActionBar should render selected count and multi-selected actions, all }, ] } - components={undefined} left={true} + renderers={undefined} selected={1} /> @@ -223,8 +223,8 @@ exports[`ActionBar should render selected count and multi-selected actions, all > @@ -280,8 +280,8 @@ exports[`ActionBar should render selected count and multi-selected actions, coun }, ] } - components={undefined} left={true} + renderers={undefined} selected={1} /> diff --git a/packages/components/src/ActionBar/__snapshots__/ActionBar.test.js.snap b/packages/components/src/ActionBar/__snapshots__/ActionBar.test.js.snap new file mode 100644 index 00000000000..af64b7c4729 --- /dev/null +++ b/packages/components/src/ActionBar/__snapshots__/ActionBar.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ActionBar should support custom renderers 1`] = ` +Object { + "className": "my-custom-action", + "icon": "talend-preparation", + "label": "Preparations", +} +`; diff --git a/packages/containers/src/ActionBar/ActionBar.container.js b/packages/containers/src/ActionBar/ActionBar.container.js index c94ae8b77e1..cae860b6ab6 100644 --- a/packages/containers/src/ActionBar/ActionBar.container.js +++ b/packages/containers/src/ActionBar/ActionBar.container.js @@ -36,7 +36,7 @@ function ActionBar({ actions, actionIds, ...props }, context) { return ( Date: Thu, 27 Apr 2017 12:21:43 +0000 Subject: [PATCH 4/4] test(ci): update code style outputs --- output/components.eslint.txt | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/output/components.eslint.txt b/output/components.eslint.txt index 28c62c85078..b016688375d 100644 --- a/output/components.eslint.txt +++ b/output/components.eslint.txt @@ -5,10 +5,6 @@ Scoping to packages that match 'react-talend-components' > eslint --config .eslintrc src -/home/travis/build/Talend/ui/packages/components/src/ActionBar/ActionBar.component.js - 72:39 error A space is required after '{' object-curly-spacing - 72:50 error A space is required before '}' object-curly-spacing - /home/travis/build/Talend/ui/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.test.js 7:27 error 'name' is missing in props validation react/prop-types @@ -38,7 +34,7 @@ Scoping to packages that match 'react-talend-components' 2:1 error '@kadira/react-storybook-addon-info' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies 7:2 error Unexpected require() global-require -✖ 17 problems (17 errors, 0 warnings) +✖ 15 problems (15 errors, 0 warnings) Errored while running command 'npm' with arguments 'run lint:es' in 'react-talend-components' Errored while running ExecCommand.execute