@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
83 lines (82 loc) • 3.65 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 t from "react";
import { TextBox as M, InputPrefix as I, Checkbox as p } from "@progress/kendo-react-inputs";
import { IconWrap as R } from "@progress/kendo-react-common";
import { searchIcon as j } from "@progress/kendo-svg-icons";
import { Button as g } from "@progress/kendo-react-buttons";
import { useLocalization as z } from "@progress/kendo-react-intl";
import { filterSelectAll as E, messages as k, filterApplyButton as S, filterResetButton as b } from "../messages/index.mjs";
const F = (N) => {
const { columnsState: l, onCloseMenu: c, onColumnsStateChange: h } = N, u = z(), [i, y] = t.useState(""), C = l.reduce((e, n) => ({ ...e, [n.id || ""]: !n.hidden }), {}), [o, d] = t.useState(C), x = t.useMemo(
() => (l == null ? void 0 : l.filter((e) => {
var n;
return (n = e.title || e.field) == null ? void 0 : n.toLowerCase().includes(i.toLowerCase());
})) || [],
[l, i]
), s = t.useMemo(
() => Object.values(o).filter((e) => e).length,
[o]
), m = t.useMemo(() => s === (l == null ? void 0 : l.length), [l, s]), v = t.useCallback(
(e) => {
const a = ((r) => (r == null ? void 0 : r.map((f) => ({
...f,
hidden: !o[f.id || ""]
}))) || [])(l);
h && h(a), c == null || c.call(void 0);
},
[o, l, c]
), L = () => {
d(C);
}, w = t.useCallback(() => {
const e = { ...o };
Object.keys(e).forEach(
(n, a) => e[n] = m && a === 0 ? !0 : !m
), d(e);
}, [o, m]), B = t.useCallback(
(e, n) => {
const a = { ...o };
a[n || ""] = e, d(a);
},
[o]
), A = (e) => {
y(String(e.target.value));
};
return /* @__PURE__ */ t.createElement("form", { className: "k-filter-menu" }, /* @__PURE__ */ t.createElement("div", { className: "k-filter-menu-container" }, /* @__PURE__ */ t.createElement(
M,
{
className: "k-searchbox",
value: i,
onChange: A,
prefix: () => /* @__PURE__ */ t.createElement(I, null, /* @__PURE__ */ t.createElement(R, { name: "search", icon: j }))
}
), /* @__PURE__ */ t.createElement("ul", { className: "k-reset k-multicheck-wrap" }, !i && /* @__PURE__ */ t.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ t.createElement(
p,
{
checked: m,
onChange: w,
label: u.toLanguageString(E, k[E])
}
)), x.map((e, n) => /* @__PURE__ */ t.createElement("li", { key: e.id, className: "k-item" }, /* @__PURE__ */ t.createElement(
p,
{
disabled: o[e.id || ""] && s === 1,
checked: o[e.id || ""],
onChange: (a) => {
var r;
return B(!!((r = a.target.element) != null && r.checked), e.id);
},
label: e.title || e.field
}
)))), /* @__PURE__ */ t.createElement("div", { className: "k-filter-selected-items" }, s, " selected items"), /* @__PURE__ */ t.createElement("div", { className: "k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ t.createElement(g, { type: "button", themeColor: "primary", onClick: v }, u.toLanguageString(S, k[S])), /* @__PURE__ */ t.createElement(g, { type: "button", onClick: L }, u.toLanguageString(b, k[b])))));
};
F.displayName = "GridColumnMenuColumnsChooser";
export {
F as GridColumnMenuColumnsChooser
};