@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
178 lines (177 loc) • 7.46 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 d from "react";
import r from "prop-types";
import { TabStripNavigation as f } from "./TabStripNavigation.mjs";
import { TabStripContent as S } from "./TabStripContent.mjs";
import { Navigation as g, classNames as v, kendoThemeMaps as x } from "@progress/kendo-react-common";
const p = class p extends d.Component {
constructor(l) {
super(l), this.tabStripRef = d.createRef(), this.itemsNavRef = d.createRef(), this.onScroll = () => {
const i = this.horizontalScroll(), o = this.itemsNavRef.current;
if (!o)
return;
const e = o.scrollLeft, t = o.clientWidth, n = o.scrollWidth, s = o.scrollTop, c = o.scrollHeight, h = o.clientHeight;
let a = null;
const m = i ? n > t : c > h, b = this.props.dir === "rtl";
m ? i ? e + t === n || (b && t - e) === n ? a = "end" : e === 0 || b && -e === 0 ? a = "start" : e > 0 && e + t < n || -e > 0 && t - e < n ? a = "middle" : a = null : c - (s + h) === 0 ? a = "bottom" : s === 0 ? a = "top" : s > 0 && c - (s + h) > 0 ? a = "middle" : a = null : a = null, this.setState({ containerScrollPosition: a });
}, this.onSelect = (i) => {
this.props.selected !== i && this.props.onSelect && this.props.onSelect({
selected: i
});
}, this.onKeyDown = (i) => {
this.navigation && this.navigation.triggerKeyboardEvent(i);
}, this.onKeyboardSelect = (i) => {
const o = this.children();
o && o[i].props.disabled || this.onSelect(i);
}, this.renderContent = (i) => {
const { selected: o, children: e, tabContentStyle: t } = i, n = d.Children.count(e);
return o < n && o > -1 ? /* @__PURE__ */ d.createElement(S, { index: o, ...i, style: t }) : null;
}, this.state = {
containerScrollPosition: null
}, this.itemsNavRef = d.createRef();
}
get contentPanelId() {
return this.props.id + "-content-panel-id";
}
get navItemId() {
return this.props.id + "-nav-item-id";
}
/** @hidden */
componentDidMount() {
var o;
const l = this.tabStripRef.current, i = l && getComputedStyle(l).direction === "rtl" || !1;
l && (this.navigation = new g({
tabIndex: 0,
root: this.tabStripRef,
rovingTabIndex: !0,
focusClass: "k-focus",
selectors: [".k-tabstrip .k-tabstrip-item"],
keyboardEvents: {
keydown: {
ArrowLeft: (e, t, n) => {
n.preventDefault();
const s = t.elements.indexOf(e), c = s !== 0 ? s - 1 : t.elements.length - 1, h = s !== t.elements.length - 1 ? s + 1 : 0;
i ? (t.focusNext(e), this.onKeyboardSelect(h)) : (t.focusPrevious(e), this.onKeyboardSelect(c));
},
ArrowRight: (e, t, n) => {
n.preventDefault();
const s = t.elements.indexOf(e), c = s !== 0 ? s - 1 : t.elements.length - 1, h = s !== t.elements.length - 1 ? s + 1 : 0;
i ? (t.focusPrevious(e), this.onKeyboardSelect(c)) : (t.focusNext(e), this.onKeyboardSelect(h));
},
ArrowDown: (e, t, n) => {
n.preventDefault();
const s = t.elements.indexOf(e), c = s !== t.elements.length - 1 ? s + 1 : 0;
t.focusNext(e), this.onKeyboardSelect(c);
},
ArrowUp: (e, t, n) => {
n.preventDefault();
const s = t.elements.indexOf(e), c = s !== 0 ? s - 1 : t.elements.length - 1;
t.focusPrevious(e), this.onKeyboardSelect(c);
},
Home: (e, t, n) => {
n.preventDefault(), t.focusElement(t.first, e), this.onKeyboardSelect(0);
},
End: (e, t, n) => {
n.preventDefault(), t.focusElement(t.last, e), this.onKeyboardSelect(t.elements.length - 1);
}
}
}
}), (o = this.navigation) == null || o.initializeRovingTab(this.props.selected), this.onScroll(), this.resizeObserver = window.ResizeObserver && new ResizeObserver(() => this.onScroll()), this.tabStripRef.current && this.resizeObserver && this.resizeObserver.observe(this.tabStripRef.current));
}
/** @hidden */
componentWillUnmount() {
var l;
(l = this.navigation) == null || l.removeFocusListener(), this.resizeObserver && this.resizeObserver.disconnect();
}
horizontalScroll() {
return /top|bottom/.test(this.props.tabPosition || "top");
}
/**
* @hidden
*/
render() {
const l = {
itemsNavRef: this.itemsNavRef,
...this.props,
children: this.children(),
contentPanelId: this.contentPanelId,
renderAllContent: this.props.renderAllContent,
navItemId: this.navItemId,
onKeyDown: this.onKeyDown,
onSelect: this.onSelect,
onScroll: this.onScroll,
containerScrollPosition: this.state.containerScrollPosition,
scrollButtons: this.props.scrollButtons === "hidden" || this.state.containerScrollPosition === null && this.props.scrollButtons === "auto" ? "hidden" : "visible"
}, { scrollable: i, scrollButtons: o, size: e, tabPosition: t, tabIndex: n } = l, s = t === "bottom", c = v(
"k-tabstrip k-pos-relative",
{
[`k-tabstrip-${x.sizeMap[e] || e}`]: e,
"k-tabstrip-left": t === "left",
"k-tabstrip-right": t === "right",
"k-tabstrip-bottom": t === "bottom",
"k-tabstrip-top": t === "top",
"k-tabstrip-scrollable": i,
"k-tabstrip-scrollable-start k-tabstrip-scrollable-end": i && o === "visible",
"k-tabstrip-scrollable-start": i && (o === "auto" || !o) && (this.state.containerScrollPosition === "end" || this.state.containerScrollPosition === "middle"),
"k-tabstrip-scrollable-end": i && o === "auto" && (this.state.containerScrollPosition === "start" || this.state.containerScrollPosition === "middle")
},
this.props.className
);
return /* @__PURE__ */ d.createElement(
"div",
{
id: this.props.id,
ref: this.tabStripRef,
dir: this.props.dir,
className: c,
style: this.props.style,
onScroll: this.onScroll
},
!s && /* @__PURE__ */ d.createElement(f, { ...l, tabIndex: n }),
this.renderContent(l),
s && /* @__PURE__ */ d.createElement(f, { ...l, tabIndex: n })
);
}
children() {
return d.Children.toArray(this.props.children).filter((l) => l);
}
};
p.propTypes = {
id: r.string,
animation: r.bool,
children: r.node,
onSelect: r.func,
selected: r.number,
style: r.object,
tabContentStyle: r.object,
tabPosition: r.string,
tabAlignment: r.string,
tabIndex: r.number,
className: r.string,
dir: r.string,
renderAllContent: r.bool,
size: r.oneOf(["small", "medium", "large", null]),
scrollButtons: r.oneOf(["auto", "visible", "hidden"]),
scrollButtonsPosition: r.oneOf(["split", "start", "end", "around", "before", "after"])
}, p.defaultProps = {
animation: !0,
tabPosition: "top",
tabAlignment: "start",
keepTabsMounted: !1,
buttonScrollSpeed: 100,
mouseScrollSpeed: 10,
scrollButtons: "auto",
scrollButtonsPosition: "split",
size: "medium",
renderAllContent: !1
};
let u = p;
export {
u as TabStrip
};