@cerberus-design/react
Version:
The Cerberus Design React component library.
113 lines (108 loc) • 4.62 kB
JavaScript
'use client';
'use strict';
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const jsx = require('styled-system/jsx');
const cerberus = require('../../context/cerberus.cjs');
const show = require('../show/show.cjs');
const _for = require('../for/for.cjs');
const avatar = require('../avatar/avatar.cjs');
const primitives = require('../dialog/primitives.cjs');
const closeIconTrigger = require('../dialog/close-icon-trigger.cjs');
const dialog = require('../dialog/dialog.cjs');
const context = require('./context.cjs');
const triggerItem = require('./trigger-item.cjs');
function CTAModal(props) {
const [open, setOpen] = React.useState(false);
const [content, setContent] = React.useState(null);
const confirmIcon = content?.icon;
const { icons } = cerberus.useCerberusContext();
const { confirmModal: FallbackIcon } = icons;
const handleShow = React.useCallback(
(options) => {
setContent({ ...options });
setOpen(true);
},
[setOpen]
);
const handleActionClick = React.useCallback(
(event) => {
const index = Number(event.currentTarget.getAttribute("data-index"));
const contentActions = content?.actions;
const action = contentActions._actions[index];
action?.handleClick?.(event);
setOpen(false);
},
[content, setOpen]
);
const value = React.useMemo(
() => ({
show: handleShow
}),
[handleShow]
);
return /* @__PURE__ */ jsxRuntime.jsxs(context.CTAModalContext.Provider, { value, children: [
props.children,
/* @__PURE__ */ jsxRuntime.jsx(
primitives.DialogProvider,
{
lazyMount: true,
open,
onOpenChange: (e) => setOpen(e.open),
unmountOnExit: true,
children: /* @__PURE__ */ jsxRuntime.jsxs(
dialog.Dialog,
{
size: "sm",
style: {
"--dialog-content-min-h": "auto"
},
children: [
/* @__PURE__ */ jsxRuntime.jsx(closeIconTrigger.DialogCloseIconTrigger, {}),
/* @__PURE__ */ jsxRuntime.jsxs(jsx.VStack, { gap: "xl", w: "full", children: [
/* @__PURE__ */ jsxRuntime.jsx(jsx.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(jsx.VStack, { gap: "lg", w: "full", children: [
/* @__PURE__ */ jsxRuntime.jsx(
avatar.Avatar,
{
gradient: "charon-light",
fallback: /* @__PURE__ */ jsxRuntime.jsx(
show.Show,
{
when: confirmIcon,
fallback: /* @__PURE__ */ jsxRuntime.jsx(FallbackIcon, { size: 24 }),
children: confirmIcon
}
)
}
),
/* @__PURE__ */ jsxRuntime.jsx(primitives.DialogHeading, { children: content?.heading }),
/* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: content?.description, children: /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogDescription, { textAlign: "center", children: content?.description }) }),
/* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: content?.content, children: /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogDescription, { textAlign: "center", children: content?.content }) })
] }) }),
/* @__PURE__ */ jsxRuntime.jsx(jsx.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ jsxRuntime.jsx(_for.For, { each: content?.actions._actions, children: (action, index) => /* @__PURE__ */ jsxRuntime.jsx(
show.Show,
{
when: content?.actions?.type === "btnAction",
fallback: /* @__PURE__ */ jsxRuntime.jsx(triggerItem.TriggerItem, { asChild: true, children: action }),
children: /* @__PURE__ */ jsxRuntime.jsx(triggerItem.TriggerItem, { "data-index": index, onClick: handleActionClick, children: action?.text })
},
index
) }) })
] })
]
}
)
}
)
] });
}
function useCTAModal() {
const context$1 = React.useContext(context.CTAModalContext);
if (context$1 === null) {
throw new Error("useCTAModal must be used within a CTAModal Provider");
}
return context$1;
}
exports.CTAModal = CTAModal;
exports.useCTAModal = useCTAModal;