diff options
author | hmhealey <harrisonmhealey@gmail.com> | 2016-02-25 11:25:16 -0500 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2016-03-03 08:46:55 -0500 |
commit | f7b04f0f275cb70e8dc045a1257cedade81e6a8e (patch) | |
tree | 6aeabd3c5eb0272708f4624bacc323c75de96346 /web/react/components/filtered_user_list.jsx | |
parent | af2a64b6bdd125415093f69edbf80237c730ccf1 (diff) | |
download | chat-f7b04f0f275cb70e8dc045a1257cedade81e6a8e.tar.gz chat-f7b04f0f275cb70e8dc045a1257cedade81e6a8e.tar.bz2 chat-f7b04f0f275cb70e8dc045a1257cedade81e6a8e.zip |
Merged contents of MoreDirectChannelsModal and ChannelMembersModal into UserList
Diffstat (limited to 'web/react/components/filtered_user_list.jsx')
-rw-r--r-- | web/react/components/filtered_user_list.jsx | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/web/react/components/filtered_user_list.jsx b/web/react/components/filtered_user_list.jsx new file mode 100644 index 000000000..dc8abd4c1 --- /dev/null +++ b/web/react/components/filtered_user_list.jsx @@ -0,0 +1,129 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import UserList from './user_list.jsx'; + +import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; + +const holders = defineMessages({ + member: { + id: 'more_direct_channels.member', + defaultMessage: 'Member' + }, + search: { + id: 'more_direct_channels.search', + defaultMessage: 'Search members' + } +}); + +class FilteredUserList extends React.Component { + constructor(props) { + super(props); + + this.handleFilterChange = this.handleFilterChange.bind(this); + + this.state = { + filter: '' + }; + } + + componentDidUpdate(prevProps, prevState) { + if (prevState.filter !== this.state.filter) { + $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0); + } + } + + handleFilterChange(e) { + this.setState({ + filter: e.target.value + }); + } + + render() { + const {formatMessage} = this.props.intl; + + let users = this.props.users; + + if (this.state.filter) { + const filter = this.state.filter.toLowerCase(); + + users = users.filter((user) => { + return user.username.toLowerCase().indexOf(filter) !== -1 || + (user.first_name && user.first_name.toLowerCase().indexOf(filter) !== -1) || + (user.last_name && user.last_name.toLowerCase().indexOf(filter) !== -1) || + (user.nickname && user.nickname.toLowerCase().indexOf(filter) !== -1); + }); + } + + let memberString = formatMessage(holders.member); + if (users.length !== 1) { + memberString += 's'; + } + + let count; + if (users.length === this.props.users.length) { + count = ( + <FormattedMessage + id='more_direct_channels.count' + defaultMessage='{count} {member}' + values={{ + count: users.length, + member: memberString + }} + /> + ); + } else { + count = ( + <FormattedMessage + id='more_direct_channels.countTotal' + defaultMessage='{count} {member} of {total} Total' + values={{ + count: users.length, + member: memberString, + total: this.props.users.length + }} + /> + ); + } + + return ( + <div> + <div className='filter-row'> + <div className='col-sm-6'> + <input + ref='filter' + className='form-control filter-textbox' + placeholder={formatMessage(holders.search)} + onInput={this.handleFilterChange} + /> + </div> + <div className='col-sm-6'> + <span className='member-count'>{count}</span> + </div> + </div> + <div + ref='userList' + className='user-list' + > + <UserList + users={users} + actions={this.props.actions} + /> + </div> + </div> + ); + } +} + +FilteredUserList.defaultProps = { + users: [], + actions: [] +}; + +FilteredUserList.propTypes = { + intl: intlShape.isRequired, + users: React.PropTypes.arrayOf(React.PropTypes.object), + actions: React.PropTypes.arrayOf(React.PropTypes.func) +}; + +export default injectIntl(FilteredUserList); |