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