@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
217 lines (216 loc) • 7.24 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 c from "react";
import o from "prop-types";
import { PanelBarItem as m } from "./PanelBarItem.mjs";
import { flatChildren as g, isArrayEqual as k, flatVisibleChildren as b, getFocusedChild as P, getInitialState as I, getFirstId as K, renderChildren as S } from "./util.mjs";
import { Keys as l, classNames as F } from "@progress/kendo-react-common";
import { NavigationAction as r } from "./interfaces/NavigationAction.mjs";
const h = class h extends c.Component {
constructor(a) {
super(a), this._element = null, this.handleSelect = (t) => {
this.onSelect(t), this.onFocus(t);
}, this.onSelect = (t) => {
const n = g(c.Children.toArray(this.children));
let s, i;
switch (n.forEach((e) => {
e.props.uniquePrivateKey === (t.uniquePrivateKey || this.state.focused) && (s = e);
}), this.expandMode) {
case "single":
i = [...s.props.parentUniquePrivateKey, s.props.uniquePrivateKey], k(this.expandedItems, i) && (s.props.parentUniquePrivateKey ? i = [...s.props.parentUniquePrivateKey] : i = []);
break;
case "multiple": {
i = this.expandedItems.slice();
const e = i.indexOf(s.props.uniquePrivateKey);
e === -1 ? i.push(s.props.uniquePrivateKey) : i.splice(e, 1);
break;
}
default:
i = this.expandedItems.slice();
break;
}
this.setState({ selected: s.props.uniquePrivateKey, expanded: i }), this.props.onSelect && this.props.onSelect.call(void 0, {
target: s,
expandedItems: i
});
}, this.onFocus = (t, n = 0, s) => {
const i = b(c.Children.toArray(this.children)), e = P(i, n, t, this.state.focused, s);
if (e) {
const d = this.expandedItems.slice();
if (s === r.Right && e && e.props && e.props.children && e.props.children.length > 0) {
if (d.push(e.props.uniquePrivateKey), this.setState({ expanded: [...new Set(d)] }), e.props.expanded) {
const u = e.props.children[0].props.uniquePrivateKey;
this.setState({ focused: u });
}
} else if (s === r.Left && (e && e.props && e.props.parentUniquePrivateKey && e.props.parentUniquePrivateKey.length > 0 || e && e.props && !e.props.disabled && e.props.children && e.props.children.length > 0)) {
const u = e.props.parentUniquePrivateKey;
if (e.props.expanded) {
const f = e.props.uniquePrivateKey, x = d.indexOf(f);
d.splice(x, 1), this.setState({ expanded: d });
} else if (e.props.level > 0) {
const f = e.props.parentUniquePrivateKey[u.length - 1];
this.setState({ focused: f });
}
} else
this.activeDescendant = e.props.id, this.setState({ focused: e.props.uniquePrivateKey });
}
}, this.onNavigate = (t, n) => {
let s;
switch (n) {
case r.First:
this.onFocus(t, s, r.First);
break;
case r.Last:
this.onFocus(t, s, r.Last);
break;
case r.Left:
this.onFocus(t, s, r.Left);
break;
case r.Right:
this.onFocus(t, s, r.Right);
break;
case r.Previous:
s = -1, this.onFocus(t, s);
break;
case r.Next:
s = 1, this.onFocus(t, s);
break;
case r.Toggle:
this.onSelect(t);
break;
}
}, this.handleWrapperFocus = () => {
clearTimeout(this.nextTickId), this.state.wrapperFocused || this.setState({ wrapperFocused: !0 });
}, this.handleWrapperBlur = () => {
this.nextTick(() => {
this.setState({ wrapperFocused: !1 });
});
}, this.handleKeyDown = (t) => {
const n = this._element && getComputedStyle(this._element).direction === "rtl" || !1;
if (t.target === t.currentTarget) {
const s = t.keyCode;
let i;
switch (s) {
case l.left:
i = n ? r.Right : r.Left;
break;
case l.up:
i = r.Previous;
break;
case l.right:
i = n ? r.Left : r.Right;
break;
case l.down:
i = r.Next;
break;
case l.home:
i = r.First;
break;
case l.end:
i = r.Last;
break;
case l.space:
case l.enter:
i = r.Toggle;
break;
default:
i = null;
break;
}
i !== null && (t.preventDefault(), this.onNavigate(t, i));
}
};
const p = I(a, this.expandMode);
p.focused || (p.focused = K(a)), this.state = p;
}
get expandMode() {
return this.props.expandMode || "multiple";
}
get selectedItem() {
const { selected: a = this.state.selected } = this.props;
return a;
}
get expandedItems() {
return this.props.isControlled ? this.props.expanded || [] : this.state.expanded;
}
get children() {
const a = { ...this.state, selected: this.selectedItem }, p = {
animation: this.props.animation,
keepItemsMounted: this.props.keepItemsMounted,
state: a,
expanded: this.expandedItems,
handleSelect: this.handleSelect,
children: this.props.children
};
return S(p);
}
/**
* @hidden
*/
render() {
const a = {
"aria-activedescendant": this.activeDescendant
}, p = F("k-panelbar", this.props.className);
return /* @__PURE__ */ c.createElement(
"ul",
{
ref: (t) => {
this._element = t;
},
dir: this.props.dir,
role: "tree",
tabIndex: 0,
onKeyDown: this.handleKeyDown,
onFocus: this.handleWrapperFocus,
onBlur: this.handleWrapperBlur,
className: p,
style: this.props.style,
...a
},
this.children
);
}
nextTick(a) {
this.nextTickId = window.setTimeout(() => a());
}
};
h.propTypes = {
animation: o.bool,
children: function(a, p) {
const t = a[p];
if (t) {
if (Array.isArray(t)) {
for (const n of t)
if (!n.type || n.type !== m)
return new Error(
"PanelBar children should be either PanelBarItem or Array of PanelBarItem."
);
} else if (t.type !== m)
return new Error("PanelBar child should be either PanelBarItem or Array of PanelBarItem.");
return null;
}
return null;
},
dir: o.string,
selected: o.string,
expanded: o.arrayOf(o.string),
focused: o.string,
expandMode: o.oneOf(["single", "multiple"]),
className: o.string,
keepItemsMounted: o.bool,
onSelect: o.func,
style: o.object
}, h.defaultProps = {
expandMode: "multiple",
animation: !0,
keepItemsMounted: !1
};
let y = h;
export {
y as PanelBar
};