diff options
Diffstat (limited to 'webapp/components/filtered_channel_list.jsx')
| -rw-r--r-- | webapp/components/filtered_channel_list.jsx | 180 |
1 files changed, 0 insertions, 180 deletions
diff --git a/webapp/components/filtered_channel_list.jsx b/webapp/components/filtered_channel_list.jsx deleted file mode 100644 index 64d033bc5..000000000 --- a/webapp/components/filtered_channel_list.jsx +++ /dev/null @@ -1,180 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import $ from 'jquery'; -import ReactDOM from 'react-dom'; -import * as UserAgent from 'utils/user_agent.jsx'; - -import {localizeMessage} from 'utils/utils.jsx'; -import {FormattedMessage} from 'react-intl'; - -import React from 'react'; -import loadingGif from 'images/load.gif'; - -export default class FilteredChannelList extends React.Component { - constructor(props) { - super(props); - - this.handleFilterChange = this.handleFilterChange.bind(this); - this.createChannelRow = this.createChannelRow.bind(this); - this.filterChannels = this.filterChannels.bind(this); - - this.state = { - filter: '', - joiningChannel: '', - channels: this.filterChannels(props.channels) - }; - } - - componentWillReceiveProps(nextProps) { - // assume the channel list is immutable - if (this.props.channels !== nextProps.channels) { - this.setState({ - channels: this.filterChannels(nextProps.channels) - }); - } - } - - componentDidMount() { - // only focus the search box on desktop so that we don't cause the keyboard to open on mobile - if (!UserAgent.isMobile()) { - ReactDOM.findDOMNode(this.refs.filter).focus(); - } - } - - componentDidUpdate(prevProps, prevState) { - if (prevState.filter !== this.state.filter) { - $(ReactDOM.findDOMNode(this.refs.channelList)).scrollTop(0); - } - } - - handleJoin(channel) { - this.setState({joiningChannel: channel.id}); - this.props.handleJoin( - channel, - () => { - this.setState({joiningChannel: ''}); - }); - } - - createChannelRow(channel) { - let joinButton; - if (this.state.joiningChannel === channel.id) { - joinButton = ( - <img - className='join-channel-loading-gif' - src={loadingGif} - /> - ); - } else { - joinButton = ( - <button - onClick={this.handleJoin.bind(this, channel)} - className='btn btn-primary' - > - <FormattedMessage - id='more_channels.join' - defaultMessage='Join' - /> - </button> - ); - } - - return ( - <div - className='more-modal__row' - key={channel.id} - > - <div className='more-modal__details'> - <p className='more-modal__name'>{channel.display_name}</p> - <p className='more-modal__description'>{channel.purpose}</p> - </div> - <div className='more-modal__actions'> - {joinButton} - </div> - </div> - ); - } - - filterChannels(channels) { - if (!this.state || !this.state.filter) { - return channels; - } - - return channels.filter((chan) => { - const filter = this.state.filter.toLowerCase(); - return Boolean((chan.name.toLowerCase().indexOf(filter) !== -1 || chan.display_name.toLowerCase().indexOf(filter) !== -1) && chan.delete_at === 0); - }); - } - - handleFilterChange(e) { - this.setState({ - filter: e.target.value - }); - } - - render() { - let channels = this.state.channels; - - if (this.state.filter && this.state.filter.length > 0) { - channels = this.filterChannels(channels); - } - - let count; - if (channels.length === this.props.channels.length) { - count = ( - <FormattedMessage - id='filtered_channels_list.count' - defaultMessage='{count} {count, plural, =0 {0 channels} one {channel} other {channels}}' - values={{ - count: channels.length - }} - /> - ); - } else { - count = ( - <FormattedMessage - id='filtered_channels_list.countTotal' - defaultMessage='{count} {count, plural, =0 {0 channels} one {channel} other {channels}} of {total} Total' - values={{ - count: channels.length, - total: this.props.channels.length - }} - /> - ); - } - - return ( - <div className='filtered-user-list'> - <div className='filter-row'> - <div className='col-sm-6'> - <input - ref='filter' - className='form-control filter-textbox' - placeholder={localizeMessage('filtered_channels_list.search', 'Search channels')} - onInput={this.handleFilterChange} - /> - </div> - <div className='col-sm-12'> - <span className='channel-count pull-left'>{count}</span> - </div> - </div> - <div - ref='channelList' - className='more-modal__list' - > - {channels.map(this.createChannelRow)} - </div> - </div> - ); - } -} - -FilteredChannelList.defaultProps = { - channels: [] -}; - -FilteredChannelList.propTypes = { - channels: React.PropTypes.arrayOf(React.PropTypes.object), - handleJoin: React.PropTypes.func.isRequired -}; |