1import { View } from "react-native";
2
3import { AppText } from "./AppText";
4import { IconButton } from "./IconButton";
5import type { NumberFieldProps } from "./NumberField.types";
6
7export function NumberField(props: NumberFieldProps) {
8 const adjust = (amount: number) => {
9 if (props.disabled) return;
10 const next = Math.max(props.min, Math.min(props.max, props.value + amount));
11 if (next !== props.value) props.onValueChange(next);
12 };
13
14 return (
15 <View className="shrink-0 flex-row items-center">
16 <View
17 pointerEvents="none"
18 className="absolute inset-x-0 rounded-full bg-subtle"
19 style={{ height: 32 }}
20 />
21 <IconButton
22 icon="minus"
23 accessibilityLabel={`Decrease ${props.label}`}
24 disabled={props.disabled || props.value <= props.min}
25 onPress={() => adjust(-1)}
26 />
27 <AppText
28 textRole="body"
29 className="min-w-8 text-center"
30 style={{ fontVariant: ["tabular-nums"] }}
31 accessibilityLabel={`${props.label}: ${props.formatValue?.(props.value) ?? props.value}`}
32 accessibilityLiveRegion="polite"
33 >
34 {props.value}
35 </AppText>
36 <IconButton
37 icon="plus"
38 accessibilityLabel={`Increase ${props.label}`}
39 disabled={props.disabled || props.value >= props.max}
40 onPress={() => adjust(1)}
41 />
42 </View>
43 );
44}