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