Inline Action

1import React, { useEffect, useId, useRef, useState } from "react"
2import {
3  Pressable,
4  Platform,
5  StyleSheet,
6  Text,
7  View,
8  useColorScheme,
9  useWindowDimensions,
10  type StyleProp,
11  type ViewStyle,
12} from "react-native"
13import Animated, {
14  Easing,
15  ReduceMotion,
16  cancelAnimation,
17  interpolateColor,
18  useAnimatedProps,
19  useAnimatedStyle,
20  useSharedValue,
21  withDelay,
22  withRepeat,
23  withSpring,
24  withTiming,
25} from "react-native-reanimated"
26import Svg, {
27  ClipPath,
28  Defs,
29  FeGaussianBlur,
30  Filter,
31  G,
32  LinearGradient,
33  Path,
34  Rect,
35  Stop,
36  Text as SvgText,
37} from "react-native-svg"
38type Status = "idle" | "loading" | "success"
39export type InlineActionProps = {
40  label?: string
41  icon?: React.ReactNode
42  actionText?: string
43  onAction: () => Promise<void>
44  onError?: (error: unknown) => void
45  theme?: "light" | "dark" | "system"
46  width?: number
47  radius?: number
48  fontSize?: number
49  actionFontSize?: number
50  backgroundColor?: string
51  borderColor?: string
52  foregroundColor?: string
53  surfaceColor?: string
54  progressTrackColor?: string
55  progressColor?: string
56  successColor?: string
57  checkColor?: string
58  style?: StyleProp<ViewStyle>
59  testID?: string
60}
61const AnimatedGroup = Animated.createAnimatedComponent(G)
62const AnimatedRect = Animated.createAnimatedComponent(Rect)
63const IS_WEB = Platform.OS === "web"
64class BlurTarget extends FeGaussianBlur {
65  setNativeProps = (
66    props: React.ComponentProps<typeof FeGaussianBlur> & {
67      style?: React.ComponentProps<typeof FeGaussianBlur>
68    }
69  ) => {
70    if (IS_WEB) {
71      const amount = props.style?.stdDeviation ?? props.stdDeviation
72      const element = (
73        this as unknown as {
74          elementRef?: {
75            current: {
76              setAttribute: (name: string, value: string) => void
77            } | null
78          }
79        }
80      ).elementRef?.current
81      if (amount !== undefined)
82        element?.setAttribute("stdDeviation", String(amount))
83    } else {
84      this.root?.setNativeProps(props)
85    }
86  }
87}
88const AnimatedBlur = Animated.createAnimatedComponent(BlurTarget)
89const AnimatedText = Animated.createAnimatedComponent(SvgText)
90const SPRING = {
91  stiffness: 400,
92  damping: 35,
93  mass: 1,
94  reduceMotion: ReduceMotion.System,
95} as const
96const COLOR_EASE = Easing.bezier(0.4, 0, 0.2, 1)
97export function InlineAction({
98  label = "Calendar",
99  icon,
100  actionText = "Sync Events",
101  onAction,
102  onError,
103  theme = "system",
104  width,
105  radius = 999,
106  fontSize,
107  actionFontSize,
108  backgroundColor,
109  borderColor,
110  foregroundColor,
111  surfaceColor,
112  progressTrackColor,
113  progressColor,
114  successColor,
115  checkColor,
116  style,
117  testID,
118}: InlineActionProps) {
119  const system = useColorScheme()
120  const dark = theme === "dark" || (theme === "system" && system === "dark")
121  const { fontScale, width: viewportWidth } = useWindowDimensions()
122  const large = viewportWidth >= 640
123  const cardWidth = width ?? (viewportWidth >= 768 ? 384 : 320)
124  const labelSize = fontSize ?? (large ? 18 : 15)
125  const actionSize = actionFontSize ?? (large ? 15 : 13)
126  const iconSize = large ? 52 : 44
127  const [status, setStatus] = useState<Status>("idle")
128  const phase = useRef<Status>("idle")
129  const mounted = useRef(true)
130  const filterId = `inline-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`
131  const idle = useSharedValue(1)
132  const loading = useSharedValue(0)
133  const success = useSharedValue(0)
134  const actionWidth = useSharedValue(120)
135  const travel = useSharedValue(0)
136  const shine = useSharedValue(0)
137  const colorTheme = useSharedValue(dark ? 1 : 0)
138  const detailTheme = useSharedValue(dark ? 1 : 0)
139  useEffect(() => {
140    mounted.current = true
141    return () => {
142      mounted.current = false
143    }
144  }, [])
145  useEffect(() => {
146    colorTheme.set(
147      withTiming(dark ? 1 : 0, { duration: 300, easing: COLOR_EASE })
148    )
149    detailTheme.set(
150      withTiming(dark ? 1 : 0, { duration: 150, easing: COLOR_EASE })
151    )
152  }, [dark, colorTheme, detailTheme])
153  useEffect(() => {
154    idle.set(withSpring(status === "idle" ? 1 : 0, SPRING))
155    loading.set(withSpring(status === "loading" ? 1 : 0, SPRING))
156    success.set(withSpring(status === "success" ? 1 : 0, SPRING))
157    actionWidth.set(withSpring(status === "success" ? 48 : 120, SPRING))
158    if (status === "loading") {
159      travel.set(0)
160      travel.set(
161        withRepeat(
162          withTiming(1, {
163            duration: 800,
164            easing: Easing.bezier(0.42, 0, 0.58, 1),
165            reduceMotion: ReduceMotion.System,
166          }),
167          -1,
168          true
169        )
170      )
171    }
172    if (status === "success") {
173      shine.set(0)
174      shine.set(
175        withDelay(
176          100,
177          withTiming(1, {
178            duration: 700,
179            easing: Easing.bezier(0, 0, 0.58, 1),
180            reduceMotion: ReduceMotion.System,
181          })
182        )
183      )
184      const timer = setTimeout(() => {
185        phase.current = "idle"
186        setStatus("idle")
187      }, 2000)
188      return () => clearTimeout(timer)
189    }
190    return () => {
191      cancelAnimation(travel)
192    }
193  }, [status, idle, loading, success, actionWidth, travel, shine])
194  const trigger = async () => {
195    if (phase.current !== "idle") return
196    phase.current = "loading"
197    setStatus("loading")
198    try {
199      await onAction()
200      if (!mounted.current) return
201      phase.current = "success"
202      setStatus("success")
203    } catch (error) {
204      if (!mounted.current) return
205      phase.current = "idle"
206      setStatus("idle")
207      onError?.(error)
208    }
209  }
210  const cardStyle = useAnimatedStyle(() => ({
211    backgroundColor:
212      backgroundColor ??
213      interpolateColor(colorTheme.get(), [0, 1], ["#ffffff", "#18181b"]),
214    borderColor:
215      borderColor ??
216      interpolateColor(colorTheme.get(), [0, 1], ["#f0f0f0", "#27272a"]),
217  }))
218  const surfaceStyle = useAnimatedStyle(() => ({
219    backgroundColor:
220      surfaceColor ??
221      interpolateColor(detailTheme.get(), [0, 1], ["#f0f0f0", "#27272a"]),
222  }))
223  const labelStyle = useAnimatedStyle(() => ({
224    color:
225      foregroundColor ??
226      interpolateColor(detailTheme.get(), [0, 1], ["#000000", "#ffffff"]),
227  }))
228  const actionStyle = useAnimatedStyle(() => ({ width: actionWidth.get() }))
229  const idleProps = useAnimatedProps(() => ({
230    opacity: Math.max(0, Math.min(1, idle.get())),
231  }))
232  const loadingProps = useAnimatedProps(() => ({
233    opacity: Math.max(0, Math.min(1, loading.get())),
234  }))
235  const successProps = useAnimatedProps(() => ({
236    opacity: Math.max(0, Math.min(1, success.get())),
237  }))
238  const idleBlur = useAnimatedProps(() => {
239    const amount = Math.max(0, 4 * (1 - idle.get()))
240    return {
241      stdDeviation: amount,
242      stdDeviationX: amount,
243      stdDeviationY: amount,
244    }
245  })
246  const loadingBlur = useAnimatedProps(() => {
247    const amount = Math.max(0, 4 * (1 - loading.get()))
248    return {
249      stdDeviation: amount,
250      stdDeviationX: amount,
251      stdDeviationY: amount,
252    }
253  })
254  const successBlur = useAnimatedProps(() => {
255    const amount = Math.max(0, 4 * (1 - success.get()))
256    return {
257      stdDeviation: amount,
258      stdDeviationX: amount,
259      stdDeviationY: amount,
260    }
261  })
262  const labelProps = useAnimatedProps(() => ({
263    fill:
264      foregroundColor ??
265      interpolateColor(detailTheme.get(), [0, 1], ["#000000", "#ffffff"]),
266  }))
267  const trackProps = useAnimatedProps(() => ({
268    width: Math.max(0, actionWidth.get() - 16),
269  }))
270  const barProps = useAnimatedProps(() => ({
271    x: 8 + Math.max(0, actionWidth.get() - 16) * 0.7 * travel.get(),
272    width: Math.max(0, actionWidth.get() - 16) * 0.3,
273  }))
274  const successRect = useAnimatedProps(() => ({
275    width: Math.max(0, actionWidth.get() - 16),
276  }))
277  const checkPosition = useAnimatedProps<{
278    transform?: string
279    matrix?: number[]
280  }>(() =>
281    IS_WEB
282      ? { transform: `translate(${(actionWidth.get() - 24) / 2} 12)` }
283      : { matrix: [1, 0, 0, 1, (actionWidth.get() - 24) / 2, 12] }
284  )
285  const shineProps = useAnimatedProps<{
286    transform?: string
287    matrix?: number[]
288  }>(() => {
289    const skew = Math.tan((-40 * Math.PI) / 180)
290    const x = shine.get() * actionWidth.get() - skew * 24
291    return IS_WEB
292      ? { transform: `matrix(1 0 ${skew} 1 ${x} 0)` }
293      : { matrix: [1, 0, skew, 1, x, 0] }
294  })
295  return (
296    <View style={[styles.wrapper, style]} testID={testID}>
297      <Animated.View
298        style={[
299          styles.card,
300          { width: cardWidth, borderRadius: radius },
301          cardStyle,
302        ]}
303      >
304        <View style={[styles.labelRow, { gap: large ? 12 : 8 }]}>
305          <Animated.View
306            style={[
307              styles.icon,
308              { width: iconSize, height: iconSize, borderRadius: iconSize / 2 },
309              surfaceStyle,
310            ]}
311          >
312            <View style={{ transform: [{ scale: large ? 1 : 0.9 }] }}>
313              {icon ?? (
314                <Svg
315                  width={24}
316                  height={24}
317                  viewBox="0 0 24 24"
318                  fill="none"
319                  stroke={dark ? "#f4f4f5" : "#1f1f1f"}
320                  strokeWidth={2}
321                >
322                  <Rect x={3} y={4} width={18} height={18} rx={2} />
323                  <Path d="M16 2v4M8 2v4M3 10h18" />
324                </Svg>
325              )}
326            </View>
327          </Animated.View>
328          <Animated.Text
329            numberOfLines={1}
330            style={[styles.label, { fontSize: labelSize }, labelStyle]}
331          >
332            {label}
333          </Animated.Text>
334        </View>
335        <Animated.View style={[styles.actionSlot, actionStyle]}>
336          <Animated.View style={[styles.action, surfaceStyle]}>
337            <Pressable
338              style={StyleSheet.absoluteFill}
339              onPress={trigger}
340              disabled={status !== "idle"}
341              accessibilityRole="button"
342              accessibilityLabel={
343                status === "success" ? `${actionText} complete` : actionText
344              }
345              accessibilityState={{
346                disabled: status !== "idle",
347                busy: status === "loading",
348              }}
349              accessibilityLiveRegion="polite"
350              testID={testID ? `${testID}-action` : undefined}
351            >
352              <Svg width="100%" height={48} accessible={false}>
353                <Defs>
354                  <Filter
355                    id={`${filterId}-idle`}
356                    x="-50%"
357                    y="-100%"
358                    width="200%"
359                    height="300%"
360                  >
361                    <AnimatedBlur animatedProps={idleBlur} />
362                  </Filter>
363                  <Filter
364                    id={`${filterId}-loading`}
365                    x="-50%"
366                    y="-100%"
367                    width="200%"
368                    height="300%"
369                  >
370                    <AnimatedBlur animatedProps={loadingBlur} />
371                  </Filter>
372                  <Filter
373                    id={`${filterId}-success`}
374                    x="-50%"
375                    y="-100%"
376                    width="200%"
377                    height="300%"
378                  >
379                    <AnimatedBlur animatedProps={successBlur} />
380                  </Filter>
381                  <LinearGradient
382                    id={`${filterId}-shine`}
383                    x1="0%"
384                    y1="0%"
385                    x2="100%"
386                    y2="0%"
387                  >
388                    <Stop
389                      offset="0"
390                      stopColor={dark ? "#000000" : "#ffffff"}
391                      stopOpacity={0}
392                    />
393                    <Stop
394                      offset="0.5"
395                      stopColor={dark ? "#000000" : "#ffffff"}
396                      stopOpacity={dark ? 0.2 : 0.5}
397                    />
398                    <Stop
399                      offset="1"
400                      stopColor={dark ? "#000000" : "#ffffff"}
401                      stopOpacity={0}
402                    />
403                  </LinearGradient>
404                  <ClipPath id={`${filterId}-clip`}>
405                    <AnimatedRect
406                      x={8}
407                      y={8}
408                      height={32}
409                      rx={16}
410                      animatedProps={successRect}
411                    />
412                  </ClipPath>
413                </Defs>
414                <AnimatedGroup
415                  animatedProps={idleProps}
416                  filter={`url(#${filterId}-idle)`}
417                >
418                  <AnimatedText
419                    x="50%"
420                    y={24 + actionSize * fontScale * 0.35}
421                    textAnchor="middle"
422                    fontSize={actionSize * fontScale}
423                    fontWeight="700"
424                    animatedProps={labelProps}
425                  >
426                    {actionText}
427                  </AnimatedText>
428                </AnimatedGroup>
429                <AnimatedGroup
430                  animatedProps={loadingProps}
431                  filter={`url(#${filterId}-loading)`}
432                >
433                  <AnimatedRect
434                    x={8}
435                    y={21}
436                    height={6}
437                    rx={3}
438                    fill={progressTrackColor ?? (dark ? "#52525b" : "#d4d4d8")}
439                    animatedProps={trackProps}
440                  />
441                  <AnimatedRect
442                    y={21}
443                    height={6}
444                    rx={3}
445                    fill={progressColor ?? (dark ? "#d4d4d8" : "#212121")}
446                    animatedProps={barProps}
447                  />
448                </AnimatedGroup>
449                <AnimatedGroup
450                  animatedProps={successProps}
451                  filter={`url(#${filterId}-success)`}
452                >
453                  <AnimatedRect
454                    x={8}
455                    y={8}
456                    height={32}
457                    rx={16}
458                    fill={successColor ?? (dark ? "#ffffff" : "#050505")}
459                    animatedProps={successRect}
460                  />
461                  <AnimatedGroup animatedProps={checkPosition}>
462                    <Path
463                      d="m20 6-11 11-5-5"
464                      stroke={checkColor ?? (dark ? "#000000" : "#ffffff")}
465                      strokeWidth={2}
466                      strokeLinecap="round"
467                      strokeLinejoin="round"
468                      fill="none"
469                    />
470                  </AnimatedGroup>
471                  <G clipPath={`url(#${filterId}-clip)`}>
472                    <AnimatedGroup animatedProps={shineProps}>
473                      <AnimatedRect
474                        x={8}
475                        y={8}
476                        height={32}
477                        fill={`url(#${filterId}-shine)`}
478                        animatedProps={successRect}
479                      />
480                    </AnimatedGroup>
481                  </G>
482                </AnimatedGroup>
483              </Svg>
484            </Pressable>
485          </Animated.View>
486        </Animated.View>
487      </Animated.View>
488      <Text style={styles.announcement} accessibilityLiveRegion="polite">
489        {status === "success"
490          ? `${actionText} complete`
491          : status === "loading"
492            ? `${actionText} in progress`
493            : ""}
494      </Text>
495    </View>
496  )
497}
498const styles = StyleSheet.create({
499  wrapper: { width: "100%", alignItems: "center", paddingHorizontal: 16 },
500  card: {
501    maxWidth: "100%",
502    flexDirection: "row",
503    alignItems: "center",
504    justifyContent: "space-between",
505    padding: 12,
506    borderWidth: 1.5,
507    overflow: "hidden",
508    boxShadow: "0px 1px 2px rgba(0,0,0,0.05)",
509  },
510  labelRow: {
511    flexDirection: "row",
512    alignItems: "center",
513    gap: 8,
514    flex: 1,
515    minWidth: 0,
516    marginRight: 8,
517  },
518  icon: {
519    width: 44,
520    height: 44,
521    borderRadius: 22,
522    alignItems: "center",
523    justifyContent: "center",
524  },
525  label: { fontWeight: "700", flexShrink: 1 },
526  actionSlot: { width: 120, height: 48 },
527  action: {
528    position: "absolute",
529    right: 0,
530    width: "100%",
531    height: 48,
532    borderRadius: 24,
533    overflow: "hidden",
534  },
535  announcement: {
536    position: "absolute",
537    width: 1,
538    height: 1,
539    overflow: "hidden",
540    opacity: 0,
541  },
542})