@hypothesis/frontend-shared/lib/components/Modal.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Modal.js";
import { useRef } from 'preact/hooks';
import { useElementShouldClose } from '../hooks/use-element-should-close';
import { Dialog } from './Dialog';
import { LabeledButton } from './buttons';
/**
 * @typedef {import('./Dialog').DialogProps} DialogProps
 */

/**
 * @typedef ModalBaseProps
 * @prop {() => void} onCancel - `onCancel` is required for Modals
 */

/**
 * @typedef {DialogProps & ModalBaseProps} ModalProps
 */

/**
 * A modal dialog. Presents a dialog with an overlay background. Will close
 * if user clicks/taps outside of it.
 *
 * @param {ModalProps} props
 */

import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
export function Modal({
  children,
  onCancel,
  ...restProps
}) {
  const modalContainerRef =
  /** @type {{ current: HTMLDivElement }} */
  useRef();
  useElementShouldClose(modalContainerRef, true
  /* isOpen */
  , () => {
    if (onCancel) {
      onCancel();
    }
  });
  return _jsxDEV(_Fragment, {
    children: [_jsxDEV("div", {
      className: "Hyp-Modal__overlay"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 39,
      columnNumber: 7
    }, this), _jsxDEV("div", {
      className: "Hyp-Modal",
      ref: modalContainerRef,
      children: _jsxDEV(Dialog, {
        onCancel: onCancel,
        ...restProps,
        children: children
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 41,
        columnNumber: 9
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 40,
      columnNumber: 7
    }, this)]
  }, void 0, true);
}
/**
 * @typedef ConfirmModalBaseProps
 * @prop {string} message - Main text of the modal message
 * @prop {string} confirmAction - Label for the "Confirm" button
 * @prop {() => void} onConfirm - Callback invoked if the user clicks the "Confirm" button
 * @prop {() => void} onCancel - Callback invoked if the user cancels
 *
 * @typedef {Omit<ModalProps, 'buttons' | 'children'> & ConfirmModalBaseProps} ConfirmModalProps
 */

/**
 * A modal that emulates a `window.confirm` interface:
 * request a boolean yes/no confirmation from the user.
 *
 * @param {ConfirmModalProps} props
 */

export function ConfirmModal({
  message,
  confirmAction,
  onConfirm,
  onCancel,
  ...restProps
}) {
  return _jsxDEV(Modal, {
    onCancel: onCancel,
    buttons: [_jsxDEV(LabeledButton, {
      onClick: onConfirm,
      variant: "primary",
      "data-testid": "confirm-button",
      children: confirmAction
    }, "ok", false, {
      fileName: _jsxFileName,
      lineNumber: 76,
      columnNumber: 9
    }, this)],
    ...restProps,
    children: _jsxDEV("p", {
      children: message
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 87,
      columnNumber: 7
    }, this)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 73,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Modal.js.map