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