@progress/kendo-react-data-tools
Version:
Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package
182 lines (181 loc) • 6.32 kB
JavaScript
/**
* @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";
import * as r from "react";
import l from "prop-types";
import { isCompositeFilterDescriptor as E } from "@progress/kendo-data-query";
import { Toolbar as b, ButtonGroup as L, Button as a } from "@progress/kendo-react-buttons";
import { provideLocalizationService as F, registerForLocalization as x } from "@progress/kendo-react-intl";
import { filterAddExpressionIcon as C, filterAddGroupIcon as y, xIcon as R } from "@progress/kendo-svg-icons";
import { Expression as k } from "./Expression.mjs";
import { stringOperator as A } from "./operators.mjs";
import { filterGroupAriaLabel as f, messages as s, filterAndLogic as v, filterOrLogic as m, filterAddExpression as p, filterAddGroup as c, filterClose as u } from "../messages/index.mjs";
const g = class g extends r.Component {
constructor() {
super(...arguments), this.onGroupRemove = (t) => {
const e = {
filter: this.props.filter,
target: this,
syntheticEvent: t,
nativeEvent: t.nativeEvent
};
this.props.onRemove.call(void 0, e);
}, this.onAddExpression = (t) => {
const e = this.props.filter, i = this.props.fields[0], o = { field: i.name, operator: i.operators[0].operator };
o.value = A(o.operator) ? "" : null;
const n = {
nextFilter: {
...e,
filters: [...e.filters, o]
},
prevFilter: e,
target: this,
syntheticEvent: t,
nativeEvent: t.nativeEvent
};
this.props.onChange.call(void 0, n);
}, this.onAddGroup = (t) => {
const e = this.props.filter, i = {
nextFilter: { ...e, filters: [...e.filters, { ...this.props.defaultGroupFilter }] },
prevFilter: e,
target: this,
syntheticEvent: t,
nativeEvent: t.nativeEvent
};
this.props.onChange.call(void 0, i);
}, this.onLogicAnd = (t) => this.changeLogic("and", t), this.onLogicOr = (t) => this.changeLogic("or", t), this.changeLogic = (t, e) => {
const i = this.props.filter;
if (i.logic !== t) {
const o = {
nextFilter: { ...i, logic: t },
prevFilter: i,
target: this,
syntheticEvent: e,
nativeEvent: e.nativeEvent
};
this.props.onChange.call(void 0, o);
}
}, this.replaceFilter = (t, e) => {
const i = this.props.filter, o = i.filters.map(
(n) => n === t ? e : n
);
return { ...i, filters: o };
}, this.onChange = (t) => {
const i = {
nextFilter: this.replaceFilter(t.prevFilter, t.nextFilter),
prevFilter: this.props.filter,
syntheticEvent: t.syntheticEvent,
nativeEvent: t.nativeEvent,
target: this
};
this.props.onChange.call(void 0, i);
}, this.onRemove = (t) => {
const e = this.props.filter, i = e.filters.filter((n) => n !== t.filter), o = {
nextFilter: { ...e, filters: i },
prevFilter: e,
syntheticEvent: t.syntheticEvent,
nativeEvent: t.nativeEvent,
target: this
};
this.props.onChange.call(void 0, o);
};
}
render() {
const t = F(this), {
fields: e,
filter: i,
ariaLabel: o = t.toLanguageString(f, s[f])
} = this.props;
return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", { className: "k-filter-toolbar" }, /* @__PURE__ */ r.createElement(b, { role: "toolbar", ariaLabel: o }, /* @__PURE__ */ r.createElement(L, { className: "k-toolbar-button-group k-button-group-solid" }, /* @__PURE__ */ r.createElement(
a,
{
togglable: !0,
onClick: this.onLogicAnd,
selected: i.logic === "and",
type: "button"
},
t.toLanguageString(v, s[v])
), /* @__PURE__ */ r.createElement(
a,
{
togglable: !0,
onClick: this.onLogicOr,
selected: i.logic === "or",
type: "button"
},
t.toLanguageString(m, s[m])
)), /* @__PURE__ */ r.createElement(
a,
{
className: "k-toolbar-button",
title: t.toLanguageString(p, s[p]),
icon: "filter-add-expression",
svgIcon: C,
type: "button",
onClick: this.onAddExpression
},
t.toLanguageString(p, s[p])
), /* @__PURE__ */ r.createElement(
a,
{
className: "k-toolbar-button",
title: t.toLanguageString(c, s[c]),
icon: "filter-add-group",
svgIcon: y,
type: "button",
onClick: this.onAddGroup
},
t.toLanguageString(c, s[c])
), /* @__PURE__ */ r.createElement(
a,
{
className: "k-toolbar-button",
title: t.toLanguageString(u, s[u]),
icon: "x",
svgIcon: R,
fillMode: "flat",
type: "button",
onClick: this.onGroupRemove
}
))), i.filters.length > 0 && /* @__PURE__ */ r.createElement("ul", { role: "group", className: "k-filter-lines" }, i.filters.map((n, d) => /* @__PURE__ */ r.createElement("li", { role: "treeitem", key: d, className: "k-filter-item" }, E(n) ? /* @__PURE__ */ r.createElement(
g,
{
filter: n,
fields: e,
onChange: this.onChange,
onRemove: this.onRemove,
defaultGroupFilter: this.props.defaultGroupFilter,
ariaLabel: this.props.ariaLabel,
ariaLabelExpression: this.props.ariaLabelExpression
}
) : /* @__PURE__ */ r.createElement(
k,
{
filter: n,
fields: e,
ariaLabel: this.props.ariaLabelExpression,
onChange: this.onChange,
onRemove: this.onRemove
}
)))));
}
};
g.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
};
let h = g;
x(h);
export {
h as Group
};