@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
171 lines (170 loc) • 7.44 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 h from "react";
import n from "prop-types";
import { TabStripNavigationItem as x } from "./TabStripNavigationItem.mjs";
import { classNames as v } from "@progress/kendo-react-common";
import { Button as M } from "@progress/kendo-react-buttons";
import { caretAltRightIcon as k, caretAltLeftIcon as I, caretAltUpIcon as D, caretAltDownIcon as H } from "@progress/kendo-svg-icons";
import { provideLocalizationService as y } from "@progress/kendo-react-intl";
import { prevArrowTitle as A, messages as P, nextArrowTitle as R } from "./messages/index.mjs";
const W = (z) => Array.apply(null, Array(z)), b = "smooth", f = "prev", m = "next", w = class w extends h.Component {
constructor() {
super(...arguments), this.itemsNavRef = this.props.itemsNavRef || h.createRef(), this.onScroll = () => {
var t, o;
(o = (t = this.props).onScroll) == null || o.call(t);
}, this.isRtl = () => this.props.dir === "rtl", this.arrowClickPrev = (t) => {
this.handleArrowClick(f, t);
}, this.arrowClickNext = (t) => {
this.handleArrowClick(m, t);
}, this.handleArrowClick = (t, o) => {
this.setNewScrollPosition(t, o);
}, this.setNewScrollPosition = (t, o) => {
const s = this.itemsNavRef.current;
if (!s)
return;
const r = this.horizontalScroll(), l = r ? s.scrollWidth - s.offsetWidth : s.scrollHeight - s.offsetHeight, i = (o.type === "click" ? this.props.buttonScrollSpeed : this.props.mouseScrollSpeed) || 0;
let e = r ? s.scrollLeft : s.scrollTop;
this.isRtl() && this.horizontalScroll() ? (t === f && e < 0 && (e += i), t === m && e < l && (e -= i), e = Math.min(0, Math.min(l, e))) : (t === f && e > 0 && (e -= i), t === m && e < l && (e += i), e = Math.max(0, Math.min(l, e)));
const c = o.type === "click" ? b : void 0;
r ? s.scrollTo({ left: e, behavior: c }) : s.scrollTo({ top: e, behavior: c });
}, this.renderArrow = (t) => {
const o = this.horizontalScroll(), s = y(this), r = {
prev: {
arrowTab: "k-tabstrip-prev",
fontIcon: o ? this.isRtl() ? "caret-alt-right" : "caret-alt-left" : "caret-alt-up",
svgIcon: o ? this.isRtl() ? k : I : D,
title: s.toLanguageString(A, P[A])
},
next: {
arrowTab: "k-tabstrip-next",
fontIcon: o ? this.isRtl() ? "caret-alt-left" : "caret-alt-right" : "caret-alt-down",
svgIcon: o ? this.isRtl() ? I : k : H,
title: s.toLanguageString(R, P[R])
}
}, l = (t === f ? this.props.prevButton : this.props.nextButton) || M, i = t === f ? this.arrowClickPrev : this.arrowClickNext, e = this.props.containerScrollPosition === null || t === f && (this.props.containerScrollPosition === "start" || this.props.containerScrollPosition === "top") || t === m && (this.props.containerScrollPosition === "end" || this.props.containerScrollPosition === "bottom");
return /* @__PURE__ */ h.createElement(
l,
{
disabled: e,
className: v(`${r[t].arrowTab}`),
onClick: i,
icon: r[t].fontIcon,
svgIcon: r[t].svgIcon,
size: this.props.size,
tabIndex: -1,
fillMode: "flat",
title: r[t].title
}
);
};
}
/**
* @hidden
*/
componentDidMount() {
this.props.scrollable && this.scrollToSelected();
}
/**
* @hidden
*/
componentDidUpdate(t) {
const { scrollable: o, selected: s } = this.props;
o && t.selected !== s && this.scrollToSelected();
}
/**
* @hidden
*/
render() {
const {
selected: t,
tabPosition: o,
tabAlignment: s,
children: r,
onSelect: l,
onKeyDown: i,
navItemId: e,
contentPanelId: c,
renderAllContent: a,
scrollable: L,
scrollButtons: u,
scrollButtonsPosition: p
} = this.props, E = h.Children.count(r), g = h.Children.toArray(r);
let S;
r && (S = W(E).map((U, d, B) => {
const O = {
active: t === d,
disabled: g[d].props.disabled,
index: d,
title: g[d].props.title,
first: d === 0,
last: d === B.length - 1,
contentPanelId: c,
renderAllContent: a,
id: e,
onSelect: l,
onScroll: this.onScroll
};
return /* @__PURE__ */ h.createElement(x, { key: d, ...O });
}));
const N = v("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll", {
"k-hstack": o === "top" || o === "bottom",
"k-vstack": o === "left" || o === "right"
}), T = v(
"k-tabstrip-items k-tabstrip-items-scroll k-reset",
`k-tabstrip-items-${s}`
);
return /* @__PURE__ */ h.createElement("div", { className: N }, L ? /* @__PURE__ */ h.createElement(h.Fragment, null, u !== "hidden" && p && ["split", "start", "around", "before"].includes(p) && this.renderArrow(f), u !== "hidden" && (p === "start" || p === "before") && this.renderArrow(m), /* @__PURE__ */ h.createElement(
"ul",
{
ref: this.itemsNavRef,
className: T,
role: "tablist",
tabIndex: this.props.tabIndex,
onKeyDown: i,
onScroll: this.onScroll,
"aria-orientation": o === "left" || o === "right" ? "vertical" : void 0
},
S
), u !== "hidden" && (p === "end" || p === "after") && this.renderArrow(f), u !== "hidden" && p && ["split", "end", "around", "after"].includes(p) && this.renderArrow(m)) : /* @__PURE__ */ h.createElement("ul", { className: T, role: "tablist", tabIndex: this.props.tabIndex, onKeyDown: i }, S));
}
scrollToSelected() {
const t = this.itemsNavRef.current, o = t && t.children[this.props.selected || 0];
if (o instanceof HTMLElement && t instanceof HTMLElement) {
const s = this.horizontalScroll(), r = s ? t.offsetWidth : t.offsetHeight, l = s ? o.offsetWidth : o.offsetHeight, i = s ? "left" : "top";
let e = s ? t.scrollLeft : t.scrollTop, c = 0;
if (this.isRtl()) {
const a = o.offsetLeft;
e = e * -1, a < 0 ? (c = a - l + t.offsetLeft, t.scrollTo({ [i]: c, behavior: b })) : a + l > r - e && (c = e + a - l, t.scrollTo({ [i]: c, behavior: b }));
} else {
const a = s ? o.offsetLeft - t.offsetLeft : o.offsetTop - t.offsetTop;
e + r < a + l ? (c = a + l - r, t.scrollTo({ [i]: c, behavior: b })) : e > a && (c = a, t.scrollTo({ [i]: c, behavior: b }));
}
}
}
horizontalScroll() {
return /top|bottom/.test(this.props.tabPosition || "top");
}
};
w.propTypes = {
children: n.oneOfType([n.element, n.arrayOf(n.element)]),
onSelect: n.func,
onKeyDown: n.func,
onScroll: n.func,
selected: n.number,
tabIndex: n.number,
scrollable: n.bool,
size: n.oneOf(["small", "medium", "large"]),
scrollButtons: n.oneOf(["auto", "visible", "hidden"]),
scrollButtonsPosition: n.oneOf(["split", "start", "end", "around", "before", "after"]),
containerScrollPosition: n.oneOf(["start", "end", "top", "bottom", "middle", null])
};
let C = w;
export {
C as TabStripNavigation
};