@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
184 lines (183 loc) • 6.78 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as n from "react";
import r from "prop-types";
import { TabStripNavigationItem as bt } from "./TabStripNavigationItem.mjs";
import { classNames as B } from "@progress/kendo-react-common";
import { Button as pt } from "@progress/kendo-react-buttons";
import { chevronLeftIcon as Z, chevronRightIcon as tt, chevronDownIcon as ut, chevronUpIcon as dt } from "@progress/kendo-svg-icons";
import { useLocalization as vt } from "@progress/kendo-react-intl";
import { nextArrowTitle as ot, messages as et, prevArrowTitle as nt } from "./messages/index.mjs";
const ht = (P) => Array.from({ length: P }), S = "smooth", p = "prev", h = "next", lt = (P) => {
const {
selected: g,
tabPosition: m,
tabAlignment: O,
children: k,
onSelect: R,
onKeyDown: A,
onScroll: T,
navItemId: E,
contentPanelId: M,
renderAllContent: F,
scrollable: H,
scrollButtons: C,
scrollButtonsPosition: b,
tabIndex: y,
buttonScrollSpeed: D,
mouseScrollSpeed: W,
prevButton: $,
nextButton: _,
dir: K,
size: U,
containerScrollPosition: d,
itemsNavRef: rt
} = P, st = n.useRef(null), I = rt || st, L = vt(), u = n.useCallback(() => /top|bottom/.test(m || "top"), [m]), v = n.useCallback(() => K === "rtl", [K]), V = n.useCallback(() => {
const t = I.current, o = t == null ? void 0 : t.children[g || 0];
if (o instanceof HTMLElement && t instanceof HTMLElement) {
const l = u(), a = l ? t.offsetWidth : t.offsetHeight, s = l ? o.offsetWidth : o.offsetHeight, f = l ? "left" : "top";
let e = l ? t.scrollLeft : t.scrollTop, c = 0;
if (v()) {
const i = o.offsetLeft;
e = e * -1, i < 0 ? (c = i - s + t.offsetLeft, t.scrollTo({ [f]: c, behavior: S })) : i + s > a - e && (c = e + i - s, t.scrollTo({ [f]: c, behavior: S }));
} else {
const i = l ? o.offsetLeft - t.offsetLeft : o.offsetTop - t.offsetTop;
e + a < i + s ? (c = i + s - a, t.scrollTo({ [f]: c, behavior: S })) : e > i && (c = i, t.scrollTo({ [f]: c, behavior: S }));
}
}
}, [I, g, u, v]);
n.useEffect(() => {
H && V();
}, [H, g, V]);
const x = n.useCallback(() => {
T == null || T();
}, [T]), X = n.useCallback(
(t, o) => {
const l = I.current;
if (!l)
return;
const a = u(), s = a ? l.scrollWidth - l.offsetWidth : l.scrollHeight - l.offsetHeight, f = (o.type === "click" ? D : W) || 0;
let e = a ? l.scrollLeft : l.scrollTop;
v() && u() ? (t === p && e < 0 && (e += f), t === h && e < s && (e -= f), e = Math.min(0, Math.min(s, e))) : (t === p && e > 0 && (e -= f), t === h && e < s && (e += f), e = Math.max(0, Math.min(s, e)));
const c = o.type === "click" ? S : void 0;
a ? l.scrollTo({ left: e, behavior: c }) : l.scrollTo({ top: e, behavior: c });
},
[I, u, v, D, W]
), N = n.useCallback(
(t, o) => {
X(t, o);
},
[X]
), j = n.useCallback(
(t) => {
N(p, t);
},
[N]
), q = n.useCallback(
(t) => {
N(h, t);
},
[N]
), z = n.useCallback(
(t) => {
const o = u(), l = v(), s = o ? l ? "chevron-right" : "chevron-left" : "chevron-up", e = o ? l ? tt : Z : dt, i = o ? l ? "chevron-left" : "chevron-right" : "chevron-down", it = o ? l ? Z : tt : ut, w = {
prev: {
arrowTab: "k-tabstrip-prev",
fontIcon: s,
svgIcon: e,
title: L.toLanguageString(nt, et[nt])
},
next: {
arrowTab: "k-tabstrip-next",
fontIcon: i,
svgIcon: it,
title: L.toLanguageString(ot, et[ot])
}
}, at = (t === p ? $ : _) || pt, ft = t === p ? j : q, mt = d === null || t === p && (d === "start" || d === "top") || t === h && (d === "end" || d === "bottom");
return /* @__PURE__ */ n.createElement(
at,
{
disabled: mt,
className: B(`${w[t].arrowTab}`),
onClick: ft,
icon: w[t].fontIcon,
svgIcon: w[t].svgIcon,
size: U,
tabIndex: -1,
fillMode: "flat",
title: w[t].title
}
);
},
[
u,
v,
$,
_,
j,
q,
d,
U,
L
]
), G = n.Children.count(k), J = n.Children.toArray(k), Q = n.useMemo(() => k ? ht(G).map((t, o, l) => {
const a = {
active: g === o,
disabled: J[o].props.disabled,
index: o,
title: J[o].props.title,
first: o === 0,
last: o === l.length - 1,
contentPanelId: M,
renderAllContent: F,
id: E,
onSelect: R,
onScroll: x
};
return /* @__PURE__ */ n.createElement(bt, { key: `${E}-${o}`, ...a });
}) : null, [k, G, g, M, F, E, R, x]), ct = n.useMemo(
() => B("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll", {
"k-hstack": m === "top" || m === "bottom",
"k-vstack": m === "left" || m === "right"
}),
[m]
), Y = n.useMemo(
() => B("k-tabstrip-items k-tabstrip-items-scroll k-reset", `k-tabstrip-items-${O}`),
[O]
);
return /* @__PURE__ */ n.createElement("div", { className: ct }, H ? /* @__PURE__ */ n.createElement(n.Fragment, null, C !== "hidden" && b && ["split", "start", "around", "before"].includes(b) && z(p), C !== "hidden" && (b === "start" || b === "before") && z(h), /* @__PURE__ */ n.createElement(
"ul",
{
ref: I,
className: Y,
role: "tablist",
tabIndex: y,
onKeyDown: A,
onScroll: x,
"aria-orientation": m === "left" || m === "right" ? "vertical" : void 0
},
Q
), C !== "hidden" && (b === "end" || b === "after") && z(p), C !== "hidden" && b && ["split", "end", "around", "after"].includes(b) && z(h)) : /* @__PURE__ */ n.createElement("ul", { className: Y, role: "tablist", tabIndex: y, onKeyDown: A }, Q));
};
lt.propTypes = {
children: r.oneOfType([r.element, r.arrayOf(r.element)]),
onSelect: r.func,
onKeyDown: r.func,
onScroll: r.func,
selected: r.number,
tabIndex: r.number,
scrollable: r.bool,
size: r.oneOf(["small", "medium", "large"]),
scrollButtons: r.oneOf(["auto", "visible", "hidden"]),
scrollButtonsPosition: r.oneOf(["split", "start", "end", "around", "before", "after"]),
containerScrollPosition: r.oneOf(["start", "end", "top", "bottom", "middle", null])
};
lt.displayName = "TabStripNavigation";
export {
lt as TabStripNavigation
};