Stepper

1import React, { useEffect, useId, useRef, useState } from "react"
2import {
3  Platform,
4  Pressable,
5  StyleSheet,
6  View,
7  useColorScheme,
8  useWindowDimensions,
9  type StyleProp,
10  type ViewStyle,
11} from "react-native"
12import Animated, {
13  ReduceMotion,
14  useAnimatedProps,
15  useAnimatedStyle,
16  useReducedMotion,
17  useSharedValue,
18  withSpring,
19} from "react-native-reanimated"
20import { scheduleOnRN } from "react-native-worklets"
21import Svg, {
22  Defs,
23  FeGaussianBlur,
24  Filter,
25  G,
26  Path,
27  Text as SvgText,
28} from "react-native-svg"
29const WEB = Platform.OS === "web"
30const DIGIT_SPRING = {
31  stiffness: 200,
32  damping: 16,
33  mass: 1.2,
34  reduceMotion: ReduceMotion.System,
35} as const
36const PRESS_SPRING = {
37  stiffness: 300,
38  damping: 22,
39  reduceMotion: ReduceMotion.System,
40} as const
41const AnimatedGroup = Animated.createAnimatedComponent(G)
42class BlurTarget extends FeGaussianBlur {
43  setNativeProps = (
44    props: React.ComponentProps<typeof FeGaussianBlur> & {
45      style?: React.ComponentProps<typeof FeGaussianBlur>
46    }
47  ) => {
48    if (WEB) {
49      const amount = props.style?.stdDeviation ?? props.stdDeviation
50      const element = (
51        this as unknown as {
52          elementRef?: {
53            current: {
54              setAttribute: (key: string, value: string) => void
55            } | null
56          }
57        }
58      ).elementRef?.current
59      if (amount !== undefined)
60        element?.setAttribute("stdDeviation", String(amount))
61    } else this.root?.setNativeProps(props)
62  }
63}
64const AnimatedBlur = Animated.createAnimatedComponent(BlurTarget)
65type Layer = {
66  id: number
67  digit: string
68  leaving: boolean
69  entering: boolean
70  direction: number
71}
72function Glyph({
73  layer,
74  color,
75  size,
76  width,
77  height,
78  remove,
79}: {
80  layer: Layer
81  color: string
82  size: number
83  width: number
84  height: number
85  remove: (id: number) => void
86}) {
87  const reduced = useReducedMotion()
88  const progress = useSharedValue(layer.entering ? 0 : 1)
89  const filter = `digit-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`
90  useEffect(() => {
91    if (!layer.leaving && !layer.entering) return
92    progress.set(
93      withSpring(layer.leaving ? 0 : 1, DIGIT_SPRING, (finished) => {
94        if (finished && layer.leaving) scheduleOnRN(remove, layer.id)
95      })
96    )
97  }, [layer.leaving, layer.entering, layer.id, progress, remove])
98  const props = useAnimatedProps<{
99    opacity: number
100    transform?: string
101    matrix?: number[]
102  }>(() => {
103    const p = progress.get()
104    const y = reduced
105      ? 0
106      : (1 - p) * 20 * layer.direction * (layer.leaving ? -1 : 1)
107    const scale = reduced ? 1 : ((0.5 + p * 0.5) * 800) / (800 - 10 * p)
108    const x = (width / 2) * (1 - scale)
109    const ty = y + (height / 2) * (1 - scale)
110    return {
111      opacity: Math.max(0, Math.min(1, p)),
112      ...(WEB
113        ? { transform: `matrix(${scale} 0 0 ${scale} ${x} ${ty})` }
114        : { matrix: [scale, 0, 0, scale, x, ty] }),
115    }
116  })
117  const blur = useAnimatedProps(() => {
118    const amount = reduced ? 0 : Math.max(0, 2 * (1 - progress.get()))
119    return {
120      stdDeviation: amount,
121      stdDeviationX: amount,
122      stdDeviationY: amount,
123    }
124  })
125  return (
126    <Svg
127      width={width + 16}
128      height={height + 48}
129      style={{ position: "absolute", left: -8, top: -24 }}
130      accessible={false}
131    >
132      <Defs>
133        <Filter id={filter} x="-100%" y="-200%" width="300%" height="500%">
134          <AnimatedBlur animatedProps={blur} />
135        </Filter>
136      </Defs>
137      <G transform="translate(8 24)">
138        <AnimatedGroup animatedProps={props} filter={`url(#${filter})`}>
139          <SvgText
140            x={width / 2}
141            y={height / 2 + size * 0.35}
142            fill={color}
143            fontSize={size}
144            fontWeight="700"
145            textAnchor="middle"
146          >
147            {layer.digit}
148          </SvgText>
149        </AnimatedGroup>
150      </G>
151    </Svg>
152  )
153}
154function Digit({
155  digit,
156  direction,
157  color,
158  size,
159  width,
160  height,
161}: {
162  digit: string
163  direction: number
164  color: string
165  size: number
166  width: number
167  height: number
168}) {
169  const nextId = useRef(1)
170  const previous = useRef(digit)
171  const [layers, setLayers] = useState<Layer[]>([
172    { id: 0, digit, leaving: false, entering: false, direction },
173  ])
174  const remove = React.useCallback(
175    (id: number) =>
176      setLayers((layers) => layers.filter((layer) => layer.id !== id)),
177    []
178  )
179  useEffect(() => {
180    if (previous.current === digit) return
181    previous.current = digit
182    const id = nextId.current++
183    setLayers((layers) => [
184      ...layers.map((layer) =>
185        layer.leaving ? layer : { ...layer, leaving: true, direction }
186      ),
187      { id, digit, leaving: false, entering: true, direction },
188    ])
189  }, [digit, direction])
190  return (
191    <View style={{ width, height, overflow: "visible" }}>
192      {layers.map((layer) => (
193        <Glyph
194          key={layer.id}
195          layer={layer}
196          color={color}
197          size={size}
198          width={width}
199          height={height}
200          remove={remove}
201        />
202      ))}
203    </View>
204  )
205}
206function StepButton({
207  plus,
208  disabled,
209  onPress,
210  size,
211  color,
212  backgroundColor,
213  testID,
214}: {
215  plus: boolean
216  disabled: boolean
217  onPress: () => void
218  size: number
219  color: string
220  backgroundColor: string
221  testID?: string
222}) {
223  const scale = useSharedValue(1)
224  const hovered = useRef(false)
225  const style = useAnimatedStyle(() => ({
226    transform: [{ scale: scale.get() }],
227  }))
228  return (
229    <Animated.View style={[{ opacity: disabled ? 0.5 : 1 }, style]}>
230      <Pressable
231        testID={testID}
232        disabled={disabled}
233        accessibilityRole="button"
234        accessibilityLabel={plus ? "Increase" : "Decrease"}
235        accessibilityState={{ disabled }}
236        hitSlop={Math.max(0, (48 - size) / 2)}
237        pressRetentionOffset={12}
238        onPress={onPress}
239        onHoverIn={() => {
240          hovered.current = true
241          if (!disabled) scale.set(withSpring(1.05, PRESS_SPRING))
242        }}
243        onHoverOut={() => {
244          hovered.current = false
245          scale.set(withSpring(1, PRESS_SPRING))
246        }}
247        onPressIn={() => scale.set(withSpring(0.92, PRESS_SPRING))}
248        onPressOut={() =>
249          scale.set(withSpring(hovered.current ? 1.05 : 1, PRESS_SPRING))
250        }
251        style={{
252          width: size,
253          height: size,
254          borderRadius: size / 2,
255          backgroundColor,
256          justifyContent: "center",
257          alignItems: "center",
258        }}
259      >
260        <Svg
261          width={size >= 56 ? 20 : 16}
262          height={size >= 56 ? 20 : 16}
263          viewBox="0 0 20 20"
264          fill={color}
265          accessible={false}
266        >
267          <Path
268            d={
269              plus
270                ? "M10 3a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H4a1 1 0 1 1 0-2h5V4a1 1 0 0 1 1-1Z"
271                : "M4 9a1 1 0 1 0 0 2h12a1 1 0 1 0 0-2H4Z"
272            }
273          />
274        </Svg>
275      </Pressable>
276    </Animated.View>
277  )
278}
279export type StepperProps = {
280  value?: number
281  defaultValue?: number
282  min?: number
283  max?: number
284  onChange?: (value: number) => void
285  theme?: "light" | "dark" | "system"
286  borderColor?: string
287  backgroundColor?: string
288  buttonColor?: string
289  iconColor?: string
290  textColor?: string
291  buttonSize?: number
292  fontSize?: number
293  digitWidth?: number
294  radius?: number
295  gap?: number
296  style?: StyleProp<ViewStyle>
297  testID?: string
298}
299export function Stepper({
300  value,
301  defaultValue = 0,
302  min = 0,
303  max = 999,
304  onChange,
305  theme = "system",
306  borderColor,
307  backgroundColor = "transparent",
308  buttonColor,
309  iconColor,
310  textColor,
311  buttonSize,
312  fontSize,
313  digitWidth,
314  radius = 999,
315  gap,
316  style,
317  testID,
318}: StepperProps = {}) {
319  const system = useColorScheme()
320  const { width: viewportWidth, fontScale } = useWindowDimensions()
321  const dark = theme === "dark" || (theme === "system" && system === "dark")
322  const large = viewportWidth >= 640
323  const [internal, setInternal] = useState(defaultValue)
324  const [direction, setDirection] = useState(0)
325  const controlled = value !== undefined
326  const current = controlled ? value : internal
327  const latest = useRef(current)
328  latest.current = current
329  const digits = String(current).split("")
330  const size = buttonSize ?? (large ? 56 : 44)
331  const textSize = (fontSize ?? (large ? 30 : 20)) * fontScale
332  const columnWidth = (digitWidth ?? (large ? 16 : 12)) * fontScale
333  const digitHeight = Math.max(large ? 32 : 28, textSize * 1.15)
334  const step = (dir: number) => {
335    const next = Math.min(max, Math.max(min, latest.current + dir))
336    if (next === latest.current) return
337    setDirection(dir)
338    if (!controlled) {
339      latest.current = next
340      setInternal(next)
341    }
342    onChange?.(next)
343  }
344  return (
345    <View style={[styles.wrapper, style]} testID={testID}>
346      <View
347        style={[
348          styles.pill,
349          {
350            borderRadius: radius,
351            gap: gap ?? (large ? 20 : 12),
352            borderColor: borderColor ?? (dark ? "#27272a" : "#e6e6ef"),
353            backgroundColor,
354          },
355        ]}
356      >
357        <StepButton
358          plus={false}
359          disabled={current <= min}
360          onPress={() => step(-1)}
361          size={size}
362          color={iconColor ?? (dark ? "#a1a1aa" : "#5a5a63")}
363          backgroundColor={buttonColor ?? (dark ? "#27272a" : "#f0eff6")}
364          testID={testID ? `${testID}-decrease` : undefined}
365        />
366        <View
367          style={styles.digits}
368          accessibilityRole="text"
369          accessibilityLabel={String(current)}
370          accessibilityLiveRegion="polite"
371          testID={testID ? `${testID}-value` : undefined}
372        >
373          {digits.map((digit, index) => (
374            <Digit
375              key={`${index}-${digits.length}`}
376              digit={digit}
377              direction={direction}
378              color={textColor ?? (dark ? "#ffffff" : "#242426")}
379              size={textSize}
380              width={columnWidth}
381              height={digitHeight}
382            />
383          ))}
384        </View>
385        <StepButton
386          plus
387          disabled={current >= max}
388          onPress={() => step(1)}
389          size={size}
390          color={iconColor ?? (dark ? "#a1a1aa" : "#5a5a63")}
391          backgroundColor={buttonColor ?? (dark ? "#27272a" : "#f0eff6")}
392          testID={testID ? `${testID}-increase` : undefined}
393        />
394      </View>
395    </View>
396  )
397}
398const styles = StyleSheet.create({
399  wrapper: { width: "100%", alignItems: "center" },
400  pill: {
401    flexDirection: "row",
402    alignItems: "center",
403    padding: 4,
404    borderWidth: 2,
405    boxShadow: "0px 1px 2px rgba(0,0,0,0.05)",
406  },
407  digits: {
408    flexDirection: "row",
409    alignItems: "center",
410    justifyContent: "center",
411    gap: 4,
412  },
413})