@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
166 lines (165 loc) • 6.8 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 { isCompositeFilterDescriptor as R } from "@progress/kendo-data-query";
import { GridColumnMenuItem as se } from "./GridColumnMenuItem.mjs";
import { GridColumnMenuItemGroup as ce } 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 v, operatorMap as I, booleanFilterValues as me, filterLogicList as ge, defaultHideSecondFilter 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 k = (e) => e || { filters: [], logic: "and" }, x = (e, a) => k(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), y = l.useCallback(() => {
let t;
if (e.column && e.column.field) {
const i = $(e.column.filter), r = de(e.filterOperators, i);
t = x(e.column.field, e.filter), t = t ? {
...t,
filters: t.filters.map((n) => ({ ...n }))
} : {
logic: "and",
filters: [
{
field: e.column.field,
operator: r,
value: v(r) ? null : void 0
},
{
field: e.column.field,
operator: r,
value: v(r) ? null : void 0
}
]
}, t.filters.filter((n) => n.field === e.column.field).length === 1 && t.filters.splice(1, 0, { field: e.column.field, operator: r });
}
return t;
}, [e.column]), [p, f] = l.useState(e.expanded || !1), [g, M] = l.useState(!1), [s, L] = l.useState(y()), T = () => e.expanded !== void 0, W = () => {
const t = T(), i = !(t ? e.expanded : p);
e.onExpandChange && e.onExpandChange(i), M(!g), !t && !a.mobileMode && f(i);
}, X = (t) => {
D(0, t);
}, Y = (t) => {
D(1, t);
}, D = (t, i) => {
const r = s.filters.map((n, o) => o === t ? {
...n,
value: i.value,
operator: i.operator
} : n);
L({
...s,
filters: r
});
}, Z = (t) => {
let i = t.target.value;
t.target.tagName === "SPAN" && (i = t.target.parentElement.value), L({ ...s, logic: i });
}, P = (t) => {
if (t.preventDefault(), !e.onFilterChange)
return;
const i = e.column.field, r = k(e.filter), n = x(i, e.filter), o = r.filters.filter((m) => m !== n);
o.length ? e.onFilterChange({ ...r, filters: o }, t) : e.onFilterChange(null, t), e.onCloseMenu && e.onCloseMenu();
}, N = () => ({
...s,
filters: s.filters.filter((t) => t.value !== void 0 && t.value !== null && t.value !== "" || t.value === null && t.operator)
}), O = (t) => {
if (t.preventDefault(), !e.onFilterChange)
return;
const i = e.column.field, r = k(e.filter), n = x(i, e.filter), o = N();
let m = null;
if (n && o.filters.length > 0) {
const F = r.filters.map((h) => h === n ? o : h);
m = {
...r,
filters: F
};
} else if (o.filters.length === 0) {
const F = r.filters.filter((h) => h !== n);
F.length && (m = {
...r,
filters: F
});
} else
m = {
...r,
filters: [...r.filters, o]
};
e.onFilterChange(m, t), e.onCloseMenu && e.onCloseMenu();
}, { column: c, filterUI: ee, hideSecondFilter: V, filterOperators: te } = e, u = fe();
if (!c || !c.field)
return /* @__PURE__ */ l.createElement("div", null);
const C = $(c.filter), le = V !== void 0 ? V : Ce[C], d = s.filters, A = I(te[C], u), B = I(me, u), re = {
field: c.field,
value: d[0].value,
operator: d[0].operator,
operators: A,
booleanValues: B,
onChange: X,
filterType: C
}, ie = {
field: c.field,
value: d[1].value,
operator: d[1].operator,
operators: A,
booleanValues: B,
onChange: Y,
filterType: C
}, U = s.logic, w = I(ge, u), G = {
value: w.find((t) => t.operator === (U === null ? "" : U)),
onChange: Z,
data: w
}, S = ee, b = {
firstFilterProps: re,
secondFilterProps: ie,
logicData: G.data,
logicValue: G.value,
onLogicChange: G.onChange,
hideSecondFilter: le
}, _ = N().filters.length !== 0 || v(d[0].operator) || v(d[1].operator), z = T() ? e.expanded : p, H = e.alwaysExpand && !a.mobileMode, ne = () => {
M(!1);
}, oe = () => {
M(!1), e.onCloseMenu && e.onCloseMenu();
}, ae = `${u.toLanguageString(
j,
E[j]
)} ${c.title || c.field}`;
return /* @__PURE__ */ l.createElement(ce, null, !H && /* @__PURE__ */ l.createElement("div", { className: "k-expander" }, /* @__PURE__ */ l.createElement(
se,
{
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: S,
filterUIProps: b,
onBackView: ne,
adaptiveTitle: ae,
handleClose: oe,
submit: O,
clear: P,
isFilterValid: _
}
) : /* @__PURE__ */ l.createElement(ue, { show: (H || !!z) && !a.mobileMode }, /* @__PURE__ */ l.createElement("form", { className: "k-filter-menu", onSubmit: O, onReset: P }, /* @__PURE__ */ l.createElement("div", { className: "k-filter-menu-container" }, S ? /* @__PURE__ */ l.createElement(S, { ...b }) : /* @__PURE__ */ l.createElement(Fe, { ...b }), /* @__PURE__ */ l.createElement("div", { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ l.createElement(Q, { themeColor: "primary", disabled: !_ }, 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,
k as rootFilterOrDefault
};