@anoki/fse-ui/dist/index.es111.js

FSE UI components library

import { j as t } from "./index.es244.js";
import { clsx as m } from "./index.es246.js";
import { useState as p, useRef as x, useEffect as w } from "react";
import './components/ui/DelegateFilterDropDown/DelegateFilterDropDown.css';/* empty css            */
import { Close as S } from "./index.es161.js";
import { Button as z } from "./index.es28.js";
import { Col as D } from "./index.es10.js";
const A = ({
  size: N = "large",
  items: g = [],
  className: C,
  selectedPerson: r,
  setSelectedPerson: u,
  placeholder: j = "",
  btnText: v = "Cerca"
}) => {
  const [n, o] = p(!1), [i, a] = p(""), c = x(null), d = x(null), f = g.filter((e) => `${e.firstName} ${e.lastName}`.toLowerCase().includes(i.toLowerCase()));
  w(() => {
    const e = (s) => {
      c.current && !c.current.contains(s.target) && o(!1);
    };
    return n ? document.addEventListener("mousedown", e) : document.removeEventListener("mousedown", e), () => {
      document.removeEventListener("mousedown", e);
    };
  }, [n]), w(() => {
    n && (a(""), d.current && d.current.focus());
  }, [n]);
  const b = (e) => {
    n && a(e.target.value);
  }, h = () => {
    o(!n);
  }, k = (e) => {
    e.stopPropagation(), u(null), a("");
  }, y = !n && r ? `${r.firstName} ${r.lastName}` : i, E = r !== null || i.length > 0, L = (e, s) => {
    if (!s || s.trim() === "")
      return /* @__PURE__ */ t.jsxs("span", { style: { color: "black", fontSize: "0.85rem" }, children: [
        " ",
        e,
        " "
      ] });
    const l = e.toLowerCase().indexOf(s.toLowerCase());
    if (l === -1) return e;
    const $ = e.slice(0, l), I = e.slice(l, l + s.length), R = e.slice(l + s.length);
    return /* @__PURE__ */ t.jsxs("span", { style: { color: "black", fontSize: "0.85rem" }, children: [
      $,
      /* @__PURE__ */ t.jsx("span", { style: { fontSize: "0.85rem" }, className: "text-primary fw-bold", children: I }),
      R
    ] });
  };
  return /* @__PURE__ */ t.jsxs(
    "div",
    {
      ref: c,
      className: m(
        "ui-related-dropdown",
        "br-x4 bg-border-secondary w-full",
        C
      ),
      style: N === "large" ? { maxWidth: "100%" } : { maxWidth: "553px" },
      children: [
        /* @__PURE__ */ t.jsxs("div", { className: "ui-input-container", children: [
          /* @__PURE__ */ t.jsx(
            "input",
            {
              ref: d,
              className: m(
                "ui-related-dropdown-input",
                "bg-white fs-6 br-x4 w-full pl-x24",
                { active: n }
              ),
              value: y,
              onChange: b,
              placeholder: j,
              onClick: h
            }
          ),
          E && /* @__PURE__ */ t.jsx("div", { className: "ui-close-button", onClick: k, children: /* @__PURE__ */ t.jsx(S, { width: 20 }) }),
          /* @__PURE__ */ t.jsx("div", { className: "ui-div-btn", children: /* @__PURE__ */ t.jsx(
            z,
            {
              className: m(
                "ui-btn-search",
                "bg-primary text-white fs-7 fw-semibold br-x4"
              ),
              onClick: h,
              children: v
            }
          ) })
        ] }),
        n && /* @__PURE__ */ t.jsx("div", { className: "ui-related-dropdown-options", children: /* @__PURE__ */ t.jsx("div", { className: "px-x24 shadow w-full", children: /* @__PURE__ */ t.jsx(
          D,
          {
            gap: "x4",
            text: "primary",
            fs: "custom",
            fw: "regular",
            className: "ui-options-list fw-regular",
            children: f.length > 0 ? f.map((e, s) => {
              const l = `${e.firstName} ${e.lastName}`;
              return /* @__PURE__ */ t.jsx(
                "div",
                {
                  className: "ui-option-item",
                  onClick: () => {
                    u(e), o(!1);
                  },
                  children: L(l, i)
                },
                e.fiscalCode || s
              );
            }) : /* @__PURE__ */ t.jsx("div", { className: "ui-option-item no-results", children: /* @__PURE__ */ t.jsx("span", { style: { color: "gray" }, children: "Nessun risultato trovato" }) })
          }
        ) }) })
      ]
    }
  );
};
export {
  A as DelegateFilterDropDown
};
//# sourceMappingURL=index.es111.js.map