UNPKG

dgz-ui-shared

Version:

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

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