Todo List

1import React, { useEffect, useRef, useState } from "react"
2import { Platform, Pressable, ScrollView, Text, View } from "react-native"
3import Animated, {
4  LinearTransition,
5  ReduceMotion,
6  useAnimatedProps,
7  useAnimatedStyle,
8  useReducedMotion,
9  useSharedValue,
10  withRepeat,
11  withSpring,
12  withTiming,
13} from "react-native-reanimated"
14import Svg, { Circle, Path } from "react-native-svg"
15const ACircle = Animated.createAnimatedComponent(Circle)
16export interface TodoListItem {
17  id: string
18  title: React.ReactNode
19  status: "pending" | "in-progress" | "completed" | "cancelled"
20  progress?: number
21  detail?: React.ReactNode
22}
23export interface TodoListProps {
24  items: TodoListItem[]
25  title?: string
26  open?: boolean
27  defaultOpen?: boolean
28  onOpenChange?: (open: boolean) => void
29  collapseOnComplete?: boolean
30  maxHeight?: number
31  backgroundColor?: string
32  textColor?: string
33  mutedColor?: string
34  accentColor?: string
35  testID?: string
36}
37function Status({ item, color }: { item: TodoListItem; color: string }) {
38  const reduced = useReducedMotion(),
39    rotation = useSharedValue(0)
40  useEffect(() => {
41    rotation.value =
42      item.status === "in-progress" && item.progress === undefined && !reduced
43        ? withRepeat(withTiming(360, { duration: 1000 }), -1)
44        : 0
45  }, [item.status, item.progress, reduced, rotation])
46  const spin = useAnimatedStyle(() => ({
47    transform: [{ rotate: `${rotation.value}deg` }],
48  }))
49  return (
50    <Animated.View style={spin}>
51      <Svg width={16} height={16} viewBox="0 0 20 20">
52        <Circle
53          cx={10}
54          cy={10}
55          r={7}
56          stroke={color}
57          strokeWidth={1.5}
58          opacity={item.status === "in-progress" ? 0.2 : 1}
59          strokeDasharray={item.status === "pending" ? "2 3" : undefined}
60          fill="none"
61        />
62        {item.status === "in-progress" && (
63          <Circle
64            cx={10}
65            cy={10}
66            r={7}
67            stroke={color}
68            strokeWidth={1.5}
69            strokeLinecap="round"
70            strokeDasharray={`${44 * (item.progress === undefined ? 0.68 : Math.min(100, Math.max(0, item.progress)) / 100)} 44`}
71            rotation={-90}
72            origin="10, 10"
73            fill="none"
74          />
75        )}
76        {item.status === "completed" && (
77          <Path
78            d="m6 10 3 3 5-6"
79            stroke={color}
80            strokeWidth={1.5}
81            fill="none"
82            strokeLinecap="round"
83            strokeLinejoin="round"
84          />
85        )}
86        {item.status === "cancelled" && (
87          <Path d="m7 7 6 6m0-6-6 6" stroke={color} strokeWidth={1.5} />
88        )}
89      </Svg>
90    </Animated.View>
91  )
92}
93export function TodoList({
94  items,
95  title = "To-dos",
96  open,
97  defaultOpen = true,
98  onOpenChange,
99  collapseOnComplete = true,
100  maxHeight = 248,
101  backgroundColor = "transparent",
102  textColor = "#f1f1f1",
103  mutedColor = "#868686",
104  accentColor = "#f1f1f1",
105  testID,
106}: TodoListProps) {
107  const [localOpen, setLocalOpen] = useState(defaultOpen),
108    [measured, setMeasured] = useState(0)
109  const visible = open ?? localOpen,
110    reduced = useReducedMotion(),
111    height = useSharedValue(0),
112    arrow = useSharedValue(visible ? 180 : 0)
113  const scroll = useRef<ScrollView>(null),
114    previousLength = useRef(items.length)
115  const completed = items.filter((i) => i.status === "completed").length
116  const change = (next: boolean) => {
117    if (open === undefined) setLocalOpen(next)
118    onOpenChange?.(next)
119  }
120  useEffect(() => {
121    if (!collapseOnComplete || !items.length) return
122    change(completed !== items.length)
123  }, [completed, items.length, collapseOnComplete])
124  useEffect(() => {
125    const target = visible ? Math.min(measured, maxHeight) : 0
126    height.value = reduced
127      ? target
128      : withSpring(target, { damping: 28, stiffness: 300 })
129    arrow.value = reduced
130      ? Number(visible) * 180
131      : withTiming(Number(visible) * 180, { duration: 180 })
132  }, [visible, measured, maxHeight, reduced, height, arrow])
133  useEffect(() => {
134    if (items.length > previousLength.current && visible)
135      requestAnimationFrame(() =>
136        scroll.current?.scrollToEnd({ animated: !reduced })
137      )
138    previousLength.current = items.length
139  }, [items.length, visible, reduced])
140  const disclosure = useAnimatedStyle(() => ({
141    height: height.value,
142    opacity: measured
143      ? Math.min(1, height.value / Math.min(measured, maxHeight))
144      : 0,
145  }))
146  const caret = useAnimatedStyle(() => ({
147    transform: [{ rotate: `${arrow.value}deg` }],
148  }))
149  return (
150    <View
151      testID={testID}
152      style={{ borderRadius: 16, backgroundColor, borderWidth: 1, borderColor: "rgba(255,255,255,0.035)" }}
153    >
154      <Pressable
155        accessibilityRole="button"
156        accessibilityState={{ expanded: visible }}
157        onPress={() => change(!visible)}
158        style={{
159          flexDirection: "row",
160          alignItems: "center",
161          gap: 10,
162          height: 44,
163          paddingHorizontal: 14,
164        }}
165      >
166        <View style={{ width: 24, height: 24, alignItems: "center", justifyContent: "center" }}>{completed === items.length && items.length > 0 ? <Svg width={22} height={22} viewBox="0 0 24 24"><Circle cx={12} cy={12} r={10} fill="#10b981" /><Path d="m7 12 3 3 7-7" fill="none" stroke="#fff" strokeWidth={2.25} strokeLinecap="round" strokeLinejoin="round" /></Svg> : <Svg width={16} height={16} viewBox="0 0 24 24"><Path d="M13 5h8M13 12h8M13 19h8M3 5l2 2 4-4M3 12l2 2 4-4M3 19l2 2 4-4" fill="none" stroke={mutedColor} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" /></Svg>}</View>
167        <Text style={{ flex: 1, fontSize: 14, fontFamily: Platform.OS === "web" ? '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif' : undefined, fontWeight: "500", color: textColor }}>{title}</Text>
168        <Text style={{ color: completed === items.length && items.length > 0 ? "#34d399" : mutedColor, fontSize: 12, fontWeight: "500", fontFamily: Platform.OS === "web" ? '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif' : undefined }}>
169          {completed}/{items.length}
170        </Text>
171        <Animated.View style={caret}><Svg width={14} height={14} viewBox="0 0 24 24"><Path d="m6 9 6 6 6-6" fill="none" stroke={mutedColor} opacity={0.5} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" /></Svg></Animated.View>
172      </Pressable>
173      <Animated.View
174        style={[{ overflow: "hidden" }, disclosure]}
175        pointerEvents={visible ? "auto" : "none"}
176        accessibilityElementsHidden={!visible}
177      >
178        <ScrollView
179          ref={scroll}
180          showsVerticalScrollIndicator={false}
181          onContentSizeChange={(_, h) => setMeasured(h)}
182          style={{ maxHeight }}
183          contentContainerStyle={{ paddingHorizontal: 8, paddingBottom: 8 }}
184        >
185          {items.map((item) => (
186            <Animated.View
187              key={item.id}
188              layout={LinearTransition.springify().reduceMotion(
189                ReduceMotion.System
190              )}
191              style={{
192                flexDirection: "row",
193                alignItems: "center",
194                gap: 10,
195                minHeight: 36,
196                paddingHorizontal: 6,
197                paddingVertical: 4,
198              }}
199            >
200              <Status
201                item={item}
202                color={item.status === "in-progress" ? accentColor : mutedColor}
203              />
204              <View style={{ flex: 1, minWidth: 0 }}>
205                <Text
206                  numberOfLines={1}
207                  style={{
208                    color:
209                      item.status === "completed" || item.status === "cancelled"
210                        ? "rgba(134,134,134,0.60)"
211                        : item.status === "pending" ? "rgba(134,134,134,0.65)" : textColor,
212                    fontSize: 14,
213                    lineHeight: 20,
214                    fontFamily: Platform.OS === "web" ? '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif' : undefined,
215                    textDecorationLine:
216                      item.status === "completed" ? "line-through" : "none",
217                  }}
218                >
219                  {item.title}
220                </Text>
221              </View>
222              {item.detail && (
223                  <Text
224                    style={{ fontSize: 14, lineHeight: 20, color: "rgba(134,134,134,0.55)", fontFamily: Platform.OS === "web" ? '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif' : undefined }}
225                  >
226                    {item.detail}
227                  </Text>
228                )}
229            </Animated.View>
230          ))}
231        </ScrollView>
232      </Animated.View>
233    </View>
234  )
235}