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