@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
122 lines (121 loc) • 4.44 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 t from "react";
import l from "prop-types";
import { DrawerContext as B } from "./context/DrawerContext.mjs";
import { DrawerItem as G } from "./DrawerItem.mjs";
import { classNames as b, Navigation as J } from "@progress/kendo-react-common";
const Q = 240, V = { type: "slide", duration: 200 }, Y = { type: "slide", duration: 0 }, D = t.forwardRef(
(h, E) => {
const { children: T, className: g, style: I } = h, {
animation: m,
expanded: c,
mode: d,
position: s,
onOverlayClick: W,
mini: o,
dir: p,
width: f,
miniWidth: y,
items: v,
item: x,
onSelect: A
} = t.useContext(B), i = t.useRef(null), C = t.useCallback(() => {
i.current && i.current.focus();
}, []), e = typeof m != "boolean" ? m : m === !1 ? Y : V, O = f || Q;
t.useImperativeHandle(
E,
() => ({
element: i.current,
focus: C
})
);
const P = t.useMemo(
() => "k-drawer " + b(
{
"k-drawer-start": s === "start",
"k-drawer-end": s === "end"
},
g
),
[s]
), M = {
opacity: 1,
WebkitTransition: "all " + (e && e.duration) + "ms",
transition: "all " + (e && e.duration) + "ms"
}, R = {
opacity: 1,
transform: "translateX(0px)",
WebkitTransition: "all " + (e && e.duration) + "ms",
transition: "all " + (e && e.duration) + "ms"
}, X = {
opacity: o ? 1 : 0,
WebkitTransition: "all " + (e && e.duration) + "ms",
transition: "all " + (e && e.duration) + "ms"
}, _ = {
opacity: 0,
transform: "translateX(-100%)",
WebkitTransition: "all " + (e && e.duration) + "ms",
transition: "all " + (e && e.duration) + "ms"
}, S = {
opacity: 0,
transform: "translateX(100%)",
WebkitTransition: "all " + (e && e.duration) + "ms",
transition: "all " + (e && e.duration) + "ms"
}, w = {
transform: "translateX(0%)",
WebkitTransitionDuration: (e && e.duration) + "ms",
transitionDuration: (e && e.duration) + "ms"
}, F = c ? d === "push" ? M : R : d === "push" ? X : p === "ltr" && s === "start" || p === "rtl" && s === "end" ? o ? w : _ : o ? w : S, k = t.useMemo(
() => new J({
root: i,
selectors: ["ul.k-drawer-items li.k-drawer-item:not(.k-drawer-separator)"],
keyboardEvents: {
keydown: {
ArrowDown: (a, r, n) => {
n.preventDefault(), r.focusNext(a);
},
ArrowUp: (a, r, n) => {
n.preventDefault(), r.focusPrevious(a);
},
Enter: (a, r, n) => {
n.preventDefault(), a.click();
}
}
},
tabIndex: 0,
rovingTabIndex: !0
}),
[]
), K = t.useCallback(k.triggerKeyboardEvent.bind(k), []), L = v && /* @__PURE__ */ t.createElement("ul", { className: "k-drawer-items", role: "menubar", "aria-orientation": "vertical", onKeyDown: K }, v.map((a, r) => {
const { className: n, level: u, ...H } = a, j = u != null ? u : 0, $ = b(n, o ? "" : `k-level-${j}`), q = {
index: r,
className: $,
...H,
onSelect: A
}, z = x || G;
return /* @__PURE__ */ t.createElement(z, { key: r, ...q });
})), U = () => {
let a;
const r = !c;
return c && (a = { width: O }), r && (o ? y !== void 0 ? a = { width: y } : a = {} : a = { width: 0 }), e ? { ...F, ...a } : a;
}, N = /* @__PURE__ */ t.createElement("div", { style: I, className: P, ref: i }, /* @__PURE__ */ t.createElement("div", { className: "k-drawer-wrapper", style: U() }, L || T));
return d === "overlay" ? /* @__PURE__ */ t.createElement(t.Fragment, null, c && /* @__PURE__ */ t.createElement("div", { className: "k-overlay", onClick: W }), N) : N;
}
);
D.propTypes = {
children: l.any,
className: l.string,
style: l.object,
item: l.any,
tabIndex: l.number
};
D.displayName = "KendoDrawerNavigation";
export {
D as DrawerNavigation
};