@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
179 lines (178 loc) • 7.24 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
*-------------------------------------------------------------------------------------------
*/
import * as t from "react";
import oe from "react-dom";
import { Button as w } from "@progress/kendo-react-buttons";
import { useDocument as ne, useAsyncFocusBlur as le, IconWrap as re, classNames as ae, getActiveElement as ce } from "@progress/kendo-react-common";
import { TextBox as se, InputPrefix as ie, Checkbox as K } from "@progress/kendo-react-inputs";
import { searchIcon as ue, columnsIcon as me } from "@progress/kendo-svg-icons";
import { GridColumnMenuItemContent as de } from "../columnMenu/GridColumnMenuItemContent.mjs";
import { filterSelectAll as j, messages as u, columnMenuColumnChooserSelectedItems as V, filterApplyButton as H, filterResetButton as W, toolbarColumnsChooser as h } from "../messages/index.mjs";
import { GridContext as ge } from "../utils/GridContext.mjs";
import { useLocalization as fe } from "@progress/kendo-react-intl";
import { GridAdaptiveToolbarColumnChooser as he } from "./adaptiveContent/GridAdaptiveToolbarColumnChooser.mjs";
import { Popup as Ce } from "@progress/kendo-react-popup";
import { BadgeContainer as be, Badge as ke } from "@progress/kendo-react-indicators";
import { GridToolbarAdaptiveProvider as pe } from "./adaptiveContext/GridToolbarAdaptiveContext.mjs";
const Ee = (n) => {
var F, G;
const a = t.useContext(ge), l = a.columnsState, C = a.onColumnsStateChange, [b, f] = t.useState(!1), [m, _] = t.useState(""), [q, k] = t.useState(!1), y = l.reduce((e, o) => ({ ...e, [o.id || ""]: !o.hidden }), {}), [r, p] = t.useState(y), s = t.useRef(null), E = t.useRef(null), B = t.useRef(null), M = t.useRef(0), i = fe(), J = ne(s), D = t.useMemo(
() => (l == null ? void 0 : l.filter(
(e) => {
var o;
return (o = e.title || e.field) == null ? void 0 : o.toLowerCase().includes(m.toLowerCase());
}
)) || [],
[l, m]
), d = t.useMemo(
() => Object.values(r).filter((e) => e).length,
[r]
), g = t.useMemo(() => d === (l == null ? void 0 : l.length), [l, d]), N = t.useCallback(
(e) => {
var O;
e.preventDefault();
const c = ((v) => (v == null ? void 0 : v.map((P) => ({
...P,
hidden: !r[P.id || ""]
}))) || [])(l);
C && C(c), (O = n.onCloseMenu) == null || O.call(void 0), f(!1);
},
[l, C, n.onCloseMenu, r]
), A = (e) => {
e.preventDefault(), p(y), k(!1);
}, x = t.useCallback(() => {
const e = { ...r };
Object.keys(e).forEach(
(o, c) => e[o] = g && c === 0 ? !0 : !g
), p(e), k(!0);
}, [r, g]), T = t.useCallback(
(e, o) => {
const c = { ...r };
c[o || ""] = e, p(c), k(!0);
},
[r]
), I = (e) => {
_(String(e.target.value));
}, Q = (e) => {
e.preventDefault(), f(!b);
}, S = t.useMemo(() => n.show !== void 0 ? n.show : b, [n.show, b]), L = () => {
var e;
n.onCloseMenu && n.onCloseMenu(), f(!1), s.current && ((e = s.current.element) == null || e.focus());
}, U = (e) => {
const o = ce(document);
clearTimeout(M.current), M.current = window.setTimeout(() => {
!a.mobileMode && o && e.relatedTarget !== s.current && E.current && !E.current.contains(o) && L();
});
}, X = () => {
clearTimeout(M.current);
}, { onFocus: Y, onBlur: Z } = le({
onFocus: (e) => X(),
onBlur: (e) => U(e)
}), $ = (e) => {
var o;
(o = B.current) == null || o.triggerMouseEvent(e);
}, ee = (e) => {
var o;
(o = B.current) == null || o.triggerKeyboardEvent(e);
}, te = (e) => {
!e.isAnchorClicked && f(!1);
}, R = /* @__PURE__ */ t.createElement(de, { show: !0 }, /* @__PURE__ */ t.createElement("form", { onSubmit: N, onReset: A, className: "k-filter-menu" }, /* @__PURE__ */ t.createElement("div", { className: "k-filter-menu-container" }, /* @__PURE__ */ t.createElement(
se,
{
className: "k-searchbox",
value: m,
onChange: I,
size: a.mobileMode ? "large" : "medium",
prefix: () => /* @__PURE__ */ t.createElement(ie, null, /* @__PURE__ */ t.createElement(re, { name: "search", icon: ue }))
}
), /* @__PURE__ */ t.createElement("ul", { className: "k-reset k-multicheck-wrap" }, !m && /* @__PURE__ */ t.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ t.createElement(
K,
{
checked: g,
onChange: x,
label: i.toLanguageString(j, u[j]),
size: a.mobileMode ? "large" : "medium"
}
)), D.map((e) => /* @__PURE__ */ t.createElement("li", { key: e.id, className: "k-item" }, /* @__PURE__ */ t.createElement(
K,
{
disabled: r[e.id || ""] && d === 1,
checked: r[e.id || ""],
onChange: (o) => {
var c;
return T(!!((c = o.target.element) != null && c.checked), e.id);
},
label: e.title || e.field,
size: a.mobileMode ? "large" : "medium"
}
)))), /* @__PURE__ */ t.createElement("div", { className: "k-filter-selected-items" }, d, " ", i.toLanguageString(
V,
u[V]
)), /* @__PURE__ */ t.createElement("div", { className: "k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ t.createElement(w, { type: "submit", themeColor: "primary" }, i.toLanguageString(H, u[H])), /* @__PURE__ */ t.createElement(w, { type: "reset" }, i.toLanguageString(W, u[W])))))), z = /* @__PURE__ */ t.createElement(
w,
{
ref: s,
togglable: !0,
selected: S,
svgIcon: n.svgIcon ? n.svgIcon : n.icon ? void 0 : me,
icon: n.icon,
size: a.mobileMode ? "large" : "medium",
className: ae("k-toolbar-button", {
"k-icon-button": a.mobileMode
}),
title: i.toLanguageString(h, u[h]),
onClick: Q
},
!a.mobileMode && i.toLanguageString(h, u[h])
);
return /* @__PURE__ */ t.createElement(t.Fragment, null, q ? /* @__PURE__ */ t.createElement(be, null, z, /* @__PURE__ */ t.createElement(ke, { themeColor: "primary" })) : z, a.mobileMode ? /* @__PURE__ */ t.createElement(pe, null, oe.createPortal(
/* @__PURE__ */ t.createElement(
he,
{
computedShow: S,
filter: m,
filtered: D,
selectedColumns: r,
allSelected: g,
checkedCount: d,
onClose: L,
onApply: N,
onReset: A,
onFilter: I,
onCheckChange: T,
onSelectAll: x
},
R
),
(F = J()) == null ? void 0 : F.body
)) : /* @__PURE__ */ t.createElement(
Ce,
{
anchor: (G = s.current) == null ? void 0 : G.element,
show: S,
popupClass: "k-grid-columnmenu-popup",
onMouseDownOutside: te
},
/* @__PURE__ */ t.createElement(
"div",
{
ref: E,
onBlur: Z,
onFocus: Y,
onMouseDown: $,
onKeyDown: ee,
className: "k-column-menu k-column-menu-md"
},
R
)
));
};
Ee.displayName = "KendoReactGridToolbarColumnsChooser";
export {
Ee as GridToolbarColumnsChooser
};