63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import { useAppTheme } from '@theme';
|
|
import { getStyles } from './numericKeypad.styles';
|
|
|
|
interface NumericKeypadProps {
|
|
onPress: (digit: string) => void;
|
|
onBackspace: () => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const NumericKeypad: React.FC<NumericKeypadProps> = ({
|
|
onPress,
|
|
onBackspace,
|
|
disabled = false,
|
|
}) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const keys = [
|
|
['1', '2', '3'],
|
|
['4', '5', '6'],
|
|
['7', '8', '9'],
|
|
['', '0', '⌫'],
|
|
];
|
|
|
|
const handlePress = (val: string) => {
|
|
if (disabled) return;
|
|
if (val === '⌫') {
|
|
onBackspace();
|
|
} else if (val !== '') {
|
|
onPress(val);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{keys.map((row, rIndex) => (
|
|
<View key={rIndex} style={styles.row}>
|
|
{row.map((val, cIndex) => {
|
|
if (val === '') {
|
|
return <View key={cIndex} style={styles.emptyKey} />;
|
|
}
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
key={cIndex}
|
|
style={styles.keyButton}
|
|
activeOpacity={0.7}
|
|
onPress={() => handlePress(val)}
|
|
disabled={disabled}
|
|
>
|
|
<Text style={styles.keyText}>{val}</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
};
|
|
export default NumericKeypad;
|