Send message when pressing enter in the emoji picker

This commit is contained in:
Ken Powers 2019-05-31 17:58:53 -04:00 committed by Scott Nonnenberg
parent 0a16c905b9
commit d23efc6717
3 changed files with 30 additions and 6 deletions

View file

@ -22,6 +22,7 @@ import { LocalizerType } from '../../types/Util';
export type OwnProps = {
readonly i18n: LocalizerType;
readonly onPickEmoji: (o: { skinTone: number; shortName: string }) => unknown;
readonly onForceSend: () => unknown;
readonly skinTone: number;
readonly onSetSkinTone: (tone: number) => unknown;
readonly recentEmojis: Array<string>;
@ -56,6 +57,7 @@ export const EmojiPicker = React.memo(
(
{
i18n,
onForceSend,
onPickEmoji,
skinTone = 0,
onSetSkinTone,
@ -113,13 +115,24 @@ export const EmojiPicker = React.memo(
);
const handlePickEmoji = React.useCallback(
(e: React.MouseEvent<HTMLButtonElement>) => {
const { shortName } = e.currentTarget.dataset;
if (shortName) {
onPickEmoji({ skinTone: selectedTone, shortName });
(
e:
| React.MouseEvent<HTMLButtonElement>
| React.KeyboardEvent<HTMLButtonElement>
) => {
if ('key' in e) {
if (e.key === 'Enter') {
e.preventDefault();
onForceSend();
}
} else {
const { shortName } = e.currentTarget.dataset;
if (shortName) {
onPickEmoji({ skinTone: selectedTone, shortName });
}
}
},
[onClose, onPickEmoji, selectedTone]
[onClose, onForceSend, onPickEmoji, selectedTone]
);
// Handle escape key
@ -229,6 +242,7 @@ export const EmojiPicker = React.memo(
<button
className="module-emoji-picker__button"
onClick={handlePickEmoji}
onKeyDown={handlePickEmoji}
data-short-name={shortName}
title={shortName}
>