Save skin tone changes in reaction picker

This commit is contained in:
Evan Hahn 2021-09-09 15:53:26 -05:00 committed by GitHub
parent 1a682fa297
commit 4f1188e213
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 3 deletions

View file

@ -134,6 +134,7 @@ export function CustomizingPreferredReactionsModal({
hasMoreButton={false}
i18n={i18n}
onPick={onPick}
onSetSkinTone={shouldNotBeCalled}
ref={setReferenceElement}
preferredReactionEmoji={draftPreferredReactions}
selected={selected}

View file

@ -30,15 +30,16 @@ const preferredReactionEmoji = [
const renderEmojiPicker: ReactionPickerProps['renderEmojiPicker'] = ({
onClose,
onPickEmoji,
onSetSkinTone,
ref,
}) => (
<EmojiPicker
i18n={i18n}
skinTone={0}
onSetSkinTone={action('EmojiPicker::onSetSkinTone')}
ref={ref}
onClose={onClose}
onPickEmoji={onPickEmoji}
onSetSkinTone={onSetSkinTone}
/>
);
@ -48,6 +49,7 @@ storiesOf('Components/Conversation/ReactionPicker', module)
<ReactionPicker
i18n={i18n}
onPick={action('onPick')}
onSetSkinTone={action('onSetSkinTone')}
openCustomizePreferredReactionsModal={action(
'openCustomizePreferredReactionsModal'
)}
@ -65,6 +67,7 @@ storiesOf('Components/Conversation/ReactionPicker', module)
i18n={i18n}
selected={e}
onPick={action('onPick')}
onSetSkinTone={action('onSetSkinTone')}
openCustomizePreferredReactionsModal={action(
'openCustomizePreferredReactionsModal'
)}
@ -83,6 +86,7 @@ storiesOf('Components/Conversation/ReactionPicker', module)
i18n={i18n}
selected={e}
onPick={action('onPick')}
onSetSkinTone={action('onSetSkinTone')}
openCustomizePreferredReactionsModal={action(
'openCustomizePreferredReactionsModal'
)}

View file

@ -17,7 +17,10 @@ export enum ReactionPickerSelectionStyle {
}
export type RenderEmojiPickerProps = Pick<Props, 'onClose' | 'style'> &
Pick<EmojiPickerProps, 'onClickSettings' | 'onPickEmoji'> & {
Pick<
EmojiPickerProps,
'onClickSettings' | 'onPickEmoji' | 'onSetSkinTone'
> & {
ref: React.Ref<HTMLDivElement>;
};
@ -28,6 +31,7 @@ export type OwnProps = {
selectionStyle: ReactionPickerSelectionStyle;
onClose?: () => unknown;
onPick: (emoji: string) => unknown;
onSetSkinTone: (tone: number) => unknown;
openCustomizePreferredReactionsModal?: () => unknown;
preferredReactionEmoji: Array<string>;
renderEmojiPicker: (props: RenderEmojiPickerProps) => React.ReactElement;
@ -71,6 +75,7 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
i18n,
onClose,
onPick,
onSetSkinTone,
openCustomizePreferredReactionsModal,
preferredReactionEmoji,
renderEmojiPicker,
@ -114,6 +119,7 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
onClickSettings: openCustomizePreferredReactionsModal,
onClose,
onPickEmoji,
onSetSkinTone,
ref,
style,
});

View file

@ -32,7 +32,7 @@ export type OwnProps = {
readonly onPickEmoji: (o: EmojiPickDataType) => unknown;
readonly doSend?: () => unknown;
readonly skinTone?: number;
readonly onSetSkinTone?: (tone: number) => unknown;
readonly onSetSkinTone: (tone: number) => unknown;
readonly recentEmojis?: Array<string>;
readonly onClickSettings?: () => unknown;
readonly onClose?: () => unknown;

View file

@ -5,6 +5,7 @@ import * as React from 'react';
import { useSelector } from 'react-redux';
import { StateType } from '../reducer';
import { useActions as usePreferredReactionsActions } from '../ducks/preferredReactions';
import { useActions as useItemsActions } from '../ducks/items';
import { getIntl } from '../selectors/user';
import {
@ -22,6 +23,7 @@ import {
type ExternalProps = Omit<
Props,
| 'i18n'
| 'onSetSkinTone'
| 'openCustomizePreferredReactionsModal'
| 'preferredReactionEmoji'
| 'selectionStyle'
@ -35,6 +37,7 @@ export const SmartReactionPicker = React.forwardRef<
const {
openCustomizePreferredReactionsModal,
} = usePreferredReactionsActions();
const { onSetSkinTone } = useItemsActions();
const i18n = useSelector<StateType, LocalizerType>(getIntl);
@ -49,6 +52,7 @@ export const SmartReactionPicker = React.forwardRef<
return (
<ReactionPicker
i18n={i18n}
onSetSkinTone={onSetSkinTone}
openCustomizePreferredReactionsModal={
openCustomizePreferredReactionsModal
}

View file

@ -10,6 +10,7 @@ export function renderEmojiPicker({
ref,
onClickSettings,
onPickEmoji,
onSetSkinTone,
onClose,
style,
}: RenderEmojiPickerProps): JSX.Element {
@ -18,6 +19,7 @@ export function renderEmojiPicker({
ref={ref}
onClickSettings={onClickSettings}
onPickEmoji={onPickEmoji}
onSetSkinTone={onSetSkinTone}
onClose={onClose}
style={style}
/>