SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use the correct skin tone when selecting an emoji from the picker (#7125)

Browse Source
This commit is contained in:
Elias Nahum
2023-02-15 11:19:14 +02:00
committed by GitHub
parent 9d6558e6e8
commit ab5084ce48
2 changed files with 35 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/touchable_emoji/index.tsx
View File

@@ -25,19 +25,13 @@ const hitSlop = {top: 10, bottom: 10, left: 10, right: 10};
const TouchableEmoji = ({category, name, onEmojiPress, size = 30, style}: Props) => { const TouchableEmoji = ({category, name, onEmojiPress, size = 30, style}: Props) => {
const onPress = useCallback(preventDoubleTap(() => onEmojiPress(name)), []); const onPress = useCallback(preventDoubleTap(() => onEmojiPress(name)), []);
let emoji;
if (category && CATEGORIES_WITH_SKINS.includes(category)) { if (category && CATEGORIES_WITH_SKINS.includes(category)) {
emoji = ( return (
<SkinnedEmoji <SkinnedEmoji
name={name} name={name}
onEmojiPress={onEmojiPress}
size={size} size={size}
/> style={style}
);
} else {
emoji = (
<Emoji
emojiName={name}
size={size}
/> />
); );
} }
@@ -52,7 +46,10 @@ const TouchableEmoji = ({category, name, onEmojiPress, size = 30, style}: Props)
style={style} style={style}
type={'opacity'} type={'opacity'}
> >
{emoji} <Emoji
emojiName={name}
size={size}
/>
</TouchableWithFeedback> </TouchableWithFeedback>
</View> </View>
); );

34
app/components/touchable_emoji/skinned_emoji.tsx
View File

@@ -1,19 +1,26 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React, {useMemo} from 'react'; import React, {useCallback, useMemo} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {useEmojiSkinTone} from '@app/hooks/emoji_category_bar'; import {useEmojiSkinTone} from '@app/hooks/emoji_category_bar';
import {preventDoubleTap} from '@app/utils/tap';
import Emoji from '@components/emoji'; import Emoji from '@components/emoji';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {skinCodes} from '@utils/emoji'; import {skinCodes} from '@utils/emoji';
import {isValidNamedEmoji} from '@utils/emoji/helpers'; import {isValidNamedEmoji} from '@utils/emoji/helpers';
type Props = { type Props = {
name: string; name: string;
onEmojiPress: (emoji: string) => void;
size?: number; size?: number;
style?: StyleProp<ViewStyle>;
} }
const SkinnedEmoji = ({name, size = 30}: Props) => { const hitSlop = {top: 10, bottom: 10, left: 10, right: 10};
const SkinnedEmoji = ({name, onEmojiPress, size = 30, style}: Props) => {
const skinTone = useEmojiSkinTone(); const skinTone = useEmojiSkinTone();
const emojiName = useMemo(() => { const emojiName = useMemo(() => {
const skinnedEmoji = `${name}_${skinCodes[skinTone]}`; const skinnedEmoji = `${name}_${skinCodes[skinTone]}`;
@@ -23,11 +30,26 @@ const SkinnedEmoji = ({name, size = 30}: Props) => {
return skinnedEmoji; return skinnedEmoji;
}, [name, skinTone]); }, [name, skinTone]);
const onPress = useCallback(preventDoubleTap(() => {
onEmojiPress(emojiName);
}), [emojiName]);
return ( return (
<Emoji <View
emojiName={emojiName} style={style}
size={size} >
/> <TouchableWithFeedback
hitSlop={hitSlop}
onPress={onPress}
style={style}
type={'opacity'}
>
<Emoji
emojiName={emojiName}
size={size}
/>
</TouchableWithFeedback>
</View>
); );
}; };