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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

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

let didWarnAboutDeprecation = false;
class ModalWrapper extends React__default.Component {
  constructor() {
    super(...arguments);
    _defineProperty(this, "triggerButton", /*#__PURE__*/React__default.createRef());
    _defineProperty(this, "modal", /*#__PURE__*/React__default.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", () => {
      const {
        handleSubmit,
        shouldCloseAfterSubmit
      } = this.props;
      if (handleSubmit && shouldCloseAfterSubmit) {
        handleSubmit();
        this.handleClose();
      }
      handleSubmit();
    });
  }
  if(__DEV__) {
    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,
      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.createElement("div", {
      role: "presentation",
      onKeyDown: evt => {
        if (evt.which === 27) {
          this.handleClose();
          onKeyDown(evt);
        }
      }
    }, /*#__PURE__*/React__default.createElement(Button, {
      className: buttonTriggerClassName,
      disabled: disabled,
      kind: triggerButtonKind,
      renderIcon: renderTriggerButtonIcon,
      iconDescription: triggerButtonIconDescription,
      onClick: this.handleOpen,
      ref: this.triggerButton
    }, buttonTriggerText), /*#__PURE__*/React__default.createElement(Modal, _extends({
      ref: this.modal
    }, 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
});
_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: () => {}
});

export { ModalWrapper as default };