@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
169 lines (168 loc) • 7.61 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 n from "react";
import * as J from "react-dom";
import r from "prop-types";
import { Animation as Q } from "@progress/kendo-react-animation";
import { FOCUSABLE_ELEMENTS as W, Navigation as X, classNames as Y, canUseDOM as Z } from "@progress/kendo-react-common";
import { ActionSheetItem as K } from "./ActionSheetItem.mjs";
import { headerDisplayName as j } from "./ActionSheetHeader.mjs";
import { footerDisplayName as p } from "./ActionSheetFooter.mjs";
import { contentDisplayName as ee } from "./ActionSheetContent.mjs";
import { ActionSheetView as te, ActionSheetViewDisplayName as ne } from "./ActionSheetView.mjs";
const _ = n.forwardRef((e, F) => {
var O, P;
const {
navigatableElements: H = g.navigatableElements,
navigatable: w = g.navigatable,
position: L = g.position,
animationDuration: l = 300,
prefixActions: v,
suffixActions: k,
filter: N
} = e, M = (t, a, i) => {
i.preventDefault(), i.shiftKey ? a.focusPrevious(t) : a.focusNext(t);
}, V = (t, a, i) => {
if (t.ariaDisabled)
return;
const s = t.className && t.className.indexOf ? t.className.indexOf("k-actionsheet-item") !== -1 : !1, S = a.elements.filter((u) => u.className.indexOf("k-actionsheet-item") !== -1);
if (s && e.onItemSelect) {
i.preventDefault();
const u = e.items[S.indexOf(t)];
e.onItemSelect.call(void 0, {
syntheticEvent: i,
item: u,
title: u && u.title
});
}
e.animation || f();
}, $ = (t, a, i) => {
e.onClose && (i.preventDefault(), e.onClose.call(void 0, i)), e.animation || f();
}, f = () => {
d({ show: !1 });
}, B = (t) => {
w && E.current.triggerKeyboardEvent(t);
}, U = (t) => {
e.onClose && e.onClose.call(void 0, t), e.animation || f();
}, x = (t) => {
e.onItemSelect && e.onItemSelect.call(void 0, t), e.animation || f();
}, q = (t) => {
const a = {}, i = [];
return n.Children.forEach(t, (s) => {
s && (s.type.displayName === ne ? i.push(s) : a[s.type.displayName] = s);
}), i.length > 0 ? i : a;
}, D = n.useRef(null), h = n.useRef(null);
n.useImperativeHandle(
D,
() => ({ props: e, element: h.current })
), n.useImperativeHandle(
F,
() => D.current
);
const E = n.useRef(void 0), y = n.useRef({ bottom: "0", width: "100%" }), R = n.useRef(void 0), [o, z] = n.useState({ show: !1, slide: !1 }), d = (t) => {
z((a) => ({ ...a, ...t }));
};
n.useEffect(() => {
e.expand && !o.show && d({ show: !0 });
}, []), n.useEffect(() => {
const t = h.current;
if (e.expand && !o.show && d({ show: !0 }), e.expand && o.show && !o.slide && d({ slide: !0 }), !e.expand && o.show && o.slide && d({ slide: !1 }), R !== o && o.slide && t && !e.className && (t.style.setProperty("--kendo-actionsheet-height", "auto"), t.style.setProperty("--kendo-actionsheet-max-height", "none")), t && w) {
const i = [".k-actionsheet-item", ...[
".k-actionsheet-footer",
".k-actionsheet-content",
".k-actionsheet-view",
".k-actionsheet-titlebar"
].map((s) => W.concat(H).map(
(S) => `${s} ${S}`
)).flat()];
E.current = new X({
tabIndex: e.tabIndex || 0,
root: h,
rovingTabIndex: !1,
selectors: i,
keyboardEvents: {
keydown: {
Tab: M,
Enter: V,
Escape: $
}
}
}), E.current.focusElement(E.current.first, null);
}
R.current = { ...o };
});
const T = "k-actionsheet-title", C = T, c = (O = e.items) == null ? void 0 : O.filter(
(t) => !t.group || t.group === "top"
), b = (P = e.items) == null ? void 0 : P.filter(
(t) => t.group === "bottom"
), G = c && c.length > 0 && b && b.length > 0, m = q(e.children), I = o.slide && /* @__PURE__ */ n.createElement(
"div",
{
className: Y(`k-actionsheet k-actionsheet-${L}`, e.className),
role: "dialog",
"aria-modal": "true",
style: e.style,
"aria-labelledby": C,
ref: h,
onKeyDown: B
},
Array.isArray(m) ? /* @__PURE__ */ n.createElement(n.Fragment, null, m.map((t) => t)) : /* @__PURE__ */ n.createElement(te, null, m[j] && !e.title && !e.subTitle && m[j], (e.title || e.subTitle || v || k || N) && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar" }, /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar-group" }, v && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-actions" }, v), /* @__PURE__ */ n.createElement("div", { className: T, id: C }, /* @__PURE__ */ n.createElement("div", { className: "k-text-center" }, e.title), e.subTitle && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, e.subTitle)), k && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-actions" }, k)), N && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, N)), m[ee] || /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-content" }, /* @__PURE__ */ n.createElement("div", { className: "k-list-ul" }, c && c.map((t, a) => /* @__PURE__ */ n.createElement(
K,
{
...t,
id: a,
key: a,
item: t,
onClick: x
}
)), G && /* @__PURE__ */ n.createElement("hr", { className: "k-hr" }), b && b.map((t, a) => /* @__PURE__ */ n.createElement(
K,
{
...t,
id: a + ((c == null ? void 0 : c.length) || 0),
key: a,
item: t,
onClick: x
}
)))), m[p])
), A = /* @__PURE__ */ n.createElement(n.Fragment, null, e.expand || o.show ? /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-container" }, /* @__PURE__ */ n.createElement("div", { className: "k-overlay", onClick: U }), e.animation ? /* @__PURE__ */ n.createElement(
Q,
{
transitionName: o.slide ? "slide-up" : "slide-down",
onExited: f,
transitionEnterDuration: typeof l == "object" && Object.keys(l).length > 0 && l.openDuration ? Number(l.openDuration) : Number(l),
transitionExitDuration: typeof l == "object" && Object.keys(l).length > 0 && l.closeDuration ? Number(l.closeDuration) : Number(l),
animationEnteringStyle: e.animationStyles || y.current,
animationEnteredStyle: e.animationStyles || y.current,
animationExitingStyle: e.animationStyles || y.current,
exit: !0,
enter: !0,
appear: !1
},
I
) : /* @__PURE__ */ n.createElement("div", { className: "k-animation-container k-animation-container-shown" }, /* @__PURE__ */ n.createElement("div", { className: "k-child-animation-container", style: e.animationStyles || y.current }, I))) : null);
return e.appendTo && Z ? J.createPortal(A, e.appendTo) : A;
}), g = {
navigatable: !0,
navigatableElements: [],
position: "bottom"
};
_.propTypes = {
items: r.array,
subTitle: r.node,
title: r.node,
navigatable: r.bool,
navigatableElements: r.array,
position: r.oneOf(["top", "bottom", "left", "right", "fullscreen"]),
appendTo: r.any
};
_.displayName = "KendoReactActionSheet";
export {
_ as ActionSheet,
g as actionSheetDefaultProps
};