Duration Picker

1import React, { useEffect, useRef, useState } from "react"
2import { Platform, Pressable, Text, TextInput, View } from "react-native"
3import Animated, {
4  useAnimatedProps,
5  useAnimatedStyle,
6  useReducedMotion,
7  useSharedValue,
8  withSequence,
9  withSpring,
10  withTiming,
11} from "react-native-reanimated"
12import Svg, { Path } from "react-native-svg"
13const APath = Animated.createAnimatedComponent(Path)
14export type DurationValue = { hours: number; minutes: number }
15export interface DurationPickerProps {
16  value?: DurationValue
17  defaultValue?: DurationValue
18  onChange?: (value: DurationValue) => void
19  onConfirm?: (value: DurationValue) => void
20  onEditingChange?: (editing: boolean) => void
21  defaultEditing?: boolean
22  maxHours?: number
23  maxMinutes?: number
24  hoursLabel?: string
25  minutesLabel?: string
26  disabled?: boolean
27  backgroundColor?: string
28  textColor?: string
29  mutedColor?: string
30  radius?: number
31  testID?: string
32}
33const pen = [
34  [3, 21],
35  [3.8, 16.3],
36  [5, 14],
37  [15.5, 3.6],
38  [18.3, 3.6],
39  [20.4, 5.7],
40  [20.4, 8.5],
41  [9.8, 19.1],
42  [7.7, 20.2],
43]
44const tick = [
45  [1.6, 12.9],
46  [3.1, 11.6],
47  [6.1, 15.2],
48  [8, 17.5],
49  [20.9, 3.6],
50  [22.4, 4.9],
51  [17.6, 10.1],
52  [8, 20.5],
53  [4.8, 16.7],
54]
55export function DurationPicker({
56  value,
57  defaultValue = { hours: 0, minutes: 0 },
58  onChange,
59  onConfirm,
60  onEditingChange,
61  defaultEditing = false,
62  maxHours = 24,
63  maxMinutes = 60,
64  hoursLabel = "Hr.",
65  minutesLabel = "Min.",
66  disabled = false,
67  backgroundColor = "#262626",
68  textColor = "#ffffff",
69  mutedColor = "rgba(134,133,147,.7)",
70  radius = 12,
71  testID,
72}: DurationPickerProps) {
73  const [local, setLocal] = useState(defaultValue),
74    [editing, setEditing] = useState(defaultEditing),
75    [hours, setHours] = useState((value ?? defaultValue).hours ? String((value ?? defaultValue).hours) : ""),
76    [minutes, setMinutes] = useState((value ?? defaultValue).minutes ? String((value ?? defaultValue).minutes) : "")
77  const reduced = useReducedMotion(),
78    progress = useSharedValue(Number(defaultEditing)),
79    shake = useSharedValue(0),
80    input = useRef<TextInput>(null)
81  useEffect(() => {
82    if (value) {
83      setHours(value.hours ? String(value.hours) : "")
84      setMinutes(value.minutes ? String(value.minutes) : "")
85    }
86  }, [value?.hours, value?.minutes])
87  useEffect(() => {
88    progress.value = reduced
89      ? Number(editing)
90      : withSpring(Number(editing), { stiffness: 200, damping: 28 })
91    if (editing) input.current?.focus()
92  }, [editing, reduced, progress])
93  const group = useAnimatedStyle(() => ({
94    gap: 8 * Math.max(0, Math.min(1, progress.value)),
95    transform: [{ translateX: shake.value }],
96  }))
97  const left = useAnimatedStyle(() => ({
98    borderTopRightRadius: radius * progress.value,
99    borderBottomRightRadius: radius * progress.value,
100    paddingLeft: 8,
101    paddingRight: 3 + 9 * progress.value,
102  }))
103  const middle = useAnimatedStyle(() => ({
104    borderRadius: radius * progress.value,
105    paddingLeft: 9 * progress.value,
106    paddingRight: 3 + 9 * progress.value,
107    marginLeft: progress.value - 1,
108  }))
109  const right = useAnimatedStyle(() => ({
110    borderTopLeftRadius: radius * progress.value,
111    borderBottomLeftRadius: radius * progress.value,
112    marginLeft: progress.value - 1,
113  }))
114  const icon = useAnimatedProps(() => ({
115    d:
116      pen
117        .map(
118          (point, i) =>
119            `${i ? "L" : "M"}${point[0] + (tick[i][0] - point[0]) * progress.value},${point[1] + (tick[i][1] - point[1]) * progress.value}`
120        )
121        .join(" ") + "Z",
122  }))
123  function update(field: "hours" | "minutes", text: string) {
124    const max = field === "hours" ? maxHours : maxMinutes
125    if (!/^\d*$/.test(text) || Number(text) > max) {
126      if (!reduced)
127        shake.value = withSequence(
128          withTiming(-3, { duration: 50 }),
129          withTiming(3, { duration: 60 }),
130          withTiming(0, { duration: 80 })
131        )
132      return
133    }
134    if (field === "hours") setHours(text)
135    else setMinutes(text)
136    const next = {
137      hours: Number(field === "hours" ? text : hours),
138      minutes: Number(field === "minutes" ? text : minutes),
139    }
140    if (value === undefined) setLocal(next)
141    onChange?.(next)
142  }
143  const fieldStyle = {
144    color: textColor,
145    fontSize: 16,
146    fontWeight: "600" as const,
147    padding: 0,
148    width: editing ? 44 : 22,
149    fontFamily: Platform.OS === "web" ? "Arial" : undefined,
150    ...(Platform.OS === "web" ? { outlineWidth: 0 } : {}),
151    textAlign: "center" as const,
152  }
153  return (
154    <Animated.View
155      testID={testID}
156      style={[
157        { flexDirection: "row", justifyContent: "center", alignSelf: "center" },
158        group,
159      ]}
160    >
161      <Animated.View
162        style={[
163          {
164            height: 48,
165            backgroundColor,
166            flexDirection: "row",
167            alignItems: "center",
168            gap: 4,
169            borderTopLeftRadius: radius,
170            borderBottomLeftRadius: radius,
171            borderCurve: "continuous",
172          },
173          left,
174        ]}
175      >
176        <TextInput
177          ref={input}
178          accessibilityLabel="Hours"
179          editable={editing && !disabled}
180          keyboardType="number-pad"
181          selectTextOnFocus
182          value={hours}
183          placeholder={editing ? "" : "0"}
184          placeholderTextColor={textColor}
185          onChangeText={(text) => update("hours", text)}
186          style={fieldStyle}
187        />
188        <Text style={{ color: mutedColor, fontSize: 16, fontWeight: "600", fontFamily: fieldStyle.fontFamily }}>{hoursLabel}</Text>
189      </Animated.View>
190      <Animated.View
191        style={[
192          {
193            height: 48,
194            backgroundColor,
195            flexDirection: "row",
196            alignItems: "center",
197            gap: 4,
198            borderCurve: "continuous",
199          },
200          middle,
201        ]}
202      >
203        <TextInput
204          accessibilityLabel="Minutes"
205          editable={editing && !disabled}
206          keyboardType="number-pad"
207          selectTextOnFocus
208          value={minutes}
209          placeholder={editing ? "" : "0"}
210          placeholderTextColor={textColor}
211          onChangeText={(text) => update("minutes", text)}
212          style={fieldStyle}
213        />
214        <Text style={{ color: mutedColor, fontSize: 16, fontWeight: "500", fontFamily: fieldStyle.fontFamily }}>{minutesLabel}</Text>
215      </Animated.View>
216      <Animated.View
217        style={[
218          {
219            backgroundColor,
220            borderTopRightRadius: radius,
221            borderBottomRightRadius: radius,
222            borderCurve: "continuous",
223          },
224          right,
225        ]}
226      >
227        <Pressable
228          disabled={disabled}
229          accessibilityRole="button"
230          accessibilityLabel={editing ? "Confirm duration" : "Edit duration"}
231          onPress={() => {
232            const next = !editing
233            setEditing(next)
234            onEditingChange?.(next)
235            if (!next)
236              onConfirm?.({ hours: Number(hours), minutes: Number(minutes) })
237          }}
238          style={{
239            width: 48,
240            height: 48,
241            alignItems: "center",
242            justifyContent: "center",
243          }}
244        >
245          <Svg width={18} height={18} viewBox="0 0 24 24">
246            <APath animatedProps={icon} fill={mutedColor} />
247          </Svg>
248        </Pressable>
249      </Animated.View>
250    </Animated.View>
251  )
252}
253export default DurationPicker