diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/access_history_modal.jsx | 9 | ||||
-rw-r--r-- | web/react/components/activity_log_modal.jsx | 6 | ||||
-rw-r--r-- | web/react/components/confirm_modal.jsx | 2 | ||||
-rw-r--r-- | web/react/components/modal.jsx | 48 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_modal.jsx | 14 |
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} |