ayongui/es/ayongui/components/select/index.mjs

import { j as s } from "../../../react/jsx-runtime.mjs";
import w, { useState as y, useRef as S, useEffect as L } from "react";
import t from "./index.module.less.mjs";
import F from "./components/lefticon/index.mjs";
import Q from "./components/multiple/index.mjs";
import U from "./components/option/index.mjs";
import X from "./components/single/index.mjs";
const N = (v) => {
  const {
    mode: r = "single",
    style: H,
    bordered: I = !0,
    value: o,
    search: x,
    options: $ = [],
    disabled: b,
    className: K = "",
    clearable: _,
    defaultValue: A,
    optionRender: B = null,
    optionHeaderRender: E = null,
    onChange: c = () => {
    },
    children: T
  } = v, P = { ...H }, C = /* @__PURE__ */ new Map();
  let d = $;
  if (!d.length) {
    const e = w.Children.map(T, (n) => {
      if (w.isValidElement(n) && n.type.displayName === "Option")
        return {
          value: n.props.value,
          label: n.props.children || n.props.label,
          disabled: n.props.disabled
        };
    });
    e && (d = e);
  }
  d.forEach((e) => C.set(e.value, e.label));
  const [u, p] = y(""), [l, a] = y(A), [i, f] = y(!1), [m, O] = y(!1), W = S(null), j = S(null);
  L(() => {
    const e = (n) => {
      j.current && !j.current.contains(n.target) && f(!1);
    };
    return document.addEventListener("click", e), () => {
      document.removeEventListener("click", e);
    };
  }, []);
  const k = S(!0);
  L(() => {
    if (k.current) {
      k.current = !1;
      return;
    }
    ["multiple", "tag"].includes(r) && (A.forEach((e) => {
      $.find((n) => n.value === e).disabled || g(e);
    }), Array.isArray(o) && o.length && (a(o), p("")), f(!1)), r === "single" && (a(o), p(""));
  }, [o]);
  const g = (e, n) => {
    n || (a((h) => Array.isArray(h) && r !== "single" ? Array.from(/* @__PURE__ */ new Set([...h, e.value])) : e.value), p(""), c(e.value), r === "single" && f(!1));
  }, q = (e) => {
    e.stopPropagation(), !b && f(!i);
  }, R = (e) => {
    p(e.target.value);
  }, V = () => {
    u.length || (a(l.slice(0, l.length - 1)), c(l.slice(0, l.length - 1)));
  }, D = (e) => {
    a(l.filter((n, h) => h !== e)), c(l);
  }, z = () => {
    const e = b ? t.disabled : "";
    return `${t.customSelect} ${e} ${K}`;
  }, G = () => {
    const e = b ? "" : t.mainHover;
    return i ? `${t.main} ${e} ${t.active}  ` : `${t.main} ${e} `;
  }, J = () => {
    _ && O(!0);
  }, M = () => {
    a(Array.isArray(l) && r !== "single" ? [] : ""), c(Array.isArray(l) && r !== "single" ? [] : "");
  };
  return /* @__PURE__ */ s.jsxs("div", { style: P, className: z(), children: [
    /* @__PURE__ */ s.jsx(
      "main",
      {
        ref: j,
        onClick: q,
        className: G(),
        onMouseEnter: J,
        onMouseLeave: () => O(!1),
        style: { border: !I && "none" },
        children: ["multiple", "tag"].includes(r) ? /* @__PURE__ */ s.jsxs(w.Fragment, { children: [
          /* @__PURE__ */ s.jsx(
            Q,
            {
              ...v,
              searchTerm: u,
              optionsMap: C,
              showClearable: m,
              selectedValues: l,
              onKeyDown: V,
              handleOptionClick: g,
              onChange: R,
              handleDeltselectedValues: D
            }
          ),
          /* @__PURE__ */ s.jsx(F, { search: x, onClearValue: M, showClearable: m, isDropdownVisible: i })
        ] }) : /* @__PURE__ */ s.jsxs("div", { className: r === "single" ? t.singleBox : t.multipleBox, children: [
          /* @__PURE__ */ s.jsx(
            X,
            {
              ...v,
              searchTerm: u,
              optionsMap: C,
              showClearable: m,
              selectedValues: l,
              onKeyDown: V,
              handleOptionClick: g,
              onChange: R,
              handleDeltselectedValues: D
            }
          ),
          /* @__PURE__ */ s.jsx(F, { search: x, onClearValue: M, showClearable: m, isDropdownVisible: i })
        ] })
      }
    ),
    /* @__PURE__ */ s.jsxs("ul", { ref: W, className: `${t.dropdown} ${i ? t.dropdownOpen : t.dropdownClose}`, children: [
      typeof E == "function" && /* @__PURE__ */ s.jsx("div", { className: t.optionHeader, children: E() }),
      /* @__PURE__ */ s.jsx(U, { mode: r, options: d, search: x, optionRender: B, searchTerm: u, selectedValues: l, onClick: g })
    ] })
  ] });
};
N.displayName = "Select";
N.Option = () => /* @__PURE__ */ s.jsx(s.Fragment, {});
N.Option.displayName = "Option";
export {
  N as default
};