Hold Button

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface HoldButtonProps extends React.ComponentProps<"button"> {
8  /** Milliseconds the button has to be held down before it fires. */
9  duration?: number
10  /** Called once, when a hold runs the whole way through. */
11  onHold?: () => void
12  /** Fill that sweeps across the button. Keep it translucent so the label survives. */
13  color?: string
14}
15 
16/** How long the fill takes to run back out when a hold is abandoned. */
17const RETURN_MS = 260
18/** How long a completed fill sits at full before it clears. */
19const SETTLE_MS = 200
20/** How long the completed fill takes to fade off. */
21const CLEAR_MS = 240
22 
23/** Fast at first, then easing to a stop. The fill draining should feel let go of. */
24function easeOutCubic(t: number) {
25  return 1 - Math.pow(1 - t, 3)
26}
27 
28export function HoldButton({
29  children,
30  className,
31  duration = 1200,
32  onHold,
33  color = "color-mix(in oklch, var(--primary, currentColor) 22%, transparent)",
34  disabled,
35  style,
36  ref: forwardedRef,
37  ...props
38}: HoldButtonProps) {
39  const ref = React.useRef<HTMLButtonElement>(null)
40 
41  // The button needs its own ref to write the fill to, so a caller's ref is
42  // pointed at the same node rather than replacing it.
43  React.useImperativeHandle(
44    forwardedRef,
45    () => ref.current as HTMLButtonElement
46  )
47  const frame = React.useRef(0)
48  const settle = React.useRef<ReturnType<typeof setTimeout>>(undefined)
49  const [holding, setHolding] = React.useState(false)
50  const [clearing, setClearing] = React.useState(false)
51  // A completed button stays pressed until its fill has cleared. Springing
52  // back to full size the instant the action lands reads as a bounce, and
53  // fights whatever the caller is doing with the button at the same moment.
54  const [settling, setSettling] = React.useState(false)
55  const spent = React.useRef(false)
56 
57  // Progress is a ref written straight to a custom property. A fill that
58  // re-rendered React sixty times a second to cross the button would be absurd.
59  const state = React.useRef({
60    progress: 0,
61    filling: false,
62    last: 0,
63    from: 0,
64    since: 0,
65  })
66 
67  const write = React.useCallback(() => {
68    ref.current?.style.setProperty(
69      "--hold-progress",
70      `${state.current.progress}`
71    )
72  }, [])
73 
74  const tick = React.useCallback(
75    (now: number) => {
76      const current = state.current
77 
78      if (current.filling) {
79// … truncated