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
65 lines (64 loc) • 5.41 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Select = Select;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const lu_1 = require("react-icons/lu");
const button_1 = require("../../components/ui/button");
const command_1 = require("../../components/ui/command");
const popover_1 = require("../../components/ui/popover");
const scroll_area_1 = require("../../components/ui/scroll-area");
const FormLabel_1 = require("./FormLabel");
const ClearInput_1 = require("./ClearInput");
const InputError_1 = require("./InputError");
const formProvider_1 = require("../formProvider");
const stringUtils_1 = require("../../stringUtils");
function Select({ addEmpty = false, align = "start", name = "", label, options, isDisabled = false, isRequired = true, isSearchable = false, isClearable = true, defaultValue, handleSelection, error, placeholder = "", }) {
const { formValues, formErrors, updateValue, validateField } = (0, formProvider_1.useForm)();
const [open, setOpen] = (0, react_1.useState)(false);
const id = (0, react_1.useId)();
const [inputValue, setInputValue] = (0, react_1.useState)("");
const errorData = error
? error
: name
? (formErrors === null || formErrors === void 0 ? void 0 : formErrors[name]) || ""
: "";
const formattedOptions = (0, react_1.useMemo)(() => {
let optionsList = (options === null || options === void 0 ? void 0 : options.map((option) => {
var _a, _b;
return ({
...option,
value: ((_a = option.value) === null || _a === void 0 ? void 0 : _a.toString()) || "",
disabled: (_b = option.disabled) !== null && _b !== void 0 ? _b : false,
});
})) || [];
if (addEmpty && options) {
optionsList = [{ value: "", label: "", disabled: false }, ...optionsList];
}
return optionsList;
}, [options, addEmpty]);
(0, react_1.useEffect)(() => {
var _a;
const value = (name ? (_a = formValues[name]) !== null && _a !== void 0 ? _a : "" : "").toString();
if (value) {
setInputValue(value);
}
}, [formValues[name]]);
(0, react_1.useEffect)(() => {
setInputValue((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()) || "");
}, [defaultValue]);
async function handleSelect(currentValue) {
if (currentValue === inputValue && !isClearable) {
setOpen(false);
return;
}
const selected = currentValue === inputValue && isClearable ? "" : currentValue;
setInputValue(selected);
handleSelection ? handleSelection(selected) : updateValue(name, selected);
await validateField(name, selected);
setOpen(false);
}
const selectedOption = formattedOptions.find((item) => item.value === inputValue);
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.jsxs)("div", { children: [isClearable && inputValue && !isDisabled && ((0, jsx_runtime_1.jsx)(ClearInput_1.Clear, { onClick: () => handleSelect("") })), (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": !inputValue, "data-clearable": isClearable && inputValue, className: "select-trigger", disabled: isDisabled, children: [(0, jsx_runtime_1.jsx)("span", { children: inputValue ? (0, stringUtils_1.stripTags)(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) : placeholder }), (!isClearable || !inputValue) && ((0, jsx_runtime_1.jsx)(lu_1.LuChevronsUpDown, { className: "chevron-icon" }))] }) })] }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "explita-popover-content", align: align, 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: handleSelect, className: "select-list-item", children: [(0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", { children: item.label }), (0, jsx_runtime_1.jsx)("span", { className: "description", children: item.description })] }), (0, jsx_runtime_1.jsx)(lu_1.LuCheck, { "data-checked": inputValue && inputValue === 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: inputValue, id: id })] }));
}