64 lines
No EOL
1.9 KiB
TypeScript
64 lines
No EOL
1.9 KiB
TypeScript
import React from 'react';
|
|
import { View, TouchableOpacity, Text } from 'react-native';
|
|
import { MaterialIcons } from '@expo/vector-icons';
|
|
import tw from '../lib/tailwind';
|
|
import { colors } from '../lib/theme-colors';
|
|
|
|
interface QuantifierProps {
|
|
value: number;
|
|
setValue: (value: number) => void;
|
|
step?: number;
|
|
unit?: string | { shortNotation: string };
|
|
min?: number;
|
|
max?: number;
|
|
}
|
|
|
|
const Quantifier: React.FC<QuantifierProps> = ({
|
|
value,
|
|
setValue,
|
|
step = 1,
|
|
unit,
|
|
min = 0,
|
|
max
|
|
}) => {
|
|
|
|
const unitText = typeof unit === 'object' ? unit?.shortNotation : unit;
|
|
|
|
|
|
return (
|
|
<View style={tw`flex-row items-center bg-white rounded-xl shadow-sm border border-gray-200 p-1`}>
|
|
<TouchableOpacity
|
|
style={tw`w-8 h-8 rounded-lg bg-gray-50 items-center justify-center border border-gray-100 active:bg-gray-100`}
|
|
onPress={() => setValue(Math.max(min, value - step))}
|
|
activeOpacity={0.7}
|
|
>
|
|
<MaterialIcons name="remove" size={18} color={value <= min ? "#D1D5DB" : "#4B5563"} />
|
|
</TouchableOpacity>
|
|
|
|
<View style={tw`flex-1 flex-row items-center justify-center px-1`}>
|
|
<Text style={tw`text-center text-gray-900 font-bold text-base`}>
|
|
{value}
|
|
</Text>
|
|
{/* {unitText && (
|
|
//hide unit text for now
|
|
<Text style={tw`text-xs text-gray-400 font-medium ml-0.5 mt-0.5`}>
|
|
{unitText}
|
|
</Text>
|
|
)} */}
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
style={tw`w-8 h-8 rounded-lg bg-brand500 items-center justify-center shadow-sm active:bg-brand600`}
|
|
onPress={() => {
|
|
if (max !== undefined && value + step > max) return;
|
|
setValue(value + step);
|
|
}}
|
|
activeOpacity={0.7}
|
|
>
|
|
<MaterialIcons name="add" size={18} color="#FFFFFF" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Quantifier; |