@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
128 lines (127 loc) • 5.45 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 e from "react";
import { TextBox as W, InputPrefix as q, Checkbox as L } from "@progress/kendo-react-inputs";
import { IconWrap as H } from "@progress/kendo-react-common";
import { columnsIcon as J, searchIcon as K } from "@progress/kendo-svg-icons";
import { Button as A } from "@progress/kendo-react-buttons";
import { useLocalization as Q } from "@progress/kendo-react-intl";
import { adaptiveColumnMenuChooserTitle as B, messages as u, filterSelectAll as F, columnMenuColumnChooserSelectedItems as R, filterApplyButton as j, filterResetButton as z } from "../messages/index.mjs";
import { GridColumnMenuItem as U } from "./GridColumnMenuItem.mjs";
import { GridColumnMenuItemGroup as X } from "./GridColumnMenuItemGroup.mjs";
import { GridColumnMenuItemContent as Y } from "./GridColumnMenuItemContent.mjs";
import { GridContext as Z } from "../utils/GridContext.mjs";
import { GridAdaptiveColumnChooser as _ } from "./adaptiveContent/GridAdaptiveColumnChooser.mjs";
const $ = (o) => {
const { columnsState: l, onCloseMenu: C, onColumnsStateChange: k } = o, i = Q(), f = e.useContext(Z), [s, D] = e.useState(""), [g, O] = e.useState(o.expanded || !1), [E, h] = e.useState(!1), x = l.reduce((t, n) => ({ ...t, [n.id || ""]: !n.hidden }), {}), [a, p] = e.useState(x), S = e.useMemo(
() => (l == null ? void 0 : l.filter((t) => {
var n;
return (n = t.title || t.field) == null ? void 0 : n.toLowerCase().includes(s.toLowerCase());
})) || [],
[l, s]
), m = e.useMemo(
() => Object.values(a).filter((t) => t).length,
[a]
), d = e.useMemo(() => m === (l == null ? void 0 : l.length), [l, m]), b = e.useCallback(
(t) => {
t.preventDefault();
const r = ((c) => (c == null ? void 0 : c.map((G) => ({
...G,
hidden: !a[G.id || ""]
}))) || [])(l);
k && k(r), C == null || C.call(void 0);
},
[a, l, C]
), v = (t) => {
t.preventDefault(), p(x);
}, M = e.useCallback(() => {
const t = { ...a };
Object.keys(t).forEach(
(n, r) => t[n] = d && r === 0 ? !0 : !d
), p(t);
}, [a, d]), y = e.useCallback(
(t, n) => {
const r = { ...a };
r[n || ""] = t, p(r);
},
[a]
), N = (t) => {
D(String(t.target.value));
}, T = e.useCallback(() => {
const t = w(), n = !(t ? o.expanded : g);
o.onExpandChange && o.onExpandChange(n), h(!E), !t && !f.mobileMode && O(n);
}, [g]), V = () => {
h(!1);
}, P = () => {
h(!1), o.onCloseMenu && o.onCloseMenu();
}, w = () => o.expanded !== void 0, I = w() ? o.expanded : g;
return /* @__PURE__ */ e.createElement(X, null, /* @__PURE__ */ e.createElement("div", { className: "k-expander" }, !(o.alwaysExpand && !f.mobileMode) && /* @__PURE__ */ e.createElement(
U,
{
title: i.toLanguageString(
B,
u[B]
),
iconClass: "k-i-filter",
svgIcon: J,
expandable: !0,
expanded: !!I,
onClick: T
}
)), f.mobileMode && E ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
_,
{
onBackView: V,
handleClose: P,
onApply: b,
onReset: v,
filter: s,
onFilter: N,
allSelected: d,
onSelectAll: M,
filtered: S,
selectedColumns: a,
checkedCount: m,
onCheckChange: y
}
)) : /* @__PURE__ */ e.createElement(Y, { show: (o.alwaysExpand || !!I) && !f.mobileMode }, /* @__PURE__ */ e.createElement("form", { onSubmit: b, onReset: v, className: "k-filter-menu" }, /* @__PURE__ */ e.createElement("div", { className: "k-filter-menu-container" }, /* @__PURE__ */ e.createElement(
W,
{
className: "k-searchbox",
value: s,
onChange: N,
prefix: () => /* @__PURE__ */ e.createElement(q, null, /* @__PURE__ */ e.createElement(H, { name: "search", icon: K }))
}
), /* @__PURE__ */ e.createElement("ul", { className: "k-reset k-multicheck-wrap" }, !s && /* @__PURE__ */ e.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ e.createElement(
L,
{
checked: d,
onChange: M,
label: i.toLanguageString(F, u[F])
}
)), S.map((t, n) => /* @__PURE__ */ e.createElement("li", { key: t.id, className: "k-item" }, /* @__PURE__ */ e.createElement(
L,
{
disabled: a[t.id || ""] && m === 1,
checked: a[t.id || ""],
onChange: (r) => {
var c;
return y(!!((c = r.target.element) != null && c.checked), t.id);
},
label: t.title || t.field
}
)))), /* @__PURE__ */ e.createElement("div", { className: "k-filter-selected-items" }, m, " ", i.toLanguageString(
R,
u[R]
)), /* @__PURE__ */ e.createElement("div", { className: "k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ e.createElement(A, { type: "submit", themeColor: "primary" }, i.toLanguageString(j, u[j])), /* @__PURE__ */ e.createElement(A, { type: "reset" }, i.toLanguageString(z, u[z])))))));
};
$.displayName = "GridColumnMenuColumnsChooser";
export {
$ as GridColumnMenuColumnsChooser
};