136 lines
3.9 KiB
TypeScript
136 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, type KeyboardEvent } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** Keep only digits and a single leading minus sign, so junk like "1-2" can't be typed. */
|
|
function sanitizeSigned(value: string): string {
|
|
const cleaned = value.replace(/[^0-9-]/g, "");
|
|
return cleaned.replace(/(?!^)-/g, ""); // drop any minus that isn't at the start
|
|
}
|
|
|
|
interface FractionInputProps {
|
|
numerator: string;
|
|
denominator: string;
|
|
onNumeratorChange: (value: string) => void;
|
|
onDenominatorChange: (value: string) => void;
|
|
onSubmit?: () => void;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function FractionInput({
|
|
numerator,
|
|
denominator,
|
|
onNumeratorChange,
|
|
onDenominatorChange,
|
|
onSubmit,
|
|
disabled = false,
|
|
className,
|
|
}: FractionInputProps) {
|
|
const denominatorRef = useRef<HTMLInputElement>(null);
|
|
|
|
const inputClass =
|
|
"w-16 rounded-lg border border-border bg-surface px-2 py-1.5 text-center text-lg font-bold focus:border-unit-1 focus:outline-none";
|
|
|
|
return (
|
|
<div className={cn("inline-flex flex-col items-center gap-0.5", className)}>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
value={numerator}
|
|
onChange={(e) => onNumeratorChange(sanitizeSigned(e.target.value))}
|
|
onKeyDown={(e) => {
|
|
// "/" is how pupils think of a fraction — jump to the denominator.
|
|
if (e.key === "/" || e.key === "Enter") {
|
|
if (e.key === "/") {
|
|
e.preventDefault();
|
|
denominatorRef.current?.focus();
|
|
} else {
|
|
onSubmit?.();
|
|
}
|
|
}
|
|
}}
|
|
disabled={disabled}
|
|
className={inputClass}
|
|
placeholder="?"
|
|
aria-label="Numerator"
|
|
/>
|
|
<div className="h-0.5 w-16 bg-foreground" />
|
|
<input
|
|
ref={denominatorRef}
|
|
type="text"
|
|
inputMode="numeric"
|
|
value={denominator}
|
|
onChange={(e) => onDenominatorChange(sanitizeSigned(e.target.value))}
|
|
onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Enter") onSubmit?.();
|
|
}}
|
|
disabled={disabled}
|
|
className={inputClass}
|
|
placeholder="?"
|
|
aria-label="Denominator"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface DecimalInputProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
onSubmit?: () => void;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function DecimalInput({ value, onChange, onSubmit, disabled, className }: DecimalInputProps) {
|
|
return (
|
|
<input
|
|
type="text"
|
|
inputMode="decimal"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") onSubmit?.();
|
|
}}
|
|
disabled={disabled}
|
|
className={cn(
|
|
"w-28 rounded-lg border border-border bg-surface px-3 py-2 text-center text-lg font-bold focus:border-unit-2 focus:outline-none",
|
|
className,
|
|
)}
|
|
placeholder="?"
|
|
aria-label="Answer"
|
|
/>
|
|
);
|
|
}
|
|
|
|
interface RatioInputProps {
|
|
parts: string[];
|
|
onChange: (index: number, value: string) => void;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function RatioInput({ parts, onChange, disabled, className }: RatioInputProps) {
|
|
return (
|
|
<div className={cn("inline-flex items-center gap-1", className)}>
|
|
{parts.map((p, i) => (
|
|
<span key={i} className="flex items-center gap-1">
|
|
{i > 0 && <span className="text-lg font-bold text-muted">:</span>}
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
pattern="[0-9]*"
|
|
value={p}
|
|
onChange={(e) => onChange(i, e.target.value)}
|
|
disabled={disabled}
|
|
className="w-14 rounded-lg border border-border bg-surface px-2 py-2 text-center text-lg font-bold focus:border-unit-4 focus:outline-none"
|
|
placeholder="?"
|
|
aria-label={`Part ${i + 1}`}
|
|
/>
|
|
</span>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|