diff options
author | hmhealey <harrisonmhealey@gmail.com> | 2015-08-31 11:31:55 -0400 |
---|---|---|
committer | hmhealey <harrisonmhealey@gmail.com> | 2015-09-01 18:45:18 -0400 |
commit | 7d07bf6a79c9507b2178338464f7d28ce9a9a4ac (patch) | |
tree | fce94a47f975e845a913454e768f135df2a0e5ed /web/react/components/settings_sidebar.jsx | |
parent | 72575ac7bdd5bfe7bd544ba238f8d1c0126635aa (diff) | |
download | chat-7d07bf6a79c9507b2178338464f7d28ce9a9a4ac.tar.gz chat-7d07bf6a79c9507b2178338464f7d28ce9a9a4ac.tar.bz2 chat-7d07bf6a79c9507b2178338464f7d28ce9a9a4ac.zip |
Refactored various React components to use ES6 syntax and to match the style guide without any errors or warnings
Diffstat (limited to 'web/react/components/settings_sidebar.jsx')
-rw-r--r-- | web/react/components/settings_sidebar.jsx | 60 |
1 files changed, 46 insertions, 14 deletions
diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx index d8091ec28..e5cbd6e92 100644 --- a/web/react/components/settings_sidebar.jsx +++ b/web/react/components/settings_sidebar.jsx @@ -1,24 +1,56 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var utils = require('../utils/utils.jsx'); +export default class SettingsSidebar extends React.Component { + constructor(props) { + super(props); -module.exports = React.createClass({ - displayName:'SettingsSidebar', - updateTab: function(tab) { - this.props.updateTab(tab); + this.handleClick = this.handleClick.bind(this); + } + handleClick(tab) { + this.props.updateTab(tab.name); $('.settings-modal').addClass('display--content'); - }, - render: function() { - var self = this; + } + render() { + let tabList = this.props.tabs.map(function makeTab(tab) { + let key = `${tab.name}_li`; + let className = ''; + if (this.props.activeTab === tab.name) { + className = 'active'; + } + + return ( + <li + key={key} + className={className} + > + <a + href='#' + onClick={this.handleClick.bind(null, tab)} + > + <i className={tab.icon} /> + {tab.uiName} + </a> + </li> + ); + }.bind(this)); + return ( - <div className=""> - <ul className="nav nav-pills nav-stacked"> - {this.props.tabs.map(function(tab) { - return <li key={tab.name+'_li'} className={self.props.activeTab == tab.name ? 'active' : ''}><a key={tab.name + '_a'} href="#" onClick={function(){self.updateTab(tab.name);}}><i key={tab.name+'_i'} className={tab.icon}></i>{tab.uiName}</a></li> - })} + <div> + <ul className='nav nav-pills nav-stacked'> + {tabList} </ul> </div> ); } -}); +} + +SettingsSidebar.propTypes = { + tabs: React.PropTypes.arrayOf(React.PropTypes.shape({ + name: React.PropTypes.string.isRequired, + uiName: React.PropTypes.string.isRequired, + icon: React.PropTypes.string.isRequired + })).isRequired, + activeTab: React.PropTypes.string, + updateTab: React.PropTypes.func.isRequired +}; |