// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import Constants from 'utils/constants.jsx';
import * as Utils from 'utils/utils.jsx';
import ModalStore from 'stores/modal_store.jsx';
import {intlShape, injectIntl, defineMessages} from 'react-intl';
import {Modal} from 'react-bootstrap';
import React from 'react';
const allShortcuts = defineMessages({
mainHeader: {
id: 'shortcuts.header',
defaultMessage: 'Keyboard Shortcuts'
},
navHeader: {
id: 'shortcuts.nav.header',
defaultMessage: 'Navigation'
},
navPrev: {
default: {
id: 'shortcuts.nav.prev',
defaultMessage: 'Previous channel:\tAlt|Up'
},
mac: {
id: 'shortcuts.nav.prev.mac',
defaultMessage: 'Previous channel:\t⌥|Up'
}
},
navNext: {
default: {
id: 'shortcuts.nav.next',
defaultMessage: 'Next channel:\tAlt|Down'
},
mac: {
id: 'shortcuts.nav.next.mac',
defaultMessage: 'Next channel:\t⌥|Down'
}
},
navUnreadPrev: {
default: {
id: 'shortcuts.nav.unread_prev',
defaultMessage: 'Previous unread channel:\tAlt|Shift|Up'
},
mac: {
id: 'shortcuts.nav.unread_prev.mac',
defaultMessage: 'Previous unread channel:\t⌥|Shift|Up'
}
},
navUnreadNext: {
default: {
id: 'shortcuts.nav.unread_next',
defaultMessage: 'Next unread channel:\tAlt|Shift|Down'
},
mac: {
id: 'shortcuts.nav.unread_next.mac',
defaultMessage: 'Next unread channel:\t⌥|Shift|Down'
}
},
navSwitcher: {
default: {
id: 'shortcuts.nav.switcher',
defaultMessage: 'Quick channel switcher:\tCtrl|K'
},
mac: {
id: 'shortcuts.nav.switcher.mac',
defaultMessage: 'Quick channel switcher:\t⌘|K'
}
},
navDMMenu: {
default: {
id: 'shortcuts.nav.direct_messages_menu',
defaultMessage: 'Direct messages menu:\tCtrl|Shift|K'
},
mac: {
id: 'shortcuts.nav.direct_messages_menu.mac',
defaultMessage: 'Direct messages menu:\t⌘|Shift|K'
}
},
navSettings: {
default: {
id: 'shortcuts.nav.settings',
defaultMessage: 'Account settings:\tCtrl|Shift|A'
},
mac: {
id: 'shortcuts.nav.settings.mac',
defaultMessage: 'Account settings:\t⌘|Shift|A'
}
},
navMentions: {
default: {
id: 'shortcuts.nav.mentions',
defaultMessage: 'Recent mentions:\tCtrl|Shift|M'
},
mac: {
id: 'shortcuts.nav.mentions.mac',
defaultMessage: 'Recent mentions:\t⌘|Shift|M'
}
},
msgHeader: {
id: 'shortcuts.msgs.header',
defaultMessage: 'Messages'
},
msgMarkAsRead: {
id: 'shortcuts.msgs.mark_as_read',
defaultMessage: 'Mark current channel as read:\tEsc'
},
msgInputHeader: {
id: 'shortcuts.msgs.input.header',
defaultMessage: 'Works inside an empty input field'
},
msgEdit: {
id: 'shortcuts.msgs.edit',
defaultMessage: 'Edit last message in channel:\tUp'
},
msgReply: {
id: 'shortcuts.msgs.reply',
defaultMessage: 'Reply to last message in channel:\tShift|Up'
},
msgReprintPrev: {
default: {
id: 'shortcuts.msgs.reprint_prev',
defaultMessage: 'Reprint previous message:\tCtrl|Up'
},
mac: {
id: 'shortcuts.msgs.reprint_prev.mac',
defaultMessage: 'Reprint previous message:\t⌘|Up'
}
},
msgReprintNext: {
default: {
id: 'shortcuts.msgs.reprint_next',
defaultMessage: 'Reprint next message:\tCtrl|Down'
},
mac: {
id: 'shortcuts.msgs.reprint_next.mac',
defaultMessage: 'Reprint next message:\t⌘|Down'
}
},
msgCompHeader: {
id: 'shortcuts.msgs.comp.header',
defaultMessage: 'Autocomplete'
},
msgCompUsername: {
id: 'shortcuts.msgs.comp.username',
defaultMessage: 'Username:\t@|[a-z]|Tab'
},
msgCompChannel: {
id: 'shortcuts.msgs.comp.channel',
defaultMessage: 'Channel:\t~|[a-z]|Tab'
},
msgCompEmoji: {
id: 'shortcuts.msgs.comp.emoji',
defaultMessage: 'Emoji:\t:|[a-z]|Tab'
},
filesHeader: {
id: 'shortcuts.files.header',
defaultMessage: 'Files'
},
filesUpload: {
default: {
id: 'shortcuts.files.upload',
defaultMessage: 'Upload files:\tCtrl|U'
},
mac: {
id: 'shortcuts.files.upload.mac',
defaultMessage: 'Upload files:\t⌘|U'
}
},
browserHeader: {
id: 'shortcuts.browser.header',
defaultMessage: 'Built-in Browser Commands'
},
browserChannelPrev: {
default: {
id: 'shortcuts.browser.channel_prev',
defaultMessage: 'Back in history:\tAlt|Left'
},
mac: {
id: 'shortcuts.browser.channel_prev.mac',
defaultMessage: 'Back in history:\t⌘|['
}
},
browserChannelNext: {
default: {
id: 'shortcuts.browser.channel_next',
defaultMessage: 'Forward in history:\tAlt|Right'
},
mac: {
id: 'shortcuts.browser.channel_next.mac',
defaultMessage: 'Forward in history:\t⌘|]'
}
},
browserFontIncrease: {
default: {
id: 'shortcuts.browser.font_increase',
defaultMessage: 'Zoom in:\tCtrl|+'
},
mac: {
id: 'shortcuts.browser.font_increase.mac',
defaultMessage: 'Zoom in:\t⌘|+'
}
},
browserFontDecrease: {
default: {
id: 'shortcuts.browser.font_decrease',
defaultMessage: 'Zoom out:\tCtrl|-'
},
mac: {
id: 'shortcuts.browser.font_decrease.mac',
defaultMessage: 'Zoom out:\t⌘|-'
}
},
browserInputHeader: {
id: 'shortcuts.browser.input.header',
defaultMessage: 'Works inside an input field'
},
browserHighlightPrev: {
id: 'shortcuts.browser.highlight_prev',
defaultMessage: 'Highlight text to the previous line:\tShift|Up'
},
browserHighlightNext: {
id: 'shortcuts.browser.highlight_next',
defaultMessage: 'Highlight text to the next line:\tShift|Down'
},
browserNewline: {
id: 'shortcuts.browser.newline',
defaultMessage: 'Create a new line:\tShift|Enter'
},
info: {
id: 'shortcuts.info',
defaultMessage: 'Begin a message with / for a list of all the commands at your disposal.'
}
});
class ShortcutsModal extends React.PureComponent {
static propTypes = {
intl: intlShape.isRequired
}
constructor(props) {
super(props);
this.state = {
show: false
};
}
componentDidMount() {
ModalStore.addModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, this.handleToggle);
}
componentWillUnmount() {
ModalStore.removeModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, this.handleToggle);
}
handleToggle = (value) => {
this.setState({
show: value
});
}
handleHide = () => {
this.setState({show: false});
}
getShortcuts(isMac) {
const shortcuts = {};
Object.keys(allShortcuts).forEach((s) => {
if (isMac && allShortcuts[s].mac) {
shortcuts[s] = allShortcuts[s].mac;
} else if (!isMac && allShortcuts[s].default) {
shortcuts[s] = allShortcuts[s].default;
} else {
shortcuts[s] = allShortcuts[s];
}
});
return shortcuts;
}
render() {
const shortcuts = this.getShortcuts(Utils.isMac());
const {formatMessage} = this.props.intl;
return (
{formatMessage(shortcuts.navHeader)}
{renderShortcut(formatMessage(shortcuts.navPrev))}
{renderShortcut(formatMessage(shortcuts.navNext))}
{renderShortcut(formatMessage(shortcuts.navUnreadPrev))}
{renderShortcut(formatMessage(shortcuts.navUnreadNext))}
{renderShortcut(formatMessage(shortcuts.navSwitcher))}
{renderShortcut(formatMessage(shortcuts.navDMMenu))}
{renderShortcut(formatMessage(shortcuts.navSettings))}
{renderShortcut(formatMessage(shortcuts.navMentions))}
{formatMessage(shortcuts.msgHeader)}
{renderShortcut(formatMessage(shortcuts.msgMarkAsRead))}
{formatMessage(shortcuts.msgInputHeader)}
{formatMessage(shortcuts.filesHeader)}
{renderShortcut(formatMessage(shortcuts.filesUpload))}
{formatMessage(shortcuts.browserHeader)}
{renderShortcut(formatMessage(shortcuts.browserChannelPrev))}
{renderShortcut(formatMessage(shortcuts.browserChannelNext))}
{renderShortcut(formatMessage(shortcuts.browserFontIncrease))}
{renderShortcut(formatMessage(shortcuts.browserFontDecrease))}
{formatMessage(shortcuts.browserInputHeader)}