diff options
author | Joram Wilander <jwawilander@gmail.com> | 2017-05-31 16:51:42 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-05-31 16:51:42 -0400 |
commit | 5aaedb9663b987caf1fb11ea6062bcc44e6bafca (patch) | |
tree | bd77c10168f9fb1b0f998b08a3b2a3761512a451 /webapp/components/channel_switch_modal.jsx | |
parent | 8ce72aedc3a5b4f783fb6ebab38aac8bf5f413ae (diff) | |
download | chat-5aaedb9663b987caf1fb11ea6062bcc44e6bafca.tar.gz chat-5aaedb9663b987caf1fb11ea6062bcc44e6bafca.tar.bz2 chat-5aaedb9663b987caf1fb11ea6062bcc44e6bafca.zip |
PLT-5699 Improvements to channel switcher (#6486)
* Refactor channel switcher to not wait on server results
* Change channel switcher to quick switcher and include team switching
* Add sections, update ordering and add discoverability button
* Fix styling error
* Use CMD in text if on mac
* Clean yarn cache on every install
* Various UX updates per feedback
* Add shortcut help text for team switcher
* Couple more updates per feedback
* Some minor fixes for GM and autocomplete race
* Updating UI for channel switcher (#6504)
* Updating channel switcher button (#6506)
* Updating switcher modal on mobile (#6507)
* Removed jQuery usage
* Rename function to toggleQuickSwitchModal
Diffstat (limited to 'webapp/components/channel_switch_modal.jsx')
-rw-r--r-- | webapp/components/channel_switch_modal.jsx | 214 |
1 files changed, 0 insertions, 214 deletions
diff --git a/webapp/components/channel_switch_modal.jsx b/webapp/components/channel_switch_modal.jsx deleted file mode 100644 index 0f1fc4252..000000000 --- a/webapp/components/channel_switch_modal.jsx +++ /dev/null @@ -1,214 +0,0 @@ -// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import SuggestionList from './suggestion/suggestion_list.jsx'; -import SuggestionBox from './suggestion/suggestion_box.jsx'; -import SwitchChannelProvider from './suggestion/switch_channel_provider.jsx'; - -import {FormattedMessage} from 'react-intl'; -import {Modal} from 'react-bootstrap'; - -import {goToChannel, openDirectChannelToUser} from 'actions/channel_actions.jsx'; - -import ChannelStore from 'stores/channel_store.jsx'; -import UserStore from 'stores/user_store.jsx'; - -import Constants from 'utils/constants.jsx'; -import * as Utils from 'utils/utils.jsx'; - -import PropTypes from 'prop-types'; - -import React from 'react'; -import $ from 'jquery'; - -export default class SwitchChannelModal extends React.Component { - constructor() { - super(); - - this.onChange = this.onChange.bind(this); - this.onItemSelected = this.onItemSelected.bind(this); - this.onShow = this.onShow.bind(this); - this.onHide = this.onHide.bind(this); - this.onExited = this.onExited.bind(this); - this.handleKeyDown = this.handleKeyDown.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); - this.switchToChannel = this.switchToChannel.bind(this); - - this.suggestionProviders = [new SwitchChannelProvider()]; - - this.state = { - text: '', - error: '' - }; - } - - componentDidUpdate(prevProps) { - if (this.props.show && !prevProps.show) { - const textbox = this.refs.search.getTextbox(); - textbox.focus(); - Utils.placeCaretAtEnd(textbox); - } - } - - onShow() { - this.setState({ - text: '', - error: '' - }); - } - - onHide() { - this.setState({ - text: '', - error: '' - }); - this.props.onHide(); - } - - onExited() { - this.selected = null; - setTimeout(() => { - $('#post_textbox').get(0).focus(); - }); - } - - onChange(e) { - this.setState({text: e.target.value}); - this.selected = null; - } - - onItemSelected(item) { - this.selected = item; - } - - handleKeyDown(e) { - this.setState({ - error: '' - }); - if (e.keyCode === Constants.KeyCodes.ENTER) { - this.handleSubmit(); - } - } - - handleSubmit() { - let channel = null; - - if (!this.selected) { - if (this.state.text !== '') { - this.setState({ - error: Utils.localizeMessage('channel_switch_modal.not_found', 'No matches found.') - }); - } - return; - } - - if (this.selected.type === Constants.DM_CHANNEL) { - const user = UserStore.getProfileByUsername(this.selected.name); - - if (user) { - openDirectChannelToUser( - user.id, - (ch) => { - channel = ch; - this.switchToChannel(channel); - }, - () => { - channel = null; - this.switchToChannel(channel); - } - ); - } - } else { - channel = ChannelStore.get(this.selected.id); - this.switchToChannel(channel); - } - } - - switchToChannel(channel) { - if (channel !== null) { - goToChannel(channel); - this.onHide(); - } else if (this.state.text !== '') { - this.setState({ - error: Utils.localizeMessage('channel_switch_modal.failed_to_open', 'Failed to open channel.') - }); - } - } - - render() { - const message = this.state.error; - return ( - <Modal - dialogClassName='channel-switch-modal modal--overflow' - ref='modal' - show={this.props.show} - onHide={this.onHide} - onExited={this.onExited} - > - <Modal.Header closeButton={true}> - <Modal.Title> - <span> - <FormattedMessage - id='channel_switch_modal.title' - defaultMessage='Switch Channels' - /> - </span> - </Modal.Title> - </Modal.Header> - - <Modal.Body> - <div className='modal__hint'> - <FormattedMessage - id='channel_switch_modal.help' - defaultMessage='Type channel name. Use ↑↓ to browse, TAB to select, ↵ to confirm, ESC to dismiss' - /> - </div> - <SuggestionBox - ref='search' - className='form-control focused' - type='input' - onChange={this.onChange} - value={this.state.text} - onKeyDown={this.handleKeyDown} - onItemSelected={this.onItemSelected} - listComponent={SuggestionList} - maxLength='64' - providers={this.suggestionProviders} - listStyle='bottom' - /> - </Modal.Body> - <Modal.Footer> - <div className='modal__error'> - {message} - </div> - <button - type='button' - className='btn btn-default' - onClick={this.onHide} - > - <FormattedMessage - id='edit_channel_header_modal.cancel' - defaultMessage='Cancel' - /> - </button> - <button - type='button' - className='btn btn-primary' - onClick={this.handleSubmit} - > - <FormattedMessage - id='channel_switch_modal.submit' - defaultMessage='Switch' - /> - </button> - </Modal.Footer> - </Modal> - ); - } -} - -SwitchChannelModal.propTypes = { - show: PropTypes.bool.isRequired, - onHide: PropTypes.func.isRequired -}; - |