@progress/kendo-react-data-tools/filteringCells/FilterComponent.js

Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools 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 u=require("react"),f=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-react-common"),h=require("@progress/kendo-svg-icons");function d(o){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(p,s,e.get?e:{enumerable:!0,get:()=>o[s]})}}return p.default=o,Object.freeze(p)}const c=d(u),C=o=>class extends c.Component{constructor(){super(...arguments),this.filterChange=e=>{this.props.onFilterChange&&this.props.onFilterChange(e)},this.inputChange=e=>{const n=e.target.value,{filter:r=[],field:t=""}=this.props,i=this.findCellFilter(),a=i?r.map(l=>l.field===t?{...i,value:n}:l):[...r,{...o.emptyFilter,value:n,field:t}];this.filterChange({filter:a,field:t,syntheticEvent:e.syntheticEvent})},this.operatorChange=e=>{const{operator:n}=e.target.value,{filter:r=[],field:t=""}=this.props,i=this.findCellFilter(),a=i?r.map(l=>l.field===t?{...i,operator:n}:l):[...r,{...o.emptyFilter,field:t,operator:n}];this.filterChange({filter:a,field:t,syntheticEvent:e.syntheticEvent})},this.clearButtonClick=e=>{const{filter:n=[],field:r=""}=this.props;this.filterChange({filter:n.filter(t=>t.field!==r),field:r,syntheticEvent:e})},this.findCellFilter=()=>{const{filter:e=[],field:n}=this.props;return e.find(r=>r.field===n)}}render(){const{clearButtonTitle:e="",operators:n=[]}=this.props,r=this.findCellFilter()||{...o.emptyFilter,operator:""},{operator:t,value:i}=r,a={ariaLabel:"filter",value:n.find(l=>l.operator===t)||null,onChange:this.operatorChange,className:"k-dropdown-operator",svgIcon:h.filterIcon,data:n,textField:"text",popupSettings:{width:""},components:this.props.components};return c.createElement("div",{className:"k-filtercell"},c.createElement("span",null,o.inputComponent({value:i,onChange:this.inputChange,components:this.props.components,ariaLabel:this.props.ariaLabel,min:this.props.min,max:this.props.max}),c.createElement("div",{className:"k-filtercell-operator"},o.operatorComponent(a,this.props)," ",c.createElement(f.Button,{className:m.classNames({"k-clear-button-visible":!(i===null||i==="")||t}),title:e,type:"button",onClick:this.clearButtonClick,svgIcon:h.filterClearIcon,disabled:!(!(i===null||i==="")||t)}))))}};exports.createFilterComponent=C;