Let users customize the preferred reaction palette

This commit is contained in:
Evan Hahn 2021-09-09 11:29:01 -05:00 committed by GitHub
parent 7a5385e00a
commit f28456c160
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 1788 additions and 124 deletions

View file

@ -1,39 +1,41 @@
// Copyright 2020 Signal Messenger, LLC
// Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import classNames from 'classnames';
import * as log from '../../logging/log';
import { Emoji } from '../emoji/Emoji';
import { convertShortName } from '../emoji/lib';
import { Props as EmojiPickerProps } from '../emoji/EmojiPicker';
import { missingCaseError } from '../../util/missingCaseError';
import { useRestoreFocus } from '../../util/hooks/useRestoreFocus';
import { LocalizerType } from '../../types/Util';
export enum ReactionPickerSelectionStyle {
Picker,
Menu,
}
export type RenderEmojiPickerProps = Pick<Props, 'onClose' | 'style'> &
Pick<EmojiPickerProps, 'onPickEmoji'> & {
Pick<EmojiPickerProps, 'onClickSettings' | 'onPickEmoji'> & {
ref: React.Ref<HTMLDivElement>;
};
export type OwnProps = {
hasMoreButton?: boolean;
i18n: LocalizerType;
selected?: string;
selectionStyle: ReactionPickerSelectionStyle;
onClose?: () => unknown;
onPick: (emoji: string) => unknown;
openCustomizePreferredReactionsModal?: () => unknown;
preferredReactionEmoji: Array<string>;
renderEmojiPicker: (props: RenderEmojiPickerProps) => React.ReactElement;
skinTone: number;
};
export type Props = OwnProps & Pick<React.HTMLProps<HTMLDivElement>, 'style'>;
const DEFAULT_EMOJI_LIST = [
'heart',
'thumbsup',
'thumbsdown',
'joy',
'open_mouth',
'cry',
];
const EmojiButton = React.forwardRef<
HTMLButtonElement,
{
@ -64,7 +66,19 @@ const EmojiButton = React.forwardRef<
export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
(
{ i18n, selected, onClose, skinTone, onPick, renderEmojiPicker, style },
{
hasMoreButton = true,
i18n,
onClose,
onPick,
openCustomizePreferredReactionsModal,
preferredReactionEmoji,
renderEmojiPicker,
selected,
selectionStyle,
skinTone,
style,
},
ref
) => {
const [pickingOther, setPickingOther] = React.useState(false);
@ -96,17 +110,25 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
const [focusRef] = useRestoreFocus();
if (pickingOther) {
return renderEmojiPicker({ onPickEmoji, onClose, style, ref });
return renderEmojiPicker({
onClickSettings: openCustomizePreferredReactionsModal,
onClose,
onPickEmoji,
ref,
style,
});
}
const emojis = DEFAULT_EMOJI_LIST.map(shortName =>
const emojis = preferredReactionEmoji.map(shortName =>
convertShortName(shortName, skinTone)
);
const otherSelected = selected && !emojis.includes(selected);
let moreButton: React.ReactNode;
if (otherSelected) {
if (!hasMoreButton) {
moreButton = undefined;
} else if (otherSelected) {
moreButton = (
<EmojiButton
emoji={selected}
@ -137,8 +159,30 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
);
}
let selectionStyleClassName: string;
switch (selectionStyle) {
case ReactionPickerSelectionStyle.Picker:
selectionStyleClassName = 'module-ReactionPicker--picker-style';
break;
case ReactionPickerSelectionStyle.Menu:
selectionStyleClassName = 'module-ReactionPicker--menu-style';
break;
default:
log.error(missingCaseError(selectionStyle));
selectionStyleClassName = 'module-ReactionPicker--picker-style';
break;
}
return (
<div ref={ref} style={style} className="module-ReactionPicker">
<div
ref={ref}
style={style}
className={classNames(
'module-ReactionPicker',
selectionStyleClassName,
selected ? 'module-ReactionPicker--something-selected' : undefined
)}
>
{emojis.map((emoji, index) => {
const maybeFocusRef = index === 0 ? focusRef : undefined;