@progress/kendo-react-data-tools
Version:
Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package
133 lines (132 loc) • 4.69 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 n from "react";
import s from "prop-types";
import { Toolbar as E, ToolbarItem as m, Button as C } from "@progress/kendo-react-buttons";
import { DropDownList as d } from "@progress/kendo-react-dropdowns";
import { provideLocalizationService as L, registerForLocalization as y } from "@progress/kendo-react-intl";
import { xIcon as O } from "@progress/kendo-svg-icons";
import { unaryOperator as g, stringOperator as R } from "./operators.mjs";
import { filterExpressionAriaLabel as v, messages as p, filterExpressionDropdownAriaLabel as u, filterExpressionOperatorDropdownAriaLabel as x, filterClose as F } from "../messages/index.mjs";
const b = (c) => {
c.value === void 0 && !g(c.operator) && (c.value = R(c.operator) ? "" : null);
}, f = class f extends n.Component {
constructor() {
super(...arguments), this.onFieldChange = (t) => {
const r = t.value.name, e = this.props.fields.find((a) => a.name === r), o = this.props.filter, i = e && !e.operators.some((a) => a.operator === o.operator) ? e.operators[0].operator : o.operator, l = {
field: r,
operator: i
};
b(l), this.triggerOnFilterChange(o, l, t);
}, this.onOperatorChange = (t) => {
const r = t.value.operator, e = this.props.filter;
let o;
if (g(r)) {
const { value: i, ...l } = e;
o = { ...l, operator: r };
} else
o = { ...e, operator: r };
b(o), this.triggerOnFilterChange(e, o, t);
}, this.onInputChange = (t) => {
const r = this.props.filter;
let e = t.nextFilter;
if (g(e.operator)) {
const o = this.props.fields.find((i) => i.name === e.field);
e = { ...e, operator: o && o.operators[0].operator || e.operator };
}
this.triggerOnFilterChange(r, e, t);
}, this.triggerOnFilterChange = (t, r, e) => {
const o = {
prevFilter: t,
nextFilter: r,
syntheticEvent: e.syntheticEvent,
nativeEvent: e.nativeEvent,
target: this
};
this.props.onChange.call(void 0, o);
}, this.onFilterRemove = (t) => {
const r = {
filter: this.props.filter,
syntheticEvent: t.syntheticEvent,
nativeEvent: t.nativeEvent,
target: this
};
this.props.onRemove.call(void 0, r);
};
}
render() {
const t = L(this), {
fields: r,
filter: e,
ariaLabel: o = t.toLanguageString(v, p[v])
} = this.props, i = r.find((a) => a.name === e.field), l = (i && i.operators || []).map((a) => ({
...a,
text: t.toLanguageString(a.text, p[a.text] || a.text)
}));
return /* @__PURE__ */ n.createElement("div", { className: "k-filter-toolbar" }, /* @__PURE__ */ n.createElement(E, { keyboardNavigation: !1, role: "toolbar", ariaLabel: o }, /* @__PURE__ */ n.createElement(m, { className: "k-filter-field" }, /* @__PURE__ */ n.createElement(
d,
{
tabIndex: -1,
data: r,
textField: "label",
value: r.find((a) => a.name === e.field),
onChange: this.onFieldChange,
ariaLabel: t.toLanguageString(
u,
p[u]
)
}
)), /* @__PURE__ */ n.createElement(m, { className: "k-filter-operator" }, /* @__PURE__ */ n.createElement(
d,
{
tabIndex: -1,
data: l,
textField: "text",
value: l.find((a) => a.operator === e.operator),
onChange: this.onOperatorChange,
ariaLabel: t.toLanguageString(
x,
p[x]
)
}
)), /* @__PURE__ */ n.createElement(m, { className: "k-filter-value" }, i && /* @__PURE__ */ n.createElement(
i.filter,
{
filter: e,
onFilterChange: this.onInputChange,
min: i.min,
max: i.max
}
)), /* @__PURE__ */ n.createElement(
C,
{
className: "k-toolbar-button",
title: t.toLanguageString(F, p[F]),
icon: "x",
svgIcon: O,
fillMode: "flat",
themeColor: "base",
type: "button",
onClick: this.onFilterRemove
}
)));
}
};
f.propTypes = {
filter: s.object.isRequired,
fields: s.array.isRequired,
ariaLabel: s.string,
onChange: s.func.isRequired,
onRemove: s.func.isRequired
};
let h = f;
y(h);
export {
h as Expression
};