Update reaction picker visuals

This commit is contained in:
Evan Hahn 2021-09-07 16:30:58 -05:00 committed by GitHub
parent 1a3f87f7f6
commit 561bc0695f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 277 additions and 194 deletions

View file

@ -34,6 +34,34 @@ const DEFAULT_EMOJI_LIST = [
'cry',
];
const EmojiButton = React.forwardRef<
HTMLButtonElement,
{
emoji: string;
onSelect: () => unknown;
selected: boolean;
title?: string;
}
>(({ emoji, onSelect, selected, title }, ref) => (
<button
type="button"
key={emoji}
ref={ref}
tabIndex={0}
className={classNames(
'module-ReactionPicker__button',
'module-ReactionPicker__button--emoji',
selected && 'module-ReactionPicker__button--selected'
)}
onClick={e => {
e.stopPropagation();
onSelect();
}}
>
<Emoji size={48} emoji={emoji} title={title} />
</button>
));
export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
(
{ i18n, selected, onClose, skinTone, onPick, renderEmojiPicker, style },
@ -64,70 +92,69 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
[onPick]
);
// Focus first button and restore focus on unmount
const [focusRef] = useRestoreFocus();
if (pickingOther) {
return renderEmojiPicker({ onPickEmoji, onClose, style, ref });
}
const emojis = DEFAULT_EMOJI_LIST.map(shortName =>
convertShortName(shortName, skinTone)
);
// Focus first button and restore focus on unmount
const [focusRef] = useRestoreFocus();
const otherSelected = selected && !emojis.includes(selected);
return pickingOther ? (
renderEmojiPicker({ onPickEmoji, onClose, style, ref })
) : (
<div ref={ref} style={style} className="module-reaction-picker">
let moreButton: React.ReactNode;
if (otherSelected) {
moreButton = (
<EmojiButton
emoji={selected}
onSelect={() => {
onPick(selected);
}}
selected
title={i18n('Reactions--remove')}
/>
);
} else {
moreButton = (
<button
aria-label={i18n('ReactionsViewer--more')}
className="module-ReactionPicker__button module-ReactionPicker__button--more"
onClick={event => {
event.stopPropagation();
setPickingOther(true);
}}
tabIndex={0}
title={i18n('ReactionsViewer--more')}
type="button"
>
<div className="module-ReactionPicker__button--more__dot" />
<div className="module-ReactionPicker__button--more__dot" />
<div className="module-ReactionPicker__button--more__dot" />
</button>
);
}
return (
<div ref={ref} style={style} className="module-ReactionPicker">
{emojis.map((emoji, index) => {
const maybeFocusRef = index === 0 ? focusRef : undefined;
return (
<button
type="button"
<EmojiButton
emoji={emoji}
key={emoji}
ref={maybeFocusRef}
tabIndex={0}
className={classNames(
'module-reaction-picker__emoji-btn',
emoji === selected
? 'module-reaction-picker__emoji-btn--selected'
: null
)}
onClick={e => {
e.stopPropagation();
onSelect={() => {
onPick(emoji);
}}
title={emoji}
>
<div className="module-reaction-picker__emoji-btn__emoji">
<Emoji size={48} emoji={emoji} />
</div>
</button>
ref={maybeFocusRef}
selected={emoji === selected}
/>
);
})}
<button
type="button"
className={classNames(
'module-reaction-picker__emoji-btn',
otherSelected
? 'module-reaction-picker__emoji-btn--selected'
: 'module-reaction-picker__emoji-btn--more'
)}
onClick={e => {
e.stopPropagation();
if (otherSelected && selected) {
onPick(selected);
} else {
setPickingOther(true);
}
}}
title={i18n('ReactionsViewer--more')}
>
{otherSelected ? (
<div className="module-reaction-picker__emoji-btn__emoji">
<Emoji size={48} emoji={selected} />
</div>
) : null}
</button>
{moreButton}
</div>
);
}