dgz-ui-shared/dist/chunks/Search-DunDXQgP.es.js

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library

import { jsxs as l, jsx as s } from "react/jsx-runtime";
import { Button as c } from "dgz-ui/button";
import { Form as B, Input as O } from "dgz-ui/form";
import { Popover as C, PopoverTrigger as L, PopoverContent as W } from "dgz-ui/popover";
import { g as E, M as U } from "./MyInput-ByJ5vTAN.es.js";
import { ListFilterPlusIcon as $, ListFilterIcon as q, ChevronDown as G } from "lucide-react";
import { memo as H, useState as h, useEffect as x, useCallback as S } from "react";
import { useTranslation as w } from "react-i18next";
import { u as J } from "./useFilter-DpCwY1KO.es.js";
import { M as Q } from "./MySelect-CRXtMlbf.es.js";
import { p as V } from "./index-E1NtSoNr.es.js";
import { cn as X } from "dgz-ui/utils";
import { K as k } from "./Keyboard-CJVAJWdO.es.js";
const me = H(function({
  filters: t,
  params: n,
  onFilter: o,
  onChange: r,
  onCancel: y,
  triggerProps: i,
  contentProps: m,
  title: a,
  resetText: I,
  applyText: M,
  ...P
}) {
  const { t: p } = w(), [z, T] = h(!1), [j, d] = h(!1), { form: v } = J({ params: n }), { watch: D, handleSubmit: F, control: b, reset: N } = v;
  x(() => {
    let e = !1;
    t.map((A) => {
      const u = E(n, `${A.name}`);
      (Array.isArray(u) ? u.length > 0 : u) && (e = !0), T(e);
    });
  }, [t, n]);
  const g = D();
  x(() => {
    r == null || r(g);
  }, [g, r]);
  const K = S(
    (e = {}) => {
      o == null || o(e), d(!1);
    },
    [o]
  ), R = S(() => {
    N(), o && o({
      ...Object.fromEntries(
        t.map((e) => [e.name, void 0])
      )
    }), d(!1);
  }, [o, N, t]);
  return /* @__PURE__ */ l(C, { open: j, onOpenChange: d, children: [
    /* @__PURE__ */ s(L, { ...i, className: "grow", children: /* @__PURE__ */ s(
      c,
      {
        asChild: !0,
        size: "sm",
        variant: "secondary",
        className: "ml-auto w-full px-3",
        ...P,
        children: /* @__PURE__ */ l("div", { className: "flex items-center", children: [
          z ? /* @__PURE__ */ s($, { className: "size-5" }) : /* @__PURE__ */ s(q, { className: "size-5" }),
          " ",
          /* @__PURE__ */ s("span", { className: "hidden md:inline!", children: a || p("Filter") }),
          /* @__PURE__ */ s(G, {})
        ] })
      }
    ) }),
    /* @__PURE__ */ s(W, { side: "bottom", align: "end", ...m, children: /* @__PURE__ */ s(B, { ...v, children: /* @__PURE__ */ l("form", { onSubmit: F(K), className: "space-y-4", children: [
      /* @__PURE__ */ s("div", { className: "h-full shrink space-y-6 p-1", children: t.map(
        (e) => e.options ? /* @__PURE__ */ s(
          Q,
          {
            control: b,
            name: e.name,
            isSearchable: !!e.isSearchable,
            placeholder: e.placeholder,
            isMulti: e.isMulti,
            options: e.options,
            label: e.label
          },
          e.name
        ) : /* @__PURE__ */ s(
          U,
          {
            control: b,
            placeholder: e.placeholder,
            name: e.name,
            label: e.label
          },
          e.name
        )
      ) }),
      /* @__PURE__ */ l("div", { className: "flex shrink-0 justify-end gap-2", children: [
        /* @__PURE__ */ s(
          c,
          {
            variant: "destructive",
            type: "reset",
            size: "sm",
            onClick: R,
            children: I || p("Reset")
          }
        ),
        /* @__PURE__ */ s(c, { type: "submit", size: "sm", children: M || p("Apply") })
      ] })
    ] }) }) })
  ] });
}), pe = ({
  placeholder: f,
  onSearchChange: t,
  className: n,
  inputProps: o,
  ...r
}) => {
  const { t: y } = w(), [i, m] = h("");
  return /* @__PURE__ */ l("div", { ...r, className: X("relative w-full", n), children: [
    /* @__PURE__ */ s(
      O,
      {
        ...o,
        placeholder: f || y("Type text and press Enter"),
        onInput: (a) => m(E(a, "target.value", "")),
        onKeyUp: (a) => {
          a.key === k.ENTER && (t(i || void 0), a.stopPropagation(), a.preventDefault());
        },
        onKeyDown: (a) => {
          a.key === k.ENTER && (a.stopPropagation(), a.preventDefault());
        }
      }
    ),
    /* @__PURE__ */ s(
      c,
      {
        type: "button",
        variant: "ghost",
        className: "text-foreground absolute top-0 right-0 cursor-pointer rounded-md bg-transparent!",
        onClick: () => t(i),
        children: /* @__PURE__ */ s(V, {})
      }
    )
  ] });
};
export {
  me as F,
  pe as S
};
//# sourceMappingURL=Search-DunDXQgP.es.js.map