diff options
author | Christopher Speller <crspeller@gmail.com> | 2016-03-03 15:15:56 -0500 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-03-03 15:15:56 -0500 |
commit | a413c8ffa684b72840f116380c04a61f1d9cf524 (patch) | |
tree | 287e855db2906058928f1916cbd3fa84857fdcc3 /web/react/components/more_direct_channels.jsx | |
parent | bc2768fd254e82b6ca39a916436ab4747898578e (diff) | |
parent | 449f1000e999c409f754724cb998f0b9f90cdd59 (diff) | |
download | chat-a413c8ffa684b72840f116380c04a61f1d9cf524.tar.gz chat-a413c8ffa684b72840f116380c04a61f1d9cf524.tar.bz2 chat-a413c8ffa684b72840f116380c04a61f1d9cf524.zip |
Merge pull request #2318 from hmhealey/plt1090
PLT-1090 Refactored modals that display users
Diffstat (limited to 'web/react/components/more_direct_channels.jsx')
-rw-r--r-- | web/react/components/more_direct_channels.jsx | 220 |
1 files changed, 26 insertions, 194 deletions
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index 3b72b251c..0814ac1b3 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -2,36 +2,24 @@ // See License.txt for license information. const Modal = ReactBootstrap.Modal; +import FilteredUserList from './filtered_user_list.jsx'; import UserStore from '../stores/user_store.jsx'; import * as Utils from '../utils/utils.jsx'; -import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; +import {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 MoreDirectChannels extends React.Component { +export default class MoreDirectChannels extends React.Component { constructor(props) { super(props); - this.handleFilterChange = this.handleFilterChange.bind(this); this.handleHide = this.handleHide.bind(this); this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this); this.handleUserChange = this.handleUserChange.bind(this); - this.createRowForUser = this.createRowForUser.bind(this); + this.createJoinDirectChannelButton = this.createJoinDirectChannelButton.bind(this); this.state = { users: this.getUsersFromStore(), - filter: '', loadingDMChannel: -1 }; } @@ -60,39 +48,10 @@ class MoreDirectChannels extends React.Component { UserStore.removeChangeListener(this.handleUserChange); } - componentDidUpdate(prevProps) { - if (!prevProps.show && this.props.show) { - this.onShow(); - } - } - - onShow() { - if (Utils.isMobile()) { - $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 250); - } else { - $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar(); - $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300); - } - } - - handleFilterChange() { - const filter = ReactDOM.findDOMNode(this.refs.filter).value; - - if ($(window).width() > 768) { - $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0); - } - - if (filter !== this.state.filter) { - this.setState({filter}); - } - } - handleHide() { if (this.props.onModalDismissed) { this.props.onModalDismissed(); } - - this.setState({filter: ''}); } handleShowDirectChannel(teammate, e) { @@ -120,145 +79,39 @@ class MoreDirectChannels extends React.Component { this.setState({users: this.getUsersFromStore()}); } - createRowForUser(user) { - const details = []; - - const fullName = Utils.getFullName(user); - if (fullName) { - details.push( - <span - key={`${user.id}__full-name`} - className='full-name' - > - {fullName} - </span> - ); - } - - if (user.nickname) { - const separator = fullName ? ' - ' : ''; - details.push( - <span - key={`${user.nickname}__nickname`} - > - {separator + user.nickname} - </span> - ); - } - - let joinButton; + createJoinDirectChannelButton({user}) { if (this.state.loadingDMChannel === user.id) { - joinButton = ( + return ( <img className='channel-loading-gif' src='/static/images/load.gif' /> ); - } else { - joinButton = ( - <button - type='button' - className='btn btn-primary btn-message' - onClick={this.handleShowDirectChannel.bind(this, user)} - > - <FormattedMessage - id='more_direct_channels.message' - defaultMessage='Message' - /> - </button> - ); } return ( - <tr key={'direct-channel-row-user' + user.id}> - <td - key={user.id} - className='direct-channel' - > - <img - className='profile-img pull-left' - width='38' - height='38' - src={`/api/v1/users/${user.id}/image?time=${user.update_at}&${Utils.getSessionIndex()}`} - /> - <div className='more-name'> - {user.username} - </div> - <div className='more-description'> - {details} - </div> - </td> - <td className='td--action lg'> - {joinButton} - </td> - </tr> + <button + type='button' + className='btn btn-primary btn-message' + onClick={this.handleShowDirectChannel.bind(this, user)} + > + <FormattedMessage + id='more_direct_channels.message' + defaultMessage='Message' + /> + </button> ); } render() { - const {formatMessage} = this.props.intl; - if (!this.props.show) { - return null; - } - - let users = this.state.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.toLowerCase().indexOf(filter) !== -1 || - user.last_name.toLowerCase().indexOf(filter) !== -1 || - user.nickname.toLowerCase().indexOf(filter) !== -1; - }); - } - - const userEntries = users.map(this.createRowForUser); - - if (userEntries.length === 0) { - userEntries.push( - <tr key='no-users-found'><td> - <FormattedMessage - id='more_direct_channels.notFound' - defaultMessage='No users found :(' - /> - </td></tr>); - } - - let memberString = formatMessage(holders.member); - if (users.length !== 1) { - memberString += 's'; - } - - let count; - if (users.length === this.state.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.state.users.length - }} - /> - ); + let maxHeight = 1000; + if (Utils.windowHeight() <= 1200) { + maxHeight = Utils.windowHeight() - 300; } return ( <Modal - dialogClassName='more-modal' + dialogClassName='more-modal more-direct-channels' show={this.props.show} onHide={this.handleHide} > @@ -270,30 +123,12 @@ class MoreDirectChannels extends React.Component { /> </Modal.Title> </Modal.Header> - <Modal.Body ref='modalBody'> - <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' - > - <table className='more-table table'> - <tbody> - {userEntries} - </tbody> - </table> - </div> + <Modal.Body> + <FilteredUserList + style={{maxHeight}} + users={this.state.users} + actions={[this.createJoinDirectChannelButton]} + /> </Modal.Body> <Modal.Footer> <button @@ -313,9 +148,6 @@ class MoreDirectChannels extends React.Component { } MoreDirectChannels.propTypes = { - intl: intlShape.isRequired, show: React.PropTypes.bool.isRequired, onModalDismissed: React.PropTypes.func }; - -export default injectIntl(MoreDirectChannels); |