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