koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
3 lines (2 loc) • 3.02 kB
JavaScript
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),t=require("react"),E=require("../../../internal/Icons/IconFilter.cjs"),B=require("../../../internal/Icons/IconFilterOff.cjs"),O=require("../../../internal/Icons/IconColumns.cjs"),C=require("./Dialog.module.css.cjs"),o=require("../types.cjs"),m=require("./NumberRangeField.cjs"),V=require("./DateRangeField.cjs"),b=require("./TextField.cjs"),A=require("../../Dialog/useDialogState.cjs"),w=require("../../Dialog/Dialog.cjs"),_=require("../../FormField/FormField.cjs"),z=require("../../Select/Select.cjs"),G={[o.ColumnTypes.text]:b.TextField,[o.ColumnTypes.currency]:m.NumberRangeField,[o.ColumnTypes.decimal]:m.NumberRangeField,[o.ColumnTypes.unit]:m.NumberRangeField,[o.ColumnTypes.percentage]:m.NumberRangeField,[o.ColumnTypes.select]:b.TextField,[o.ColumnTypes.date]:V.DateRangeField},v=t.memo(({id:F,onApplyFiler:r,columnFilters:y,tableContext:i})=>{const{dialogParams:s,closeDialog:a}=A.useDialogState(F),f=t.useMemo(()=>i.getAllColumns().map(e=>{var n,d;return{id:e.id,name:(n=e.columnDef.meta)==null?void 0:n.name,type:(d=e.columnDef.meta)==null?void 0:d.type,filterable:e==null?void 0:e.getCanFilter()}}).filter(({filterable:e})=>e),[i]),[l,T]=t.useState(s==null?void 0:s.columnId);t.useEffect(()=>{s!=null&&s.columnId&&T(s==null?void 0:s.columnId)},[s==null?void 0:s.columnId]);const x=t.useCallback(e=>{T(e.target.value)},[]),[D,h]=t.useState(o.ColumnTypes.text);t.useEffect(()=>{var n;const e=((n=f.find(({id:d})=>d===l))==null?void 0:n.type)||o.ColumnTypes.text;h(e)},[f,l,h]);const q=t.useMemo(()=>{var e,n;return l&&((n=(e=i.getColumn(l))==null?void 0:e.columnDef.meta)==null?void 0:n.filterInput)},[l,i]),N=t.useMemo(()=>q||G[D],[q,D]),p=t.useMemo(()=>{const e=y.find(({id:n})=>n===l);return(e==null?void 0:e.value)!==void 0?e==null?void 0:e.value:""},[y,l]),[u,g]=t.useState(p);t.useEffect(()=>{g("")},[l]);const I=Array.isArray(u)?u.every(e=>!!e):!!u;t.useEffect(()=>{g(p)},[p]);const j=t.useCallback(e=>{g(e)},[]),S=t.useCallback(()=>{r({column:l,filter:u}),a()},[a,u,r,l]),R=t.useCallback(()=>{r({column:l,filter:""}),a()},[a,r,l]),M=t.useMemo(()=>[[{title:"Reset filter",onClick:R,icon:B.IconFilterOff},{title:"Apply filter",icon:E.IconFilter,onClick:S,type:"success",disabled:!I}]],[S,R,I]),k=t.useMemo(()=>{var e,n;return typeof l=="string"?(n=(e=i.getColumn(l))==null?void 0:e.columnDef.meta)==null?void 0:n.cellProps:{}},[l,i]);return c.jsx(w.Dialog,{animation:"scale-in",showCloseButton:!1,dialogTitle:"Filter column",id:F,className:C.default.dialog,actions:M,children:c.jsxs("div",{className:C.default.fieldset,children:[c.jsx(_.FormField,{className:C.default.field,label:"Column:",children:c.jsx(z.Select,{prefix:O.IconColumns,value:l,onChange:x,children:f.map(({id:e,name:n})=>c.jsx("option",{value:e,children:n},e))})}),c.jsx(N,{value:u,onChange:j,cellProps:k})]})})});v.displayName="FilterDialog";exports.FilterDialog=v;
//# sourceMappingURL=FilterDialog.cjs.map