1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
// 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');
module.exports = React.createClass({
displayName: 'Team Settings Modal',
propTypes: {
teamDisplayName: React.PropTypes.string.isRequired
},
componentDidMount: function() {
$('body').on('click', '.modal-back', function onClick() {
$(this).closest('.modal-dialog').removeClass('display--content');
});
$('body').on('click', '.modal-header .close', function onClick() {
setTimeout(function removeContent() {
$('.modal-dialog.display--content').removeClass('display--content');
}, 500);
});
},
updateTab: function(tab) {
this.setState({activeTab: tab, activeSection: ''});
},
updateSection: function(section) {
this.setState({activeSection: section});
},
getInitialState: function() {
return {activeTab: 'general', activeSection: ''};
},
render: function() {
var 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>
<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>
);
}
});
|
