@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
101 lines (100 loc) • 3.38 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 n from "react";
import i from "prop-types";
import { Fade as d } from "@progress/kendo-react-animation";
import { classNames as c } from "@progress/kendo-react-common";
const l = class l extends n.Component {
constructor() {
super(...arguments), this.contentId = this.props.contentPanelId, this.childFactory = (e) => n.cloneElement(e, {
...e.props,
in: e.props.children.props.id === String(this.contentId + this.props.selected)
});
}
/**
* @hidden
*/
render() {
const { children: e, selected: t, contentPanelId: r, keepTabsMounted: s, navItemId: o, renderAllContent: p } = this.props, a = e && typeof t == "number" && n.Children.toArray(e)[t], m = c(
"k-tabstrip-content",
"k-active",
a && a.props.contentClassName
);
return p ? this.renderAllContent(e) : /* @__PURE__ */ n.createElement(
"div",
{
className: m,
style: this.props.style,
id: r,
role: "tabpanel",
"aria-hidden": s,
"aria-labelledby": `${o}-${(t == null ? void 0 : t.toString()) || ""}`,
tabIndex: 0
},
this.renderContent(e)
);
}
renderContent(e) {
return this.props.keepTabsMounted ? n.Children.map(this.props.children, (t, r) => this.renderChild(t, r)) : this.renderChild(
n.Children.toArray(e)[this.props.selected],
this.props.selected
);
}
renderAllContent(e) {
return n.Children.map(e, (t, r) => {
const s = t, o = r === this.props.selected, p = c(
"k-tabstrip-content",
{ "k-active": o },
s.props.contentClassName
);
return /* @__PURE__ */ n.createElement(
"div",
{
className: p,
style: this.props.style,
id: `${this.props.contentPanelId}-${r}`,
role: "tabpanel",
"aria-hidden": !o,
hidden: !o,
"aria-labelledby": `${this.props.navItemId}-${r}`
},
this.props.animation ? /* @__PURE__ */ n.createElement(d, { key: `${r}-${o}`, appear: !0, enter: !0, exit: !1 }, s.props.children) : s.props.children
);
});
}
renderChild(e, t) {
const r = t === this.props.selected, s = {
style: {
display: r ? void 0 : "none"
}
}, o = {
position: "initial",
display: r ? void 0 : "none"
};
return e.props.disabled ? null : this.props.animation ? /* @__PURE__ */ n.createElement(
d,
{
appear: !0,
exit: this.props.keepTabsMounted,
style: o,
childFactory: this.props.keepTabsMounted ? this.childFactory : void 0
},
/* @__PURE__ */ n.createElement("div", { ...s, id: String(this.contentId + t), key: t }, e.props.children)
) : /* @__PURE__ */ n.createElement("div", { ...s, key: t }, e.props.children);
}
};
l.propTypes = {
animation: i.bool,
children: i.oneOfType([i.element, i.arrayOf(i.element)]),
selected: i.number,
style: i.object
};
let h = l;
export {
h as TabStripContent
};