1import React from 'react'; 2import {ColorKey, colorMap, iconSizeConst} from '@/constants/uiConst'; 3import {TapGestureHandler} from 'react-native-gesture-handler'; 4import {StyleSheet, View} from 'react-native'; 5import useColors from '@/hooks/useColors'; 6import {SvgProps} from 'react-native-svg'; 7import Icon, {IIconName} from '@/components/base/icon.tsx'; 8 9interface IIconButtonProps extends SvgProps { 10 name: IIconName; 11 style?: SvgProps['style']; 12 sizeType?: keyof typeof iconSizeConst; 13 fontColor?: ColorKey; 14 color?: string; 15 onPress?: () => void; 16 accessibilityLabel?: string; 17} 18export function IconButtonWithGesture(props: IIconButtonProps) { 19 const { 20 name, 21 sizeType: size = 'normal', 22 fontColor = 'normal', 23 onPress, 24 style, 25 accessibilityLabel, 26 } = props; 27 const colors = useColors(); 28 const textSize = iconSizeConst[size]; 29 const color = colors[colorMap[fontColor]]; 30 return ( 31 <TapGestureHandler onActivated={onPress}> 32 <View> 33 <Icon 34 accessible 35 accessibilityLabel={accessibilityLabel} 36 name={name} 37 color={color} 38 style={[{minWidth: textSize}, styles.textCenter, style]} 39 size={textSize} 40 /> 41 </View> 42 </TapGestureHandler> 43 ); 44} 45 46export default function IconButton(props: IIconButtonProps) { 47 const {sizeType = 'normal', fontColor = 'normal', style, color} = props; 48 const colors = useColors(); 49 const size = iconSizeConst[sizeType]; 50 51 return ( 52 <Icon 53 {...props} 54 color={color ?? colors[colorMap[fontColor]]} 55 style={[{minWidth: size}, styles.textCenter, style]} 56 size={size} 57 /> 58 ); 59} 60 61const styles = StyleSheet.create({ 62 textCenter: { 63 height: '100%', 64 textAlignVertical: 'center', 65 }, 66}); 67