Scrub field

"use client";

import { useEffect, useId, useRef, useState } from "react";
import type {
  ChangeEvent,
  ComponentProps,
  FocusEvent,
  KeyboardEvent,
  MouseEvent,
  PointerEvent,
  ReactNode,
} from "react";
import "./scrub-field.css";

export type ScrubFieldProps = Omit<
  ComponentProps<"input">,
  "type" | "value" | "defaultValue" | "min" | "max" | "step"
> & {
  /** Visible label. It is also the drag handle. */
  label: ReactNode;
  /** Help text under the control, linked with aria-describedby. */
  hint?: ReactNode;
  /** Controlled value. */
  value?: number;
  /** Uncontrolled starting value. Falls back to min, then 0. */
  defaultValue?: number;
  /** Called with every new value: per drag step, per key press and on commit. */
  onValueChange?: (value: number) => void;
  min?: number;
  max?: number;
  /** Change per arrow key press or per 2px of drag. */
  step?: number;
  /** Suffix shown after the number, such as "px" or "ms". Also accepted in typed text. */
  unit?: string;
  /** Decimals shown and kept. Defaults to the step's decimals. */
  precision?: number;
};

/** Pixels of horizontal drag per step. */
const PX_PER_STEP = 2;
/** Movement under this is a click, which focuses the input. */
const DRAG_THRESHOLD = 3;

function present(node: ReactNode): boolean {
  return node != null && node !== false && node !== "";
}

function decimals(n: number) {
  const text = String(n);
  if (text.includes("e-")) return Number(text.split("e-")[1]);
  const dot = text.indexOf(".");
  return dot === -1 ? 0 : text.length - dot - 1;
}

/* ---------- Arithmetic ----------
 * A small recursive-descent parser. Grammar:
 *   expr    := term (("+" | "-") term)*
 *   term    := unary (("*" | "/") unary)*
 *   unary   := ("+" | "-") unary | postfix
 *   postfix := primary "%"?
 *   primary := number unit? | "(" expr ")"
 * Returns null for anything it cannot read. Never uses eval.
 */
function evaluate(source: string, unit: string): number | null {
  const text = source;
  const unitLower = unit.toLowerCase();
  const percentIsUnit = unit === "%";
  let i = 0;

  function skipSpace() {
    while (i < text.length && /\s/.test(text[i])) i++;
  }

  function peek() {
    skipSpace();
    return text[i];
  }

  function skipUnit() {
    skipSpace();
    if (unit && text.slice(i, i + unit.length).toLowerCase() === unitLower) i += unit.length;
  }

  function primary(): number | null {
    const c = peek();
    if (c === "(") {
      i++;
      const inner = expr();
      if (inner === null || peek() !== ")") return null;
      i++;
      skipUnit();
      return inner;
    }
    const match = /^(\d+\.?\d*|\.\d+)/.exec(text.slice(i));
    if (!match) return null;
    i += match[0].length;
    skipUnit();
    return Number(match[0]);
  }

  function postfix(): number | null {
    const n = primary();
    if (n === null) return null;
    if (!percentIsUnit && peek() === "%") {
      i++;
      return n / 100;
    }
    return n;
  }

  function unary(): number | null {
    const c = peek();
    if (c === "+" || c === "-") {
      i++;
      const n = unary();
      return n === null ? null : c === "-" ? -n : n;
    }
    return postfix();
  }

  function term(): number | null {
    let left = unary();
    while (left !== null) {
      const c = peek();
      if (c !== "*" && c !== "/") break;
      i++;
      const right = unary();
      if (right === null) return null;
      left = c === "*" ? left * right : left / right;
    }
    return left;
  }

  function expr(): number | null {
    let left = term();
    while (left !== null) {
      const c = peek();
      if (c !== "+" && c !== "-") break;
      i++;
      const right = term();
      if (right === null) return null;
      left = c === "+" ? left + right : left - right;
    }
    return left;
  }

  const result = expr();
  skipSpace();
  if (result === null || i !== text.length || !Number.isFinite(result)) return null;
  return result;
}

/**
 * Reads typed text against the current value. A leading operator makes it relative:
 * "+10" adds, "*2" multiplies, "+10%" adds ten percent of the current value.
 */
