xtreme-ui
Version:
Collection of reusable components that can be used in web projects
78 lines (77 loc) • 2 kB
JavaScript
"use client";
import { jsxs as O, jsx as c } from "react/jsx-runtime";
import j from "clsx";
import { Icon as y } from "gliff";
import { useId as z, useState as H, useMemo as q } from "react";
import w from "react-select";
import { isEqual as h } from "../../../utils/function/common.js";
import './select.css';/* empty css */
function X(S) {
const {
className: v,
multi: e = !1,
placeholder: n = "Select an option",
noOptionsMessage: x,
icon: t,
size: i = "default",
iconType: g = "regular",
clearable: b = !0,
searchable: u = !0,
disabled: C = !1,
loading: N = !1,
options: s,
value: o,
onChange: m
} = S, p = z(), [f, d] = H(!1), I = q(() => {
if (e) {
const l = o ?? [];
return s.filter((a) => l.some((r) => h(a.value, r)));
} else
return s.find((l) => h(l.value, o)) || null;
}, [e, s, o]), M = j(
"xtrSelectWrapper",
i && `${i}Size`,
e ? "multi" : "single",
t && "withIcon",
!!o && "withValue",
f && "open",
!u && "noSearch",
v
);
return /* @__PURE__ */ O("div", { className: M, children: [
/* @__PURE__ */ c(
w,
{
className: "xtrSelect",
classNamePrefix: "xtrSelect",
id: p,
isMulti: e,
menuIsOpen: f,
onMenuOpen: () => d(!0),
onMenuClose: () => d(!1),
noOptionsMessage: x,
placeholder: n,
isClearable: b,
isSearchable: u,
isDisabled: C,
isLoading: N,
options: s,
value: I,
onChange: (l) => {
if (e) {
const a = l?.map((r) => r.value) ?? [];
m(a);
} else {
const a = l?.value ?? null;
m(a);
}
}
}
),
n && !e && /* @__PURE__ */ c("label", { className: "placeholder", htmlFor: p, children: n }),
t && /* @__PURE__ */ c(y, { className: "xtrSelectIcon", code: t, type: g })
] });
}
export {
X as Select
};