@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
93 lines (92 loc) • 2.94 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 e from "react";
import l from "prop-types";
import { Fade as f } from "@progress/kendo-react-animation";
import { classNames as v } from "@progress/kendo-react-common";
const k = ($) => {
const { children: s, selected: t, contentPanelId: p, keepTabsMounted: i, navItemId: u, renderAllContent: E, animation: c, style: y } = $, d = p, h = e.useCallback(
(n) => e.cloneElement(n, {
...n.props,
in: n.props.children.props.id === String(d + t)
}),
[d, t]
), b = e.useCallback(
(n, r) => {
const o = r === t, a = {
style: {
display: o ? void 0 : "none"
}
}, C = {
display: o ? void 0 : "none"
};
return n.props.disabled ? null : c ? /* @__PURE__ */ e.createElement(
f,
{
appear: !0,
exit: i,
style: C,
childFactory: i ? h : void 0
},
/* @__PURE__ */ e.createElement("div", { ...a, id: String(d + r), key: r }, n.props.children)
) : /* @__PURE__ */ e.createElement("div", { ...a, key: r }, n.props.children);
},
[t, c, i, h, d]
), S = e.useCallback(
(n) => i ? e.Children.map(n, (r, o) => b(r, o)) : b(
e.Children.toArray(n)[t],
t
),
[i, b, t]
), I = e.useMemo(() => e.Children.map(s, (n, r) => {
const o = n, a = r === t, C = v(
"k-tabstrip-content",
{ "k-active": a },
o.props.contentClassName
), N = c ? /* @__PURE__ */ e.createElement(f, { key: `${r}-${a}`, appear: !0, enter: !0, exit: !1 }, o.props.children) : o.props.children;
return /* @__PURE__ */ e.createElement(
"div",
{
className: C,
style: y,
id: `${p}-${r}`,
role: "tabpanel",
"aria-hidden": !a,
hidden: !a,
"aria-labelledby": `${u}-${r}`
},
N
);
}), [s, t, p, u, y, c]), m = e.useMemo(() => !s || typeof t != "number" ? null : e.Children.toArray(s)[t], [s, t]), M = e.useMemo(
() => v("k-tabstrip-content", "k-active", m == null ? void 0 : m.props.contentClassName),
[m]
);
return E ? I : /* @__PURE__ */ e.createElement(
"div",
{
className: M,
style: y,
id: p,
role: "tabpanel",
"aria-hidden": i,
"aria-labelledby": `${u}-${(t == null ? void 0 : t.toString()) || ""}`,
tabIndex: 0
},
S(s)
);
};
k.propTypes = {
animation: l.bool,
children: l.oneOfType([l.element, l.arrayOf(l.element)]),
selected: l.number,
style: l.object
};
k.displayName = "TabStripContent";
export {
k as TabStripContent
};