29 lines
975 B
TypeScript
29 lines
975 B
TypeScript
|
import React from 'react';
|
||
|
|
import { Pressable } from 'react-native';
|
||
|
|
|
||
|
|
import styles, { EMOJI_BUTTON_SIZE } from './styles';
|
||
|
|
import { IEmoji } from '../../definitions/IEmoji';
|
||
|
|
import { useTheme } from '../../theme';
|
||
|
|
import { isIOS } from '../../lib/methods/helpers';
|
||
|
|
import { Emoji } from './Emoji';
|
||
|
|
|
||
|
|
export const PressableEmoji = ({ emoji, onPress }: { emoji: IEmoji; onPress: (emoji: IEmoji) => void }): React.ReactElement => {
|
||
|
|
const { colors } = useTheme();
|
||
|
|
return (
|
||
|
|
<Pressable
|
||
|
|
key={typeof emoji === 'string' ? emoji : emoji.name}
|
||
|
|
onPress={() => onPress(emoji)}
|
||
|
|
testID={`emoji-${typeof emoji === 'string' ? emoji : emoji.name}`}
|
||
|
|
android_ripple={{ color: colors.bannerBackground, borderless: true, radius: EMOJI_BUTTON_SIZE / 2 }}
|
||
|
|
style={({ pressed }: { pressed: boolean }) => [
|
||
|
|
styles.emojiButton,
|
||
|
|
{
|
||
|
|
backgroundColor: isIOS && pressed ? colors.bannerBackground : 'transparent'
|
||
|
|
}
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<Emoji emoji={emoji} />
|
||
|
|
</Pressable>
|
||
|
|
);
|
||
|
|
};
|