ERitors-Scribe-Desktop/components/form/NumberInput.tsx

import React, {ChangeEvent, Dispatch} from "react";

interface NumberInputProps {
    value: number | null;
    setValue?: Dispatch<React.SetStateAction<number>>;
    onValueChange?: (value: number | null) => void;
    placeholder?: string;
    readOnly?: boolean;
    disabled?: boolean;
}

export default function NumberInput(
    {
        value,
        setValue,
        onValueChange,
        placeholder,
        readOnly = false,
        disabled = false
    }: NumberInputProps
) {
    function handleChange(e: ChangeEvent<HTMLInputElement>): void {
        const inputValue: string = e.target.value;
        if (inputValue === '') {
            if (onValueChange) {
                onValueChange(null);
            }
            return;
        }
        const newValue: number = parseInt(inputValue, 10);
        if (!isNaN(newValue)) {
            if (onValueChange) {
                onValueChange(newValue);
            } else if (setValue) {
                setValue(newValue);
            }
        }
    }

    return (
        <input
            type="number"
            value={value ?? ''}
            onChange={handleChange}
            className="input-base"
            placeholder={placeholder}
            readOnly={readOnly}
            disabled={disabled}
        />
    )
}