diff options
author | Corey Hulen <corey@hulen.com> | 2015-09-02 12:41:01 -0700 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2015-09-02 12:41:01 -0700 |
commit | eaeab0d645ca69efb4a0b47b802db750a6f54136 (patch) | |
tree | 3e9fbd1aa6ac487ed3e1b600a607814e8c738d29 /web/react/components/team_settings_modal.jsx | |
parent | 3e431b6c88105470e2bd583b6647976f9b9d3e5b (diff) | |
parent | 7d07bf6a79c9507b2178338464f7d28ce9a9a4ac (diff) | |
download | chat-eaeab0d645ca69efb4a0b47b802db750a6f54136.tar.gz chat-eaeab0d645ca69efb4a0b47b802db750a6f54136.tar.bz2 chat-eaeab0d645ca69efb4a0b47b802db750a6f54136.zip |
Merge pull request #538 from hmhealey/mm2064
MM-2064 Cosmetic refactoring for ES6 and style guide
Diffstat (limited to 'web/react/components/team_settings_modal.jsx')
-rw-r--r-- | web/react/components/team_settings_modal.jsx | 116 |
1 files changed, 71 insertions, 45 deletions
diff --git a/web/react/components/team_settings_modal.jsx b/web/react/components/team_settings_modal.jsx index 7e65e8cab..668bf76cf 100644 --- a/web/react/components/team_settings_modal.jsx +++ b/web/react/components/team_settings_modal.jsx @@ -1,70 +1,96 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var SettingsSidebar = require('./settings_sidebar.jsx'); -var TeamSettings = require('./team_settings.jsx'); +const SettingsSidebar = require('./settings_sidebar.jsx'); +const TeamSettings = require('./team_settings.jsx'); -module.exports = React.createClass({ - displayName: 'Team Settings Modal', - propTypes: { - teamDisplayName: React.PropTypes.string.isRequired - }, - componentDidMount: function() { - $('body').on('click', '.modal-back', function onClick() { +export default class TeamSettingsModal extends React.Component { + constructor(props) { + super(props); + + this.updateTab = this.updateTab.bind(this); + this.updateSection = this.updateSection.bind(this); + + this.state = { + activeTab: 'general', + activeSection: '' + }; + } + componentDidMount() { + $('body').on('click', '.modal-back', function handleBackClick() { $(this).closest('.modal-dialog').removeClass('display--content'); }); - $('body').on('click', '.modal-header .close', function onClick() { + $('body').on('click', '.modal-header .close', function handleCloseClick() { setTimeout(function removeContent() { $('.modal-dialog.display--content').removeClass('display--content'); }, 500); }); - }, - updateTab: function(tab) { + } + updateTab(tab) { this.setState({activeTab: tab, activeSection: ''}); - }, - updateSection: function(section) { + } + updateSection(section) { this.setState({activeSection: section}); - }, - getInitialState: function() { - return {activeTab: 'general', activeSection: ''}; - }, - render: function() { - var tabs = []; + } + render() { + let tabs = []; tabs.push({name: 'general', uiName: 'General', icon: 'glyphicon glyphicon-cog'}); tabs.push({name: 'import', uiName: 'Import', icon: 'glyphicon glyphicon-upload'}); tabs.push({name: 'feature', uiName: 'Advanced', icon: 'glyphicon glyphicon-wrench'}); return ( - <div className='modal fade' ref='modal' id='team_settings' role='dialog' tabIndex='-1' aria-hidden='true'> - <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'>Team Settings</h4> - </div> - <div className='modal-body'> - <div className='settings-table'> - <div className='settings-links'> - <SettingsSidebar - tabs={tabs} - activeTab={this.state.activeTab} - updateTab={this.updateTab} - /> + <div + className='modal fade' + ref='modal' + id='team_settings' + role='dialog' + tabIndex='-1' + aria-hidden='true' + > + <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' + > + Team Settings + </h4> </div> - <div className='settings-content minimize-settings'> - <TeamSettings - activeTab={this.state.activeTab} - activeSection={this.state.activeSection} - updateSection={this.updateSection} - teamDisplayName={this.props.teamDisplayName} - /> + <div className='modal-body'> + <div className='settings-table'> + <div className='settings-links'> + <SettingsSidebar + tabs={tabs} + activeTab={this.state.activeTab} + updateTab={this.updateTab} + /> + </div> + <div className='settings-content minimize-settings'> + <TeamSettings + activeTab={this.state.activeTab} + activeSection={this.state.activeSection} + updateSection={this.updateSection} + teamDisplayName={this.props.teamDisplayName} + /> + </div> + </div> </div> </div> - </div> </div> - </div> </div> ); } -}); +} +TeamSettingsModal.propTypes = { + teamDisplayName: React.PropTypes.string.isRequired +}; |