@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
205 lines (204 loc) • 8.54 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 e from "react";
import x from "react-dom";
import { GridContext as ee } from "../utils/GridContext.mjs";
import { Button as L } from "@progress/kendo-react-buttons";
import { chevronUpIcon as te, chevronDownIcon as ne, xCircleIcon as oe, plusCircleIcon as ae, groupIcon as re, xIcon as le } from "@progress/kendo-svg-icons";
import { useLocalization as se } from "@progress/kendo-react-intl";
import { toolbarGroup as p, messages as v, groupClearButton as K } from "../messages/index.mjs";
import { useDocument as ce, classNames as w, SvgIcon as g, useAsyncFocusBlur as ue, getActiveElement as ie } from "@progress/kendo-react-common";
import { BadgeContainer as me, Badge as de } from "@progress/kendo-react-indicators";
import { Popup as pe } from "@progress/kendo-react-popup";
import { GridToolbarAdaptiveProvider as ge } from "./adaptiveContext/GridToolbarAdaptiveContext.mjs";
import { GridAdaptiveToolbarGroup as fe } from "./adaptiveContent/GridAdaptiveToolbarGroup.mjs";
const ke = (s) => {
var S, z;
const a = e.useContext(ee), c = a.columnsState, P = a.groupable, o = a.group, G = a.defaultGroup, [M, d] = e.useState(!0), [O, m] = e.useState(!1), [f, k] = e.useState(!1), u = e.useRef(null), b = e.useRef(null), N = e.useRef(null), C = e.useRef(0), h = se(), U = ce(u);
e.useEffect(() => {
G || o != null && o.length ? (m(!0), d(!1)) : m(!1);
}, [G, o]);
const I = e.useMemo(
() => (c == null ? void 0 : c.filter((t) => {
var n;
return (n = t.title || t.field) == null ? void 0 : n.toLowerCase();
})) || [],
[c]
), i = e.useCallback(() => {
var t;
s.onCloseMenu && s.onCloseMenu(), k(!1), u.current && ((t = u.current.element) == null || t.focus());
}, [s]), D = e.useCallback(
(t, n) => {
if (t.preventDefault(), !(n != null && n.field))
return;
const r = (o || []).slice(), l = r.findIndex(($) => $.field === n.field);
l > -1 ? r.splice(l, 1) : r.push({
field: n.field
}), a.groupChange(r, t), d(!1), m(!0);
},
[a, o]
), B = e.useCallback(
(t, n) => {
if (t.preventDefault(), !(n != null && n.field))
return;
const r = (o || []).filter((l) => l.field !== n.field);
a.groupChange(r, t), r.length === 0 && (d(!0), m(!1), i());
},
[i, a, o]
), T = e.useCallback(
(t, n) => {
if (n === 0)
return;
const r = [...o || []], l = r[n - 1];
r[n - 1] = r[n], r[n] = l, a.groupChange(r, t);
},
[o, a]
), y = e.useCallback(
(t, n) => {
if (n === o.length - 1)
return;
const r = [...o || []], l = r[n + 1];
r[n + 1] = r[n], r[n] = l, a.groupChange(r, t);
},
[o, a]
), V = e.useCallback(
(t, n) => {
const r = c == null ? void 0 : c.find((l) => l.field === t.field);
return /* @__PURE__ */ e.createElement(e.Fragment, null, o && o.length !== 1 && /* @__PURE__ */ e.createElement("span", { className: "k-group-menu-item-actions" }, /* @__PURE__ */ e.createElement(
"span",
{
className: w("k-group-menu-item-action k-group-menu-item-up-action", {
"k-disabled": n === 0
}),
"aria-disabled": n === 0,
onClick: (l) => T(l, n)
},
/* @__PURE__ */ e.createElement(g, { icon: te })
), /* @__PURE__ */ e.createElement(
"span",
{
className: w("k-group-menu-item-action k-group-menu-item-down-action", {
"k-disabled": n === o.length - 1
}),
"aria-disabled": n === o.length - 1,
onClick: (l) => y(l, n)
},
/* @__PURE__ */ e.createElement(g, { icon: ne })
)), /* @__PURE__ */ e.createElement("span", { className: "k-group-item-text" }, (r == null ? void 0 : r.title) || t.field), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("span", { className: "k-group-menu-item-actions" }, /* @__PURE__ */ e.createElement(
"span",
{
className: "k-group-menu-item-action k-group-menu-item-remove-action",
onClick: (l) => B(l, t)
},
/* @__PURE__ */ e.createElement(g, { icon: oe, size: a.mobileMode ? "large" : "medium" })
)));
},
[c, a.mobileMode, o, B, y, T]
), H = e.useCallback(
(t) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: "k-group-item-text" }, t.title || t.field), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("span", { className: "k-group-menu-item-actions" }, /* @__PURE__ */ e.createElement(
"span",
{
className: "k-group-menu-item-action k-group-menu-item-add-action",
onClick: (n) => D(n, t)
},
/* @__PURE__ */ e.createElement(g, { icon: ae, size: a.mobileMode ? "large" : "medium" })
))),
[a.mobileMode, D]
), _ = (t) => {
t.preventDefault(), k(!f);
}, E = e.useMemo(() => {
var t;
return (t = s.show) != null ? t : f;
}, [s.show, f]), j = (t) => {
const n = ie(document);
clearTimeout(C.current), C.current = window.setTimeout(() => {
!a.mobileMode && n && t.relatedTarget !== u.current && b.current && !b.current.contains(n) && i();
});
}, q = () => {
clearTimeout(C.current);
}, { onFocus: J, onBlur: Q } = ue({
onFocus: (t) => q(),
onBlur: (t) => j(t)
}), W = (t) => {
var n;
(n = N.current) == null || n.triggerMouseEvent(t);
}, X = (t) => {
var n;
(n = N.current) == null || n.triggerKeyboardEvent(t);
}, Y = (t) => {
!t.isAnchorClicked && k(!1);
}, A = e.useCallback(
(t) => {
a.groupChange([], t), d(!0), m(!1), i();
},
[i, a]
), F = /* @__PURE__ */ e.createElement(e.Fragment, null, o && o.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "k-group-menu-item-wrap" }, o == null ? void 0 : o.map((t, n) => /* @__PURE__ */ e.createElement("div", { className: "k-group-menu-item", key: t.field }, V(t, n)))), /* @__PURE__ */ e.createElement("div", { className: "k-group-menu-item-wrap" }, I.filter((t) => !(o != null && o.some((n) => n.field === t.field))).map((t) => t.field === "value" ? null : /* @__PURE__ */ e.createElement("div", { className: "k-group-menu-item", key: t.id }, H(t))))), Z = e.useMemo(() => s.svgIcon ? s.svgIcon : s.icon ? void 0 : re, [s.icon, s.svgIcon]), R = /* @__PURE__ */ e.createElement(
L,
{
ref: u,
togglable: !0,
selected: E,
svgIcon: Z,
icon: s.icon,
size: a.mobileMode ? "large" : "medium",
className: w("k-toolbar-button", {
"k-icon-button": a.mobileMode
}),
title: h.toLanguageString(p, v[p]),
onClick: _
},
!a.mobileMode && h.toLanguageString(p, v[p])
);
return P && /* @__PURE__ */ e.createElement(e.Fragment, null, O ? /* @__PURE__ */ e.createElement(me, null, R, /* @__PURE__ */ e.createElement(de, { themeColor: "primary" })) : R, a.mobileMode ? /* @__PURE__ */ e.createElement(ge, null, x.createPortal(
/* @__PURE__ */ e.createElement(
fe,
{
filtered: I,
computedShow: E,
isDisabledButton: M,
toolContent: F,
onClose: i,
onClear: A
}
),
(S = U()) == null ? void 0 : S.body
)) : /* @__PURE__ */ e.createElement(
pe,
{
anchor: (z = u.current) == null ? void 0 : z.element,
show: E,
popupClass: "k-grid-columnmenu-popup",
onMouseDownOutside: Y
},
/* @__PURE__ */ e.createElement(
"div",
{
ref: b,
onBlur: Q,
onFocus: J,
onMouseDown: W,
onKeyDown: X,
className: "k-group-menu k-group-menu-md"
},
F,
/* @__PURE__ */ e.createElement("div", { className: "k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer" }, /* @__PURE__ */ e.createElement(
L,
{
svgIcon: le,
onClick: A,
disabled: M
},
h.toLanguageString(K, v[K])
))
)
));
};
ke.displayName = "KendoReactGridToolbarGroup";
export {
ke as GridToolbarGroup
};