@wordpress/components/build/confirm-dialog/component.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _i18n = require("@wordpress/i18n");

var _modal = _interopRequireDefault(require("../modal"));

var _context = require("../ui/context");

var _flex = require("../flex");

var _button = _interopRequireDefault(require("../button"));

var _text = require("../text");

var _vStack = require("../v-stack");

var styles = _interopRequireWildcard(require("./styles"));

var _useCx = require("../utils/hooks/use-cx");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function ConfirmDialog(props, forwardedRef) {
  const {
    isOpen: isOpenProp,
    onConfirm,
    onCancel,
    children,
    confirmButtonText,
    cancelButtonText,
    ...otherProps
  } = (0, _context.useContextSystem)(props, 'ConfirmDialog');
  const cx = (0, _useCx.useCx)();
  const wrapperClassName = cx(styles.wrapper);
  const [isOpen, setIsOpen] = (0, _element.useState)();
  const [shouldSelfClose, setShouldSelfClose] = (0, _element.useState)();
  (0, _element.useEffect)(() => {
    // We only allow the dialog to close itself if `isOpenProp` is *not* set.
    // If `isOpenProp` is set, then it (probably) means it's controlled by a
    // parent component. In that case, `shouldSelfClose` might do more harm than
    // good, so we disable it.
    const isIsOpenSet = typeof isOpenProp !== 'undefined';
    setIsOpen(isIsOpenSet ? isOpenProp : true);
    setShouldSelfClose(!isIsOpenSet);
  }, [isOpenProp]);
  const handleEvent = (0, _element.useCallback)(callback => event => {
    callback === null || callback === void 0 ? void 0 : callback(event);

    if (shouldSelfClose) {
      setIsOpen(false);
    }
  }, [shouldSelfClose, setIsOpen]);
  const handleEnter = (0, _element.useCallback)(event => {
    if (event.key === 'Enter') {
      handleEvent(onConfirm)(event);
    }
  }, [handleEvent, onConfirm]);
  const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0, _i18n.__)('Cancel');
  const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0, _i18n.__)('OK');
  return (0, _element.createElement)(_element.Fragment, null, isOpen && (0, _element.createElement)(_modal.default, (0, _extends2.default)({
    onRequestClose: handleEvent(onCancel),
    onKeyDown: handleEnter,
    closeButtonLabel: cancelLabel,
    isDismissible: true,
    ref: forwardedRef,
    overlayClassName: wrapperClassName,
    __experimentalHideHeader: true
  }, otherProps), (0, _element.createElement)(_vStack.VStack, {
    spacing: 8
  }, (0, _element.createElement)(_text.Text, null, children), (0, _element.createElement)(_flex.Flex, {
    direction: "row",
    justify: "flex-end"
  }, (0, _element.createElement)(_button.default, {
    variant: "tertiary",
    onClick: handleEvent(onCancel)
  }, cancelLabel), (0, _element.createElement)(_button.default, {
    variant: "primary",
    onClick: handleEvent(onConfirm)
  }, confirmLabel)))));
}

var _default = (0, _context.contextConnect)(ConfirmDialog, 'ConfirmDialog');

exports.default = _default;
//# sourceMappingURL=component.js.map