@progress/kendo-react-buttons
Version:
All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package
74 lines (73 loc) • 3.03 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 { Popup as W } from "@progress/kendo-react-popup";
import * as e from "react";
import { ToolbarSeparator as S } from "./ToolbarSeparator.mjs";
import { Button as M } from "../../Button.mjs";
import { moreHorizontalIcon as I } from "@progress/kendo-svg-icons";
import { useLocalization as O } from "@progress/kendo-react-intl";
import { moreButtonTitle as d, messages as A } from "../messages/index.mjs";
import { kendoThemeMaps as F } from "@progress/kendo-react-common";
const U = (h) => {
var m;
const { toolbarRef: o, children: b, fillMode: R, size: g } = h, [u, k] = e.useState(!1), c = e.useRef(
e.Children.toArray(b).filter((t) => e.isValidElement(t)).map((t, r) => e.cloneElement(t, { key: t.key || r }))
), l = e.useRef([]), a = e.useRef(0), T = e.useRef(null), w = e.useRef(null), v = O(), [N, E] = e.useReducer((t) => t + 1, 0), f = () => {
if (!o.current)
return;
let t = 0;
const r = o.current.clientWidth, i = parseInt(window.getComputedStyle(o.current).gap || "0", 10), C = Array.from(o.current.children).reduce((n, s, P) => (n += Math.ceil(s.clientWidth), n), 0), p = Array.from(o.current.children).length, y = i * 2;
if (t = C + p * i + y, t > r) {
const n = [...c.current], s = n.pop();
a.current = r, c.current = n, s && (l.current = [s, ...l.current]);
} else if (r > a.current + i * p) {
const n = [...l.current], s = n.shift();
l.current = n, s && (c.current = [...c.current, s]), a.current = r;
}
E();
};
e.useEffect(() => {
f();
const t = new ResizeObserver(f), r = o.current;
return r && t.observe(r), () => {
r && t.unobserve(r);
};
}, []);
const z = () => {
k(!u);
};
return /* @__PURE__ */ e.createElement(e.Fragment, null, c.current.length > 0 && c.current, l.current.length > 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(S, { _ref: w, className: "k-toolbar-button-separator" }), /* @__PURE__ */ e.createElement(
M,
{
ref: T,
className: "k-toolbar-overflow-button",
fillMode: "flat",
svgIcon: I,
title: v.toLanguageString(d, A[d]),
onClick: z
}
), /* @__PURE__ */ e.createElement(
W,
{
anchor: o.current,
show: u,
popupClass: "k-toolbar-popup",
style: { width: (m = o.current) == null ? void 0 : m.offsetWidth }
},
/* @__PURE__ */ e.createElement(
"span",
{
className: `k-toolbar-items-list k-toolbar-items-list-${F.sizeMap[g]} k-toolbar-items-list-${R}`
},
l.current.length > 0 && l.current
)
)));
};
export {
U as ToolbarOverflowSection
};