@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
147 lines (146 loc) • 4.82 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 l from "react";
import { Button as E } from "@progress/kendo-react-buttons";
import { DropDownList as s } from "@progress/kendo-react-dropdowns";
import { TextBox as z, NumericTextBox as w } from "@progress/kendo-react-inputs";
import { DatePicker as L } from "@progress/kendo-react-dateinputs";
import { filterClearButton as m, messages as f, filterChooseOperator as g } from "../messages/index.mjs";
import { useLocalization as k } from "@progress/kendo-react-intl";
import { filterClearIcon as x, filterIcon as D } from "@progress/kendo-svg-icons";
import { cellOperatorChange as y, cellInputChange as N, cellBoolDropdownChange as B } from "../filterCommon.mjs";
import { classNames as O } from "@progress/kendo-react-common";
const _ = (e) => {
const n = l.useRef(null), u = k(), d = () => {
if (e.filterType === "boolean")
return;
let t;
const r = e.operators.find((o) => o.operator === e.operator) || null;
return /* @__PURE__ */ l.createElement(
s,
{
ref: (o) => {
t = o;
},
size: e.size,
value: r,
onChange: h,
className: "k-dropdown-operator",
svgIcon: D,
data: e.operators,
textField: "text",
title: u.toLanguageString(g, f[g]),
popupSettings: {
width: "",
onMouseDownOutside: function(o) {
!o.isAnchorClicked && o.state && o.state.props.show && t && t.togglePopup();
}
}
}
);
}, c = (t, r) => {
N(t, r, e);
}, h = (t) => {
y(t, e.value, e.onChange);
}, C = (t) => {
B(t, e.onChange);
}, v = (t) => {
t.preventDefault(), e.onChange({ value: "", operator: "", syntheticEvent: t }), n.current && (n.current.element.value = "", setTimeout(() => {
n.current.element.focus();
}, 0));
}, b = (t, r, o) => {
switch (t) {
case "numeric":
return /* @__PURE__ */ l.createElement(
w,
{
ref: n,
size: e.size,
value: r,
onChange: (a) => {
c(a.value, a.syntheticEvent);
},
title: e.title,
ariaLabel: e.ariaLabel
}
);
case "date":
return /* @__PURE__ */ l.createElement(
L,
{
ref: n,
size: e.size,
value: r,
onChange: (a) => {
c(a.value, a.syntheticEvent);
},
title: e.title,
ariaLabel: e.ariaLabel,
popupSettings: {
onMouseDownOutside: (a) => {
!a.isAnchorClicked && a.state && a.state.props.show && n && n.current.togglePopup();
}
}
}
);
case "boolean": {
const a = (i) => i == null;
return /* @__PURE__ */ l.createElement(
s,
{
ref: n,
size: e.size,
onChange: C,
value: o.find((i) => i.operator === (a(r) ? "" : r)),
data: o,
textField: "text",
title: e.title,
ariaLabel: e.ariaLabel,
popupSettings: {
onMouseDownOutside: (i) => {
!i.isAnchorClicked && i.state && i.state.props.show && n && n.current.togglePopup();
}
}
}
);
}
default:
return /* @__PURE__ */ l.createElement(
z,
{
ref: n,
size: e.size,
value: r || "",
onChange: (a) => {
c(a.target.value, a.syntheticEvent);
},
title: e.title,
"aria-label": e.ariaLabel
}
);
}
};
return /* @__PURE__ */ l.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ l.createElement("div", { className: "k-filtercell-wrapper" }, b(e.filterType, e.value, e.booleanValues), /* @__PURE__ */ l.createElement("div", { className: "k-filtercell-operator" }, d(), " ", /* @__PURE__ */ l.createElement(
E,
{
size: e.size,
svgIcon: x,
className: O({
"k-clear-button-visible": !!(!(e.value === null || e.value === "") || e.operator)
}),
title: u.toLanguageString(m, f[m]),
type: "button",
onClick: v,
disabled: !(!(e.value === null || e.value === "") || e.operator)
}
))));
};
export {
_ as GridFilterCell
};