37 lines
1.1 KiB
TypeScript
37 lines
1.1 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';
|
||
|
|
|
||
|
|
const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 };
|
||
|
|
|
||
|
|
const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.ReactElement => {
|
||
|
|
const { colors } = useTheme();
|
||
|
|
return (
|
||
|
|
<View style={[styles.footerContainer, { borderTopColor: colors.borderColor }]}>
|
||
|
|
<Pressable
|
||
|
|
onPress={onSearchPressed}
|
||
|
|
hitSlop={BUTTON_HIT_SLOP}
|
||
|
|
style={({ pressed }) => [styles.footerButtonsContainer, { opacity: pressed ? 0.7 : 1 }]}
|
||
|
|
testID='emoji-picker-search'
|
||
|
|
>
|
||
|
|
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='search' />
|
||
|
|
</Pressable>
|
||
|
|
|
||
|
|
<Pressable
|
||
|
|
onPress={onBackspacePressed}
|
||
|
|
hitSlop={BUTTON_HIT_SLOP}
|
||
|
|
style={({ pressed }) => [styles.footerButtonsContainer, { opacity: pressed ? 0.7 : 1 }]}
|
||
|
|
testID='emoji-picker-backspace'
|
||
|
|
>
|
||
|
|
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' />
|
||
|
|
</Pressable>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Footer;
|