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