mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Reactions: skin tone support

Browse source
This commit is contained in:
Sidney Keese 2020-10-02 13:05:09 -07:00 • committed by Josh Perez
parent 6a7d45b6fc
commit c3ddedfde1
13 changed files with 307 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

23
ts/components/conversation/ReactionPicker.tsx
View file

@ -17,14 +17,25 @@ export type OwnProps = {
onClose?: () => unknown;
onPick: (emoji: string) => unknown;
renderEmojiPicker: (props: RenderEmojiPickerProps) => React.ReactElement;
skinTone: number;
};
export type Props = OwnProps & Pick<React.HTMLProps<HTMLDivElement>, 'style'>;
const emojis = ['❤️', '👍', '👎', '😂', '😮', '😢'];
const DEFAULT_EMOJI_LIST = [
'heart',
'thumbsup',
'thumbsdown',
'joy',
'open_mouth',
'cry',
];
export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
({ i18n, selected, onClose, onPick, renderEmojiPicker, style }, ref) => {
(
{ i18n, selected, onClose, skinTone, onPick, renderEmojiPicker, style },
ref
) => {
const [pickingOther, setPickingOther] = React.useState(false);
const focusRef = React.useRef<HTMLButtonElement>(null);
@ -45,12 +56,16 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
// Handle EmojiPicker::onPickEmoji
const onPickEmoji: EmojiPickerProps['onPickEmoji'] = React.useCallback(
({ shortName, skinTone }) => {
onPick(convertShortName(shortName, skinTone));
({ shortName, skinTone: pickedSkinTone }) => {
onPick(convertShortName(shortName, pickedSkinTone));
},
[onPick]
);
const emojis = DEFAULT_EMOJI_LIST.map(shortName =>
convertShortName(shortName, skinTone)
);
// Focus first button and restore focus on unmount
useRestoreFocus(focusRef);