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