// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import SuggestionList from 'components/suggestion/suggestion_list.jsx'; import SuggestionBox from 'components/suggestion/suggestion_box.jsx'; import SwitchChannelProvider from 'components/suggestion/switch_channel_provider.jsx'; import SwitchTeamProvider from 'components/suggestion/switch_team_provider.jsx'; import {goToChannel, openDirectChannelToUser} from 'actions/channel_actions.jsx'; import Constants from 'utils/constants.jsx'; import * as Utils from 'utils/utils.jsx'; import React from 'react'; import PropTypes from 'prop-types'; import {browserHistory} from 'react-router/es6'; import {Modal} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; // Redux actions import store from 'stores/redux_store.jsx'; const getState = store.getState; import {getChannel} from 'mattermost-redux/selectors/entities/channels'; const CHANNEL_MODE = 'channel'; const TEAM_MODE = 'team'; export default class QuickSwitchModal extends React.PureComponent { static propTypes = { /** * The mode to start in when showing the modal, either 'channel' or 'team' */ initialMode: PropTypes.string.isRequired, /** * Set to show the modal */ show: PropTypes.bool.isRequired, /** * The function called to hide the modal */ onHide: PropTypes.func.isRequired, /** * Set to show team switcher */ showTeamSwitcher: PropTypes.bool } static defaultProps = { initialMode: CHANNEL_MODE } constructor(props) { super(props); this.onChange = this.onChange.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.switchMode = this.switchMode.bind(this); this.focusTextbox = this.focusTextbox.bind(this); this.enableChannelProvider = this.enableChannelProvider.bind(this); this.enableTeamProvider = this.enableTeamProvider.bind(this); this.channelProviders = [new SwitchChannelProvider()]; this.teamProviders = [new SwitchTeamProvider()]; this.state = { text: '', mode: props.initialMode }; } componentDidUpdate(prevProps) { if (this.props.show && !prevProps.show) { this.focusTextbox(); } } componentWillReceiveProps(nextProps) { if (!this.props.show && nextProps.show) { this.setState({mode: nextProps.initialMode, text: ''}); } } focusTextbox() { if (this.refs.switchbox == null) { return; } const textbox = this.refs.switchbox.getTextbox(); textbox.focus(); Utils.placeCaretAtEnd(textbox); } onShow() { this.setState({ text: '' }); } onHide() { this.setState({ text: '' }); this.props.onHide(); } onExited() { setTimeout(() => { document.querySelector('#post_textbox').focus(); }); } onChange(e) { this.setState({text: e.target.value}); } handleKeyDown(e) { if (e.keyCode === Constants.KeyCodes.TAB) { e.preventDefault(); this.switchMode(); } } handleSubmit(selected) { let channel = null; if (!selected) { return; } if (this.state.mode === CHANNEL_MODE) { const selectedChannel = selected.channel; if (selectedChannel.type === Constants.DM_CHANNEL) { openDirectChannelToUser( selectedChannel.id, (ch) => { channel = ch; this.switchToChannel(channel); }, () => { channel = null; this.switchToChannel(channel); } ); } else if (selectedChannel.type === Constants.GM_CHANNEL) { channel = getChannel(getState(), selectedChannel.id); this.switchToChannel(channel); } else { this.switchToChannel(selectedChannel); } } else { browserHistory.push('/' + selected.name); this.onHide(); } } switchToChannel(channel) { if (channel != null) { goToChannel(channel); this.onHide(); } } enableChannelProvider() { this.channelProviders[0].disableDispatches = false; this.teamProviders[0].disableDispatches = true; } enableTeamProvider() { this.teamProviders[0].disableDispatches = false; this.channelProviders[0].disableDispatches = true; } switchMode() { if (this.state.mode === CHANNEL_MODE && this.props.showTeamSwitcher) { this.enableTeamProvider(); this.setState({mode: TEAM_MODE}); } else if (this.state.mode === TEAM_MODE) { this.enableChannelProvider(); this.setState({mode: CHANNEL_MODE}); } } render() { let providers = this.channelProviders; let header; let renderDividers = true; let channelShortcut = 'quick_switch_modal.channelsShortcut.windows'; let defaultChannelShortcut = 'CTRL+K'; if (Utils.isMac()) { channelShortcut = 'quick_switch_modal.channelsShortcut.mac'; defaultChannelShortcut = 'CMD+K'; } let teamShortcut = 'quick_switch_modal.teamsShortcut.windows'; let defaultTeamShortcut = 'CTRL+ALT+K'; if (Utils.isMac()) { teamShortcut = 'quick_switch_modal.teamsShortcut.mac'; defaultTeamShortcut = 'CMD+ALT+K'; } if (this.props.showTeamSwitcher) { let channelsActiveClass = ''; let teamsActiveClass = ''; if (this.state.mode === TEAM_MODE) { providers = this.teamProviders; renderDividers = false; teamsActiveClass = 'active'; } else { channelsActiveClass = 'active'; } header = (
  • { e.preventDefault(); this.enableChannelProvider(); this.setState({mode: 'channel'}); this.focusTextbox(); }} >
  • { e.preventDefault(); this.enableTeamProvider(); this.setState({mode: 'team'}); this.focusTextbox(); }} >
  • ); } let help; if (Utils.isMobile()) { help = ( ); } else if (this.props.showTeamSwitcher) { help = ( ); } else { help = ( ); } return ( {header}
    {help}
    ); } }