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