@primer/react/dist/ConfirmationDialog/ConfirmationDialog.js

An implementation of GitHub's Primer Design System using React

import { useCallback } from 'react';
import { createRoot } from 'react-dom/client';
import BaseStyles from '../BaseStyles.js';
import { jsx } from 'react/jsx-runtime';
import { Dialog } from '../Dialog/Dialog.js';

/**
 * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
 * is used to confirm a user action. ConfirmationDialogs always have exactly
 * two buttons: one to cancel the action and one to confirm it. No custom
 * rendering capabilities are provided for ConfirmationDialog.
 */
const ConfirmationDialog = props => {
  const {
    onClose,
    title,
    cancelButtonContent = 'Cancel',
    confirmButtonContent = 'OK',
    confirmButtonType = 'normal',
    cancelButtonLoading = false,
    confirmButtonLoading = false,
    children,
    className,
    width = 'medium',
    height,
    overrideButtonFocus
  } = props;
  const onCancelButtonClick = useCallback(() => {
    onClose('cancel');
  }, [onClose]);
  const onConfirmButtonClick = useCallback(() => {
    onClose('confirm');
  }, [onClose]);
  const isConfirmationDangerous = confirmButtonType === 'danger';
  const buttonToFocus = overrideButtonFocus !== undefined ? overrideButtonFocus : isConfirmationDangerous ? 'cancel' : 'confirm';
  const cancelButton = {
    content: cancelButtonContent,
    onClick: onCancelButtonClick,
    autoFocus: buttonToFocus === 'cancel',
    loading: cancelButtonLoading
  };
  const confirmButton = {
    content: confirmButtonContent,
    buttonType: confirmButtonType,
    onClick: onConfirmButtonClick,
    autoFocus: buttonToFocus === 'confirm',
    loading: confirmButtonLoading
  };
  const footerButtons = [cancelButton, confirmButton];
  return /*#__PURE__*/jsx(Dialog, {
    "data-component": "ConfirmationDialog",
    onClose: onClose,
    title: title,
    footerButtons: footerButtons,
    role: "alertdialog",
    width: width,
    height: height,
    className: className,
    children: children
  });
};
ConfirmationDialog.displayName = "ConfirmationDialog";
let hostElement = null;
async function confirm(options) {
  const {
    content,
    ...confirmationDialogProps
  } = options;
  return new Promise(resolve => {
    hostElement ||= document.createElement('div');
    if (!hostElement.isConnected) document.body.append(hostElement);
    const root = createRoot(hostElement);
    const onClose = gesture => {
      root.unmount();
      if (gesture === 'confirm') {
        resolve(true);
      } else {
        resolve(false);
      }
    };
    root.render(/*#__PURE__*/jsx(BaseStyles, {
      children: /*#__PURE__*/jsx(ConfirmationDialog, {
        ...confirmationDialogProps,
        onClose: onClose,
        children: content
      })
    }));
  });
}

/**
 * This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
 * is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
 * resolved with `true` or `false` depending on whether or not the confirm button was used.
 */
function useConfirm() {
  const result = useCallback(options => {
    return confirm(options);
  }, []);
  return result;
}

export { ConfirmationDialog, useConfirm };