daily-toolset
Version:
A lightweight, versatile collection of TypeScript utility functions for everyday development needs. Simplify and streamline your Node.js, React, and Next.js projects with a powerful suite of well-organized helpers for strings, arrays, dates, objects, and
75 lines (74 loc) • 5.74 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiSelect = MultiSelect;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const lu_1 = require("react-icons/lu");
const command_1 = require("../../components/ui/command");
const popover_1 = require("../../components/ui/popover");
const scroll_area_1 = require("../../components/ui/scroll-area");
const Button_1 = require("./Button");
const formProvider_1 = require("../formProvider");
const FormLabel_1 = require("./FormLabel");
const lu_2 = require("react-icons/lu");
const InputError_1 = require("./InputError");
function MultiSelect({ addEmpty = false, name, label, options, isDisabled = false, isRequired = true, isSearchable = false, isClearable = true, defaultValue, handleSelection, error, placeholder, ...rest }) {
const { formValues, formErrors, updateValue, validateField } = (0, formProvider_1.useForm)();
const [open, setOpen] = (0, react_1.useState)(false);
const [value, setValue] = (0, react_1.useState)(defaultValue || []);
const id = (0, react_1.useId)();
(0, react_1.useEffect)(() => {
var _a, _b;
const inputValue = (defaultValue
? defaultValue
: name
? (_b = (_a = formValues === null || formValues === void 0 ? void 0 : formValues[name]) === null || _a === void 0 ? void 0 : _a.split(",")) !== null && _b !== void 0 ? _b : []
: []);
if (name && inputValue) {
setValue(inputValue);
}
}, [formValues, name]);
const errorData = error
? error
: name
? (formErrors === null || formErrors === void 0 ? void 0 : formErrors[name]) || ""
: "";
let formattedOptions = (options === null || options === void 0 ? void 0 : options.map((option) => {
var _a, _b, _c;
return ({
value: ((_a = option.value) === null || _a === void 0 ? void 0 : _a.toString()) || "",
label: ((_b = option.label) === null || _b === void 0 ? void 0 : _b.toString()) || "",
disabled: (_c = option.disabled) !== null && _c !== void 0 ? _c : false,
});
})) || [];
if (addEmpty && options)
formattedOptions = [
{ value: "", label: "", disabled: false },
...formattedOptions,
];
async function handleSelectOptions(selected) {
let newValue = value;
if (!value.includes(selected)) {
newValue = [...value, selected];
}
else {
newValue = [...value.filter((v) => v !== selected)];
}
setValue(newValue);
handleSelection
? handleSelection(newValue)
: updateValue(name, newValue.join(","));
await validateField(name, newValue.join(","));
}
return ((0, jsx_runtime_1.jsxs)("div", { className: "explita-input-root", children: [(0, jsx_runtime_1.jsx)(FormLabel_1.Label, { id: id, label: label, isRequired: isRequired }), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(Button_1.Button, { variant: "outline", role: "combobox", "aria-expanded": open, "data-error": errorData.length > 0, "data-empty": value.length === 0, "data-clearable": isClearable, className: "multi-select-input", disabled: isDisabled, children: [value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "multi-select-items", children: value.map((v) => {
var _a;
const label = (_a = formattedOptions.find((item) => item.value === v)) === null || _a === void 0 ? void 0 : _a.label;
return ((0, jsx_runtime_1.jsx)(SelectItem, { value: v, label: label || "", handleSelectOptions: handleSelectOptions }, v));
}) })) : ((0, jsx_runtime_1.jsx)("span", { children: placeholder })), (0, jsx_runtime_1.jsx)(lu_1.LuChevronsUpDown, { className: "chevron-icon" })] }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "explita-popover-content", align: "start", children: (0, jsx_runtime_1.jsxs)(command_1.Command, { children: [isSearchable && (0, jsx_runtime_1.jsx)(command_1.CommandInput, { placeholder: "Search..." }), (0, jsx_runtime_1.jsx)(command_1.CommandList, { children: (0, jsx_runtime_1.jsx)(scroll_area_1.ScrollArea, { children: (0, jsx_runtime_1.jsxs)("div", { className: "select-list", children: [(0, jsx_runtime_1.jsx)(command_1.CommandEmpty, { className: "empty-list", children: "No records found." }), (0, jsx_runtime_1.jsx)(command_1.CommandGroup, { children: formattedOptions.map((item) => ((0, jsx_runtime_1.jsxs)(command_1.CommandItem, { value: item.value, onSelect: async (currentValue) => {
handleSelectOptions(currentValue);
}, className: "select-list-item", children: [item.label, (0, jsx_runtime_1.jsx)(lu_1.LuCheck, { "data-checked": value && value.includes(item.value), className: "check-icon" })] }, item.value))) })] }) }) })] }) })] }), (0, jsx_runtime_1.jsx)(InputError_1.InputError, { message: errorData }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: value.join(","), id: id })] }));
}
function SelectItem({ label, value, handleSelectOptions }) {
return ((0, jsx_runtime_1.jsxs)("span", { className: "multi-select-item", children: [label, (0, jsx_runtime_1.jsx)("span", { onClick: () => handleSelectOptions(value || ""), children: (0, jsx_runtime_1.jsx)(lu_2.LuX, {}) })] }));
}