@anoki/fse-marche-ui/dist/index.es15.js

FSE UI components library

import { j as e } from "./index.es137.js";
import { useState as g } from "react";
import { clsx as n } from "./index.es139.js";
import './components/ui/SearchGeneric/SearchGeneric.css';/* empty css            */
import { useMediaQuery as B } from "./index.es149.js";
import { Close as E } from "./index.es79.js";
import { Col as M } from "./index.es10.js";
import { Button as R } from "./index.es25.js";
function H({
  btnText: w,
  helperText: m,
  mobileHelperText: b = m,
  value: j,
  items: v,
  setValue: u,
  setTypedValue: h,
  getSearchField: p,
  getDisplayField: d = p,
  onItemSelect: x,
  minCharsToSearch: C = 3,
  className: N
}) {
  const [r, l] = g(j || ""), [f, a] = g([]), y = B("(min-width: 768px)"), I = (t) => {
    const s = t.target.value;
    if (l(s), h && h(s), s.length >= C) {
      const c = v.filter((i) => {
        const o = p(i);
        return o == null ? void 0 : o.toLowerCase().includes(s.toLowerCase());
      });
      a(c);
    } else
      a([]);
  }, L = (t) => {
    const s = d(t);
    l(s), u(s), a([]), x && x(t);
  }, k = (t, s) => {
    if (!s) return t;
    const c = t.split(new RegExp(`(${s})`, "gi"));
    return /* @__PURE__ */ e.jsx(e.Fragment, { children: c.map(
      (i, o) => i.toLowerCase() === s.toLowerCase() ? /* @__PURE__ */ e.jsx("span", { className: "text-primary fw-bold", children: i }, o) : i
    ) });
  };
  return /* @__PURE__ */ e.jsxs(
    "div",
    {
      className: n(
        "ui-search",
        "br-x4 bg-border-secondary w-full",
        N
      ),
      children: [
        /* @__PURE__ */ e.jsxs("div", { className: "position-relative", children: [
          /* @__PURE__ */ e.jsx(
            "input",
            {
              id: "search",
              type: "text",
              className: n(
                "ui-search-input",
                "fs-6 md-fs-custom text-slate-20 br-x4 w-full pl-x24",
                r && r.length >= 3 && "has-clear-icon"
              ),
              placeholder: y ? m : b,
              "aria-label": "Barra di ricerca",
              value: r,
              onChange: I,
              maxLength: 30
            }
          ),
          r && /* @__PURE__ */ e.jsx(
            E,
            {
              className: "ui-clean-button",
              onClick: () => {
                l(""), a([]);
              }
            }
          )
        ] }),
        f.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "ui-wrap-list-item-search shadow position-absolute p-x24", children: /* @__PURE__ */ e.jsx(
          M,
          {
            gap: "x24",
            fw: "regular",
            text: "secondary",
            fs: "6",
            className: "ui-list-item-search overflow-y-auto ",
            children: f.map((t, s) => /* @__PURE__ */ e.jsx(
              "div",
              {
                onClick: () => L(t),
                className: "hover:bg-primary",
                children: k(d(t), r)
              },
              s
            ))
          }
        ) }),
        /* @__PURE__ */ e.jsx("div", { className: n("ui-div-btn"), children: /* @__PURE__ */ e.jsx(
          R,
          {
            className: n(
              "ui-btn-search",
              "bg-primary text-white fs-7 md-fs-6 fw-semibold br-x4"
            ),
            onClick: () => {
              a([]), u(r);
            },
            children: w
          }
        ) })
      ]
    }
  );
}
export {
  H as SearchGeneric
};
//# sourceMappingURL=index.es15.js.map