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

FSE UI components library

import { j as e } from "./index.es237.js";
import './components/ui/CommunicationSeach/CommunicationSearch.css';/* empty css            */
import { clsx as l } from "./index.es239.js";
import { useState as C, useCallback as y, useMemo as v, Fragment as F } from "react";
import { Spinner as k } from "./index.es226.js";
import { Close as M } from "./index.es179.js";
import { Col as S } from "./index.es61.js";
import { Button as B } from "./index.es32.js";
const V = ({
  btnText: p,
  helperText: x = "Cosa vuoi approfondire?",
  value: n,
  loading: u,
  items: r,
  emptyLabel: f = "Nessun risultato disponibile",
  setValue: g,
  setSelectedElement: j
}) => {
  const [h, o] = C(!1), m = (s) => {
    const t = s.target.value;
    g(t);
  }, b = (s) => {
    j(s), o(!1);
  }, N = y((s, t) => {
    if (!t) return s;
    const a = s.toLowerCase().indexOf(t.toLowerCase());
    if (a === -1) return s;
    const i = s.slice(0, a), c = s.slice(a, a + t.length), w = s.slice(a + t.length);
    return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
      i,
      /* @__PURE__ */ e.jsx("span", { className: "text-primary fw-bold", children: c }),
      w
    ] });
  }, []), d = v(() => h || n.length >= 3 && (r == null ? void 0 : r.length) > 0 ? !0 : h, [h, r == null ? void 0 : r.length, n.length]);
  return /* @__PURE__ */ e.jsxs(
    "div",
    {
      className: l(
        "ui-communication-search",
        "br-x4 bg-border-secondary w-full"
      ),
      onBlur: () => {
        setTimeout(() => {
          o(!1);
        }, 150);
      },
      children: [
        /* @__PURE__ */ e.jsxs("div", { className: "position-relative w-full", children: [
          /* @__PURE__ */ e.jsx(
            "input",
            {
              id: "search",
              type: "search",
              className: l(
                "ui-communication-search-input",
                "fs-6 md-fs-custom text-slate-20 br-x4 w-full pl-x24"
              ),
              placeholder: x,
              "aria-label": "Barra di ricerca",
              value: n,
              onChange: m,
              onFocus: () => o(!0)
            }
          ),
          u && /* @__PURE__ */ e.jsx(k, { className: "ui-loading-spinner" }),
          n && n.length >= 3 && /* @__PURE__ */ e.jsx(
            M,
            {
              className: "ui-clean-button",
              onClick: () => {
                m({ target: { value: "" } });
              }
            }
          )
        ] }),
        /* @__PURE__ */ e.jsx(
          "div",
          {
            className: l("ui-wrap-list-item-search shadow position-absolute", {
              "py-x24": d
            }),
            children: /* @__PURE__ */ e.jsx(
              S,
              {
                gap: "x24",
                fw: "regular",
                text: "secondary",
                fs: "6",
                className: "ui-list-item-search overflow-y-auto",
                children: d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
                  r.map(
                    (s, t) => {
                      var a;
                      return (a = s.items) != null && a.length ? /* @__PURE__ */ e.jsx(F, { children: /* @__PURE__ */ e.jsxs("div", { children: [
                        /* @__PURE__ */ e.jsx("h1", { className: "category-title fw-semibold text-dark fs-6 mb-x8 px-x24", children: s.category }),
                        /* @__PURE__ */ e.jsx("ul", { className: "list-unstyled", children: s.items.map((i) => /* @__PURE__ */ e.jsx(
                          "li",
                          {
                            onClick: (c) => {
                              c.stopPropagation(), c.preventDefault(), b(i);
                            },
                            className: "cursor-pointer py-x8 px-x24",
                            children: N(i.name, n || "")
                          },
                          i.id
                        )) })
                      ] }) }, t) : /* @__PURE__ */ e.jsx(e.Fragment, {});
                    }
                  ),
                  !u && r.every((s) => s.items.length === 0) ? /* @__PURE__ */ e.jsx("p", { className: " px-x24 fs-6", children: f }) : ""
                ] })
              }
            )
          }
        ),
        /* @__PURE__ */ e.jsx("div", { className: l("ui-div-btn"), children: /* @__PURE__ */ e.jsx(
          B,
          {
            className: l(
              "ui-btn-search",
              "bg-primary text-white fs-7 md-fs-6 fw-semibold br-x4"
            ),
            onClick: () => {
              m({ target: { value: n } }), o(!0);
            },
            children: p
          }
        ) })
      ]
    }
  );
};
export {
  V as CommunicationSearch
};
//# sourceMappingURL=index.es62.js.map