Implement a new primitive UI component for picking durations

Author: myftija

apps/webapp/app/components/primitives/DurationPicker.tsx

@@ -0,0 +1,177 @@
+import { Input } from "~/components/primitives/Input";
+import { cn } from "~/utils/cn";
+import React, { useRef, useState, useEffect } from "react";
+import { Button } from "./Buttons";
+
+export interface DurationPickerProps {
+  id?: string; // used for the hidden input for form submission
+  name?: string; // used for the hidden input for form submission
+  defaultValueSeconds?: number;
+  onChange?: (totalSeconds: number) => void;
+  variant?: "small" | "medium";
+  showClearButton?: boolean;
+}
+
+export function DurationPicker({
+  name,
+  defaultValueSeconds: defaultValue = 0,
+  onChange,
+  variant = "small",
+  showClearButton = true,
+}: DurationPickerProps) {
+  const defaultHours = Math.floor(defaultValue / 3600);
+  const defaultMinutes = Math.floor((defaultValue % 3600) / 60);
+  const defaultSeconds = defaultValue % 60;
+
+  const [hours, setHours] = useState<number>(defaultHours);
+  const [minutes, setMinutes] = useState<number>(defaultMinutes);
+  const [seconds, setSeconds] = useState<number>(defaultSeconds);
+
+  const minuteRef = useRef<HTMLInputElement>(null);
+  const hourRef = useRef<HTMLInputElement>(null);
+  const secondRef = useRef<HTMLInputElement>(null);
+
+  const totalSeconds = hours * 3600 + minutes * 60 + seconds;
+
+  const isEmpty = hours === 0 && minutes === 0 && seconds === 0;
+
+  useEffect(() => {
+    onChange?.(totalSeconds);
+  }, [totalSeconds, onChange]);
+
+  const handleHoursChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value) || 0;
+    setHours(Math.max(0, value));
+  };
+
+  const handleMinutesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value) || 0;
+    if (value >= 60) {
+      setHours((prev) => prev + Math.floor(value / 60));
+      setMinutes(value % 60);
+      return;
+    }
+
+    setMinutes(Math.max(0, Math.min(59, value)));
+  };
+
+  const handleSecondsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value) || 0;
+    if (value >= 60) {
+      setMinutes((prev) => {
+        const newMinutes = prev + Math.floor(value / 60);
+        if (newMinutes >= 60) {
+          setHours((prevHours) => prevHours + Math.floor(newMinutes / 60));
+          return newMinutes % 60;
+        }
+        return newMinutes;
+      });
+      setSeconds(value % 60);
+      return;
+    }
+
+    setSeconds(Math.max(0, Math.min(59, value)));
+  };
+
+  const handleKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    nextRef?: React.RefObject<HTMLInputElement>,
+    prevRef?: React.RefObject<HTMLInputElement>
+  ) => {
+    if (e.key === "Tab") {
+      return;
+    }
+
+    if (e.key === "ArrowRight" && nextRef) {
+      e.preventDefault();
+      nextRef.current?.focus();
+      nextRef.current?.select();
+      return;
+    }
+
+    if (e.key === "ArrowLeft" && prevRef) {
+      e.preventDefault();
+      prevRef.current?.focus();
+      prevRef.current?.select();
+      return;
+    }
+  };
+
+  const clearDuration = () => {
+    setHours(0);
+    setMinutes(0);
+    setSeconds(0);
+    hourRef.current?.focus();
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      <input type="hidden" name={name} value={totalSeconds} />
+
+      <div className="flex items-center gap-1">
+        <div className="flex items-center gap-1">
+          <Input
+            variant={variant}
+            ref={hourRef}
+            className={cn(
+              "w-10 text-center font-mono tabular-nums caret-transparent [&::-webkit-inner-spin-button]:appearance-none",
+              isEmpty && "text-text-dimmed"
+            )}
+            value={hours.toString()}
+            onChange={handleHoursChange}
+            onKeyDown={(e) => handleKeyDown(e, minuteRef)}
+            onFocus={(e) => e.target.select()}
+            type="number"
+            min={0}
+            inputMode="numeric"
+          />
+          <span className="text-sm text-text-dimmed">h</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Input
+            variant={variant}
+            ref={minuteRef}
+            className={cn(
+              "w-10 text-center font-mono tabular-nums caret-transparent [&::-webkit-inner-spin-button]:appearance-none",
+              isEmpty && "text-text-dimmed"
+            )}
+            value={minutes.toString()}
+            onChange={handleMinutesChange}
+            onKeyDown={(e) => handleKeyDown(e, secondRef, hourRef)}
+            onFocus={(e) => e.target.select()}
+            type="number"
+            min={0}
+            max={59}
+            inputMode="numeric"
+          />
+          <span className="text-sm text-text-dimmed">m</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Input
+            variant={variant}
+            ref={secondRef}
+            className={cn(
+              "w-10 text-center font-mono tabular-nums caret-transparent [&::-webkit-inner-spin-button]:appearance-none",
+              isEmpty && "text-text-dimmed"
+            )}
+            value={seconds.toString()}
+            onChange={handleSecondsChange}
+            onKeyDown={(e) => handleKeyDown(e, undefined, minuteRef)}
+            onFocus={(e) => e.target.select()}
+            type="number"
+            min={0}
+            max={59}
+            inputMode="numeric"
+          />
+          <span className="text-sm text-text-dimmed">s</span>
+        </div>
+      </div>
+
+      {showClearButton && (
+        <Button type="button" variant={`tertiary/${variant}`} onClick={clearDuration}>
+          Clear
+        </Button>
+      )}
+    </div>
+  );
+}