@etsoo/materialui/lib/cjs/IntInputField.js

TypeScript Material-UI Implementation

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.IntInputField = IntInputField;
const jsx_runtime_1 = require("react/jsx-runtime");
const Add_1 = __importDefault(require("@mui/icons-material/Add"));
const Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
const react_1 = __importDefault(require("react"));
const shared_1 = require("@etsoo/shared");
const InputField_1 = require("./InputField");
const Box_1 = __importDefault(require("@mui/material/Box"));
const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
const react_2 = require("@etsoo/react");
/**
 * Integer input field (controlled)
 */
function IntInputField(props) {
    // Destruct
    const { min = 0, step = 1, max = 9999999, inputRef, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = [600], onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
    const isControlled = value !== undefined;
    // State
    const [localValue, setInnerLocalValue] = react_1.default.useState();
    const localRef = react_1.default.useRef(null);
    function setLocalValue(value) {
        if (isControlled) {
            setInnerLocalValue(value);
        }
        else if (localRef.current) {
            localRef.current.value = value?.toString() ?? "";
        }
    }
    const setValue = (value, source, init = false) => {
        if (onValueChange) {
            const newValue = onValueChange(value, source, init);
            if (newValue === false)
                return;
            if (newValue === null) {
                setLocalValue(undefined);
                return;
            }
            if (newValue === true || newValue === undefined)
                setLocalValue(value);
            else
                setLocalValue(newValue);
        }
        else {
            setLocalValue(value);
        }
    };
    react_1.default.useEffect(() => {
        if (isControlled)
            setValue(value, undefined, true);
    }, [value, isControlled]);
    // Layout
    const layout = ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", inputRef: (0, react_2.useCombinedRefs)(inputRef, localRef), value: isControlled
            ? localValue == null
                ? required
                    ? min
                    : ""
                : localValue
            : undefined, slotProps: {
            input: {
                startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "start", children: symbol }) })) : undefined,
                endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: endSymbol })) : undefined
            },
            htmlInput: { min, step, max, style: inputStyle, inputMode: "numeric" }
        }, sx: buttons
            ? {
                "& input[type=number]::-webkit-inner-spin-button": {
                    WebkitAppearance: "none",
                    margin: 0
                },
                "& input[type=number]::-webkit-outer-spin-button": {
                    WebkitAppearance: "none",
                    margin: 0
                }
            }
            : undefined, onChange: (event) => {
            const source = event.target.value;
            setLocalValue(source);
            if (onChange)
                onChange(event);
        }, changeDelay: changeDelay, onChangeDelay: (event) => {
            const source = event.target.value;
            const value = parseFloat(source);
            if (isNaN(value))
                setValue(undefined, source);
            else if (value > max)
                setValue(max, source);
            else if (value < min)
                setValue(value === 0 ? undefined : min, source);
            // 0 is a special case
            else
                setValue(value, source);
            if (onChangeDelay)
                onChangeDelay(event);
        }, onFocus: onFocus, required: required, ...rest }));
    if (buttons)
        return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: {
                display: "flex",
                alignItems: "center",
                width: "100%",
                gap: 0.5,
                ...boxProps
            }, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: () => {
                        if (localValue == null)
                            return;
                        const value = shared_1.NumberUtils.parse(localValue);
                        if (value == null)
                            return;
                        if (value <= min)
                            setValue(undefined, "SUB");
                        else
                            setValue(value - step, "SUB");
                    }, children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), layout, (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: () => {
                        if (localValue == null) {
                            setValue(min, "ADD");
                            return;
                        }
                        const value = shared_1.NumberUtils.parse(localValue);
                        if (value == null)
                            return;
                        if (value >= max)
                            return;
                        else
                            setValue(value + step, "ADD");
                    }, children: (0, jsx_runtime_1.jsx)(Add_1.default, { color: localValue == null ? undefined : "primary" }) })] }));
    else
        return layout;
}