xref: /MusicFree/src/components/base/iconButton.tsx (revision 26f326364ffffc501faab6b3f1563421273758ae)

import React from 'react';
import {ColorKey, colorMap, iconSizeConst} from '@/constants/uiConst';
import {TapGestureHandler} from 'react-native-gesture-handler';
import {StyleSheet, View} from 'react-native';
import useColors from '@/hooks/useColors';
import {SvgProps} from 'react-native-svg';
import Icon, {IIconName} from '@/components/base/icon.tsx';

interface IIconButtonProps extends SvgProps {
    name: IIconName;
    style?: SvgProps['style'];
    sizeType?: keyof typeof iconSizeConst;
    fontColor?: ColorKey;
    color?: string;
    onPress?: () => void;
    accessibilityLabel?: string;
}
export function IconButtonWithGesture(props: IIconButtonProps) {
    const {
        name,
        sizeType: size = 'normal',
        fontColor = 'normal',
        onPress,
        style,
        accessibilityLabel,
    } = props;
    const colors = useColors();
    const textSize = iconSizeConst[size];
    const color = colors[colorMap[fontColor]];
    return (
        <TapGestureHandler onActivated={onPress}>
            <View>
                <Icon
                    accessible
                    accessibilityLabel={accessibilityLabel}
                    name={name}
                    color={color}
                    style={[{minWidth: textSize}, styles.textCenter, style]}
                    size={textSize}
                />
            </View>
        </TapGestureHandler>
    );
}

export default function IconButton(props: IIconButtonProps) {
    const {sizeType = 'normal', fontColor = 'normal', style, color} = props;
    const colors = useColors();
    const size = iconSizeConst[sizeType];

    return (
        <Icon
            {...props}
            color={color ?? colors[colorMap[fontColor]]}
            style={[{minWidth: size}, styles.textCenter, style]}
            size={size}
        />
    );
}

const styles = StyleSheet.create({
    textCenter: {
        height: '100%',
        textAlignVertical: 'center',
    },
});