chore: improve composition

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

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 (
 		<Content left={left} right={right}>
 			{ selected > 0 && !right ? (
@@ -68,15 +80,15 @@ function SwitchActions({ actions, left, right, selected }) {
 				switch (displayMode) {
 				case DISPLAY_MODES.SPLIT_DROPDOWN:
 					return (
-						<ActionSplitDropdown key={index} {...rest} />
+						<SafeComponents.ActionSplitDropdown key={index} {...rest} />
 					);
 				case DISPLAY_MODES.BTN_GROUP:
 					return (
-						<Actions key={index} {...rest} />
+						<SafeComponents.Actions key={index} {...rest} />
 					);
 				default:
 					return (
-						<Action key={index} {...rest} />
+						<SafeComponents.Action key={index} {...rest} />
 					);
 				}
 			}) }
@@ -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 (
 		<nav className={cssClass}>
 			{ (left || !!props.selected) && (
-				<SwitchActions key={0} actions={left} selected={props.selected} left />
+				<SwitchActions
+					components={props.components}
+					key={0}
+					actions={left}
+					selected={props.selected}
+					left
+				/>
 			)}
 			{props.children}
 			{ right && (
-				<SwitchActions key={1} actions={right} selected={props.selected} right />
+				<SwitchActions
+					components={props.components}
+					key={1}
+					actions={right}
+					selected={props.selected}
+					right
+				/>
 			)}
 		</nav>
 	);
@@ -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;

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
 >
   <SwitchActions
     actions={Array []}
+    components={undefined}
     left={true}
     selected={1}
   />
@@ -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}
   />

packages/containers/src/Action/Action.component.js

@@ -28,4 +28,6 @@ Action.contextTypes = {
 	registry: PropTypes.object,
 };
 
+Action.displayName = 'CMFContainer(Action)';
+
 export default Action;

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 (
 		<Component
 			actions={actionsProps}
+			components={{
+				Action,
+				Actions,
+			}}
 			{...props}
 		/>
 	);
@@ -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,

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],
+  },
 }
 `;

packages/containers/src/Actions/Actions.component.js

@@ -32,4 +32,6 @@ Actions.contextTypes = {
 	store: React.PropTypes.object,
 };
 
+Actions.displayName = 'CMF(Actions)';
+
 export default Actions;