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