From 0b52e85ba73e5b3badeb1703462c5d05d3a7d224 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 10 Nov 2015 10:20:16 -0500 Subject: Added Modal base class that extends ReactBootstrap.Modal --- web/react/components/access_history_modal.jsx | 9 +--- web/react/components/activity_log_modal.jsx | 6 +-- web/react/components/confirm_modal.jsx | 2 +- web/react/components/modal.jsx | 48 ++++++++++++++++++++++ .../user_settings/user_settings_modal.jsx | 14 +++---- 5 files changed, 59 insertions(+), 20 deletions(-) create mode 100644 web/react/components/modal.jsx (limited to 'web/react') 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 { 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 ( 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 {