dgz-ui-shared
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library
186 lines (185 loc) • 5.74 kB
JavaScript
import { j as e } from "./jsx-runtime-DS1N_tNq.js";
import { y as D, b as E } from "./input-mask-DBLFIvhN-BBxoZxnd.js";
import { u as l } from "./button-CdZDBhmr-BT_j3ig5.js";
import { m as F } from "./utils-B6fNqzRf-B1_jG1K7.js";
import { u as M } from "./useTranslation-dH-uwymc.js";
import { c as i } from "./createLucideIcon-B950nf2d.js";
import { memo as q, useState as b, useEffect as k, useCallback as v } from "react";
import { l as A } from "./lodash-CYNxjS-I.js";
import { _ as I, w as L, u as O } from "./popover-OZcfKDD9-C2PVWPLS.js";
import { M as R } from "./MyInput-B-QCpehg.js";
import { M as C } from "./MySelect-C5uWRVJh.js";
import { u as P } from "./useFilter-DJunNBm2.js";
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const T = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], V = i("chevron-down", T);
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const W = [
["path", { d: "M10 18h4", key: "1ulq68" }],
["path", { d: "M11 6H3", key: "1u26ik" }],
["path", { d: "M15 6h6", key: "1jlkvy" }],
["path", { d: "M18 9V3", key: "xwwp7m" }],
["path", { d: "M7 12h8", key: "7a1bxv" }]
], B = i("list-filter-plus", W);
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const G = [
["path", { d: "M3 6h18", key: "d0wm0j" }],
["path", { d: "M7 12h10", key: "b7w52i" }],
["path", { d: "M10 18h4", key: "1ulq68" }]
], H = i("list-filter", G);
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const J = [
["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
], K = i("search", J), ce = ({
name: m = "search",
defaultValue: t,
onSearchChange: o,
placeholder: a,
className: r,
...x
}) => {
const { t: d } = M(), n = (c) => {
const p = new FormData(c.currentTarget);
o(p.get(m) || void 0), c.preventDefault(), c.stopPropagation();
};
return /* @__PURE__ */ e.jsxs(
"form",
{
className: F("relative w-full max-w-64 min-w-40", r),
onSubmit: n,
children: [
/* @__PURE__ */ e.jsx(
D,
{
...x,
className: "h-8 rounded-lg",
name: m,
placeholder: a || d("Search..."),
defaultValue: t ? `${t}` : ""
}
),
/* @__PURE__ */ e.jsx(
l,
{
type: "submit",
variant: "ghost",
className: "text-foreground absolute top-0 right-0 cursor-pointer rounded-md !bg-transparent",
size: "sm",
children: /* @__PURE__ */ e.jsx(K, {})
}
)
]
}
);
}, le = q(function({
filters: t,
params: o,
onFilter: a,
onChange: r,
onCancel: x,
...d
}) {
const { t: n } = M(), [c, p] = b(!1), [N, h] = b(!1), { form: j } = P({ params: o }), { watch: w, getValues: g, handleSubmit: S, control: y, reset: f } = j;
k(() => {
let s = !1;
t.map(($) => {
const u = A.get(o, `${$.name}`);
(Array.isArray(u) ? u.length > 0 : u) && (s = !0), p(s);
});
}, [t, o]), k(() => {
r == null || r(g());
}, [w()]);
const _ = v(
(s = {}) => {
a == null || a(s), h(!1);
},
[a]
), z = v(() => {
f(), a && o && a({
...o,
...Object.fromEntries(
t.map((s) => [s.name, void 0])
)
}), h(!1);
}, [a, f, o, t]);
return /* @__PURE__ */ e.jsxs(I, { open: N, onOpenChange: h, children: [
/* @__PURE__ */ e.jsx(L, { children: /* @__PURE__ */ e.jsx(
l,
{
asChild: !0,
size: "sm",
variant: "secondary",
className: "ml-auto px-3",
...d,
children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
c ? /* @__PURE__ */ e.jsx(B, { size: 20 }) : /* @__PURE__ */ e.jsx(H, { size: 20 }),
" ",
/* @__PURE__ */ e.jsx("span", { className: "hidden lg:!inline", children: n("Filter") }),
/* @__PURE__ */ e.jsx(V, {})
] })
}
) }),
/* @__PURE__ */ e.jsx(O, { side: "bottom", align: "end", className: "", children: /* @__PURE__ */ e.jsx(E, { ...j, children: /* @__PURE__ */ e.jsxs("form", { onSubmit: S(_), className: "space-y-2", children: [
/* @__PURE__ */ e.jsx("div", { className: "h-full shrink p-1", children: t.map(
(s) => s.options ? /* @__PURE__ */ e.jsx(
C,
{
control: y,
name: s.name,
placeholder: s.placeholder,
isMulti: s.isMulti,
options: s.options,
label: s.label
},
s.name
) : /* @__PURE__ */ e.jsx(
R,
{
control: y,
placeholder: s.placeholder,
name: s.name,
label: s.label
},
s.name
)
) }),
/* @__PURE__ */ e.jsxs("div", { className: "flex shrink-0 justify-end gap-2", children: [
/* @__PURE__ */ e.jsx(
l,
{
variant: "destructive",
type: "reset",
size: "sm",
onClick: z,
children: n("Reset")
}
),
/* @__PURE__ */ e.jsx(l, { type: "submit", size: "sm", children: n("Apply") })
] })
] }) }) })
] });
});
export {
le as F,
ce as S
};