92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
// * Packages
|
|
import { useState, useEffect, ReactNode } from "react";
|
|
import { usePage } from "@inertiajs/react";
|
|
// * Components shadcn
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
// * Other
|
|
import InputError from "@/back/Components/InputError";
|
|
import { cn } from "@/lib/utils";
|
|
import useTrans from "@/hooks/use-translations";
|
|
|
|
type SimpleNumberProps = {
|
|
className?: string;
|
|
name: string;
|
|
label: ReactNode | string;
|
|
value?: number;
|
|
id?: string;
|
|
step?: number;
|
|
limits?: Record<string, number>;
|
|
placeholder?: string;
|
|
required?: boolean;
|
|
disabled?: boolean;
|
|
parentErrors?: Record<string, string> | null;
|
|
// eslint-disable-next-line no-unused-vars
|
|
setData: (name: string, value: string) => void;
|
|
};
|
|
|
|
export default function SimpleNumber({
|
|
className,
|
|
value = 0,
|
|
name,
|
|
label,
|
|
id = name,
|
|
step = 1,
|
|
limits,
|
|
placeholder = "uwil-backend::back.enter_number_here",
|
|
required = true,
|
|
disabled = false,
|
|
parentErrors = null,
|
|
setData,
|
|
}: SimpleNumberProps) {
|
|
const { errors } = usePage().props;
|
|
const localErrors = parentErrors ?? errors;
|
|
|
|
const localLimits = {
|
|
min: limits?.min ? limits.min : 1,
|
|
max: limits?.max ? limits.max : 1000,
|
|
};
|
|
const safeValue =
|
|
value >= localLimits.min && value <= localLimits.max
|
|
? value
|
|
: localLimits.min;
|
|
|
|
const [inputValue, setInputValue] = useState(safeValue);
|
|
|
|
useEffect(() => {
|
|
setInputValue(safeValue);
|
|
setData(name, String(safeValue));
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [safeValue]);
|
|
|
|
return (
|
|
<div className={cn("flex flex-col w-full gap-1.5", className)}>
|
|
<Label htmlFor={id} className="flex items-center gap-1.5">
|
|
{label}
|
|
{required && " *"}
|
|
</Label>
|
|
<div className="flex w-full">
|
|
<Input
|
|
id={id}
|
|
name={name}
|
|
type="number"
|
|
placeholder={useTrans(placeholder)}
|
|
value={inputValue}
|
|
min={localLimits.min}
|
|
max={localLimits.max}
|
|
step={step}
|
|
onChange={(e) => {
|
|
setInputValue(Number(e.target.value));
|
|
setData(name, e.target.value);
|
|
}}
|
|
required={required}
|
|
disabled={disabled}
|
|
className={cn("w-full", {
|
|
"border-destructive/50": localErrors[name],
|
|
})}
|
|
/>
|
|
</div>
|
|
<InputError message={localErrors[name]} />
|
|
</div>
|
|
);
|
|
}
|