@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');

let didWarnAboutDeprecation = false;
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
process.env.NODE_ENV !== 'production';
class ModalWrapper extends React.Component {
  constructor(...args) {
    super(...args);
    _rollupPluginBabelHelpers.defineProperty(this, "triggerButton", /*#__PURE__*/React.createRef());
    _rollupPluginBabelHelpers.defineProperty(this, "modal", /*#__PURE__*/React.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);
    });
  }
  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
  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.createElement("div", {
      role: "presentation",
      onKeyDown: evt => {
        if (match.match(evt, keys.Escape)) {
          this.handleClose(evt);
          onKeyDown(evt);
        }
      }
    }, /*#__PURE__*/React.createElement(Button.default, {
      className: buttonTriggerClassName,
      disabled: disabled,
      kind: triggerButtonKind,
      renderIcon: renderTriggerButtonIcon,
      iconDescription: triggerButtonIconDescription,
      onClick: this.handleOpen,
      ref: this.triggerButton
    }, buttonTriggerText), /*#__PURE__*/React.createElement(Modal.default, _rollupPluginBabelHelpers.extends({
      ref: this.modal,
      primaryButtonText: primaryButtonText,
      secondaryButtonText: secondaryButtonText
    }, props), children));
  }
}
_rollupPluginBabelHelpers.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(Button.ButtonKinds),
  withHeader: PropTypes.bool
});

exports.default = ModalWrapper;