fix(components/Dialog): spread props [BR] (#1159)

packages/components/src/Dialog/Dialog.component.js

@@ -10,34 +10,55 @@ import Progress from '../Progress';
 /**
  * @param {object} props react props
  * @example
-<Dialog name="Hello world"></Dialog>
+<Dialog header="Hello world">content</Dialog>
  */
-function Dialog(props) {
-	const modalProps = { bsSize: props.size, show: props.show, ...props.bsDialogProps };
-	const Renderers = Inject.getAll(props.getComponent, {
+function Dialog({
+	action,
+	actionbar,
+	children,
+	closeButton,
+	components,
+	footer,
+	getComponent,
+	header,
+	progress,
+	size,
+	...props
+}) {
+	const Renderers = Inject.getAll(getComponent, {
 		ActionBar,
 		Action,
 	});
+	const injected = Inject.all(getComponent, components);
+
 	return (
-		<Modal keyboard={props.keyboard} {...modalProps}>
-			{props.header && (
-				<Modal.Header closeButton={props.closeButton}>
-					<Modal.Title>{props.header}</Modal.Title>
+		<Modal bsSize={size} {...props}>
+			{injected('before-modal-header')}
+			{header && (
+				<Modal.Header closeButton={closeButton}>
+					<Modal.Title>{header}</Modal.Title>
 				</Modal.Header>
 			)}
-			{props.progress && <Progress contained {...props.progress} />}
-			<Modal.Body>{props.children}</Modal.Body>
-			{props.action && (
+			{injected('after-modal-header')}
+			{progress && <Progress contained {...progress} />}
+			{injected('before-modal-body')}
+			<Modal.Body>
+				{injected('before-children')}
+				{children}
+				{injected('after-children')}
+			</Modal.Body>
+			{injected('before-modal-body')}
+			{action && (
 				<Modal.Footer>
-					<Renderers.Action {...props.action} />
+					<Renderers.Action {...action} />
 				</Modal.Footer>
 			)}
-			{props.actionbar && (
+			{actionbar && (
 				<Modal.Footer>
-					<Renderers.ActionBar {...props.actionbar} />
+					<Renderers.ActionBar {...actionbar} />
 				</Modal.Footer>
 			)}
-			{props.footer && <Modal.Footer {...props.footer} />}
+			{footer && <Modal.Footer {...footer}>{injected('footer')}</Modal.Footer>}
 		</Modal>
 	);
 }
@@ -50,16 +71,16 @@ Dialog.defaultProps = {
 
 Dialog.propTypes = {
 	header: PropTypes.string,
-	size: PropTypes.oneOf(['small', 'large']),
+	size: PropTypes.oneOf(['sm', 'small', 'lg', 'large']),
 	children: PropTypes.element,
 	show: PropTypes.bool,
 	action: PropTypes.shape(Action.propTypes),
-	bsDialogProps: PropTypes.shape({ ...Modal.propTypes, manager: PropTypes.object }),
 	footer: PropTypes.object,
 	actionbar: PropTypes.object,
 	closeButton: PropTypes.bool,
 	keyboard: PropTypes.bool,
 	getComponent: PropTypes.func,
+	components: PropTypes.object,
 	progress: PropTypes.object,
 };
 

packages/components/src/Dialog/Dialog.test.js

@@ -1,31 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import renderer from 'react-test-renderer';
-import classNames from 'classnames';
+import { shallow } from 'enzyme';
 import Dialog from './Dialog.component';
 
-function mockFakeComponent(name) {
-	const fakeComponent = ({ children, className, ...rest }) => {
-		const mergedClassName = classNames(className, name);
-		return (<div {...rest} className={mergedClassName}>{children}</div>);
-	};
-	fakeComponent.propTypes = {
-		children: PropTypes.oneOfType([PropTypes.any]),
-		className: PropTypes.string,
-	};
-	return fakeComponent;
-}
-
 jest.mock('react-dom');
-jest.mock('react-bootstrap/lib/Modal', () => {
-	const Modal = mockFakeComponent('Modal');
-	Modal.Header = mockFakeComponent('Header');
-	Modal.Title = mockFakeComponent('Title');
-	Modal.Body = mockFakeComponent('Body');
-	Modal.Footer = mockFakeComponent('Footer');
-
-	return Modal;
-});
 
 const defaultProps = {
 	show: true,
@@ -46,12 +23,10 @@ const smallProps = {
 	show: true,
 	header: 'Hello world',
 	size: 'small',
-	bsDialogProps: {
-		onHide: jest.fn(),
-		dialogClassName: 'customDialogClassName',
-		keyboard: true,
-		backdrop: false,
-	},
+	onHide: jest.fn(),
+	dialogClassName: 'customDialogClassName',
+	keyboard: true,
+	backdrop: false,
 	action: {
 		label: 'OK',
 		onClick: jest.fn(),
@@ -61,49 +36,45 @@ const largeProps = {
 	show: true,
 	header: 'Hello world',
 	size: 'large',
-	bsDialogProps: {
-		onHide: jest.fn(),
-		dialogClassName: 'customDialogClassName',
-		keyboard: true,
-		backdrop: false,
-	},
+	onHide: jest.fn(),
+	dialogClassName: 'customDialogClassName',
+	keyboard: true,
+	backdrop: false,
 	action: {
 		label: 'OK',
 		onClick: jest.fn(),
 	},
 };
 
-const children = (<div>BODY</div>);
+const children = <div>BODY</div>;
 
 describe('Dialog', () => {
 	it('should render', () => {
-		const wrapper = renderer.create(
-			<Dialog {...defaultProps}>{children}</Dialog>
-		).toJSON();
-		expect(wrapper).toMatchSnapshot();
+		const wrapper = shallow(<Dialog {...defaultProps}>{children}</Dialog>);
+		expect(wrapper.getElement()).toMatchSnapshot();
 	});
 	it('should render header', () => {
-		const wrapper = renderer.create(
-			<Dialog {...headerProps}>{children}</Dialog>
-		).toJSON();
-		expect(wrapper).toMatchSnapshot();
+		const wrapper = shallow(<Dialog {...headerProps}>{children}</Dialog>);
+		expect(wrapper.getElement()).toMatchSnapshot();
 	});
 	it('should render action', () => {
-		const wrapper = renderer.create(
-			<Dialog {...actionProps}>{children}</Dialog>
-		).toJSON();
-		expect(wrapper).toMatchSnapshot();
+		const wrapper = shallow(<Dialog {...actionProps}>{children}</Dialog>);
+		expect(wrapper.getElement()).toMatchSnapshot();
 	});
 	it('should render small', () => {
-		const wrapper = renderer.create(
-			<Dialog {...smallProps}>{children}</Dialog>
-		).toJSON();
-		expect(wrapper).toMatchSnapshot();
+		const wrapper = shallow(<Dialog {...smallProps}>{children}</Dialog>);
+		expect(wrapper.getElement()).toMatchSnapshot();
 	});
 	it('should render large', () => {
-		const wrapper = renderer.create(
-			<Dialog {...largeProps}>{children}</Dialog>
-		).toJSON();
-		expect(wrapper).toMatchSnapshot();
+		const wrapper = shallow(<Dialog {...largeProps}>{children}</Dialog>);
+		expect(wrapper.getElement()).toMatchSnapshot();
+	});
+	it('should spread props', () => {
+		const wrapper = shallow(<Dialog foo="bar" id="my-id" className="foo" />);
+		expect(wrapper.props()).toMatchObject({
+			foo: 'bar',
+			id: 'my-id',
+			className: 'foo',
+		});
 	});
 });