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