@carbon/react/es/components/ModalWrapper/ModalWrapper.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import PropTypes from 'prop-types';
import React from 'react';
import Modal from '../Modal/Modal.js';
import Button, { ButtonKinds } from '../Button/Button.js';
import '../Button/Button.Skeleton.js';
import { warning } from '../../internal/warning.js';
import { noopFn } from '../../internal/noopFn.js';
import { Escape } from '../../internal/keyboard/keys.js';
import { match } from '../../internal/keyboard/match.js';

let didWarnAboutDeprecation = false;
process.env.NODE_ENV !== 'production';
class ModalWrapper extends React.Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "triggerButton", /*#__PURE__*/React.createRef());
    _defineProperty(this, "modal", /*#__PURE__*/React.createRef());
    _defineProperty(this, "state", {
      isOpen: false
    });
    _defineProperty(this, "handleOpen", () => {
      this.setState({
        isOpen: true
      });
    });
    _defineProperty(this, "handleClose", evt => {
      const innerModal = this.modal.current?.querySelector('div');
      if (this.modal.current && evt && !innerModal?.contains(evt.target) && this.props.preventCloseOnClickOutside) {
        return;
      } else {
        this.setState({
          isOpen: false
        }, () => this.triggerButton.current?.focus());
      }
    });
    _defineProperty(this, "handleOnRequestSubmit", evt => {
      const {
        handleSubmit,
        shouldCloseAfterSubmit
      } = this.props;
      if (handleSubmit && shouldCloseAfterSubmit) {
        handleSubmit(evt);
        this.handleClose(evt);
      }
      handleSubmit?.(evt);
    });
  }
  if(isDev) {
    process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`') : void 0;
    didWarnAboutDeprecation = true;
  }
  render() {
    const {
      children,
      onKeyDown = noopFn,
      buttonTriggerText,
      buttonTriggerClassName,
      renderTriggerButtonIcon,
      primaryButtonText = 'Save',
      secondaryButtonText = 'Cancel',
      triggerButtonIconDescription = 'Provide icon description if icon is used',
      triggerButtonKind = 'primary',
      disabled = false,
      handleSubmit,
      // eslint-disable-line @typescript-eslint/no-unused-vars
      shouldCloseAfterSubmit = true,
      // eslint-disable-line @typescript-eslint/no-unused-vars
      selectorPrimaryFocus = '[data-modal-primary-focus]',
      preventCloseOnClickOutside = false,
      // eslint-disable-line @typescript-eslint/no-unused-vars
      ...other
    } = this.props;
    const props = {
      ...other,
      selectorPrimaryFocus,
      open: this.state.isOpen,
      onRequestClose: this.handleClose,
      onRequestSubmit: this.handleOnRequestSubmit
    };
    return /*#__PURE__*/React.createElement("div", {
      role: "presentation",
      onKeyDown: evt => {
        if (match(evt, Escape)) {
          this.handleClose(evt);
          onKeyDown(evt);
        }
      }
    }, /*#__PURE__*/React.createElement(Button, {
      className: buttonTriggerClassName,
      disabled: disabled,
      kind: triggerButtonKind,
      renderIcon: renderTriggerButtonIcon,
      iconDescription: triggerButtonIconDescription,
      onClick: this.handleOpen,
      ref: this.triggerButton
    }, buttonTriggerText), /*#__PURE__*/React.createElement(Modal, _extends({
      ref: this.modal,
      primaryButtonText: primaryButtonText,
      secondaryButtonText: secondaryButtonText
    }, props), children));
  }
}
_defineProperty(ModalWrapper, "propTypes", {
  buttonTriggerClassName: PropTypes.string,
  buttonTriggerText: PropTypes.node,
  children: PropTypes.node,
  disabled: PropTypes.bool,
  handleOpen: PropTypes.func,
  handleSubmit: PropTypes.func,
  id: PropTypes.string,
  modalBeforeContent: PropTypes.bool,
  modalHeading: PropTypes.string,
  modalLabel: PropTypes.string,
  modalText: PropTypes.string,
  onKeyDown: PropTypes.func,
  passiveModal: PropTypes.bool,
  preventCloseOnClickOutside: PropTypes.bool,
  primaryButtonText: PropTypes.string,
  renderTriggerButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  secondaryButtonText: PropTypes.string,
  selectorPrimaryFocus: PropTypes.string,
  shouldCloseAfterSubmit: PropTypes.bool,
  status: PropTypes.string,
  triggerButtonIconDescription: PropTypes.string,
  triggerButtonKind: PropTypes.oneOf(ButtonKinds),
  withHeader: PropTypes.bool
});

export { ModalWrapper as default };