@mskcc/carbon-react/lib/components/ModalWrapper/ModalWrapper.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'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 types = require('../../prop-types/types.js');
var warning = require('../../internal/warning.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;
class ModalWrapper extends React__default["default"].Component {
  constructor() {
    super(...arguments);
    _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", () => {
      const {
        handleSubmit,
        shouldCloseAfterSubmit
      } = this.props;
      if (handleSubmit && shouldCloseAfterSubmit) {
        handleSubmit();
        this.handleClose();
      }
      handleSubmit();
    });
  }
  if(__DEV__) {
    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,
      buttonTriggerText,
      buttonTriggerClassName,
      renderTriggerButtonIcon,
      triggerButtonIconDescription,
      triggerButtonKind,
      disabled,
      handleSubmit,
      // eslint-disable-line no-unused-vars
      shouldCloseAfterSubmit,
      // eslint-disable-line no-unused-vars
      selectorPrimaryFocus,
      preventCloseOnClickOutside,
      // eslint-disable-line 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 (evt.which === 27) {
          this.handleClose();
          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
    }, 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(types.ButtonKinds),
  withHeader: PropTypes__default["default"].bool
});
_rollupPluginBabelHelpers.defineProperty(ModalWrapper, "defaultProps", {
  shouldCloseAfterSubmit: true,
  primaryButtonText: 'Save',
  secondaryButtonText: 'Cancel',
  triggerButtonIconDescription: 'Provide icon description if icon is used',
  triggerButtonKind: 'primary',
  disabled: false,
  preventCloseOnClickOutside: false,
  selectorPrimaryFocus: '[data-modal-primary-focus]',
  onKeyDown: () => {}
});

exports["default"] = ModalWrapper;