chore(ActionBar): improve composition using props.renderers map (#414)

this can be used as an example to let pass custom component with the renderers props
Talend · May 2, 2017 · 5e2d7cc · 5e2d7cc
1 parent f6805d0
commit 5e2d7cc
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 7 deletions.
diff --git 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 getRenderers(props) {
+	return Object.assign(
+		{
+			Action,
+			Actions,
+			ActionSplitDropdown,
+		},
+		props ? props.renderers : {},
+	);
+}
+
 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, renderers }) {
+	const Renderers = getRenderers({ renderers });
 	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} />
+						<Renderers.ActionSplitDropdown key={index} {...rest} />
 					);
 				case DISPLAY_MODES.BTN_GROUP:
 					return (
-						<Actions key={index} {...rest} />
+						<Renderers.Actions key={index} {...rest} />
 					);
 				default:
 					return (
-						<Action key={index} {...rest} />
+						<Renderers.Action key={index} {...rest} />
 					);
 				}
 			}) }
@@ -88,6 +100,13 @@ SwitchActions.propTypes = {
 	left: PropTypes.bool,
 	right: PropTypes.bool,
 	selected: PropTypes.number,
+	renderers: 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
+					renderers={props.renderers}
+					key={0}
+					actions={left}
+					selected={props.selected}
+					left
+				/>
 			)}
 			{props.children}
 			{ right && (
-				<SwitchActions key={1} actions={right} selected={props.selected} right />
+				<SwitchActions
+					renderers={props.renderers}
+					key={1}
+					actions={right}
+					selected={props.selected}
+					right
+				/>
 			)}
 		</nav>
 	);
@@ -132,12 +163,15 @@ ActionBar.propTypes = {
 	selected: PropTypes.number,
 	children: PropTypes.node,
 	className: PropTypes.string,
+	renderers: PropTypes.shape(SwitchActions.propTypes.renderers),
 };
 
+ActionBar.displayName = 'ActionBar';
 ActionBar.DISPLAY_MODES = DISPLAY_MODES;
 ActionBar.Count = Count;
 ActionBar.SwitchActions = SwitchActions;
 ActionBar.getActionsToRender = getActionsToRender;
 ActionBar.Content = Content;
 ActionBar.getContentClassName = getContentClassName;
+ActionBar.getRenderers = getRenderers;
 export default ActionBar;
diff --git a/packages/components/src/ActionBar/ActionBar.test.js b/packages/components/src/ActionBar/ActionBar.test.js
@@ -26,4 +26,34 @@ describe('ActionBar', () => {
 		// then
 		expect(onClickMock).toHaveBeenCalled();
 	});
+
+	it('should support custom renderers', () => {
+		// given
+		function MyAction(props) {
+			return (<div className="my-custom-action" {...props} />);
+		}
+		const props = {
+			selected: 0,
+			actions: {
+				left: [
+					{ label: 'Preparations', icon: 'talend-preparation' },
+				],
+			},
+			renderers: {
+				Action: MyAction,
+			},
+		};
+
+		// when
+		const actionBar = (
+			<ActionBar {...props} />
+		);
+		const wrapper = mount(actionBar);
+		const render = wrapper.find('.my-custom-action').first();
+
+		// then
+		expect(render.hasClass('my-custom-action')).toBe(true);
+		expect(render.name()).toBe('div');
+		expect(render.props()).toMatchSnapshot();
+	});
 });
diff --git a/packages/components/src/ActionBar/__snapshots__/ActionBar.snapshot.test.js.snap b/packages/components/src/ActionBar/__snapshots__/ActionBar.snapshot.test.js.snap
@@ -27,6 +27,7 @@ exports[`ActionBar should render a btn-group 1`] = `
       ]
     }
     left={true}
+    renderers={undefined}
     selected={undefined}
   />
 </nav>
@@ -70,6 +71,7 @@ exports[`ActionBar should render no-selected actions, all on left  1`] = `
       ]
     }
     left={true}
+    renderers={undefined}
     selected={0}
   />
 </nav>
@@ -112,6 +114,7 @@ exports[`ActionBar should render no-selected actions, all on right 1`] = `
         },
       ]
     }
+    renderers={undefined}
     right={true}
     selected={0}
   />
@@ -134,6 +137,7 @@ exports[`ActionBar should render no-selected actions, some on left, the other on
       ]
     }
     left={true}
+    renderers={undefined}
     selected={0}
   />
   <SwitchActions
@@ -163,6 +167,7 @@ exports[`ActionBar should render no-selected actions, some on left, the other on
         },
       ]
     }
+    renderers={undefined}
     right={true}
     selected={0}
   />
@@ -206,6 +211,7 @@ exports[`ActionBar should render selected count and multi-selected actions, all
       ]
     }
     left={true}
+    renderers={undefined}
     selected={1}
   />
 </nav>
@@ -218,6 +224,7 @@ exports[`ActionBar should render selected count and multi-selected actions, all
   <SwitchActions
     actions={Array []}
     left={true}
+    renderers={undefined}
     selected={1}
   />
   <SwitchActions
@@ -252,6 +259,7 @@ exports[`ActionBar should render selected count and multi-selected actions, all
         },
       ]
     }
+    renderers={undefined}
     right={true}
     selected={1}
   />
@@ -273,6 +281,7 @@ exports[`ActionBar should render selected count and multi-selected actions, coun
       ]
     }
     left={true}
+    renderers={undefined}
     selected={1}
   />
   <SwitchActions
@@ -302,6 +311,7 @@ exports[`ActionBar should render selected count and multi-selected actions, coun
         },
       ]
     }
+    renderers={undefined}
     right={true}
     selected={1}
   />

diff --git a/packages/components/src/ActionBar/__snapshots__/ActionBar.test.js.snap 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/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
@@ -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}
+			renderers={{
+				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,

diff --git 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 {
       },
     ],
   },
+  "renderers": Object {
+    "Action": [Function],
+    "Actions": [Function],
+  },
 }
 `;
 
@@ -144,5 +148,9 @@ Object {
       },
     ],
   },
+  "renderers": Object {
+    "Action": [Function],
+    "Actions": [Function],
+  },
 }
 `;
diff --git 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;