@etsoo/materialui/lib/cjs/TwoFieldInput.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.TwoFieldInput = TwoFieldInput;
const jsx_runtime_1 = require("react/jsx-runtime");
const ArrowRightAlt_1 = __importDefault(require("@mui/icons-material/ArrowRightAlt"));
const react_1 = require("@etsoo/react");
const react_2 = __importDefault(require("react"));
const shared_1 = require("@etsoo/shared");
const InputField_1 = require("./InputField");
const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
const Input_1 = __importDefault(require("@mui/material/Input"));
/**
 * TwoField Input
 * @param props Props
 * @returns Component
 */
function TwoFieldInput(props) {
    // Destruct
    const { name, inputProps, type = inputProps?.inputMode, values, onValuesChange, onChange, onInput, ...rest } = props;
    // Local values
    const localValues = values == null
        ? [null, null]
        : Array.isArray(values)
            ? values
            : [values, null];
    // Ref
    const valueRef = react_2.default.useRef(localValues);
    // Watch container
    const { dimensions } = (0, react_1.useDimensions)(1, (target, rect) => {
        const width = (rect.width - 64) / 2;
        const inputs = target.querySelectorAll("input");
        inputs[0].style.width = `${width}px`;
        inputs[1].parentElement.style.width = `${width}px`;
    }, 0);
    // Handle change
    const handleChange = (event) => {
        const value = shared_1.DomUtils.getInputValue(event.target);
        const index = event.target.name.endsWith("-start") ? 0 : 1;
        valueRef.current[index] = value;
        if (onValuesChange) {
            if (onValuesChange(valueRef.current) === false)
                return;
        }
        if (onChange)
            onChange(event);
    };
    const formatValue = (v, type) => {
        if (v == null)
            return "";
        if (typeof v === "number")
            return v;
        if (type === "date" || type === "datetime-local")
            return shared_1.DateUtils.formatForInput(v, type);
        return v;
    };
    react_2.default.useEffect(() => {
        valueRef.current = localValues;
    }, [localValues]);
    // Layout
    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], inputProps: inputProps, InputProps: {
            endAdornment: ((0, jsx_runtime_1.jsxs)(InputAdornment_1.default, { position: "end", sx: {
                    display: "flex",
                    alignItems: "center",
                    gap: 1
                }, children: [(0, jsx_runtime_1.jsx)(ArrowRightAlt_1.default, {}), (0, jsx_runtime_1.jsx)(Input_1.default, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })] }))
        }, onInput: onInput, onChange: handleChange, ...rest }));
}