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