@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
277 lines (276 loc) • 11.5 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
*-------------------------------------------------------------------------------------------
*/
import * as t from "react";
import Ge from "react-dom";
import { useDocument as Oe, SvgIcon as Ve, useAsyncFocusBlur as Ue, classNames as ze, getActiveElement as Ke } from "@progress/kendo-react-common";
import { GridColumnMenuItem as _e } from "../columnMenu/GridColumnMenuItem.mjs";
import { GridColumnMenuItemContent as He } from "../columnMenu/GridColumnMenuItemContent.mjs";
import { GridColumnMenuItemGroup as je } from "../columnMenu/GridColumnMenuItemGroup.mjs";
import { GridContext as qe } from "../utils/GridContext.mjs";
import { filterIcon as fe, filterClearIcon as Je } from "@progress/kendo-svg-icons";
import { getFilterType as me, operatorMap as V, defaultHideSecondFilter as Qe, IsUnaryFilter as C, getDefaultOperator as We, booleanFilterValues as Xe, filterLogicList as Ye } from "../filterCommon.mjs";
import { Button as k } from "@progress/kendo-react-buttons";
import { GridColumnMenuFilterUI as Ze } from "../columnMenu/GridColumnMenuFilterUI.mjs";
import { toolbarFilter as M, messages as v, filterSubmitButton as de, filterClearButton as ge, filterClearAllButton as pe } from "../messages/index.mjs";
import { useLocalization as $e } from "@progress/kendo-react-intl";
import { rootFilterOrDefault as w, filterGroupByField as xe } from "../columnMenu/GridColumnMenuFilter.mjs";
import { Popup as Re } from "@progress/kendo-react-popup";
import { BadgeContainer as et, Badge as tt } from "@progress/kendo-react-indicators";
import { GridToolbarAdaptiveProvider as rt } from "./adaptiveContext/GridToolbarAdaptiveContext.mjs";
import { GridAdaptiveToolbarFilter as ot } from "./adaptiveContent/GridAdaptiveToolbarFilter.mjs";
const lt = (c) => {
var te, re, oe, le, ne, ie, ae;
const n = t.useContext(qe), m = n.columnsRef;
n.filterable;
const p = n.defaultFilter, [S, F] = t.useState(!1), [he, E] = t.useState(!1), [d, D] = t.useState(
(m == null ? void 0 : m.map((e) => ({ column: e, expanded: !1 }))) || []
), [ve, U] = t.useState(!1), g = t.useRef(null), y = t.useRef(null), z = t.useRef(null), I = t.useRef(0), r = t.useRef(null), f = $e(), Fe = Oe(g), K = t.useMemo(
() => (m == null ? void 0 : m.filter((e) => {
var o;
return (o = e.title || e.field) == null ? void 0 : o.toLowerCase();
})) || [],
[m]
);
t.useEffect(() => {
p && E(!0);
}, [p]);
const _ = t.useCallback(
(e) => {
const o = p && p.filters.some((i) => i.field === e.field);
return /* @__PURE__ */ t.createElement(t.Fragment, null, e.title || e.field, o && /* @__PURE__ */ t.createElement("span", { className: "k-columnmenu-indicators" }, /* @__PURE__ */ t.createElement(Ve, { key: 1, icon: fe })));
},
[p]
), H = (e, o) => {
D((i) => (r.current = o, i.map((l) => l.column.field === o.field ? { ...l, expanded: !l.expanded } : { ...l, expanded: !1 }))), B(j()), U(!ve);
}, j = () => {
var o, i, l, s, se, ce;
let e;
if (r != null && r.current && ((o = r == null ? void 0 : r.current) != null && o.field)) {
const Pe = me((i = r == null ? void 0 : r.current) == null ? void 0 : i.filter), h = We(n.filterOperators, Pe);
e = xe((l = r == null ? void 0 : r.current) == null ? void 0 : l.field, n.filter), e = e ? {
...e,
filters: e.filters.map((O) => ({ ...O }))
} : {
logic: "and",
filters: [
{
field: (s = r == null ? void 0 : r.current) == null ? void 0 : s.field,
operator: h,
value: C(h) ? null : void 0
},
{
field: (se = r == null ? void 0 : r.current) == null ? void 0 : se.field,
operator: h,
value: C(h) ? null : void 0
}
]
}, e.filters.filter((O) => {
var ue;
return O.field === ((ue = r == null ? void 0 : r.current) == null ? void 0 : ue.field);
}).length === 1 && e.filters.splice(1, 0, {
field: (ce = r == null ? void 0 : r.current) == null ? void 0 : ce.field,
operator: h
});
}
return e;
}, Ee = (e) => {
q(0, e);
}, be = (e) => {
q(1, e);
}, q = (e, o) => {
const i = u.filters.map((l, s) => s === e ? {
...l,
value: o.value || "",
operator: o.operator || A[s].operator
} : l);
B({
...u,
filters: i
});
}, [u, B] = t.useState(j()), a = u == null ? void 0 : u.filters, b = me((te = r == null ? void 0 : r.current) == null ? void 0 : te.filter), A = V(n.filterOperators[b], f), J = V(Xe, f), Ce = {
field: (re = r == null ? void 0 : r.current) == null ? void 0 : re.field,
value: a == null ? void 0 : a[0].value,
operator: a == null ? void 0 : a[0].operator,
operators: A,
booleanValues: J,
onChange: Ee,
filterType: b
}, ke = {
field: (oe = r == null ? void 0 : r.current) == null ? void 0 : oe.field,
value: a == null ? void 0 : a[1].value,
operator: a == null ? void 0 : a[1].operator,
operators: A,
booleanValues: J,
onChange: be,
filterType: b
}, Me = (e) => {
let o = e.target.value;
e.target.tagName === "SPAN" && (o = e.target.parentElement.value), B({ ...u, logic: o });
}, Q = u == null ? void 0 : u.logic, W = V(Ye, f), T = {
value: W.find((e) => e.operator === (Q === null ? "" : Q)),
onChange: Me,
data: W
}, we = c.hideSecondFilter !== void 0 ? c.hideSecondFilter : Qe[b], N = c.filterUI, L = {
firstFilterProps: Ce,
secondFilterProps: ke,
logicData: T.data,
logicValue: T.value,
onLogicChange: T.onChange,
hideSecondFilter: we
}, X = () => ({
...u,
filters: u == null ? void 0 : u.filters.filter((e) => e.value !== void 0 && e.value !== null && e.value !== "" || e.value === null && e.operator)
}), P = ((ne = (le = X()) == null ? void 0 : le.filters) == null ? void 0 : ne.length) !== 0 || C(a == null ? void 0 : a[0].operator) || C(a == null ? void 0 : a[1].operator), Y = (e) => {
if (e.preventDefault(), !n.filterChange)
return;
const o = w(n.filter), i = {
...o,
filters: o.filters.filter((l) => {
var s;
return l.field !== ((s = r == null ? void 0 : r.current) == null ? void 0 : s.field);
})
};
P && i.filters.push(X()), n.filterChange(i, e), E(!0), F(!1);
}, Z = (e) => {
if (e.preventDefault(), !n.filterChange)
return;
const o = w(n.filter), i = o.filters.filter((l) => {
var s;
return l.field !== ((s = r == null ? void 0 : r.current) == null ? void 0 : s.field);
});
i.length === 0 ? n.filterChange(null, e) : n.filterChange({ ...o, filters: i }, e), c.onCloseMenu && c.onCloseMenu(), E(!1), D(
(l) => l.map((s) => ({
...s,
expanded: !1
}))
);
}, Se = () => {
U(!1);
}, De = (e) => {
e.preventDefault(), F(!S);
}, ye = (e) => {
!e.isAnchorClicked && F(!1);
}, G = t.useMemo(() => c.show !== void 0 ? c.show : S, [c.show, S]), Ie = (e) => {
const o = Ke(document);
clearTimeout(I.current), I.current = window.setTimeout(() => {
!n.mobileMode && o && e.relatedTarget !== g.current && y.current && !y.current.contains(o) && $();
});
}, $ = () => {
var e;
c.onCloseMenu && c.onCloseMenu(), F(!1), g.current && ((e = g.current.element) == null || e.focus());
}, Be = () => {
clearTimeout(I.current);
}, { onFocus: Ae, onBlur: Te } = Ue({
onFocus: (e) => Be(),
onBlur: (e) => Ie(e)
}), Ne = (e) => {
var o;
(o = z.current) == null || o.triggerMouseEvent(e);
}, Le = (e) => {
var o;
(o = z.current) == null || o.triggerKeyboardEvent(e);
}, x = t.useCallback(
(e) => {
if (e.preventDefault(), !n.filterChange)
return;
const o = w(n.filter), i = o.filters.filter(() => !1);
i.length === 0 ? n.filterChange(null, e) : n.filterChange({ ...o, filters: i }, e), E(!1), D(
(l) => l.map((s) => ({
...s,
expanded: !1
}))
);
},
[n, w]
), R = /* @__PURE__ */ t.createElement(
k,
{
ref: g,
togglable: !0,
selected: G,
svgIcon: c.svgIcon ? c.svgIcon : c.icon ? void 0 : fe,
icon: c.icon,
size: n.mobileMode ? "large" : "medium",
className: ze("k-toolbar-button", {
"k-icon-button": n.mobileMode
}),
title: f.toLanguageString(M, v[M]),
onClick: De
},
!n.mobileMode && f.toLanguageString(M, v[M])
), ee = /* @__PURE__ */ t.createElement(t.Fragment, null, K.map((e) => {
var o, i;
return e.filterable && /* @__PURE__ */ t.createElement(je, { key: e.id }, /* @__PURE__ */ t.createElement("div", { className: "k-expander" }, /* @__PURE__ */ t.createElement(
_e,
{
title: _(e),
expandable: !0,
expanded: !!((o = d == null ? void 0 : d.find((l) => l.column.field === e.field)) != null && o.expanded),
onClick: (l) => H(l, e)
}
)), /* @__PURE__ */ t.createElement(
He,
{
show: !!((i = d == null ? void 0 : d.find((l) => l.column.field === e.field)) != null && i.expanded)
},
/* @__PURE__ */ t.createElement("form", { className: "k-filter-menu", onSubmit: Y, onReset: Z }, /* @__PURE__ */ t.createElement("div", { className: "k-filter-menu-container" }, N ? /* @__PURE__ */ t.createElement(N, { ...L }) : /* @__PURE__ */ t.createElement(Ze, { ...L }), /* @__PURE__ */ t.createElement("div", { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ t.createElement(k, { themeColor: "primary", disabled: !P }, f.toLanguageString(
de,
v[de]
)), /* @__PURE__ */ t.createElement(k, { type: "reset" }, f.toLanguageString(
ge,
v[ge]
)))))
));
}), /* @__PURE__ */ t.createElement("div", { className: "k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer" }, /* @__PURE__ */ t.createElement(k, { svgIcon: Je, onClick: x }, f.toLanguageString(pe, v[pe]))));
return /* @__PURE__ */ t.createElement(t.Fragment, null, he ? /* @__PURE__ */ t.createElement(et, null, R, /* @__PURE__ */ t.createElement(tt, { themeColor: "primary" })) : R, n.mobileMode ? /* @__PURE__ */ t.createElement(rt, null, Ge.createPortal(
/* @__PURE__ */ t.createElement(
ot,
{
filtered: K,
computedShow: G,
expandState: d,
FilterUI: N,
filterUIProps: L,
isFilterValid: P,
renderTitle: _,
onBackView: Se,
clear: Z,
submit: Y,
onClose: $,
onFilterExpand: H,
handleClearAllFilters: x
},
ee
),
(ie = Fe()) == null ? void 0 : ie.body
)) : /* @__PURE__ */ t.createElement(
Re,
{
anchor: (ae = g.current) == null ? void 0 : ae.element,
show: G,
popupClass: "k-grid-columnmenu-popup",
onMouseDownOutside: ye
},
/* @__PURE__ */ t.createElement(
"div",
{
ref: y,
onBlur: Te,
onFocus: Ae,
onMouseDown: Ne,
onKeyDown: Le,
className: "k-column-menu k-column-menu-md"
},
ee
)
));
};
lt.displayName = "KendoReactGridToolbarFilter";
export {
lt as GridToolbarFilter
};