@progress/kendo-react-grid/cells/GridFilterCell.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 w=require("react"),z=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-react-dropdowns"),m=require("@progress/kendo-react-inputs"),D=require("@progress/kendo-react-dateinputs"),u=require("../messages/index.js"),E=require("@progress/kendo-react-intl"),h=require("@progress/kendo-svg-icons"),g=require("../filterCommon.js"),O=require("@progress/kendo-react-common");function y(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const s=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(t,c,s.get?s:{enumerable:!0,get:()=>e[c]})}}return t.default=e,Object.freeze(t)}const r=y(w),L=e=>{const t=r.useRef(null),c=E.useLocalization(),s=()=>{if(e.filterType==="boolean")return;let n;const l=e.operators.find(o=>o.operator===e.operator)||null;return r.createElement(f.DropDownList,{ref:o=>{n=o},size:e.size,value:l,onChange:C,className:"k-dropdown-operator",svgIcon:h.filterIcon,data:e.operators,textField:"text",title:c.toLanguageString(u.filterChooseOperator,u.messages[u.filterChooseOperator]),popupSettings:{width:"",onMouseDownOutside:function(o){!o.isAnchorClicked&&o.state&&o.state.props.show&&n&&n.togglePopup()}}})},d=(n,l)=>{g.cellInputChange(n,l,e)},C=n=>{g.cellOperatorChange(n,e.value,e.onChange)},b=n=>{g.cellBoolDropdownChange(n,e.onChange)},v=n=>{n.preventDefault(),e.onChange({value:"",operator:"",syntheticEvent:n}),t.current&&(t.current.element.value="",setTimeout(()=>{t.current.element.focus()},0))},k=(n,l,o)=>{switch(n){case"numeric":return r.createElement(m.NumericTextBox,{ref:t,size:e.size,value:l,onChange:a=>{d(a.value,a.syntheticEvent)},title:e.title,ariaLabel:e.ariaLabel});case"date":return r.createElement(D.DatePicker,{ref:t,size:e.size,value:l,onChange:a=>{d(a.value,a.syntheticEvent)},title:e.title,ariaLabel:e.ariaLabel,popupSettings:{onMouseDownOutside:a=>{!a.isAnchorClicked&&a.state&&a.state.props.show&&t&&t.current.togglePopup()}}});case"boolean":{const a=i=>i==null;return r.createElement(f.DropDownList,{ref:t,size:e.size,onChange:b,value:o.find(i=>i.operator===(a(l)?"":l)),data:o,textField:"text",title:e.title,ariaLabel:e.ariaLabel,popupSettings:{onMouseDownOutside:i=>{!i.isAnchorClicked&&i.state&&i.state.props.show&&t&&t.current.togglePopup()}}})}default:return r.createElement(m.TextBox,{ref:t,size:e.size,value:l||"",onChange:a=>{d(a.target.value,a.syntheticEvent)},title:e.title,"aria-label":e.ariaLabel})}};return r.createElement("div",{className:"k-filtercell"},r.createElement("div",{className:"k-filtercell-wrapper"},k(e.filterType,e.value,e.booleanValues),r.createElement("div",{className:"k-filtercell-operator"},s()," ",r.createElement(z.Button,{size:e.size,svgIcon:h.filterClearIcon,className:O.classNames({"k-clear-button-visible":!!(!(e.value===null||e.value==="")||e.operator)}),title:c.toLanguageString(u.filterClearButton,u.messages[u.filterClearButton]),type:"button",onClick:v,disabled:!(!(e.value===null||e.value==="")||e.operator)}))))};exports.GridFilterCell=L;