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