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

FSE UI components library

import { j as t } from "./index.es278.js";
import { clsx as d } from "./index.es280.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.es80.js";
import { Button as z } from "./index.es36.js";
import { Col as D } from "./index.es82.js";
const A = ({
  size: N = "large",
  items: g = [],
  className: C,
  selectedPerson: n,
  setSelectedPerson: u,
  placeholder: j = "",
  btnText: v = "Cerca"
}) => {
  const [i, a] = p(!1), [r, o] = p(""), c = x(null), m = x(null), f = g.filter((e) => `${e.firstName} ${e.lastName} ${e.relationship}`.toLowerCase().includes(r.toLowerCase()));
  w(() => {
    const e = (s) => {
      c.current && !c.current.contains(s.target) && a(!1);
    };
    return i ? document.addEventListener("mousedown", e) : document.removeEventListener("mousedown", e), () => {
      document.removeEventListener("mousedown", e);
    };
  }, [i]), w(() => {
    i && (o(""), m.current && m.current.focus());
  }, [i]);
  const b = (e) => {
    i && o(e.target.value);
  }, h = () => {
    a(!i);
  }, k = (e) => {
    e.stopPropagation(), u(null), o("");
  }, $ = !i && n ? `${n.firstName} ${n.lastName} (${n.relationship})` : r, y = n !== null || r.length > 0, E = (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 L = 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: [
      L,
      /* @__PURE__ */ t.jsx("span", { style: { fontSize: "0.85rem" }, className: "text-primary fw-bold", children: I }),
      R
    ] });
  };
  return /* @__PURE__ */ t.jsxs(
    "div",
    {
      ref: c,
      className: d(
        "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: m,
              className: d(
                "ui-related-dropdown-input",
                "bg-white fs-6 br-x4 w-full pl-x24",
                { active: i }
              ),
              value: $,
              onChange: b,
              placeholder: j,
              onClick: h
            }
          ),
          y && /* @__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: d(
                "ui-btn-search",
                "bg-primary text-white fs-7 fw-semibold br-x4"
              ),
              onClick: h,
              children: v
            }
          ) })
        ] }),
        i && /* @__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} (${e.relationship})`;
              return /* @__PURE__ */ t.jsx(
                "div",
                {
                  className: "ui-option-item",
                  onClick: () => {
                    u(e), a(!1);
                  },
                  children: E(l, r)
                },
                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.es101.js.map