diff options
author | hmhealey <harrisonmhealey@gmail.com> | 2015-10-30 11:13:56 -0400 |
---|---|---|
committer | hmhealey <harrisonmhealey@gmail.com> | 2015-11-02 15:10:49 -0500 |
commit | 738568e5a9726b3a1b2536a20ab6627c5e9fb01e (patch) | |
tree | bf7d0b467671b741495293d4e71534753db6b84d /web/react/components/user_settings/user_settings_modal.jsx | |
parent | 1675adcc7a30cec836c00d35b0624aa35d373eed (diff) | |
download | chat-738568e5a9726b3a1b2536a20ab6627c5e9fb01e.tar.gz chat-738568e5a9726b3a1b2536a20ab6627c5e9fb01e.tar.bz2 chat-738568e5a9726b3a1b2536a20ab6627c5e9fb01e.zip |
Ported UserSettingsModal to React-Bootstrap
Diffstat (limited to 'web/react/components/user_settings/user_settings_modal.jsx')
-rw-r--r-- | web/react/components/user_settings/user_settings_modal.jsx | 88 |
1 files changed, 55 insertions, 33 deletions
diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx index 18dd490e7..9f29b912b 100644 --- a/web/react/components/user_settings/user_settings_modal.jsx +++ b/web/react/components/user_settings/user_settings_modal.jsx @@ -1,6 +1,7 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +const Modal = ReactBootstrap.Modal; var SettingsSidebar = require('../settings_sidebar.jsx'); var UserSettings = require('./user_settings.jsx'); @@ -8,27 +9,61 @@ export default class UserSettingsModal extends React.Component { constructor(props) { super(props); + this.handleHide = this.handleHide.bind(this); + this.handleHidden = this.handleHidden.bind(this); + this.updateTab = this.updateTab.bind(this); this.updateSection = this.updateSection.bind(this); - this.state = {active_tab: 'general', active_section: ''}; + this.state = { + active_tab: 'general', + active_section: '' + }; } + componentDidMount() { - $('body').on('click', '.modal-back', function changeDisplay() { + $('body').on('click', '.settings-content .modal-back', () => { $(this).closest('.modal-dialog').removeClass('display--content'); }); - $('body').on('click', '.modal-header .close', () => { + $('body').on('click', '.settings-content .modal-header .close', () => { + this.handleHide(); + setTimeout(() => { $('.modal-dialog.display--content').removeClass('display--content'); }, 500); }); } + + 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(); + } + } + } + + handleHide() { + // called when the close button is pressed + this.props.onModalDismissed(); + } + + handleHidden() { + // called after the dialog is fully hidden and faded out + this.setState({ + active_tag: 'general', + active_section: '' + }); + } + updateTab(tab) { this.setState({active_tab: tab}); } + updateSection(section) { this.setState({active_section: section}); } + render() { var tabs = []; tabs.push({name: 'general', uiName: 'General', icon: 'glyphicon glyphicon-cog'}); @@ -46,33 +81,16 @@ export default class UserSettingsModal extends React.Component { tabs.push({name: 'advanced', uiName: 'Advanced', icon: 'glyphicon glyphicon-list-alt'}); return ( - <div - className='modal fade' - ref='modal' - id='user_settings' - role='dialog' - tabIndex='-1' - aria-hidden='true' + <Modal + dialogClassName='settings-modal' + show={this.props.show} + onHide={this.handleHide} + onExited={this.handleHidden} > - <div className='modal-dialog settings-modal'> - <div className='modal-content'> - <div className='modal-header'> - <button - type='button' - className='close' - data-dismiss='modal' - aria-label='Close' - > - <span aria-hidden='true'>{'×'}</span> - </button> - <h4 - className='modal-title' - ref='title' - > - {'Account Settings'} - </h4> - </div> - <div className='modal-body'> + <Modal.Header closeButton={true}> + <Modal.Title>{'Account Settings'}</Modal.Title> + </Modal.Header> + <Modal.Body ref='modalBody'> <div className='settings-table'> <div className='settings-links'> <SettingsSidebar @@ -83,6 +101,7 @@ export default class UserSettingsModal extends React.Component { </div> <div className='settings-content minimize-settings'> <UserSettings + ref='userSettings' activeTab={this.state.active_tab} activeSection={this.state.active_section} updateSection={this.updateSection} @@ -90,10 +109,13 @@ export default class UserSettingsModal extends React.Component { /> </div> </div> - </div> - </div> - </div> - </div> + </Modal.Body> + </Modal> ); } } + +UserSettingsModal.propTypes = { + show: React.PropTypes.bool.isRequired, + onModalDismissed: React.PropTypes.func.isRequired +}; |