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