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

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { useCallback, useEffect, useState } from '@wordpress/element';
/**
 * Internal dependencies
 */

import Modal from '../modal';
import { useContextSystem, contextConnect } from '../ui/context';
import { Flex } from '../flex';
import Button from '../button';
import { Text } from '../text';
import { VStack } from '../v-stack';
import * as styles from './styles';
import { useCx } from '../utils/hooks/use-cx';

function ConfirmDialog(props, forwardedRef) {
  const {
    isOpen: isOpenProp,
    onConfirm,
    onCancel,
    children,
    confirmButtonText,
    cancelButtonText,
    ...otherProps
  } = useContextSystem(props, 'ConfirmDialog');
  const cx = useCx();
  const wrapperClassName = cx(styles.wrapper);
  const [isOpen, setIsOpen] = useState();
  const [shouldSelfClose, setShouldSelfClose] = useState();
  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 = useCallback(callback => event => {
    callback === null || callback === void 0 ? void 0 : callback(event);

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

export default contextConnect(ConfirmDialog, 'ConfirmDialog');
//# sourceMappingURL=component.js.map