@cerberus-design/react/dist/context/confirm-modal.js

The Cerberus Design React component library.

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useRef, useMemo, useCallback, createContext, useContext } from 'react';
import { css } from 'styled-system/css';
import { VStack, HStack } from 'styled-system/jsx';
import { Button } from '../components/button/button.js';
import { Show } from '../components/show/show.js';
import { Avatar } from '../components/avatar/avatar.js';
import { DialogProvider, DialogHeading, DialogDescription, DialogCloseTrigger } from '../components/dialog/primitives.js';
import { Dialog } from '../components/dialog/dialog.js';
import { useCerberusContext } from './cerberus.js';

const ConfirmModalContext = createContext(null);
function ConfirmModal(props) {
  const [open, setOpen] = useState(false);
  const [content, setContent] = useState(null);
  const resolveRef = useRef(null);
  const showAvatar = content?.showAvatar ?? true;
  const kind = content?.kind ?? "non-destructive";
  const { icons } = useCerberusContext();
  const { confirmModal: ConfirmIcon } = icons;
  const palette = useMemo(
    () => kind === "destructive" ? "danger" : "action",
    [kind]
  );
  const handleChoice = useCallback(
    (e) => {
      const target = e.currentTarget;
      if (target.value === "true") {
        resolveRef.current?.(true);
      }
      resolveRef.current?.(false);
      setOpen(false);
    },
    [setOpen]
  );
  const handleShow = useCallback(
    (options) => {
      return new Promise((resolve) => {
        setContent({ ...options });
        setOpen(true);
        resolveRef.current = resolve;
      });
    },
    [setOpen, setContent]
  );
  const handleOpenChange = useCallback(
    ({ open: open2 }) => {
      setOpen(open2);
      if (!open2) {
        resolveRef.current?.(null);
        resolveRef.current = null;
      }
    },
    [setOpen]
  );
  const value = useMemo(
    () => ({
      show: handleShow
    }),
    [handleShow]
  );
  return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
    props.children,
    /* @__PURE__ */ jsx(
      DialogProvider,
      {
        lazyMount: true,
        open,
        onOpenChange: handleOpenChange,
        unmountOnExit: true,
        children: /* @__PURE__ */ jsx(
          Dialog,
          {
            size: "sm",
            style: {
              "--dialog-content-min-h": "auto"
            },
            children: /* @__PURE__ */ jsxs(
              VStack,
              {
                alignItems: "flex-start",
                gap: "md",
                justify: "space-between",
                w: "full",
                children: [
                  /* @__PURE__ */ jsx(Show, { when: showAvatar, children: /* @__PURE__ */ jsx(
                    HStack,
                    {
                      alignSelf: "center",
                      justify: "center",
                      paddingBlockEnd: "md",
                      w: "full",
                      children: /* @__PURE__ */ jsx(
                        Show,
                        {
                          when: palette === "danger",
                          fallback: /* @__PURE__ */ jsx(
                            Avatar,
                            {
                              gradient: "charon-light",
                              fallback: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 })
                            }
                          ),
                          children: /* @__PURE__ */ jsx(
                            Avatar,
                            {
                              gradient: "hades-dark",
                              fallback: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 })
                            }
                          )
                        }
                      )
                    }
                  ) }),
                  /* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
                  /* @__PURE__ */ jsx(Show, { when: content?.description, children: /* @__PURE__ */ jsx(DialogDescription, { children: content?.description }) }),
                  /* @__PURE__ */ jsxs(HStack, { gap: "md", pt: "md", w: "full", children: [
                    /* @__PURE__ */ jsx(
                      Button,
                      {
                        autoFocus: true,
                        className: css({
                          w: "1/2"
                        }),
                        name: "confirm",
                        onClick: handleChoice,
                        palette,
                        value: "true",
                        children: content?.actionText
                      }
                    ),
                    /* @__PURE__ */ jsx(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                      Button,
                      {
                        className: css({
                          w: "1/2"
                        }),
                        name: "cancel",
                        onClick: handleChoice,
                        usage: "outlined",
                        value: "false",
                        children: content?.cancelText
                      }
                    ) })
                  ] })
                ]
              }
            )
          }
        )
      }
    )
  ] });
}
function useConfirmModal() {
  const context = useContext(ConfirmModalContext);
  if (context === null) {
    throw new Error(
      "useConfirmModal must be used within a ConfirmModal Provider"
    );
  }
  return context;
}

export { ConfirmModal, useConfirmModal };