signal-desktop/ts/state/smart/EmojiPicker.tsx
2020-11-04 13:03:13 -06:00

60 lines
1.6 KiB
TypeScript

// Copyright 2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import { useSelector } from 'react-redux';
import { get } from 'lodash';
import { StateType } from '../reducer';
import { useActions as useItemActions, useRecentEmojis } from '../ducks/items';
import { useActions as useEmojiActions } from '../ducks/emojis';
import {
EmojiPicker,
Props as EmojiPickerProps,
} from '../../components/emoji/EmojiPicker';
import { getIntl } from '../selectors/user';
import { LocalizerType } from '../../types/Util';
export const SmartEmojiPicker = React.forwardRef<
HTMLDivElement,
Pick<EmojiPickerProps, 'onPickEmoji' | 'onClose' | 'style'>
>(({ onPickEmoji, onClose, style }, ref) => {
const i18n = useSelector<StateType, LocalizerType>(getIntl);
const skinTone = useSelector<StateType, number>(state =>
get(state, ['items', 'skinTone'], 0)
);
const recentEmojis = useRecentEmojis();
const { putItem } = useItemActions();
const onSetSkinTone = React.useCallback(
tone => {
putItem('skinTone', tone);
},
[putItem]
);
const { onUseEmoji } = useEmojiActions();
const handlePickEmoji = React.useCallback(
data => {
onUseEmoji({ shortName: data.shortName });
onPickEmoji(data);
},
[onUseEmoji, onPickEmoji]
);
return (
<EmojiPicker
ref={ref}
i18n={i18n}
skinTone={skinTone}
onSetSkinTone={onSetSkinTone}
onPickEmoji={handlePickEmoji}
recentEmojis={recentEmojis}
onClose={onClose}
style={style}
/>
);
});