@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
179 lines (178 loc) • 8.18 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 { GridColumnMenuItem as ne } from "./GridColumnMenuItem.mjs";
import { GridColumnMenuItemGroup as le } from "./GridColumnMenuItemGroup.mjs";
import { GridColumnMenuItemContent as re } from "./GridColumnMenuItemContent.mjs";
import { Input as ae, Checkbox as P } from "@progress/kendo-react-inputs";
import { useLocalization as ie } from "@progress/kendo-react-intl";
import { filterClearButton as x, messages as d, searchPlaceholder as R, filterTitle as z, filterCheckAll as j, filterSelectedItems as T, filterSubmitButton as W } from "../messages/index.mjs";
import { filterBy as $ } from "@progress/kendo-data-query";
import { IconWrap as ce, clone as oe } from "@progress/kendo-react-common";
import { Button as I } from "@progress/kendo-react-buttons";
import { getNestedValue as H } from "../utils/index.mjs";
import { searchIcon as se, xIcon as ue, filterIcon as fe } from "@progress/kendo-svg-icons";
import { GridContext as de } from "../utils/GridContext.mjs";
import { GridAdaptiveCheckboxFilter as me } from "./adaptiveContent/GridAdaptiveCheckboxFilter.mjs";
const he = (e, m) => e.length !== m.length ? !1 : e.every((r, k) => r === m[k]), ge = {
uniqueData: !0
}, De = (e) => {
const { uniqueData: m = ge.uniqueData } = e, r = l.useContext(de), k = () => {
const t = e.column.field;
return M().filters.findIndex(
(i) => i.filters && i.filters.length > 0 && i.filters[0].field === t
);
}, h = (t, n) => {
const c = e.column.field || "", i = t.map((o) => H(c, o));
return n ? i.filter((o, s) => i.indexOf(o) === s) : i;
}, M = () => e.filter ? oe(e.filter) : { filters: [], logic: "and" }, a = l.useRef(k()), [N, J] = l.useState(e.expanded || !1), [y, C] = l.useState(!1), [D, w] = l.useState(""), [g, E] = l.useState(h(e.data, m) || []), [K, Q] = l.useState(h(e.data, !1) || []), [u, U] = l.useState(M());
l.useEffect(() => {
const t = e.column.field || "", n = e.data.map((c) => H(t, c));
he(n, K) || (E(n), Q(n));
}, [e.column, e.data]);
const L = () => e.expanded !== void 0, X = () => {
const t = L(), n = !(t ? e.expanded : N);
e.onExpandChange && e.onExpandChange(n), C(!y), !t && !(r != null && r.mobileMode) && J(n);
}, O = (t) => {
const n = e.searchBoxFilterOperator ? e.searchBoxFilterOperator : "startswith", c = {
logic: "and",
filters: [{ field: e.column.field, operator: n, value: t.target.value, ignoreCase: !0 }]
};
w(t.target.value), E(h($(e.data || [], c), m));
}, Y = () => {
const t = e.searchBoxFilterOperator ? e.searchBoxFilterOperator : "startswith", n = {
logic: "and",
filters: [{ field: e.column.field, operator: t, value: "", ignoreCase: !0 }]
};
w(""), E(h($(e.data || [], n), m));
}, q = (t) => {
if (t.preventDefault(), !e.onFilterChange)
return;
const n = u || null;
n !== null && n.filters.length > 0 ? (a.current >= 0 && n.filters.splice(a.current, 1), e.onFilterChange(n, t)) : e.onFilterChange(null, t), e.onCloseMenu && e.onCloseMenu();
}, G = (t) => {
if (t.preventDefault(), !e.onFilterChange)
return;
const n = u || null;
e.onFilterChange(n, t), e.onCloseMenu && e.onCloseMenu();
}, v = (t, n) => {
const c = e.column.field || "", i = { ...u }, o = [...u.filters];
let s = [];
if (a.current !== -1 && i.filters[a.current].filters && n !== "all" && (s = i.filters[a.current].filters), t.value && n === "all")
g.forEach((B) => {
s.push({ field: c, operator: "eq", value: B });
});
else if (t.value)
s.push({ field: c, operator: "eq", value: n });
else if (u) {
const B = s.findIndex((te) => te.value === n);
s.splice(B, 1);
}
i.logic = "and", a.current !== -1 ? o[a.current] = {
logic: "or",
filters: s
} : o.push({
logic: "or",
filters: s
}), (!t.value && n === "all" || s.length === 0) && o.splice(a.current, 1), i.filters = o, U(i);
}, V = () => {
let t = !1;
if (u) {
const n = [...u.filters];
return a.current === -1 ? !1 : (t = g.every((c) => a.current !== -1 && n[a.current].filters ? n[a.current].filters.findIndex(
(o) => o.value === c
) >= 0 : !1), t);
}
return t;
}, f = ie(), { column: F } = e;
if (!F || !F.field)
return /* @__PURE__ */ l.createElement("div", null);
const A = L() ? e.expanded : N, b = [];
if (u) {
const t = [...u.filters];
a.current = t.findIndex((n) => n.filters && n.filters.length > 0 ? n.filters[0].field === F.field : !1), a.current !== -1 && t[a.current].filters.length > 0 && t[a.current].filters.forEach((n) => {
n.field === e.column.field && b.push(n.value);
});
}
const Z = () => {
C(!1);
}, _ = () => {
C(!1), e.onCloseMenu && e.onCloseMenu();
}, p = f.toLanguageString(x, d[x]), ee = e.searchBox ? /* @__PURE__ */ l.createElement(e.searchBox, { value: D, onChange: O }) : /* @__PURE__ */ l.createElement(
"div",
{
className: `k-searchbox k-textbox k-input k-input-md k-input-solid ${r != null && r.mobileMode ? "k-input-lg" : "k-input-md"}`
},
/* @__PURE__ */ l.createElement(ce, { className: "k-input-icon", name: "search", icon: se }),
/* @__PURE__ */ l.createElement(
ae,
{
className: "k-input-inner",
type: "text",
placeholder: f.toLanguageString(R, d[R]),
value: D,
onChange: (t) => O(t.nativeEvent)
}
),
/* @__PURE__ */ l.createElement(
I,
{
type: "button",
rounded: null,
className: "k-input-button",
onClick: Y,
icon: "x",
"aria-label": p,
svgIcon: ue
}
)
), S = b.filter((t, n) => b.indexOf(t) === n);
return /* @__PURE__ */ l.createElement(le, null, !(e.alwaysExpand && !(r != null && r.mobileMode)) && /* @__PURE__ */ l.createElement("div", { className: "k-expander" }, /* @__PURE__ */ l.createElement(
ne,
{
title: f.toLanguageString(z, d[z]),
iconClass: "k-i-filter",
svgIcon: fe,
expandable: !0,
expanded: !!A,
onClick: X
}
)), r != null && r.mobileMode && y ? /* @__PURE__ */ l.createElement(
me,
{
onBackView: Z,
handleClose: _,
searchBox: e.searchBox,
handleCheckBoxChange: v,
isAllSelected: V,
currentData: g,
uniqueFilterValues: S,
submit: G,
clear: q
}
) : /* @__PURE__ */ l.createElement(re, { show: (e.alwaysExpand || !!A) && !(r != null && r.mobileMode) }, /* @__PURE__ */ l.createElement("form", { className: "k-filter-menu", onSubmit: G, onReset: q }, /* @__PURE__ */ l.createElement("div", { className: "k-filter-menu-container" }, ee, /* @__PURE__ */ l.createElement("ul", { className: "k-reset k-multicheck-wrap" }, /* @__PURE__ */ l.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ l.createElement(
P,
{
label: f.toLanguageString(j, d[j]),
onChange: (t) => v(t, "all"),
checked: V()
}
)), g.map((t, n) => /* @__PURE__ */ l.createElement("li", { className: "k-item", key: n }, /* @__PURE__ */ l.createElement(
P,
{
label: String(t),
onChange: (c) => v(c, t),
checked: S.includes(t)
}
)))), /* @__PURE__ */ l.createElement("div", { className: "k-filter-selected-items" }, S.length + " " + f.toLanguageString(T, d[T])), /* @__PURE__ */ l.createElement("div", { className: "k-actions k-hstack k-justify-content-stretch" }, /* @__PURE__ */ l.createElement(I, { themeColor: "primary", type: "submit" }, f.toLanguageString(W, d[W])), /* @__PURE__ */ l.createElement(I, { className: "k-button", type: "reset" }, f.toLanguageString(x, d[x])))))));
};
export {
De as GridColumnMenuCheckboxFilter,
he as isArrayEqual
};