@progress/kendo-react-data-tools/filter/Group.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 v=require("react"),l=require("prop-types"),h=require("@progress/kendo-data-query"),c=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-react-intl"),d=require("@progress/kendo-svg-icons"),m=require("./Expression.js"),E=require("./operators.js"),i=require("../messages/index.js");function b(p){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>p[t]})}}return e.default=p,Object.freeze(e)}const o=b(v),s=class s extends o.Component{constructor(){super(...arguments),this.getFilterKey=(e,t)=>{let r=s.filterIdMap.get(e);return r||(h.isCompositeFilterDescriptor(e)?r=`group-${e.logic}-${t}-${s.filterIdCounter++}`:r=`expr-${e.field}-${e.operator}-${t}-${s.filterIdCounter++}`,s.filterIdMap.set(e,r)),r},this.onGroupRemove=e=>{const t={filter:this.props.filter,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onRemove.call(void 0,t)},this.onAddExpression=e=>{const t=this.props.filter,r=this.props.fields[0],n={field:r.name,operator:r.operators[0].operator};n.value=E.stringOperator(n.operator)?"":null;const a={nextFilter:{...t,filters:[...t.filters,n]},prevFilter:t,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onChange.call(void 0,a)},this.onAddGroup=e=>{const t=this.props.filter,r={...this.props.defaultGroupFilter},n={nextFilter:{...t,filters:[...t.filters,r]},prevFilter:t,target:this,syntheticEvent:e,nativeEvent:e.nativeEvent};this.props.onChange.call(void 0,n)},this.onLogicAnd=e=>this.changeLogic("and",e),this.onLogicOr=e=>this.changeLogic("or",e),this.changeLogic=(e,t)=>{const r=this.props.filter;if(r.logic!==e){const n={nextFilter:{...r,logic:e},prevFilter:r,target:this,syntheticEvent:t,nativeEvent:t.nativeEvent};this.props.onChange.call(void 0,n)}},this.replaceFilter=(e,t)=>{const r=this.props.filter,n=r.filters.map(a=>{if(a===e){const g=s.filterIdMap.get(e);return g&&s.filterIdMap.set(t,g),t}return a});return{...r,filters:n}},this.onChange=e=>{const r={nextFilter:this.replaceFilter(e.prevFilter,e.nextFilter),prevFilter:this.props.filter,syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:this};this.props.onChange.call(void 0,r)},this.onRemove=e=>{const t=this.props.filter,r=t.filters.filter(a=>a!==e.filter),n={nextFilter:{...t,filters:r},prevFilter:t,syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:this};this.props.onChange.call(void 0,n)}}render(){const e=f.provideLocalizationService(this),{fields:t,filter:r,ariaLabel:n=e.toLanguageString(i.filterGroupAriaLabel,i.messages[i.filterGroupAriaLabel])}=this.props;return o.createElement(o.Fragment,null,o.createElement("div",{className:"k-filter-toolbar"},o.createElement(c.Toolbar,{role:"toolbar",ariaLabel:n},o.createElement(c.ButtonGroup,{className:"k-toolbar-button-group k-button-group-solid"},o.createElement(c.Button,{togglable:!0,onClick:this.onLogicAnd,selected:r.logic==="and",type:"button"},e.toLanguageString(i.filterAndLogic,i.messages[i.filterAndLogic])),o.createElement(c.Button,{togglable:!0,onClick:this.onLogicOr,selected:r.logic==="or",type:"button"},e.toLanguageString(i.filterOrLogic,i.messages[i.filterOrLogic]))),o.createElement(c.Button,{className:"k-toolbar-button",title:e.toLanguageString(i.filterAddExpression,i.messages[i.filterAddExpression]),icon:"filter-add-expression",svgIcon:d.filterAddExpressionIcon,type:"button",onClick:this.onAddExpression},e.toLanguageString(i.filterAddExpression,i.messages[i.filterAddExpression])),o.createElement(c.Button,{className:"k-toolbar-button",title:e.toLanguageString(i.filterAddGroup,i.messages[i.filterAddGroup]),icon:"filter-add-group",svgIcon:d.filterAddGroupIcon,type:"button",onClick:this.onAddGroup},e.toLanguageString(i.filterAddGroup,i.messages[i.filterAddGroup])),o.createElement(c.Button,{className:"k-toolbar-button",title:e.toLanguageString(i.filterClose,i.messages[i.filterClose]),icon:"x",svgIcon:d.xIcon,fillMode:"flat",type:"button",onClick:this.onGroupRemove}))),r.filters.length>0&&o.createElement("ul",{role:"group",className:"k-filter-lines"},r.filters.map((a,g)=>o.createElement("li",{role:"treeitem","aria-selected":!1,key:this.getFilterKey(a,g),className:"k-filter-item"},h.isCompositeFilterDescriptor(a)?o.createElement(s,{filter:a,fields:t,onChange:this.onChange,onRemove:this.onRemove,defaultGroupFilter:this.props.defaultGroupFilter,ariaLabel:this.props.ariaLabel,ariaLabelExpression:this.props.ariaLabelExpression}):o.createElement(m.Expression,{filter:a,fields:t,ariaLabel:this.props.ariaLabelExpression,onChange:this.onChange,onRemove:this.onRemove})))))}};s.propTypes={filter:l.object.isRequired,fields:l.array.isRequired,ariaLabel:l.string,ariaLabelExpression:l.string,onChange:l.func.isRequired,onRemove:l.func.isRequired,defaultGroupFilter:l.object.isRequired},s.filterIdCounter=0,s.filterIdMap=new WeakMap;let u=s;f.registerForLocalization(u);exports.Group=u;