85 lines
2.0 KiB
TypeScript
85 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native';
|
|
import { Minus, Plus } from 'lucide-react-native';
|
|
import Animated, { useAnimatedStyle, withTiming, withSequence } from 'react-native-reanimated';
|
|
import * as Haptics from 'expo-haptics';
|
|
|
|
interface QuantityControlProps {
|
|
quantity: number;
|
|
onIncrease: () => void;
|
|
onDecrease: () => void;
|
|
}
|
|
|
|
const QuantityControl: React.FC<QuantityControlProps> = ({
|
|
quantity,
|
|
onIncrease,
|
|
onDecrease
|
|
}) => {
|
|
const animatedTextStyle = useAnimatedStyle(() => {
|
|
return {
|
|
opacity: 1,
|
|
};
|
|
});
|
|
|
|
const handleIncrease = () => {
|
|
onIncrease();
|
|
if (Platform.OS !== 'web') {
|
|
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
|
}
|
|
};
|
|
|
|
const handleDecrease = () => {
|
|
if (quantity > 0) {
|
|
onDecrease();
|
|
if (Platform.OS !== 'web') {
|
|
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<TouchableOpacity
|
|
style={[styles.button, { opacity: quantity <= 0 ? 0.5 : 1 }]}
|
|
onPress={handleDecrease}
|
|
disabled={quantity <= 0}
|
|
>
|
|
<Minus size={16} color={'#333333'} />
|
|
</TouchableOpacity>
|
|
|
|
<Animated.Text style={[styles.quantity, animatedTextStyle]}>
|
|
{quantity}
|
|
</Animated.Text>
|
|
|
|
<TouchableOpacity style={styles.button} onPress={handleIncrease}>
|
|
<Plus size={16} color={'#333333'} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
height: 36,
|
|
},
|
|
button: {
|
|
width: 36,
|
|
height: 36,
|
|
backgroundColor: '#E6D0B3',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderRadius: 6,
|
|
},
|
|
quantity: {
|
|
fontSize: 14,
|
|
color: '#333333',
|
|
paddingHorizontal: 16,
|
|
minWidth: 40,
|
|
textAlign: 'center',
|
|
},
|
|
});
|
|
|
|
export default QuantityControl; |