@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
147 lines (146 loc) • 5.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
*-------------------------------------------------------------------------------------------
*/
import * as e from "react";
import j from "react-dom";
import { GridColumnMenuItemGroup as q } from "../columnMenu/GridColumnMenuItemGroup.mjs";
import { GridColumnMenuItem as J } from "../columnMenu/GridColumnMenuItem.mjs";
import { GridContext as Q } from "../utils/GridContext.mjs";
import { Button as x } from "@progress/kendo-react-buttons";
import { sortAscSmallIcon as U, sortDescSmallIcon as W, xIcon as X, arrowsSwapIcon as Y } from "@progress/kendo-svg-icons";
import { useLocalization as Z } from "@progress/kendo-react-intl";
import { sortClearButton as A, messages as b, toolbarSort as i } from "../messages/index.mjs";
import { useDocument as $, SvgIcon as ee, useAsyncFocusBlur as te, classNames as oe, getActiveElement as ne } from "@progress/kendo-react-common";
import { BadgeContainer as re, Badge as le } from "@progress/kendo-react-indicators";
import { Popup as ae } from "@progress/kendo-react-popup";
import { GridToolbarAdaptiveProvider as se } from "./adaptiveContext/GridToolbarAdaptiveContext.mjs";
import { GridAdaptiveToolbarSort as ce } from "./adaptiveContent/GridAdaptiveToolbarSort.mjs";
const ie = (r) => {
var y, T;
const n = e.useContext(Q), s = n.columnsState, G = n.sortable, l = n.sort, h = n.defaultSort, [p, k] = e.useState(!0), [F, c] = e.useState(!1), [u, m] = e.useState(!1), a = e.useRef(null), d = e.useRef(null), E = e.useRef(null), f = e.useRef(0), g = Z(), N = $(a);
e.useEffect(() => {
h || l != null && l.length ? (c(!0), k(!1)) : c(!1);
}, [h, l]);
const S = e.useMemo(
() => (s == null ? void 0 : s.filter((t) => {
var o;
return (o = t.title || t.field) == null ? void 0 : o.toLowerCase();
})) || [],
[s]
), v = e.useCallback(
(t, o) => {
n.headerCellClick(t, o), k(!1), c(!0);
},
[n]
), w = e.useCallback(
(t) => {
n.sortChange([], t), c(!1);
},
[n]
), M = e.useCallback(
(t) => {
const o = l ? l.findIndex((_) => _.field === t.field) : -1;
return /* @__PURE__ */ e.createElement(e.Fragment, null, t.title || t.field, /* @__PURE__ */ e.createElement("span", { className: "k-columnmenu-indicators" }, o >= 0 && [
/* @__PURE__ */ e.createElement(
ee,
{
key: 1,
icon: l[o].dir === "asc" ? U : W
}
),
l.length > 1 && /* @__PURE__ */ e.createElement("span", { key: 2, className: "k-sort-index" }, o + 1)
]));
},
[l]
), R = (t) => {
t.preventDefault(), m(!u);
}, C = e.useMemo(() => r.show !== void 0 ? r.show : u, [r.show, u]), D = () => {
var t;
r.onCloseMenu && r.onCloseMenu(), m(!1), a.current && ((t = a.current.element) == null || t.focus());
}, L = (t) => {
const o = ne(document);
clearTimeout(f.current), f.current = window.setTimeout(() => {
!n.mobileMode && o && t.relatedTarget !== a.current && d.current && !d.current.contains(o) && D();
});
}, z = () => {
clearTimeout(f.current);
}, { onFocus: K, onBlur: P } = te({
onFocus: (t) => z(),
onBlur: (t) => L(t)
}), O = (t) => {
var o;
(o = E.current) == null || o.triggerMouseEvent(t);
}, V = (t) => {
var o;
(o = E.current) == null || o.triggerKeyboardEvent(t);
}, H = (t) => {
!t.isAnchorClicked && m(!1);
}, I = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(q, null, S.map((t) => /* @__PURE__ */ e.createElement(
J,
{
key: t.id,
title: M(t),
onClick: (o) => v(o, t)
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer" }, /* @__PURE__ */ e.createElement(x, { svgIcon: X, onClick: w, disabled: p }, g.toLanguageString(A, b[A])))), B = /* @__PURE__ */ e.createElement(
x,
{
ref: a,
togglable: !0,
selected: C,
svgIcon: r.svgIcon ? r.svgIcon : r.icon ? void 0 : Y,
icon: r.icon,
size: n.mobileMode ? "large" : "medium",
className: oe("k-toolbar-button", {
"k-icon-button": n.mobileMode
}),
title: g.toLanguageString(i, b[i]),
onClick: R
},
!n.mobileMode && g.toLanguageString(i, b[i])
);
return G && /* @__PURE__ */ e.createElement(e.Fragment, null, F ? /* @__PURE__ */ e.createElement(re, null, B, /* @__PURE__ */ e.createElement(le, { themeColor: "primary" })) : B, n.mobileMode ? /* @__PURE__ */ e.createElement(se, null, j.createPortal(
/* @__PURE__ */ e.createElement(
ce,
{
filtered: S,
computedShow: C,
isDisabledButton: p,
renderTitle: M,
onClose: D,
onClear: w,
handleSorting: v
},
I
),
(y = N()) == null ? void 0 : y.body
)) : /* @__PURE__ */ e.createElement(
ae,
{
anchor: (T = a.current) == null ? void 0 : T.element,
show: C,
popupClass: "k-grid-columnmenu-popup",
onMouseDownOutside: H
},
/* @__PURE__ */ e.createElement(
"div",
{
ref: d,
onBlur: P,
onFocus: K,
onMouseDown: O,
onKeyDown: V,
className: "k-column-menu k-column-menu-md"
},
I
)
));
};
ie.displayName = "KendoReactGridToolbarSort";
export {
ie as GridToolbarSort
};