@carbon/react/lib/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.
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var PropTypes = require('prop-types');
var React = require('react');
var Modal = require('../Modal/Modal.js');
var Button = require('../Button/Button.js');
require('../Button/Button.Skeleton.js');
var warning = require('../../internal/warning.js');
var noopFn = require('../../internal/noopFn.js');
var keys = require('../../internal/keyboard/keys.js');
var match = require('../../internal/keyboard/match.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

let didWarnAboutDeprecation = false;
process.env.NODE_ENV !== 'production';
class ModalWrapper extends React__default["default"].Component {
  constructor(...args) {
    super(...args);
    _rollupPluginBabelHelpers.defineProperty(this, "triggerButton", /*#__PURE__*/React__default["default"].createRef());
    _rollupPluginBabelHelpers.defineProperty(this, "modal", /*#__PURE__*/React__default["default"].createRef());
    _rollupPluginBabelHelpers.defineProperty(this, "state", {
      isOpen: false
    });
    _rollupPluginBabelHelpers.defineProperty(this, "handleOpen", () => {
      this.setState({
        isOpen: true
      });
    });
    _rollupPluginBabelHelpers.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());
      }
    });
    _rollupPluginBabelHelpers.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.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.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__default["default"].createElement("div", {
      role: "presentation",
      onKeyDown: evt => {
        if (match.match(evt, keys.Escape)) {
          this.handleClose(evt);
          onKeyDown(evt);
        }
      }
    }, /*#__PURE__*/React__default["default"].createElement(Button["default"], {
      className: buttonTriggerClassName,
      disabled: disabled,
      kind: triggerButtonKind,
      renderIcon: renderTriggerButtonIcon,
      iconDescription: triggerButtonIconDescription,
      onClick: this.handleOpen,
      ref: this.triggerButton
    }, buttonTriggerText), /*#__PURE__*/React__default["default"].createElement(Modal["default"], _rollupPluginBabelHelpers["extends"]({
      ref: this.modal,
      primaryButtonText: primaryButtonText,
      secondaryButtonText: secondaryButtonText
    }, props), children));
  }
}
_rollupPluginBabelHelpers.defineProperty(ModalWrapper, "propTypes", {
  buttonTriggerClassName: PropTypes__default["default"].string,
  buttonTriggerText: PropTypes__default["default"].node,
  children: PropTypes__default["default"].node,
  disabled: PropTypes__default["default"].bool,
  handleOpen: PropTypes__default["default"].func,
  handleSubmit: PropTypes__default["default"].func,
  id: PropTypes__default["default"].string,
  modalBeforeContent: PropTypes__default["default"].bool,
  modalHeading: PropTypes__default["default"].string,
  modalLabel: PropTypes__default["default"].string,
  modalText: PropTypes__default["default"].string,
  onKeyDown: PropTypes__default["default"].func,
  passiveModal: PropTypes__default["default"].bool,
  preventCloseOnClickOutside: PropTypes__default["default"].bool,
  primaryButtonText: PropTypes__default["default"].string,
  renderTriggerButtonIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
  secondaryButtonText: PropTypes__default["default"].string,
  selectorPrimaryFocus: PropTypes__default["default"].string,
  shouldCloseAfterSubmit: PropTypes__default["default"].bool,
  status: PropTypes__default["default"].string,
  triggerButtonIconDescription: PropTypes__default["default"].string,
  triggerButtonKind: PropTypes__default["default"].oneOf(Button.ButtonKinds),
  withHeader: PropTypes__default["default"].bool
});

exports["default"] = ModalWrapper;