Unit Input

1"use client"
2 
3import * as React from "react"
4import { Input } from "@/components/ui/input"
5import { cn } from "@/lib/utils"
6import type { KnownUnit, UnitStringMap } from "./unit-input.types"
7 
8export interface UnitInputProps<
9  TUnit extends KnownUnit | (string & {}) = KnownUnit | (string & {}),
10> {
11  value: TUnit extends KnownUnit ? UnitStringMap[TUnit] | (string & {}) : string
12  onChange: (
13    next: TUnit extends KnownUnit ? UnitStringMap[TUnit] : string,
14  ) => void
15  unit: TUnit
16  min?: number
17  max?: number
18  step?: number
19  precision?: number
20  dragSensitivity?: number
21  prefix?: React.ReactNode
22  suffix?: React.ReactNode
23  disabled?: boolean
24  "aria-label"?: string
25  className?: string
26}
27 
28function parseNumericResult(
29  value: string,
30  unit: string,
31): { value: number; ok: boolean } {
32  // Reject a wrong suffix: parseFloat("45px") would silently accept it for unit="deg".
33  if (value !== "" && unit !== "" && !value.endsWith(unit)) {
34    return { value: 0, ok: false }
35  }
36  const stripped = value.endsWith(unit) ? value.slice(0, -unit.length) : value
37  const n = Number.parseFloat(stripped)
38  if (Number.isNaN(n)) return { value: 0, ok: false }
39  // Reject trailing garbage that parseFloat would otherwise tolerate.
40  if (!/^-?\d+(\.\d+)?$/.test(stripped)) return { value: 0, ok: false }
41  return { value: n, ok: true }
42}
43 
44function clamp(n: number, min: number | undefined, max: number | undefined) {
45  if (min !== undefined && n < min) return min
46  if (max !== undefined && n > max) return max
47  return n
48}
49 
50export function UnitInput<TUnit extends KnownUnit | (string & {})>({
51  value,
52  onChange,
53  unit,
54  min,
55  max,
56  step = 1,
57  precision = 0,
58  dragSensitivity = 1,
59  prefix,
60  suffix,
61  disabled,
62  className,
63  "aria-label": ariaLabel,
64}: UnitInputProps<TUnit>) {
65  const unitStr = String(unit)
66  const warnedRef = React.useRef(false)
67  const { value: parsedFromValue, ok: parseOk } = parseNumericResult(
68    String(value),
69    unitStr,
70  )
71  React.useEffect(() => {
72    if (!parseOk && !warnedRef.current) {
73      warnedRef.current = true
74      console.warn(
75        `[UnitInput] could not parse value "${String(value)}" for unit "${unitStr}". Falling back to 0.`,
76      )
77    }
78  }, [parseOk, value, unitStr])
79  const [rawDraft, setRawDraft] = React.useState<string | null>(null)
80  const displayed = rawDraft ?? parsedFromValue.toFixed(precision)
81 
82  const commit = (raw: string) => {
83    const parsed = Number.parseFloat(raw)
84    const next = Number.isNaN(parsed)
85// … truncated