@hypothesis/frontend-shared/lib/util/prompts.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/util/prompts.tsx";
import { render } from 'preact';
import { createRef } from 'preact';
import ModalDialog from '../components/feedback/ModalDialog';
import Button from '../components/input/Button';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
/**
 * Show the user a prompt asking them to confirm an action.
 *
 * This is like an async version of `window.confirm` except that:
 *
 *  - It can be used inside iframes (browsers are starting to prevent this for
 *    the native `window.confirm` dialog)
 *  - The visual style of the dialog matches the Hypothesis design system
 *
 * @return - Promise that resolves with `true` if the user confirmed the action
 *   or `false` if they canceled it.
 */
export async function confirm({
  title = 'Confirm',
  message,
  confirmAction = 'Yes',
  cancelAction = 'Cancel',
  initialFocus = 'cancel'
}) {
  const cancelButton = createRef();
  const confirmButton = createRef();
  const initialFocusRef = initialFocus === 'cancel' ? cancelButton : confirmButton;
  const container = document.createElement('div');
  container.setAttribute('data-testid', 'confirm-container');

  // Ensure dialog appears above any existing content. The Z-index value here
  // is Good Enough™ for current usage.
  container.style.position = 'relative';
  container.style.zIndex = '10';
  document.body.appendChild(container);
  return new Promise(resolve => {
    const close = result => {
      render(null, container);
      container.remove();
      resolve(result);
    };
    render(_jsxDEV(ModalDialog, {
      buttons: _jsxDEV(_Fragment, {
        children: [_jsxDEV(Button, {
          elementRef: cancelButton,
          "data-testid": "cancel-button",
          onClick: () => close(false),
          children: cancelAction
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 66,
          columnNumber: 13
        }, this), _jsxDEV(Button, {
          variant: "primary",
          elementRef: confirmButton,
          "data-testid": "confirm-button",
          onClick: () => close(true),
          children: confirmAction
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 73,
          columnNumber: 13
        }, this)]
      }, void 0, true),
      initialFocus: initialFocusRef,
      title: title,
      onClose: () => close(false),
      children: message
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 63,
      columnNumber: 7
    }, this), container);
  });
}
//# sourceMappingURL=prompts.js.map