@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
137 lines (136 loc) • 4.15 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 n from "prop-types";
import { classNames as u, IconWrap as E, svgIconPropType as _ } from "@progress/kendo-react-common";
import { chevronUpIcon as $, chevronDownIcon as j } from "@progress/kendo-svg-icons";
import { Reveal as z } from "@progress/kendo-react-animation";
function J({ imageUrl: o, icon: i, svgIcon: s, iconClass: a }) {
return o ? /* @__PURE__ */ e.createElement("img", { role: "presentation", className: "k-panelbar-item-icon k-image", src: o }) : i || s ? /* @__PURE__ */ e.createElement(E, { className: "k-panelbar-item-icon", name: i, icon: s }) : a ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: "k-panelbar-item-icon " + a }) : null;
}
const f = e.forwardRef((o, i) => {
const {
id: s,
children: a,
title: N = Q.title,
uniquePrivateKey: c,
disabled: t,
selected: k,
focused: h,
expanded: r,
className: C,
level: b,
headerClassName: x,
animation: y,
keepItemsMounted: l,
onSelect: m,
imageUrl: B,
icon: R,
svgIcon: w,
iconClass: P
} = o, d = e.useRef({ props: o }), S = e.useRef(null);
e.useImperativeHandle(d, () => ({ props: o })), e.useImperativeHandle(
i,
() => d.current
);
const [A, g] = e.useState(r || !1), D = e.useCallback(() => {
m && !t && m({
uniquePrivateKey: c,
id: s,
target: d.current
});
}, [m, t, c, s]), T = e.useCallback(
(p) => l ? e.cloneElement(p, {
...p.props,
in: r
}) : p,
[l, r]
), U = e.useCallback(() => {
l && g(!0);
}, [l]), H = e.useCallback(() => {
l && g(!1);
}, [l]), L = {
role: "treeitem",
"aria-disabled": t,
"aria-selected": !t && k,
"aria-expanded": a ? !t && r : void 0
}, O = u(
"k-panelbar-item",
{
"k-panelbar-header": b === 0,
"k-expanded": r && !!a,
"k-disabled": t
},
`k-level-${b}`,
C
), F = u(
"k-link",
{
"k-selected": !t && k,
"k-focus": h
},
x
), K = { display: "block" }, M = J({ imageUrl: B, icon: R, svgIcon: w, iconClass: P }), q = !t && a ? /* @__PURE__ */ e.createElement(
E,
{
name: r ? "chevron-up" : "chevron-down",
icon: r ? $ : j,
className: u("k-panelbar-toggle", r ? "k-panelbar-collapse" : "k-panelbar-expand")
}
) : null;
let v = !1;
a && a[0] && Array.isArray(a) && (v = a[0].type === f);
const G = l && !A ? "none" : "block", I = !t && r || l ? v ? /* @__PURE__ */ e.createElement(
"ul",
{
role: "group",
className: "k-panelbar-group",
style: { display: G }
},
a
) : a : null, W = (y === void 0 || y) && !t && a ? /* @__PURE__ */ e.createElement(
z,
{
transitionEnterDuration: 200,
transitionExitDuration: 200,
key: c + "_animation",
style: K,
children: I,
childFactory: l ? T : void 0,
unmountOnExit: !l,
onBeforeEnter: U,
onAfterExited: H
}
) : I;
return /* @__PURE__ */ e.createElement("li", { ref: S, id: s, className: O, ...L }, /* @__PURE__ */ e.createElement("span", { className: F, onClick: D }, M, /* @__PURE__ */ e.createElement("span", { className: "k-panelbar-item-text" }, N), q), W);
}), Q = {
title: "Untitled"
};
f.propTypes = {
animation: n.bool,
children: n.any,
className: n.string,
icon: n.string,
iconClass: n.string,
imageUrl: n.string,
svgIcon: _,
expanded: n.bool,
disabled: n.bool,
onSelect: n.func,
selected: n.bool,
level: n.number,
title: n.oneOfType([n.string, n.element]),
id: n.oneOfType([n.string, n.number]),
focused: n.bool,
keepItemsMounted: n.bool
};
f.displayName = "KendoReactPanelBarItem";
export {
f as PanelBarItem,
Q as panelBarItemDefaultProps
};