shelving/ui/form/ArrayInput.js

Toolkit for using data in JavaScript.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
import { omitArrayIndex, withArrayIndex } from "../../util/array.js";
import { splitMessage } from "../../util/error.js";
import { formatUnit } from "../../util/format.js";
import { Flex } from "../style/Flex.js";
import { Button } from "./Button.js";
import { ButtonInput } from "./ButtonInput.js";
import { SchemaInput } from "./SchemaInput.js";
export function ArrayInput({ name, 
// title,
placeholder, required = false, disabled = false, message = "", value = [], onValue, one = "item", many = `${one}s`, min = 0, max = Number.POSITIVE_INFINITY, items, }) {
    const messages = splitMessage(message);
    const length = value.length;
    const disableRemove = disabled || length <= min;
    const addNewItem = () => onValue([...value, items.value]);
    return (_jsxs(Flex, { column: true, children: [length ? (value.map((v, i) => {
                const k = i.toString();
                return (_jsxs(Flex, { children: [_jsx(SchemaInput, { name: k, schema: items, value: v, onValue: x => onValue(withArrayIndex(value, i, x)), message: messages[k], disabled: disabled }), _jsx(Button, { onClick: () => onValue(omitArrayIndex(value, i)), disabled: disableRemove, title: disableRemove ? `Minimum ${formatUnit(min, one, { unitDisplay: "long", one, many })}` : `Remove ${one}`, children: _jsx(XMarkIcon, {}) })] }, k));
            })) : (_jsx(ButtonInput, { onClick: addNewItem, name: name, required: required && min > 1, disabled: disabled, children: placeholder })), _jsxs(Flex, { children: [_jsxs(Button //
                    , { onClick: addNewItem, disabled: disabled || (typeof max === "number" && length >= max), small: true, children: [_jsx(PlusIcon, {}), " Add ", one] }), length && min < 1 ? (_jsxs(Button //
                    , { onClick: () => onValue([]), small: true, children: [_jsx(XMarkIcon, {}), " Clear ", many] })) : null] })] }));
}