Rocket.Chat.ReactNative/app/containers/EmojiPicker/Footer.tsx

42 lines
1.4 KiB
TypeScript

import React from 'react';
import { View, Pressable } from 'react-native';
import { useTheme } from '../../theme';
import { CustomIcon } from '../CustomIcon';
import styles from './styles';
import { IFooterProps } from './interfaces';
import { isIOS } from '../../lib/methods/helpers';
const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.ReactElement => {
const { colors } = useTheme();
return (
<View style={[styles.footerContainer, { borderTopColor: colors.strokeExtraLight }]}>
<Pressable
onPress={onSearchPressed}
android_ripple={{ color: colors.buttonBackgroundSecondaryPress }}
style={({ pressed }) => [
styles.footerButtonsContainer,
{ backgroundColor: isIOS && pressed ? colors.buttonBackgroundSecondaryPress : 'transparent' }
]}
testID='emoji-picker-search'
>
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='search' />
</Pressable>
<Pressable
onPress={onBackspacePressed}
android_ripple={{ color: colors.buttonBackgroundSecondaryPress }}
style={({ pressed }) => [
styles.footerButtonsContainer,
{ backgroundColor: isIOS && pressed ? colors.buttonBackgroundSecondaryPress : 'transparent' }
]}
testID='emoji-picker-backspace'
>
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' />
</Pressable>
</View>
);
};
export default Footer;