@progress/kendo-react-grid/columnMenu/GridColumnMenuCheckboxFilter.js

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use client";
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),K=require("./GridColumnMenuItem.js"),U=require("./GridColumnMenuItemGroup.js"),X=require("./GridColumnMenuItemContent.js"),b=require("@progress/kendo-react-inputs"),Y=require("@progress/kendo-react-intl"),r=require("../messages/index.js"),D=require("@progress/kendo-data-query"),G=require("@progress/kendo-react-common"),v=require("@progress/kendo-react-buttons"),L=require("../utils/index.js"),F=require("@progress/kendo-svg-icons");function Z(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const m in e)if(m!=="default"){const f=Object.getOwnPropertyDescriptor(e,m);Object.defineProperty(s,m,f.get?f:{enumerable:!0,get:()=>e[m]})}}return s.default=e,Object.freeze(s)}const l=Z(J),p=(e,s)=>e.length!==s.length?!1:e.every((m,f)=>m===s[f]),ee={uniqueData:!0},te=e=>{const{uniqueData:s=ee.uniqueData}=e,m=()=>{const t=e.column.field;return S().filters.findIndex(i=>i.filters&&i.filters.length>0&&i.filters[0].field===t)},f=(t,n)=>{const c=e.column.field||"",i=t.map(o=>L.getNestedValue(c,o));return n?i.filter((o,u)=>i.indexOf(o)===u):i},S=()=>e.filter?G.clone(e.filter):{filters:[],logic:"and"},a=l.useRef(m()),[I,P]=l.useState(e.expanded||!1),[B,q]=l.useState(""),[h,C]=l.useState(f(e.data,s)||[]),[R,w]=l.useState(f(e.data,!1)||[]),[d,V]=l.useState(S());l.useEffect(()=>{const t=e.column.field||"",n=e.data.map(c=>L.getNestedValue(t,c));p(n,R)||(C(n),w(n))},[e.column,e.data]);const y=()=>e.expanded!==void 0,j=()=>{const t=y(),n=!(t?e.expanded:I);e.onExpandChange&&e.onExpandChange(n),t||P(n)},N=t=>{const n=e.searchBoxFilterOperator?e.searchBoxFilterOperator:"startswith",c={logic:"and",filters:[{field:e.column.field,operator:n,value:t.target.value,ignoreCase:!0}]};q(t.target.value),C(f(D.filterBy(e.data||[],c),s))},A=()=>{const t=e.searchBoxFilterOperator?e.searchBoxFilterOperator:"startswith",n={logic:"and",filters:[{field:e.column.field,operator:t,value:"",ignoreCase:!0}]};q(""),C(f(D.filterBy(e.data||[],n),s))},T=t=>{if(t.preventDefault(),!e.onFilterChange)return;const n=d||null;n!==null&&n.filters.length>0?(a.current>=0&&n.filters.splice(a.current,1),e.onFilterChange(n,t)):e.onFilterChange(null,t),e.onCloseMenu&&e.onCloseMenu()},z=t=>{if(t.preventDefault(),!e.onFilterChange)return;const n=d||null;e.onFilterChange(n,t),e.onCloseMenu&&e.onCloseMenu()},M=(t,n)=>{const c=e.column.field||"",i={...d},o=[...d.filters];let u=[];if(a.current!==-1&&i.filters[a.current].filters&&n!=="all"&&(u=i.filters[a.current].filters),t.value&&n==="all")h.forEach(E=>{u.push({field:c,operator:"eq",value:E})});else if(t.value)u.push({field:c,operator:"eq",value:n});else if(d){const E=u.findIndex(H=>H.value===n);u.splice(E,1)}i.logic="and",a.current!==-1?o[a.current]={logic:"or",filters:u}:o.push({logic:"or",filters:u}),(!t.value&&n==="all"||u.length===0)&&o.splice(a.current,1),i.filters=o,V(i)},_=()=>{let t=!1;if(d){const n=[...d.filters];return a.current===-1?!1:(t=h.every(c=>a.current!==-1&&n[a.current].filters?n[a.current].filters.findIndex(o=>o.value===c)>=0:!1),t)}return t},g=Y.useLocalization(),{column:x}=e;if(!x||!x.field)return l.createElement("div",null);const Q=y()?e.expanded:I,k=[];if(d){const t=[...d.filters];a.current=t.findIndex(n=>n.filters&&n.filters.length>0?n.filters[0].field===x.field:!1),a.current!==-1&&t[a.current].filters.length>0&&t[a.current].filters.forEach(n=>{n.field===e.column.field&&k.push(n.value)})}const W=g.toLanguageString(r.filterClearButton,r.messages[r.filterClearButton]),$=e.searchBox?l.createElement(e.searchBox,{value:B,onChange:N}):l.createElement("div",{className:"k-searchbox k-textbox k-input k-input-md k-input-solid"},l.createElement(G.IconWrap,{className:"k-input-icon",name:"search",icon:F.searchIcon}),l.createElement(b.Input,{className:"k-input-inner",type:"text",placeholder:g.toLanguageString(r.searchPlaceholder,r.messages[r.searchPlaceholder]),value:B,onChange:t=>N(t.nativeEvent)}),l.createElement(v.Button,{type:"button",rounded:null,className:"k-input-button",onClick:A,icon:"x","aria-label":W,svgIcon:F.xIcon})),O=k.filter((t,n)=>k.indexOf(t)===n);return l.createElement(U.GridColumnMenuItemGroup,null,l.createElement(K.GridColumnMenuItem,{title:g.toLanguageString(r.filterTitle,r.messages[r.filterTitle]),iconClass:"k-i-filter",svgIcon:F.filterIcon,onClick:j}),l.createElement(X.GridColumnMenuItemContent,{show:!!Q},l.createElement("form",{className:"k-filter-menu",onSubmit:z,onReset:T},l.createElement("div",{className:"k-filter-menu-container"},$,l.createElement("ul",{className:"k-reset k-multicheck-wrap"},l.createElement("li",{className:"k-item k-check-all-wrap"},l.createElement(b.Checkbox,{label:g.toLanguageString(r.filterCheckAll,r.messages[r.filterCheckAll]),onChange:t=>M(t,"all"),checked:_()})),h.map((t,n)=>l.createElement("li",{className:"k-item",key:n},l.createElement(b.Checkbox,{label:String(t),onChange:c=>M(c,t),checked:O.includes(t)})))),l.createElement("div",{className:"k-filter-selected-items"},O.length+" "+g.toLanguageString(r.filterSelectedItems,r.messages[r.filterSelectedItems])),l.createElement("div",{className:"k-actions k-hstack k-justify-content-stretch"},l.createElement(v.Button,{themeColor:"primary",type:"submit"},g.toLanguageString(r.filterSubmitButton,r.messages[r.filterSubmitButton])),l.createElement(v.Button,{className:"k-button",type:"reset"},g.toLanguageString(r.filterClearButton,r.messages[r.filterClearButton])))))))};exports.GridColumnMenuCheckboxFilter=te;