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