Implemented review comments

sulu · Aug 25, 2017 · 80989de · 80989de
1 parent bbc5a24
commit 80989de
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 4 deletions.
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/Actions.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/Actions.js
@@ -9,10 +9,11 @@ type Props = {
 
 export default class Actions extends React.PureComponent<Props> {
     render() {
-        if (this.props.actions.length > 0) {
+        const {actions} = this.props;
+        if (actions.length > 0) {
             return (
                 <div className={actionsStyles.actions}>
-                    {this.props.actions.map((action, index) => {
+                    {actions.map((action, index) => {
                         const handleButtonClick = action.onClick;
                         return (
                             <button

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/ClickModal.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/ClickModal.js
@@ -23,14 +23,21 @@ export default class ClickModal extends React.PureComponent<Props> {
         this.modalOpen = false;
     };
 
+    @action handleConfirm = () => {
+        this.props.onConfirm();
+        this.modalOpen = false;
+    };
+
     render() {
         const {className, clickElement, children, ...modalProps} = this.props;
+        delete modalProps.onConfirm;
         return (
             <div className={className}>
                 {React.cloneElement(clickElement, {onClick: this.handleElementClick})}
                 <Modal
                     isOpen={this.modalOpen}
                     onRequestClose={this.handleRequestClose}
+                    onConfirm={this.handleConfirm}
                     {...modalProps}>
                     {children}
                 </Modal>

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/ModalBox.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/ModalBox.js
@@ -21,14 +21,16 @@ export default class ModalBox extends React.PureComponent<Props> {
         this.props.onRequestClose();
     }
 
+    handleIconClick = () => this.requestClose();
+
     render() {
-        const {title, onRequestClose, children, actions, onConfirm, confirmText} = this.props;
+        const {title, children, actions, onConfirm, confirmText} = this.props;
 
         return (
             <section className={modalBoxStyles.box}>
                 <header>
                     {title}
-                    <Icon name={CLOSE_ICON} className={modalBoxStyles.icon} onClick={onRequestClose} />
+                    <Icon name={CLOSE_ICON} className={modalBoxStyles.icon} onClick={this.handleIconClick} />
                 </header>
                 <article>{children}</article>
                 <footer>

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/README.md b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/README.md
@@ -7,6 +7,10 @@ const actions = [
     {title: 'Destroy world', onClick: () => {/* destroy world */}},
     {title: 'Save world', onClick: () => {/* save world */}},
 ];
+const onConfirm = () => {
+    /* do confirm things */
+    setState({open: false});
+};
 
 <div>
     <button onClick={() => setState({open: true})}>Open modal</button>
@@ -15,6 +19,7 @@ const actions = [
         onRequestClose={() => setState({open: false})}
         actions={actions}
         confirmText="Apply"
+        onConfirm={onConfirm}
         isOpen={state.open}>
         <div style={{width: '900px', height: '500px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
             <img src="http://www.nyan.cat/cats/original.gif" />
@@ -33,12 +38,16 @@ const ClickModal = require('./ClickModal').default;
 const actions = [
     {title: 'Save Gotham', onClick: () => {/* save gotham */}},
 ];
+const onConfirm = () => {
+    /* do confirm things */
+};
 
 const button = (<button>Open modal</button>);
 <ClickModal
     clickElement={button}
     title="Nana Nana Nana"
     actions={actions}
+    onConfirm={onConfirm}
     confirmText="Ok">
     <div style={{width: '900px', height: '500px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
         <img src="https://media.giphy.com/media/NmhVw98IHkQtq/source.gif" />

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/ClickModal.test.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/ClickModal.test.js
@@ -52,3 +52,20 @@ test('The modal should be gone when the modal requests to be closed', () => {
     view.find('Modal').props().onRequestClose();
     expect(view.find('Modal').props().isOpen).toBe(false);
 });
+
+test('The modal should be gone and call the confirm callback when the modal is confirmed', () => {
+    const onConfirm = jest.fn();
+    const view = mount(
+        <ClickModal
+            clickElement={<button>Open modal</button>}
+            title="My modal title"
+            onConfirm={onConfirm}
+            confirmText="Apply">
+            <p>My modal content</p>
+        </ClickModal>
+    );
+    view.find('button').simulate('click');
+    view.find('Modal').props().onConfirm();
+    expect(view.find('Modal').props().isOpen).toBe(false);
+    expect(onConfirm).toBeCalled();
+});