Hold To Delete Button

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
"use client";
 
import {
  forwardRef,
  useRef,
  useState,
  type ComponentPropsWithoutRef,
} from "react";
 
import { cn } from "@/lib/cn";
import { Check, Trash2 } from "lucide-react";
 
export type HoldToDeleteButtonProps = Readonly<
  {
    label?: string;
    doneLabel?: string;
    holdMs?: number;
    onHoldComplete?: () => void;
  } & Omit<ComponentPropsWithoutRef<"button">, "onHoldComplete">
>;
 
// Hold-to-delete — press and hold; a fill sweeps across, release early to cancel.
export const HoldToDeleteButton = forwardRef<
  HTMLButtonElement,
  HoldToDeleteButtonProps
>(
  (
    {
      className,
      label = "Hold to delete",
      doneLabel = "Deleted",
      holdMs = 1100,
      onHoldComplete,
      ...props
    },
    ref,
  ) => {
    const [progress, setProgress] = useState(0);
    const [done, setDone] = useState(false);
    const rafRef = useRef<number | null>(null);
    const startRef = useRef(0);
 
    const stop = () => {
      if (rafRef.current !== null) {
        globalThis.cancelAnimationFrame(rafRef.current);
        rafRef.current = null;
      }
    };
 
    const tick = (now: number) => {
      const elapsed = now - startRef.current;
      const next = Math.min(1, elapsed / holdMs);
      setProgress(next);
      if (next >= 1) {
        stop();
        setDone(true);
        onHoldComplete?.();
        return;
      }
      rafRef.current = globalThis.requestAnimationFrame(tick);
    };
 
    const start = () => {
      if (done) return;
      startRef.current = performance.now();
      rafRef.current = globalThis.requestAnimationFrame(tick);
    };
 
    const cancel = () => {
      if (done) return;
      stop();
      setProgress(0);
    };
 
    return (
      <button
        ref={ref}
        type="button"
        data-slot="hold-to-delete-button"
        aria-label={label}
        onPointerDown={start}
        onPointerUp={cancel}
        onPointerLeave={cancel}
        onPointerCancel={cancel}
        disabled={done}
        className={cn(
          "relative h-12 w-56 touch-none overflow-hidden rounded-xl font-sans text-sm font-medium select-none",
          "ring-1 transition-colors duration-300",
          done
            ? "bg-neutral-900 text-white ring-neutral-900"
            : "cursor-pointer bg-white text-rose-600 ring-rose-200",
          className,
        )}
        {...props}
      >
        {!done && (
          <span
            aria-hidden
            className="absolute inset-y-0 left-0 bg-rose-500"
            style={{ width: `${progress * 100}%` }}
          />
        )}
 
        <span
          className={cn(
            "relative z-10 flex items-center justify-center gap-2",
            !done && progress > 0.5 ? "text-white" : "",
          )}
        >
          {done ? (
            <>
              <Check size={15} strokeWidth={2.5} />
              {doneLabel}
            </>
          ) : (
            <>
              <Trash2 size={15} strokeWidth={2} />
              {label}
            </>
          )}
        </span>
      </button>
    );
  },
);
 
HoldToDeleteButton.displayName = "HoldToDeleteButton";