Added Modal base class that extends ReactBootstrap.Modal

5 files changed, 59 insertions, 20 deletions

diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx
index ab5686720..6a10f87b2 100644
--- a/web/react/components/access_history_modal.jsx
+++ b/web/react/components/access_history_modal.jsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var Modal = ReactBootstrap.Modal;
+var Modal = require('./modal.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
@@ -15,7 +15,6 @@ export default class AccessHistoryModal extends React.Component {
         this.onAuditChange = this.onAuditChange.bind(this);
         this.handleMoreInfo = this.handleMoreInfo.bind(this);
         this.onHide = this.onHide.bind(this);
-        this.onShow = this.onShow.bind(this);
         this.formatAuditInfo = this.formatAuditInfo.bind(this);
         this.handleRevokedSession = this.handleRevokedSession.bind(this);
 
@@ -44,11 +43,6 @@ export default class AccessHistoryModal extends React.Component {
     componentDidMount() {
         UserStore.addAuditsChangeListener(this.onAuditChange);
     }
-    componentDidUpdate(prevProps) {
-        if (this.props.show && !prevProps.show) {
-            this.onShow();
-        }
-    }
     componentWillUnmount() {
         UserStore.removeAuditsChangeListener(this.onAuditChange);
     }
@@ -391,6 +385,7 @@ export default class AccessHistoryModal extends React.Component {
             <Modal
                 show={this.props.show}
                 onHide={this.onHide}
+                onShow={this.onShow}
                 bsSize='large'
             >
                 <Modal.Header closeButton={true}>
diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index af423a601..6c329d416 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -63,11 +63,6 @@ export default class ActivityLogModal extends React.Component {
     componentDidMount() {
         UserStore.addSessionsChangeListener(this.onListenerChange);
     }
-    componentDidUpdate(prevProps) {
-        if (this.props.show && !prevProps.show) {
-            this.onShow();
-        }
-    }
     componentWillUnmount() {
         UserStore.removeSessionsChangeListener(this.onListenerChange);
     }
@@ -161,6 +156,7 @@ export default class ActivityLogModal extends React.Component {
         return (
             <Modal
                 show={this.props.show}
+                onShow={this.onShow}
                 onHide={this.onHide}
                 bsSize='large'
             >
diff --git a/web/react/components/confirm_modal.jsx b/web/react/components/confirm_modal.jsx
index cdef1c1ea..a1138bf45 100644
--- a/web/react/components/confirm_modal.jsx
+++ b/web/react/components/confirm_modal.jsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-const Modal = ReactBootstrap.Modal;
+const Modal = require('./modal.jsx');
 
 export default class ConfirmModal extends React.Component {
     constructor(props) {
diff --git a/web/react/components/modal.jsx b/web/react/components/modal.jsx
new file mode 100644
index 000000000..758a68847
--- /dev/null
+++ b/web/react/components/modal.jsx
@@ -0,0 +1,48 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export default class Modal extends ReactBootstrap.Modal {
+    constructor(props) {
+        super(props);
+    }
+
+    componentWillMount() {
+        if (this.props.show && this.props.onPreshow) {
+            this.props.onPreshow();
+        }
+    }
+
+    componentDidMount() {
+        super.componentDidMount();
+
+        if (this.props.show && this.props.onShow) {
+            this.props.onShow();
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        super.componentDidUpdate(prevProps);
+
+        if (this.props.show && !prevProps.show && this.props.onShow) {
+            this.props.onShow();
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        super.componentWillReceiveProps(nextProps);
+
+        if (nextProps.show && !this.props.show && this.props.onPreshow) {
+            this.props.onPreshow();
+        }
+    }
+}
+
+Modal.propTypes = {
+    ...ReactBootstrap.Modal.propTypes,
+
+    // called before showing the dialog to allow for a state change before rendering
+    onPreshow: React.PropTypes.func,
+
+    // called after the dialog has been shown and rendered
+    onShow: React.PropTypes.func
+};
diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx
index 4dcf32cb9..85a8d0473 100644
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/web/react/components/user_settings/user_settings_modal.jsx
@@ -2,7 +2,7 @@
 // See License.txt for license information.
 
 const ConfirmModal = require('../confirm_modal.jsx');
-const Modal = ReactBootstrap.Modal;
+const Modal = require('../modal.jsx');
 const SettingsSidebar = require('../settings_sidebar.jsx');
 const UserSettings = require('./user_settings.jsx');
 
@@ -10,6 +10,7 @@ export default class UserSettingsModal extends React.Component {
     constructor(props) {
         super(props);
 
+        this.handleShow = this.handleShow.bind(this);
         this.handleHide = this.handleHide.bind(this);
         this.handleHidden = this.handleHidden.bind(this);
         this.handleCollapse = this.handleCollapse.bind(this);
@@ -33,12 +34,10 @@ export default class UserSettingsModal extends React.Component {
         this.requireConfirm = false;
     }
 
-    componentDidUpdate(prevProps) {
-        if (!prevProps.show && this.props.show) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
-            if ($(window).width() > 768) {
-                $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
-            }
+    handleShow() {
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        if ($(window).width() > 768) {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
         }
     }
 
@@ -176,6 +175,7 @@ export default class UserSettingsModal extends React.Component {
             <Modal
                 dialogClassName='settings-modal'
                 show={this.props.show}
+                onShow={this.handleShow}
                 onHide={this.handleHide}
                 onExited={this.handleHidden}
                 enforceFocus={this.state.enforceFocus}