@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
171 lines (170 loc) • 6.92 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 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 { isCompositeFilterDescriptor as R } from "@progress/kendo-data-query";
import { GridColumnMenuItem as ce } from "./GridColumnMenuItem.mjs";
import { GridColumnMenuItemGroup as se } from "./GridColumnMenuItemGroup.mjs";
import { GridColumnMenuItemContent as ue } from "./GridColumnMenuItemContent.mjs";
import { useLocalization as fe } from "@progress/kendo-react-intl";
import { getFilterType as $, getDefaultOperator as de, IsUnaryFilter as C, operatorMap as y, defaultHideSecondFilter as me, filterLogicList as ge, booleanFilterValues as Ce } from "../filterCommon.mjs";
import { adaptiveColumnMenuFilterTitle as j, messages as E, filterTitle as q, filterSubmitButton as J, filterClearButton as K } from "../messages/index.mjs";
import { GridColumnMenuFilterUI as Fe } from "./GridColumnMenuFilterUI.mjs";
import { Button as Q } from "@progress/kendo-react-buttons";
import { filterIcon as he } from "@progress/kendo-svg-icons";
import { GridContext as ve } from "../utils/GridContext.mjs";
import { GridAdaptiveFilterMenu as Ee } from "./adaptiveContent/GridAdaptiveFilterMenu.mjs";
const I = (e) => e || { filters: [], logic: "and" }, x = (e, a) => I(a).filters.filter((f) => R(f) ? f.filters && f.filters.length && !f.filters.find((g) => R(g) || g.field !== e) : !1)[0] || null, Ne = (e, a) => !!x(e, a), Oe = (e) => {
const a = l.useContext(ve), L = l.useCallback(() => {
let t;
if (e.column && e.column.field) {
const n = $(e.column.filter), r = de(e.filterOperators, n);
t = x(e.column.field, e.filter), t = t ? {
...t,
filters: t.filters.map((i) => ({ ...i }))
} : {
logic: "and",
filters: [
{
field: e.column.field,
operator: r,
value: C(r) ? null : void 0
},
{
field: e.column.field,
operator: r,
value: C(r) ? null : void 0
}
]
}, t.filters.filter((i) => i.field === e.column.field).length === 1 && t.filters.splice(1, 0, { field: e.column.field, operator: r });
}
return t;
}, [e.column]), [M, f] = l.useState(e.expanded || !1), [g, p] = l.useState(!1), [c, T] = l.useState(L()), D = () => e.expanded !== void 0, W = () => {
const t = D(), n = !(t ? e.expanded : M);
e.onExpandChange && e.onExpandChange(n), p(!g), !t && !a.mobileMode && f(n);
}, X = (t) => {
P(0, t);
}, Y = (t) => {
P(1, t);
}, P = (t, n) => {
const r = c.filters.map((i, o) => o === t ? {
...i,
value: n.value,
operator: n.operator
} : i);
T({
...c,
filters: r
});
}, Z = (t) => {
let n = t.target.value;
t.target.tagName === "SPAN" && (n = t.target.parentElement.value), T({ ...c, logic: n });
}, N = (t) => {
if (t.preventDefault(), !e.onFilterChange)
return;
const n = e.column.field, r = I(e.filter), i = x(n, e.filter);
if (!i) {
e.onCloseMenu && e.onCloseMenu();
return;
}
const o = r.filters.filter((m) => m !== i);
o.length ? e.onFilterChange({ ...r, filters: o }, t) : e.onFilterChange(null, t), e.onCloseMenu && e.onCloseMenu();
}, O = () => ({
...c,
filters: c.filters.filter((t) => t.value !== void 0 && t.value !== null && t.value !== "" || t.value === null && C(t.operator))
}), G = (t) => {
if (t.preventDefault(), !e.onFilterChange)
return;
const n = e.column.field, r = I(e.filter), i = x(n, e.filter), o = O();
let m = null;
if (i && o.filters.length > 0) {
const h = r.filters.map((v) => v === i ? o : v);
m = {
...r,
filters: h
};
} else if (o.filters.length === 0) {
const h = r.filters.filter((v) => v !== i);
h.length && (m = {
...r,
filters: h
});
} else
m = {
...r,
filters: [...r.filters, o]
};
e.onFilterChange(m, t), e.onCloseMenu && e.onCloseMenu();
}, { column: s, filterUI: ee, hideSecondFilter: V, filterOperators: te } = e, u = fe();
if (!s || !s.field)
return /* @__PURE__ */ l.createElement("div", null);
const F = $(s.filter), le = V !== void 0 ? V : me[F], d = c.filters, A = y(te[F], u), B = y(Ce, u), re = {
field: s.field,
value: d[0].value,
operator: d[0].operator,
operators: A,
booleanValues: B,
onChange: X,
filterType: F
}, ne = {
field: s.field,
value: d[1].value,
operator: d[1].operator,
operators: A,
booleanValues: B,
onChange: Y,
filterType: F
}, U = c.logic, w = y(ge, u), S = {
value: w.find((t) => t.operator === (U === null ? "" : U)),
onChange: Z,
data: w
}, b = ee, k = {
firstFilterProps: re,
secondFilterProps: ne,
logicData: S.data,
logicValue: S.value,
onLogicChange: S.onChange,
hideSecondFilter: le
}, _ = O().filters.length !== 0 || C(d[0].operator) || C(d[1].operator), z = D() ? e.expanded : M, H = e.alwaysExpand && !a.mobileMode, ie = () => {
p(!1);
}, oe = () => {
p(!1), e.onCloseMenu && e.onCloseMenu();
}, ae = `${u.toLanguageString(
j,
E[j]
)} ${s.title || s.field}`;
return /* @__PURE__ */ l.createElement(se, null, !H && /* @__PURE__ */ l.createElement("div", { className: "k-expander" }, /* @__PURE__ */ l.createElement(
ce,
{
title: u.toLanguageString(q, E[q]),
iconClass: "k-i-filter",
svgIcon: he,
expandable: !0,
expanded: !!z,
onClick: W
}
)), a.mobileMode && g ? /* @__PURE__ */ l.createElement(
Ee,
{
FilterUI: b,
filterUIProps: k,
onBackView: ie,
adaptiveTitle: ae,
handleClose: oe,
submit: G,
clear: N,
isFilterValid: _
}
) : /* @__PURE__ */ l.createElement(ue, { show: (H || !!z) && !a.mobileMode }, /* @__PURE__ */ l.createElement("form", { className: "k-filter-menu", onSubmit: G, onReset: N }, /* @__PURE__ */ l.createElement("div", { className: "k-filter-menu-container" }, b ? /* @__PURE__ */ l.createElement(b, { ...k }) : /* @__PURE__ */ l.createElement(Fe, { ...k }), /* @__PURE__ */ l.createElement("div", { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ l.createElement(Q, { type: "button", themeColor: "primary", disabled: !_, onClick: G }, u.toLanguageString(J, E[J])), /* @__PURE__ */ l.createElement(Q, { type: "reset" }, u.toLanguageString(K, E[K])))))));
};
export {
Oe as GridColumnMenuFilter,
x as filterGroupByField,
Ne as isColumnMenuFilterActive,
I as rootFilterOrDefault
};