Group params of open modal function (#935)

* Agrupate params of open modal function

* Add white color prop in modal componenet

client/src/app-components/are-you-sure.js

@@ -5,10 +5,8 @@ import ModalContainer from 'app-components/modal-container';
 
 import Button from 'core-components/button';
 import Input from 'core-components/input';
-import Icon from 'core-components/icon';
 import Loading from 'core-components/loading'
 
-
 class AreYouSure extends React.Component {
     static propTypes = {
         description: React.PropTypes.node,
@@ -31,8 +29,8 @@ class AreYouSure extends React.Component {
 
     static openModal(description, onYes, type = 'default') {
         ModalContainer.openModal(
-            <AreYouSure description={description} onYes={onYes} type={type}/>,
+            <AreYouSure description={description} onYes={onYes} type={type} />,
-            true
+            {noPadding: true, closeButton: {showCloseButton: true, whiteColor: true}}
         );
     }
 
@@ -42,18 +40,17 @@ class AreYouSure extends React.Component {
 
     render() {
         const { loading } = this.state;
+        const { description, type } = this.props;
+
         return (
             <div className="are-you-sure" role="dialog" aria-labelledby="are-you-sure__header" aria-describedby="are-you-sure__description">
                 <div className="are-you-sure__header" id="are-you-sure__header">
                     {i18n('ARE_YOU_SURE')}
                 </div>
-                <span className="are-you-sure__close-icon" onClick={this.onNo.bind(this)}>
-                    <Icon name="times" size="2x"/>
-                </span>
                 <div className="are-you-sure__description" id="are-you-sure__description">
-                    {this.props.description || (this.props.type === 'secure' && i18n('PLEASE_CONFIRM_PASSWORD'))}
+                    {description || (type === 'secure' && i18n('PLEASE_CONFIRM_PASSWORD'))}
                 </div>
-                {(this.props.type === 'secure') ? this.renderPassword() : null}
+                {(type === 'secure') ? this.renderPassword() : null}
                 <span className="separator" />
                 <div className="are-you-sure__buttons">
                     <div className="are-you-sure__no-button">
@@ -68,9 +65,8 @@ class AreYouSure extends React.Component {
                             onClick={this.onYes.bind(this)}
                             ref="yesButton"
                             tabIndex="2"
-                            disabled={loading}
+                            disabled={loading}>
-                        >
+                                {loading ? <Loading /> : i18n('YES')}
-                            {loading ? <Loading /> : i18n('YES')}
                         </Button>
                     </div>
                 </div>
@@ -79,10 +75,8 @@ class AreYouSure extends React.Component {
     }
 
     renderPassword() {
-        const {
+        const { password, loading } = this.state;
-            password,
+
-            loading
-        } = this.state;
         return (
             <Input
                 className="are-you-sure__password"
@@ -94,8 +88,7 @@ class AreYouSure extends React.Component {
                 value={password}
                 onChange={this.onPasswordChange.bind(this)}
                 onKeyDown={this.onInputKeyDown.bind(this)}
-                disabled={loading}
+                disabled={loading} />
-            />
         );
     }
 
@@ -112,13 +105,8 @@ class AreYouSure extends React.Component {
     }
 
     onYes() {
-        const {
+        const { password } = this.state;
-            password,
+        const { type, onYes } = this.props;
-        } = this.state;
-        const {
-            type,
-            onYes
-        } = this.props;
 
         if(type === 'secure' && !password) {
             this.refs.password.focus()
@@ -166,10 +154,10 @@ class AreYouSure extends React.Component {
     }
 
     closeModal() {
-        if (this.context.closeModal) {
+        const { closeModal } = this.context;
-            this.context.closeModal();
+
-        }
+        closeModal && closeModal();
     }
 }
 
-export default AreYouSure;
+export default AreYouSure;

client/src/app-components/modal-container.js

@@ -8,13 +8,14 @@ import Modal from 'core-components/modal';
 
 class ModalContainer extends React.Component {
 
-    static openModal(content, noPadding, outsideClick=false, showCloseButton=false) {
+    static openModal(
+        content,
+        options={noPadding: false, outsideClick: false, closeButton: {showCloseButton: false, whiteColor: false}}
+        ) {
         store.dispatch(
             ModalActions.openModal({
                 content,
-                noPadding,
+                options
-                outsideClick,
-                showCloseButton
             })
         );
     }
@@ -50,10 +51,16 @@ class ModalContainer extends React.Component {
     }
     
     renderModal() {
-        const {content, noPadding, outsideClick, showCloseButton} = this.props.modal;
+        const { content, options } = this.props.modal;
+        const { noPadding, outsideClick, closeButton } = options;
 
         return (
-            <Modal content={content} noPadding={noPadding} outsideClick={outsideClick} onOutsideClick={this.closeModal.bind(this)} showCloseButton={showCloseButton} />
+            <Modal
+                content={content}
+                noPadding={noPadding}
+                outsideClick={outsideClick}
+                onOutsideClick={this.closeModal.bind(this)}
+                closeButton={closeButton} />
         );
     }
 

client/src/app-components/popup-message.js

@@ -1,10 +1,8 @@
 import React from 'react';
 
-import i18n from 'lib-app/i18n';
 import ModalContainer from 'app-components/modal-container';
 
 import Button from 'core-components/button';
-import Icon from 'core-components/icon';
 import Message from 'core-components/message';
 
 
@@ -17,9 +15,8 @@ class PopupMessage extends React.Component {
 
     static open(props) {
         ModalContainer.openModal(
-            <PopupMessage {...props}/>,
+            <PopupMessage {...props} />,
-            true,
+            {noPadding: true, outsideClick: true}
-            true
         );
     }
 
@@ -30,17 +27,22 @@ class PopupMessage extends React.Component {
     render() {
         return (
             <div className="popup-message">
-                <Message {...this.props} className="popup-message__message"/>
+                <Message {...this.props} className="popup-message__message" />
-                <Button className="popup-message__close-button" iconName="times" type="clean" ref="closeButton" onClick={this.closeModal.bind(this)}/>
+                <Button
+                    className="popup-message__close-button"
+                    iconName="times"
+                    type="clean"
+                    ref="closeButton"
+                    onClick={this.closeModal.bind(this)} />
             </div>
         );
     }
 
     closeModal() {
-        if (this.context.closeModal) {
+        const { closeModal } = this.context;
-            this.context.closeModal();
+
-        }
+        closeModal && closeModal();
     }
 }
 
-export default PopupMessage;
+export default PopupMessage;

client/src/app/admin/panel/settings/admin-panel-advanced-settings.js

@@ -36,11 +36,7 @@ class AdminPanelAdvancedSettings extends React.Component {
 
     render() {
         const { config } = this.props;
-        const {
+        const { messageType, error, selectedAPIKey } = this.state;
-            messageType,
-            error,
-            selectedAPIKey
-        } = this.state;
 
         return (
             <div className="admin-panel-advanced-settings">
@@ -106,11 +102,7 @@ class AdminPanelAdvancedSettings extends React.Component {
     }
 
     renderMessage() {
-        const {
+        const { messageType, messageTitle, messageContent } = this.state;
-            messageType,
-            messageTitle,
-            messageContent
-        } = this.state;
 
         return (
             <Message className="admin-panel-advanced-settings__message" type={messageType} title={messageTitle}>
@@ -128,10 +120,7 @@ class AdminPanelAdvancedSettings extends React.Component {
     }
 
     renderKey() {
-        const {
+        const { APIKeys, selectedAPIKey } = this.state;
-            APIKeys,
-            selectedAPIKey
-        } = this.state;
         const {
             name,
             token,
@@ -203,17 +192,21 @@ class AdminPanelAdvancedSettings extends React.Component {
                     <SubmitButton className="admin-panel-advanced-settings__api-keys-modal__submit-button" type="secondary">{i18n('SUBMIT')}</SubmitButton>
                 </div>
             </Form>,
-            null,
+            {
-            null,
+                closeButton: {
-            true
+                    showCloseButton: true
+                }
+            }
         );
     }
 
     addAPIKey({name,userPermission,createTicketPermission,checkTicketPermission,ticketNumberPermission}) {
         ModalContainer.closeModal();
+
         this.setState({
             error: ''
-        })
+        });
+
         API.call({
             path: '/system/add-api-key',
             data: {
@@ -266,10 +259,7 @@ class AdminPanelAdvancedSettings extends React.Component {
     }
 
     onAreYouSureMandatoryLoginOk(password) {
-        const {
+        const { config, dispatch } = this.props;
-            config,
-            dispatch
-        } = this.props;
 
         return API.call({
             path: config['mandatory-login'] ? '/system/disable-mandatory-login' : '/system/enable-mandatory-login',
@@ -287,10 +277,7 @@ class AdminPanelAdvancedSettings extends React.Component {
     }
 
     onAreYouSureRegistrationOk(password) {
-        const {
+        const { config, dispatch } = this.props;
-            config,
-            dispatch
-        } = this.props;
 
         return API.call({
             path: config['registration'] ? '/system/disable-registration' : '/system/enable-registration',

client/src/core-components/modal.js

@@ -5,13 +5,18 @@ import {Motion, spring} from 'react-motion';
 
 import Icon from 'core-components/icon';
 
+const closeButtonSchema = React.PropTypes.shape({
+    showCloseButton: React.PropTypes.bool,
+    whiteColor: React.PropTypes.bool
+});
+
 class Modal extends React.Component {
     static propTypes = {
         content: React.PropTypes.node,
         noPadding: React.PropTypes.bool,
         outsideClick: React.PropTypes.bool,
         onOutsideClick: React.PropTypes.func,
-        showCloseButton: React.PropTypes.bool
+        closeButton: closeButtonSchema
     };
 
     render() {
@@ -36,24 +41,22 @@ class Modal extends React.Component {
     }
 
     renderModal(animation) {
-        const {
+        const { closeButton, content } = this.props;
-            showCloseButton,
+        const { showCloseButton, whiteColor } = closeButton;
-            content
-        } = this.props;
 
         return (
             <div className={this.getClass()} style={{opacity: animation.fade}} onClick={this.onModalClick.bind(this)}>
                 <div className="modal__content" style={{transform: 'scale(' + animation.scale + ')'}} onClick={this.onModalContentClick.bind(this)}>
-                    {showCloseButton ? this.renderCloseButton() : null}
+                    {showCloseButton ? this.renderCloseButton(whiteColor) : null}
                     {content}
                 </div>
             </div>
         )
     }
 
-    renderCloseButton() {
+    renderCloseButton(whiteColor = false) {
         return (
-            <span className="modal__close-icon" onClick={() => this.props.onOutsideClick()}>
+            <span className={`modal__close-icon${whiteColor ? " modal__close-icon__white-color" : ""}`} onClick={() => this.props.onOutsideClick()}>
                 <Icon name="times" size="2x"/>
             </span>
         );

client/src/core-components/modal.scss

@@ -31,5 +31,9 @@
         position: absolute;
         top: 10px;
         right: 10px;
+
+        &__white-color {
+            color: white;
+        }
     }
 }

client/src/reducers/modal-reducer.js

@@ -7,10 +7,15 @@ class ModalReducer extends Reducer {
     getInitialState() {
         return {
             opened: false,
-            noPadding: false,
             content: null,
-            outsideClick: false,
+            options: {
-            showCloseButton: false
+                noPadding: false,
+                outsideClick: false,
+                closeButton: {
+                    showCloseButton: false,
+                    whiteColor: false
+                }
+            }
         };
     }
 
@@ -22,21 +27,19 @@ class ModalReducer extends Reducer {
     }
 
     onOpenModal(state, payload) {
-        const {
+        const { content, options } = payload;
-            content,
+        const { noPadding, outsideClick, closeButton } = options;
-            noPadding,
-            outsideClick,
-            showCloseButton
-        } = payload;
 
         document.body.setAttribute('style', 'overflow:hidden');
 
         return _.extend({}, state, {
             opened: true,
             content,
-            noPadding: noPadding || false,
+            options: {
-            outsideClick,
+                noPadding: noPadding || false,
-            showCloseButton
+                outsideClick,
+                closeButton
+            }
         });
     }
 
@@ -46,9 +49,14 @@ class ModalReducer extends Reducer {
         return _.extend({}, state, {
             opened: false,
             content: null,
-            noPadding: false,
+            options: {
-            outsideClick: false,
+                noPadding: false,
-            showCloseButton: false
+                outsideClick: false,
+                closeButton: {
+                    showCloseButton: false,
+                    whiteColor: false
+                }
+            }
         });
     }
 }