diff options
author | hmhealey <harrisonmhealey@gmail.com> | 2015-11-21 08:53:45 -0500 |
---|---|---|
committer | hmhealey <harrisonmhealey@gmail.com> | 2015-11-23 15:52:44 -0500 |
commit | afdef124c8b76292ac3b8431a0c6137457d998e0 (patch) | |
tree | 3117d7930f47078392bebc9d54a0a522fe84f039 /web | |
parent | 6ab7df3335d414ecf864972c817e3b37b3b01abf (diff) | |
download | chat-afdef124c8b76292ac3b8431a0c6137457d998e0.tar.gz chat-afdef124c8b76292ac3b8431a0c6137457d998e0.tar.bz2 chat-afdef124c8b76292ac3b8431a0c6137457d998e0.zip |
Converted TeamMembers (now called TeamMembersModal) to React-Bootstrap
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/member_list_team.jsx | 47 | ||||
-rw-r--r-- | web/react/components/navbar_dropdown.jsx | 10 | ||||
-rw-r--r-- | web/react/components/sidebar_right_menu.jsx | 11 | ||||
-rw-r--r-- | web/react/components/team_members.jsx | 130 | ||||
-rw-r--r-- | web/react/components/team_members_modal.jsx | 69 | ||||
-rw-r--r-- | web/react/pages/channel.jsx | 6 |
6 files changed, 119 insertions, 154 deletions
diff --git a/web/react/components/member_list_team.jsx b/web/react/components/member_list_team.jsx index 72fdb7be9..f1c31131f 100644 --- a/web/react/components/member_list_team.jsx +++ b/web/react/components/member_list_team.jsx @@ -2,17 +2,56 @@ // See License.txt for license information. import MemberListTeamItem from './member_list_team_item.jsx'; +import UserStore from '../stores/user_store.jsx'; export default class MemberListTeam extends React.Component { + constructor(props) { + super(props); + + this.getUsers = this.getUsers.bind(this); + this.onChange = this.onChange.bind(this); + + this.state = { + users: this.getUsers() + }; + } + + componentDidMount() { + UserStore.addChangeListener(this.onChange); + } + + componentWillUnmount() { + UserStore.removeChangeListener(this.onChange); + } + + getUsers() { + const profiles = UserStore.getProfiles(); + const users = []; + + for (const id of Object.keys(profiles)) { + users.push(profiles[id]); + } + + users.sort((a, b) => a.username.localeCompare(b.username)); + + return users; + } + + onChange() { + this.setState({ + users: this.getUsers() + }); + } + render() { - const memberList = this.props.users.map(function makeListItem(user) { + const memberList = this.state.users.map((user) => { return ( <MemberListTeamItem key={user.id} user={user} /> ); - }, this); + }); return ( <table className='table more-table member-list-holder'> @@ -23,7 +62,3 @@ export default class MemberListTeam extends React.Component { ); } } - -MemberListTeam.propTypes = { - users: React.PropTypes.arrayOf(React.PropTypes.object).isRequired -}; diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx index a14434bfc..c286ee6f9 100644 --- a/web/react/components/navbar_dropdown.jsx +++ b/web/react/components/navbar_dropdown.jsx @@ -8,6 +8,8 @@ import TeamStore from '../stores/team_store.jsx'; import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import AboutBuildModal from './about_build_modal.jsx'; +import TeamMembersModal from './team_members_modal.jsx'; +import ToggleModalButton from './toggle_modal_button.jsx'; import UserSettingsModal from './user_settings/user_settings_modal.jsx'; import Constants from '../utils/constants.jsx'; @@ -117,13 +119,9 @@ export default class NavbarDropdown extends React.Component { if (isAdmin) { manageLink = ( <li> - <a - href='#' - data-toggle='modal' - data-target='#team_members' - > + <ToggleModalButton dialogType={TeamMembersModal}> {'Manage Members'} - </a> + </ToggleModalButton> </li> ); diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index 0525eca4b..1f268a2f7 100644 --- a/web/react/components/sidebar_right_menu.jsx +++ b/web/react/components/sidebar_right_menu.jsx @@ -1,6 +1,8 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import TeamMembersModal from './team_members_modal.jsx'; +import ToggleModalButton from './toggle_modal_button.jsx'; import UserSettingsModal from './user_settings/user_settings_modal.jsx'; import UserStore from '../stores/user_store.jsx'; import * as client from '../utils/client.jsx'; @@ -78,12 +80,9 @@ export default class SidebarRightMenu extends React.Component { ); manageLink = ( <li> - <a - href='#' - data-toggle='modal' - data-target='#team_members' - > - <i className='fa fa-users'></i>Manage Members</a> + <ToggleModalButton dialogType={TeamMembersModal}> + <i className='fa fa-users'></i>{'Manage Members'} + </ToggleModalButton> </li> ); } diff --git a/web/react/components/team_members.jsx b/web/react/components/team_members.jsx deleted file mode 100644 index cd0766012..000000000 --- a/web/react/components/team_members.jsx +++ /dev/null @@ -1,130 +0,0 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import UserStore from '../stores/user_store.jsx'; -import MemberListTeam from './member_list_team.jsx'; -import * as utils from '../utils/utils.jsx'; - -function getStateFromStores() { - var users = UserStore.getProfiles(); - var memberList = []; - for (var id in users) { - if (users.hasOwnProperty(id)) { - memberList.push(users[id]); - } - } - - memberList.sort(function sort(a, b) { - if (a.username < b.username) { - return -1; - } - - if (a.username > b.username) { - return 1; - } - - return 0; - }); - - return { - member_list: memberList - }; -} - -export default class TeamMembers extends React.Component { - constructor(props) { - super(props); - - this.onChange = this.onChange.bind(this); - - this.state = getStateFromStores(); - } - - componentDidMount() { - UserStore.addChangeListener(this.onChange); - - var self = this; - $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', function show() { - self.setState({render_members: false}); - }); - - $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', function hide() { - self.setState({render_members: true}); - }); - } - - componentWillUnmount() { - UserStore.removeChangeListener(this.onChange); - } - - onChange() { - var newState = getStateFromStores(); - if (!utils.areObjectsEqual(newState, this.state)) { - this.setState(newState); - } - } - - render() { - var serverError = null; - - if (this.state.server_error) { - serverError = <label className='has-error control-label'>{this.state.server_error}</label>; - } - - var renderMembers = ''; - - if (this.state.render_members) { - renderMembers = <MemberListTeam users={this.state.member_list} />; - } - - return ( - <div - className='modal fade more-modal' - ref='modal' - id='team_members' - tabIndex='-1' - role='dialog' - aria-hidden='true' - > - <div className='modal-dialog'> - <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' - id='myModalLabel' - >{this.props.teamDisplayName + ' Members'}</h4> - </div> - <div - ref='modalBody' - className='modal-body' - > - <div className='team-member-list'> - {renderMembers} - </div> - {serverError} - </div> - <div className='modal-footer'> - <button - type='button' - className='btn btn-default' - data-dismiss='modal' - >Close</button> - </div> - </div> - </div> - </div> - ); - } -} - -TeamMembers.propTypes = { - teamDisplayName: React.PropTypes.string -}; diff --git a/web/react/components/team_members_modal.jsx b/web/react/components/team_members_modal.jsx new file mode 100644 index 000000000..0a30a2202 --- /dev/null +++ b/web/react/components/team_members_modal.jsx @@ -0,0 +1,69 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import MemberListTeam from './member_list_team.jsx'; +import TeamStore from '../stores/team_store.jsx'; + +const Modal = ReactBootstrap.Modal; + +export default class TeamMembersModal extends React.Component { + constructor(props) { + super(props); + + this.onShow = this.onShow.bind(this); + } + + componentDidMount() { + if (this.props.show) { + this.onShow(); + } + } + + componentDidUpdate(prevProps) { + if (this.props.show && !prevProps.show) { + this.onShow(); + } + } + + onShow() { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); + if ($(window).width() > 768) { + $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + } + } + + render() { + const team = TeamStore.getCurrent(); + + return ( + <Modal + dialogClassName='team-members-modal' + show={this.props.show} + onHide={this.props.onHide} + > + <Modal.Header closeButton={true}> + {team.display_name + ' Members'} + </Modal.Header> + <Modal.Body ref='modalBody'> + <div className='team-member-list'> + <MemberListTeam /> + </div> + </Modal.Body> + <Modal.Footer> + <button + type='button' + className='btn btn-default' + onClick={this.props.onHide} + > + {'Close'} + </button> + </Modal.Footer> + </Modal> + ); + } +} + +TeamMembersModal.propTypes = { + show: React.PropTypes.bool.isRequired, + onHide: React.PropTypes.func.isRequired +}; diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 161e6ab22..b73dfdafe 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -14,7 +14,6 @@ import DeletePostModal from '../components/delete_post_modal.jsx'; import MoreChannelsModal from '../components/more_channels.jsx'; import PostDeletedModal from '../components/post_deleted_modal.jsx'; import TeamSettingsModal from '../components/team_settings_modal.jsx'; -import TeamMembersModal from '../components/team_members.jsx'; import RemovedFromChannelModal from '../components/removed_from_channel_modal.jsx'; import RegisterAppModal from '../components/register_app_modal.jsx'; import ImportThemeModal from '../components/user_settings/import_theme_modal.jsx'; @@ -87,11 +86,6 @@ function setupChannelPage(props, team, channel) { ); ReactDOM.render( - <TeamMembersModal teamDisplayName={props.TeamDisplayName} />, - document.getElementById('team_members_modal') - ); - - ReactDOM.render( <RenameChannelModal />, document.getElementById('rename_channel_modal') ); |