@progress/kendo-react-data-tools
Version:
Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package
80 lines (79 loc) • 3.26 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 a from "react";
import { Button as p } from "@progress/kendo-react-buttons";
import { classNames as c } from "@progress/kendo-react-common";
import { filterIcon as h, filterClearIcon as f } from "@progress/kendo-svg-icons";
const v = (l) => class extends a.Component {
constructor() {
super(...arguments), this.filterChange = (t) => {
this.props.onFilterChange && this.props.onFilterChange(t);
}, this.inputChange = (t) => {
const r = t.target.value, { filter: i = [], field: e = "" } = this.props, o = this.findCellFilter(), s = o ? i.map((n) => n.field === e ? { ...o, value: r } : n) : [...i, { ...l.emptyFilter, value: r, field: e }];
this.filterChange({
filter: s,
field: e,
syntheticEvent: t.syntheticEvent
});
}, this.operatorChange = (t) => {
const { operator: r } = t.target.value, { filter: i = [], field: e = "" } = this.props, o = this.findCellFilter(), s = o ? i.map((n) => n.field === e ? { ...o, operator: r } : n) : [...i, { ...l.emptyFilter, field: e, operator: r }];
this.filterChange({
filter: s,
field: e,
syntheticEvent: t.syntheticEvent
});
}, this.clearButtonClick = (t) => {
const { filter: r = [], field: i = "" } = this.props;
this.filterChange({
filter: r.filter((e) => e.field !== i),
field: i,
syntheticEvent: t
});
}, this.findCellFilter = () => {
const { filter: t = [], field: r } = this.props;
return t.find((i) => i.field === r);
};
}
render() {
const { clearButtonTitle: t = "", operators: r = [] } = this.props, i = this.findCellFilter() || { ...l.emptyFilter, operator: "" }, { operator: e, value: o } = i, s = {
ariaLabel: "filter",
value: r.find((n) => n.operator === e) || null,
onChange: this.operatorChange,
className: "k-dropdown-operator",
svgIcon: h,
data: r,
textField: "text",
popupSettings: { width: "" },
components: this.props.components
};
return /* @__PURE__ */ a.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ a.createElement("span", null, l.inputComponent({
value: o,
onChange: this.inputChange,
components: this.props.components,
ariaLabel: this.props.ariaLabel,
min: this.props.min,
max: this.props.max
}), /* @__PURE__ */ a.createElement("div", { className: "k-filtercell-operator" }, l.operatorComponent(s, this.props), " ", /* @__PURE__ */ a.createElement(
p,
{
className: c({
"k-clear-button-visible": !(o === null || o === "") || e
}),
title: t,
type: "button",
onClick: this.clearButtonClick,
svgIcon: f,
disabled: !(!(o === null || o === "") || e)
}
))));
}
};
export {
v as createFilterComponent
};