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

FSE UI components library

import { j as e } from "./index.es244.js";
import './components/ui/SearchStructure/SearchStructure.css';/* empty css            */
import { clsx as l } from "./index.es246.js";
import { useState as h } from "react";
import { useMediaQuery as N } from "./index.es281.js";
import { Close as I } from "./index.es161.js";
import { Col as y } from "./index.es10.js";
import { Button as L } from "./index.es28.js";
const D = ({
  btnText: u,
  helperText: d,
  mobileHelperText: p = d,
  value: x,
  items: f,
  setValue: g
}) => {
  const [r, c] = h(x), [m, i] = h([]), w = N("(min-width: 768px)"), b = (s) => {
    const t = s.target.value;
    if (c(t), t.length >= 3) {
      const a = f.filter(
        (o) => [o.address.streetName, o.address.zipCode, o.address.city].some(
          (n) => n == null ? void 0 : n.toLowerCase().includes(t.toLowerCase())
        )
      );
      i(a);
    } else
      i([]);
  }, j = (s) => {
    c(s.address.plainAddress), i([]);
  }, C = (s, t) => {
    if (!t) return s;
    const a = s.toLowerCase().indexOf(t.toLowerCase());
    if (a === -1) return s;
    const o = s.slice(0, a), n = s.slice(a, a + t.length), v = s.slice(a + t.length);
    return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
      o,
      /* @__PURE__ */ e.jsx("span", { className: "text-primary fw-bold", children: n }),
      v
    ] });
  };
  return /* @__PURE__ */ e.jsxs("div", { className: l("ui-search", "br-x4 bg-border-secondary w-full"), children: [
    /* @__PURE__ */ e.jsxs("div", { className: "position-relative", children: [
      /* @__PURE__ */ e.jsx(
        "input",
        {
          id: "search",
          type: "text",
          className: l(
            "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: w ? d : p,
          value: r,
          onChange: b,
          maxLength: 30
        }
      ),
      r && r.length >= 3 && /* @__PURE__ */ e.jsx(
        I,
        {
          className: "ui-clean-button",
          onClick: () => {
            c(""), i([]);
          }
        }
      )
    ] }),
    m.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "ui-wrap-list-item-search shadow position-absolute p-x24", children: /* @__PURE__ */ e.jsx(
      y,
      {
        gap: "x24",
        fw: "regular",
        text: "secondary",
        fs: "6",
        className: "ui-list-item-search overflow-y-auto ",
        children: m.map((s, t) => /* @__PURE__ */ e.jsx("div", { onClick: () => j(s), children: C(s.address.plainAddress, r || "") }, t))
      }
    ) }),
    /* @__PURE__ */ e.jsx("div", { className: l("ui-div-btn"), children: /* @__PURE__ */ e.jsx(
      L,
      {
        className: l(
          "ui-btn-search",
          "bg-primary text-white fs-7 md-fs-6 fw-semibold br-x4"
        ),
        onClick: () => {
          i([]), g(r ?? "");
        },
        children: u
      }
    ) })
  ] });
};
export {
  D as SearchStructure
};
//# sourceMappingURL=index.es12.js.map