function compute(raw: string, current: number, unit: string): number | null {
  const text = raw
    .trim()
    .replace(/−/g, "-")
    .replace(/×/g, "*")
    .replace(/÷/g, "/");
  if (text === "") return null;
  const op = text[0];
  if (op === "+" || op === "-" || op === "*" || op === "/") {
    const rest = text.slice(1);
    if ((op === "+" || op === "-") && unit !== "%" && rest.trim().endsWith("%")) {
      const pct = evaluate(rest.trim().slice(0, -1), unit);
      if (pct === null) return null;
      const delta = (current * pct) / 100;
      return op === "+" ? current + delta : current - delta;
    }
    const n = evaluate(rest, unit);
    if (n === null) return null;
    const out = op === "+" ? current + n : op === "-" ? current - n : op === "*" ? current * n : current / n;
    return Number.isFinite(out) ? out : null;
  }
  return evaluate(text, unit);
}

export function ScrubField({
  label,
  hint,
  value,
  defaultValue,
  onValueChange,
  min,
  max,
  step = 1,
  unit = "",
  precision: precisionProp,
  className,
  style,
  id,
  disabled,
  readOnly,
  onChange,
  onKeyDown,
  onBlur,
  "aria-describedby": describedBy,
  "aria-invalid": ariaInvalid,
  ...rest
}: ScrubFieldProps) {
  const autoId = useId();
  const inputId = id ?? autoId;
  const hintId = `${autoId}-hint`;
  const [inner, setInner] = useState<number>(defaultValue ?? min ?? 0);
  /** Text being typed; null when the field shows the committed value. */
  const [draft, setDraft] = useState<string | null>(null);
  const [invalid, setInvalid] = useState(false);
  const [status, setStatus] = useState("");
  const [scrubbing, setScrubbing] = useState(false);
  const current = value !== undefined ? value : inner;
  const precision = precisionProp ?? decimals(step);
  const locked = disabled || readOnly;

  /** The latest value, read by pointer handlers so a lagging controlled value never drops a step. */
  const latest = useRef(current);
  useEffect(() => {
    latest.current = current;
  }, [current]);

  const drag = useRef<{
    pointerId: number;
    startX: number;
    lastX: number;
    /** Unrounded running value, so fine steps add up even when precision hides them. */
    running: number;
    /** Pixels carried over that have not made a whole step yet. */
    carry: number;
    moved: boolean;
  } | null>(null);
  /** Set after a real drag so the click that follows does not focus the input. */
  const suppressClick = useRef(false);

  function clamp(n: number) {
    let next = n;
    if (min !== undefined) next = Math.max(min, next);
    if (max !== undefined) next = Math.min(max, next);
    return next;
  }

  function round(n: number) {
    return Number(n.toFixed(precision));
  }

  function emit(next: number) {
    const rounded = round(clamp(next));
    if (rounded === latest.current) return;
    latest.current = rounded;
    if (value === undefined) setInner(rounded);
    onValueChange?.(rounded);
  }

  function format(n: number) {
    return n.toFixed(precision);
  }

  /** Alt steps a tenth of the step, but never less than the precision can show. */
  function fineStep() {
    return Math.max(step / 10, 1 / 10 ** precision);
  }

  function commitDraft() {
    if (draft === null) return;
    // Text put back the way it was is not a new instruction; "-24" must not apply again.
    if (draft.trim() === format(current)) {
      setDraft(null);
      return;
    }
    const result = compute(draft, current, unit);
    setDraft(null);
    if (result === null) {
      setInvalid(true);
      setStatus(`Could not read that. Kept ${format(current)}${unit ? ` ${unit}` : ""}.`);
      return;
    }
    setInvalid(false);
    setStatus("");
    emit(result);
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    onChange?.(event);
    setInvalid(false);
    setStatus("");
    setDraft(event.currentTarget.value);
  }

  function handleBlur(event: FocusEvent<HTMLInputElement>) {
    onBlur?.(event);
    commitDraft();
  }

  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented || locked) return;
    const by = event.shiftKey ? step * 10 : event.altKey ? fineStep() : step;
    const from = latest.current;
    function stepTo(n: number) {
      setDraft(null);
      setInvalid(false);
      setStatus("");
      emit(n);
    }
    switch (event.key) {
      case "ArrowUp":
        stepTo(from + by);
        break;
      case "ArrowDown":
        stepTo(from - by);
        break;
      case "PageUp":
        stepTo(from + step * 10);
        break;
      case "PageDown":
        stepTo(from - step * 10);
        break;
      case "Home":
        if (min === undefined) return;
        stepTo(min);
        break;
      case "End":
        if (max === undefined) return;
        stepTo(max);
        break;
      case "Enter":
        if (draft === null) return;
        commitDraft();
        // Let Enter go on to submit a surrounding form.
        return;
      case "Escape":
        if (draft === null && !invalid) return;
        setDraft(null);
        setInvalid(false);
        setStatus("");
        break;
      default:
        return;
    }
    event.preventDefault();
    event.stopPropagation();
  }

  /* ---------- Scrub on the label ---------- */

  function handlePointerDown(event: PointerEvent<HTMLLabelElement>) {
    if (locked || event.button !== 0) return;
    // Keeps text from being selected and focus where it is while dragging.
    event.preventDefault();
    event.currentTarget.setPointerCapture(event.pointerId);
    drag.current = {
      pointerId: event.pointerId,
      startX: event.clientX,
      lastX: event.clientX,
      running: latest.current,
      carry: 0,
      moved: false,
    };
  }

  function handlePointerMove(event: PointerEvent<HTMLLabelElement>) {
    const d = drag.current;
    if (!d || d.pointerId !== event.pointerId) return;
    if (!d.moved) {
      if (Math.abs(event.clientX - d.startX) < DRAG_THRESHOLD) return;
      d.moved = true;
      d.lastX = d.startX;
      setDraft(null);
      setInvalid(false);
      setScrubbing(true);
    }
    const px = d.carry + (event.clientX - d.lastX);
    d.lastX = event.clientX;
    const steps = Math.trunc(px / PX_PER_STEP);
    d.carry = px - steps * PX_PER_STEP;
    if (steps === 0) return;
    const per = event.shiftKey ? step * 10 : event.altKey ? step / 10 : step;
    d.running = clamp(d.running + steps * per);
    emit(d.running);
  }

  function endDrag(event: PointerEvent<HTMLLabelElement>) {
    const d = drag.current;
    if (!d || d.pointerId !== event.pointerId) return;
    suppressClick.current = d.moved;
    drag.current = null;
    setScrubbing(false);
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
  }

  function handleLabelClick(event: MouseEvent<HTMLLabelElement>) {
    // A real drag ends in a click; it should not move focus into the input.
    if (suppressClick.current) {
      suppressClick.current = false;
      event.preventDefault();
    }
  }

  const text = draft ?? format(current);
  const valueText = `${format(current)}${unit ? ` ${unit}` : ""}`;

  return (
    <div
      className={["eq-scrub-field", className].filter(Boolean).join(" ")}
      style={style}
      data-scrubbing={scrubbing || undefined}
    >
      <label
        className="eq-scrub-field-label"
        htmlFor={inputId}
        data-disabled={locked || undefined}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={endDrag}
        onPointerCancel={endDrag}
        onLostPointerCapture={endDrag}
        onClick={handleLabelClick}
      >
        <span className="eq-scrub-field-label-text">{label}</span>
        <svg
          className="eq-scrub-field-grip"
          viewBox="0 0 16 16"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M5 5 2 8l3 3M11 5l3 3-3 3M2 8h12" />
        </svg>
      </label>
      <div className="eq-scrub-field-control" data-disabled={disabled || undefined}>
        <input
          inputMode="decimal"
          autoComplete="off"
          spellCheck={false}
          {...rest}
          id={inputId}
          className="eq-scrub-field-input"
          type="text"
          role="spinbutton"
          aria-valuenow={current}
          aria-valuemin={min}
          aria-valuemax={max}
          aria-valuetext={unit ? valueText : undefined}
          aria-describedby={[describedBy, present(hint) ? hintId : null].filter(Boolean).join(" ") || undefined}
          aria-invalid={invalid || ariaInvalid || undefined}
          disabled={disabled}
          readOnly={readOnly}
          value={text}
          onChange={handleChange}
          onBlur={handleBlur}
          onKeyDown={handleKeyDown}
        />
        {unit && (
          <span className="eq-scrub-field-unit" aria-hidden="true">
            {unit}
          </span>
        )}
      </div>
      {present(hint) && (
        <p className="eq-scrub-field-hint" id={hintId}>
          {hint}
        </p>
      )}
      <span className="eq-scrub-field-status" role="status">
        {status}
      </span>
    </div>
  );
}