Save skin tone changes in reaction picker
This commit is contained in:
parent
1a682fa297
commit
4f1188e213
6 changed files with 20 additions and 3 deletions
|
@ -134,6 +134,7 @@ export function CustomizingPreferredReactionsModal({
|
|||
hasMoreButton={false}
|
||||
i18n={i18n}
|
||||
onPick={onPick}
|
||||
onSetSkinTone={shouldNotBeCalled}
|
||||
ref={setReferenceElement}
|
||||
preferredReactionEmoji={draftPreferredReactions}
|
||||
selected={selected}
|
||||
|
|
|
@ -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'
|
||||
)}
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue