Task List

1import React, { useEffect, useRef, useState } from "react"
2import { AccessibilityInfo, Pressable, Text, View } from "react-native"
3import Animated, {
4  cancelAnimation,
5  LinearTransition,
6  ReduceMotion,
7  useAnimatedProps,
8  useAnimatedStyle,
9  useReducedMotion,
10  useSharedValue,
11  withDelay,
12  withSequence,
13  withSpring,
14  withTiming,
15} from "react-native-reanimated"
16import { scheduleOnRN } from "react-native-worklets"
17import Svg, { Circle, Path } from "react-native-svg"
18const APath = Animated.createAnimatedComponent(Path),
19  ACircle = Animated.createAnimatedComponent(Circle)
20export type TaskSize = "sm" | "md" | "lg"
21export interface Task {
22  id: string
23  label: string
24  done?: boolean
25}
26export interface TaskItemProps {
27  label: string
28  checked?: boolean
29  defaultChecked?: boolean
30  onCheckedChange?: (checked: boolean) => void
31  onSettled?: () => void
32  onReverted?: () => void
33  size?: TaskSize
34  accent?: string
35  backgroundColor?: string
36  textColor?: string
37}
38export function TaskItem({
39  label,
40  checked,
41  defaultChecked = false,
42  onCheckedChange,
43  onSettled,
44  onReverted,
45  size = "md",
46  accent = "#FF5F2E",
47  backgroundColor = "#1f1f1f",
48  textColor = "#e8e8e8",
49}: TaskItemProps) {
50  const [local, setLocal] = useState(defaultChecked),
51    done = checked ?? local,
52    reduced = useReducedMotion()
53  const tick = useSharedValue(Number(done)),
54    strike = useSharedValue(Number(done)),
55    nudge = useSharedValue(0),
56    initial = useRef(true)
57  const settled = useRef(onSettled),
58    reverted = useRef(onReverted)
59  settled.current = onSettled
60  reverted.current = onReverted
61  function finish(next: boolean) {
62    ;(next ? settled.current : reverted.current)?.()
63  }
64  useEffect(() => {
65    if (initial.current) {
66      initial.current = false
67      return
68    }
69    cancelAnimation(tick)
70    cancelAnimation(strike)
71    cancelAnimation(nudge)
72    if (reduced) {
73      tick.value = Number(done)
74      strike.value = Number(done)
75      nudge.value = 0
76      finish(done)
77      return
78    }
79    if (done) {
80      tick.value = withTiming(1, { duration: 240 })
81      strike.value = withDelay(240, withTiming(1, { duration: 380 }))
82      nudge.value = withDelay(
83        620,
84        withSequence(
85          withTiming(8, { duration: 100 }),
86          withTiming(-2, { duration: 90 }),
87          withTiming(0, { duration: 110 }, (finished) => {
88            if (finished) scheduleOnRN(finish, true)
89          })
90        )
91      )
92    } else {
93      strike.value = withTiming(0, { duration: 280 })
94      tick.value = withDelay(
95        280,
96        withTiming(0, { duration: 200 }, (finished) => {
97          if (finished) scheduleOnRN(finish, false)
98        })
99      )
100      nudge.value = withSpring(0, { stiffness: 320, damping: 30 })
101    }
102  }, [done, reduced, tick, strike, nudge])
103  const row = useAnimatedStyle(() => ({
104    transform: [{ translateX: nudge.value }],
105  }))
106  const line = useAnimatedStyle(() => ({
107    transformOrigin: "left center",
108    transform: [{ scaleX: strike.value }],
109    opacity: strike.value,
110  }))
111  const checkProps = useAnimatedProps(() => ({
112    strokeDashoffset: 16 * (1 - tick.value),
113  }))
114  const circleProps = useAnimatedProps(() => ({
115    fillOpacity: tick.value,
116    strokeOpacity: 1 - tick.value,
117  }))
118  const fontSize = size === "sm" ? 13 : size === "lg" ? 17 : 15,
119    diameter = size === "sm" ? 20 : size === "lg" ? 28 : 24
120  return (
121    <Animated.View
122      layout={LinearTransition.springify()
123        .stiffness(320)
124        .damping(30)
125        .reduceMotion(ReduceMotion.System)}
126      style={row}
127    >
128      <Pressable
129        accessibilityRole="checkbox"
130        accessibilityLabel={label}
131        aria-checked={done}
132        accessibilityState={{ checked: done }}
133        onPress={() => {
134          if (checked === undefined) setLocal(!done)
135          onCheckedChange?.(!done)
136        }}
137        style={({ pressed }) => ({
138          alignSelf: "flex-start",
139          flexDirection: "row",
140          gap: 12,
141          alignItems: "center",
142          paddingHorizontal: 14,
143          paddingVertical: 10,
144          borderRadius: 14,
145          backgroundColor,
146          opacity: pressed ? 0.8 : 1,
147        })}
148      >
149        <Svg width={diameter} height={diameter} viewBox="0 0 24 24">
150          <ACircle
151            animatedProps={circleProps}
152            cx={12}
153            cy={12}
154            r={10}
155            fill={accent}
156            stroke="#777"
157            strokeWidth={1}
158            strokeDasharray="2 3"
159          />
160          <APath
161            animatedProps={checkProps}
162            d="m7 12 3 3 7-7"
163            fill="none"
164            stroke="#fff"
165            strokeWidth={2}
166            strokeLinecap="round"
167            strokeLinejoin="round"
168            strokeDasharray={16}
169          />
170        </Svg>
171        <View style={{ flexShrink: 1 }}>
172          <Text
173            style={{ color: textColor, fontSize, lineHeight: fontSize + 9 }}
174          >
175            {label}
176          </Text>
177          <Animated.View
178            pointerEvents="none"
179            style={[
180              {
181                position: "absolute",
182                left: 0,
183                right: 0,
184                top: "50%",
185                height: size === "lg" ? 2.5 : size === "sm" ? 1.5 : 2,
186                backgroundColor: textColor,
187              },
188              line,
189            ]}
190          />
191        </View>
192      </Pressable>
193    </Animated.View>
194  )
195}
196export interface TaskListProps {
197  tasks?: Task[]
198  defaultTasks?: Task[]
199  onTasksChange?: (tasks: Task[]) => void
200  size?: TaskSize
201  accent?: string
202  backgroundColor?: string
203  textColor?: string
204  testID?: string
205}
206export function TaskList({
207  tasks,
208  defaultTasks = [],
209  onTasksChange,
210  size = "md",
211  accent = "#FF5F2E",
212  backgroundColor = "#1f1f1f",
213  textColor = "#e8e8e8",
214  testID,
215}: TaskListProps) {
216  const [local, setLocal] = useState(defaultTasks),
217    current = tasks ?? local
218  const [parked, setParked] = useState<Set<string>>(
219    () => new Set(current.filter((t) => t.done).map((t) => t.id))
220  )
221  const ordered = [
222    ...current.filter((t) => !parked.has(t.id)),
223    ...current.filter((t) => parked.has(t.id)),
224  ]
225  function change(id: string, done: boolean) {
226    const next = current.map((t) => (t.id === id ? { ...t, done } : t))
227    if (tasks === undefined) setLocal(next)
228    onTasksChange?.(next)
229    AccessibilityInfo.announceForAccessibility(
230      `${current.find((t) => t.id === id)?.label} ${done ? "completed" : "reopened"}`
231    )
232  }
233  return (
234    <View
235      testID={testID}
236      style={{ alignSelf: "center", gap: size === "sm" ? 6 : size === "lg" ? 10 : 8 }}
237    >
238      {ordered.map((task) => (
239        <TaskItem
240          key={task.id}
241          label={task.label}
242          checked={!!task.done}
243          onCheckedChange={(done) => change(task.id, done)}
244          onSettled={() => setParked((p) => new Set([...p, task.id]))}
245          onReverted={() =>
246            setParked((p) => {
247              const next = new Set(p)
248              next.delete(task.id)
249              return next
250            })
251          }
252          size={size}
253          accent={accent}
254          backgroundColor={backgroundColor}
255          textColor={textColor}
256        />
257      ))}
258    </View>
259  )
260}
261export default TaskList