Hold button

"use client";

import { useEffect, useId, useRef, useState } from "react";
import type { ComponentProps, CSSProperties, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
import "./hold-button.css";

export type HoldButtonProps = ComponentProps<"button"> & {
  /** How long the button must be held, in milliseconds. */
  duration?: number;
  /** Called once when a hold runs to the end. */
  onConfirm?: () => void;
  variant?: "solid" | "danger" | "outline";
  size?: "s" | "m" | "l";
  /** Read to screen readers when the hold completes. */
  confirmedLabel?: string;
};

type HoldState = "idle" | "holding" | "done";

/** How long the done state shows before the button settles back to idle. */
const DONE_MS = 1200;

export function HoldButton({
  duration = 1200,
  onConfirm,
  variant = "danger",
  size = "m",
  confirmedLabel = "Confirmed",
  className,
  style,
  children,
  disabled,
  onPointerDown,
  onPointerUp,
  onPointerLeave,
  onPointerCancel,
  onKeyDown,
  onKeyUp,
  onBlur,
  onContextMenu,
  "aria-describedby": describedBy,
  ...rest
}: HoldButtonProps) {
  const hintId = `${useId()}-hint`;
  const [state, setState] = useState<HoldState>("idle");
  const [status, setStatus] = useState("");
  const stateRef = useRef<HoldState>("idle");
  const commitTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const doneTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const confirmRef = useRef(onConfirm);

  useEffect(() => {
    confirmRef.current = onConfirm;
  });

  function go(next: HoldState) {
    stateRef.current = next;
    setState(next);
  }

  function clearTimers() {
    if (commitTimer.current !== null) clearTimeout(commitTimer.current);
    if (doneTimer.current !== null) clearTimeout(doneTimer.current);
    commitTimer.current = null;
    doneTimer.current = null;
  }

  useEffect(() => clearTimers, []);

  // A button disabled mid-hold lets go.
  useEffect(() => {
    if (disabled && stateRef.current === "holding") cancel();
  });

  function start() {
    if (disabled || stateRef.current !== "idle") return;
    clearTimers();
    setStatus("");
    go("holding");
    commitTimer.current = setTimeout(() => {
      commitTimer.current = null;
      go("done");
      setStatus(confirmedLabel);
      confirmRef.current?.();
      doneTimer.current = setTimeout(() => {
        doneTimer.current = null;
        go("idle");
      }, DONE_MS);
    }, duration);
  }

  function cancel() {
    if (stateRef.current !== "holding") return;
    if (commitTimer.current !== null) clearTimeout(commitTimer.current);
    commitTimer.current = null;
    go("idle");
  }

  function isActivationKey(key: string) {
    return key === " " || key === "Enter";
  }

  function handlePointerDown(event: PointerEvent<HTMLButtonElement>) {
    onPointerDown?.(event);
    if (event.defaultPrevented || event.button !== 0) return;
    // Touch pointers are captured on press, which would hide a finger sliding off.
    const el = event.currentTarget;
    if (el.hasPointerCapture(event.pointerId)) el.releasePointerCapture(event.pointerId);
    start();
  }

  function handlePointerUp(event: PointerEvent<HTMLButtonElement>) {
    onPointerUp?.(event);
    cancel();
  }

  function handlePointerLeave(event: PointerEvent<HTMLButtonElement>) {
    onPointerLeave?.(event);
    cancel();
  }

  function handlePointerCancel(event: PointerEvent<HTMLButtonElement>) {
    onPointerCancel?.(event);
    cancel();
  }

  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented) return;
    if (isActivationKey(event.key)) {
      // Stops the native click, which would otherwise fire on press or release.
      event.preventDefault();
      if (!event.repeat) start();
    } else if (event.key === "Escape" && stateRef.current === "holding") {
      cancel();
    }
  }

  function handleKeyUp(event: KeyboardEvent<HTMLButtonElement>) {
    onKeyUp?.(event);
    if (isActivationKey(event.key)) {
      event.preventDefault();
      cancel();
    }
  }

  function handleBlur(event: FocusEvent<HTMLButtonElement>) {
    onBlur?.(event);
    cancel();
  }

  function handleContextMenu(event: MouseEvent<HTMLButtonElement>) {
    onContextMenu?.(event);
    // A long press on touch opens a context menu; it must not interrupt the hold.
    if (stateRef.current === "holding") event.preventDefault();
  }

  return (
    <>
      <button
        type="button"
        {...rest}
        className={["eq-hold-button", className].filter(Boolean).join(" ")}
        style={{ ...style, "--_hold": `${duration}ms` } as CSSProperties}
        data-variant={variant}
        data-size={size}
        data-state={state}
        disabled={disabled}
        aria-describedby={[describedBy, hintId].filter(Boolean).join(" ")}
        onPointerDown={handlePointerDown}
        onPointerUp={handlePointerUp}
        onPointerLeave={handlePointerLeave}
        onPointerCancel={handlePointerCancel}
        onKeyDown={handleKeyDown}
        onKeyUp={handleKeyUp}
        onBlur={handleBlur}
        onContextMenu={handleContextMenu}
      >
        <span className="eq-hold-button-fill" aria-hidden="true" />
        <svg
          className="eq-hold-button-check"
          viewBox="0 0 16 16"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M3.5 8.5l3 3 6-7" pathLength={1} />
        </svg>
        <span className="eq-hold-button-label">{children}</span>
      </button>
      <span className="eq-hold-button-hint" id={hintId}>
        Hold to confirm
      </span>
      <span className="eq-hold-button-status" aria-live="polite">
        {status}
      </span>
    </>
  );
}