react-cm-ui/core/surfaces/modalDeprecated/modalDeprecated.js

React UI for Healthy Church

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _reactPortal = require("react-portal");

var _lodash = require("lodash");

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _reactCustomScrollbars = _interopRequireDefault(require("react-custom-scrollbars"));

var _domUtils = _interopRequireDefault(require("../../utils/domUtils"));

var _modalDeprecatedHeader = _interopRequireDefault(require("./modalDeprecatedHeader"));

var _withStyles = _interopRequireDefault(require("../../styles/withStyles"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var propTypes = {
  autoHeight: _propTypes["default"].bool,

  /**
   * Add a `data-testid` attribute to the ModalDeprecated's child container element.
   * Used for DOM Testing.
   * See https://testing-library.com/docs/queries/bytestid/.
   */
  childContainerDataTestId: _propTypes["default"].string,

  /**
   * Override or extend the styles applied to Modal.
   */
  classes: _propTypes["default"].shape({
    root: _propTypes["default"].string
  }),
  className: _propTypes["default"].string,
  closeButton: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].shape({}), _propTypes["default"].string]),

  /**
   * Add a `data-testid` attribute to the ModalDeprecated's Close Button.
   * Used for DOM Testing.
   * See https://testing-library.com/docs/queries/bytestid/.
   */
  closeButtonDataTestId: _propTypes["default"].string,

  /**
   * Add a `data-testid` attribute to the ModalDeprecated's root element.
   * Used for DOM Testing.
   * See https://testing-library.com/docs/queries/bytestid/.
   */
  dataTestId: _propTypes["default"].string,
  fluidContent: _propTypes["default"].bool,
  header: _propTypes["default"].bool,
  headerStyle: _propTypes["default"].shape({}),
  height: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  inverse: _propTypes["default"].bool,
  isOpen: _propTypes["default"].bool.isRequired,
  maxHeight: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  maxWidth: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  minHeight: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  minWidth: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  onClickOutside: _propTypes["default"].bool,
  onClose: _propTypes["default"].func.isRequired,
  style: _propTypes["default"].shape({}),
  theme: _propTypes["default"].shape({
    zIndex: _propTypes["default"].shape({
      modal: _propTypes["default"].number
    })
  }),
  title: _propTypes["default"].string,
  titleTruncate: _propTypes["default"].bool,
  width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
};
var defaultProps = {
  childContainerDataTestId: undefined,
  classes: null,
  closeButtonDataTestId: undefined,
  dataTestId: undefined,
  headerStyle: undefined,
  theme: null
};

var styles = function styles(theme) {
  return {
    root: {
      alignItems: 'center',
      backfaceVisibility: 'hidden',
      display: 'flex',
      height: '100%',
      justifyContent: 'center',
      left: 0,
      minWidth: 320,
      position: 'fixed',
      top: 0,
      width: '100%',
      zIndex: theme.zIndex.modal
    }
  };
};

var ModalDeprecated = /*#__PURE__*/function (_React$Component) {
  _inherits(ModalDeprecated, _React$Component);

  var _super = _createSuper(ModalDeprecated);

  function ModalDeprecated(props) {
    var _this;

    _classCallCheck(this, ModalDeprecated);

    _this = _super.call(this, props);
    _this._defaultDimensions = {
      autoHeightMax: null,
      height: '100%',
      maxHeight: '100%',
      maxWidth: 'none',
      minHeight: 'auto',
      minWidth: '320px',
      width: '100%'
    };
    _this.state = {
      height: _this._defaultDimensions.height,
      isOpen: props.isOpen,
      isScrolled: false,
      maxHeight: _this._defaultDimensions.maxHeight,
      maxWidth: _this._defaultDimensions.maxWidth,
      minHeight: _this._defaultDimensions.minHeight,
      minWidth: _this._defaultDimensions.minWidth,
      width: _this._defaultDimensions.width
    };
    _this._mounted = false;
    _this.modalContainer = null;
    _this._onBeforeClose = _this._onBeforeClose.bind(_assertThisInitialized(_this));
    _this._onClickOutside = _this._onClickOutside.bind(_assertThisInitialized(_this));
    _this._onCloseAnimationComplete = _this._onCloseAnimationComplete.bind(_assertThisInitialized(_this));
    _this._onClose = _this._onClose.bind(_assertThisInitialized(_this));
    _this.onOpen = _this.onOpen.bind(_assertThisInitialized(_this));
    _this.onOpenAnimationComplete = _this.onOpenAnimationComplete.bind(_assertThisInitialized(_this));
    _this._onResize = _this._onResize.bind(_assertThisInitialized(_this));
    _this._onScrollStart = _this._onScrollStart.bind(_assertThisInitialized(_this));
    _this._onScrollStop = _this._onScrollStop.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(ModalDeprecated, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var isOpen = this.props.isOpen;
      this._mounted = true;
      window.addEventListener('resize', this._onResize);

      this._onResize();

      if (isOpen) {
        this.setState({
          isOpen: isOpen
        }, function () {
          _this2.onOpen();
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this3 = this;

      var isOpen = this.props.isOpen;

      if (!prevProps.isOpen && isOpen) {
        this.setState({
          isOpen: isOpen
        }, function () {
          _this3.onOpen();
        });
      }

      if (prevProps.isOpen && !isOpen) {
        this._onBeforeClose();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this._mounted = false;
      window.removeEventListener('resize', this._onResize);

      if (document.body.classList.contains('modal-open')) {
        document.body.classList.remove('modal-open');
      }

      if (document.body.classList.contains('modal-dimmer')) {
        document.body.classList.remove('modal-dimmer');
      }

      if (document.body.classList.contains('modal-open-layered')) {
        document.body.classList.remove('modal-open-layered');
      }

      if (document.body.classList.contains('modal-animate-out')) {
        document.body.classList.remove('modal-animate-out');
      }
    }
  }, {
    key: "animationProps",
    value: function animationProps(el) {
      var a;
      var animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'animationend',
        WebkitAnimation: 'webkitAnimationEnd'
      };

      for (a in animations) {
        if (el.style[a] !== undefined) {
          return animations[a];
        }
      }
    }
  }, {
    key: "_onBeforeClose",
    value: function _onBeforeClose() {
      var nodePortal = _reactDom["default"].findDOMNode(this);

      var modalContainer = nodePortal.querySelector('.modal-container');
      var animationEvent = this.animationProps(modalContainer);
      document.body.classList.add('modal-animate-out');
      nodePortal.classList.add('modal-animate-out');
      this.modalContainer.addEventListener(animationEvent, this._onCloseAnimationComplete);
    }
  }, {
    key: "_onClickOutside",
    value: function _onClickOutside(event) {
      if (this.modalContainerRef.contains(event.target) || !this.props.onClickOutside) {
        return;
      }

      this._onClose();
    }
  }, {
    key: "_onClose",
    value: function _onClose() {
      var _this$props = this.props,
          onClickOutside = _this$props.onClickOutside,
          onClose = _this$props.onClose;

      if (onClickOutside) {
        document.removeEventListener('click', this._onClickOutside);
      }

      onClose();
    }
  }, {
    key: "_onCloseAnimationComplete",
    value: function _onCloseAnimationComplete() {
      var _document = document,
          body = _document.body;
      var animationEvent = this.animationProps(this.modalContainerRef);
      this.modalContainerRef.removeEventListener(animationEvent, this._onCloseAnimationComplete);
      var element = document.body;
      var modalLength = document.querySelectorAll('.ui.modal').length;

      if (modalLength <= 2) {
        body.classList.remove('modal-open-layered');
      }

      if (modalLength <= 1) {
        var scrollPosition = parseInt(element.style.top, 10);
        body.classList.remove('modal-open');
        window.scroll(0, Math.abs(scrollPosition));
        body.style.top = null;
      }

      body.classList.remove('modal-animate-out');
      this.setState({
        isOpen: false
      });
    }
  }, {
    key: "onOpen",
    value: function onOpen() {
      var _this$props2 = this.props,
          autoHeight = _this$props2.autoHeight,
          onClickOutside = _this$props2.onClickOutside,
          maxWidth = _this$props2.maxWidth,
          theme = _this$props2.theme;
      var _document2 = document,
          body = _document2.body;

      var nodePortal = _reactDom["default"].findDOMNode(this);

      var scrollPosition = window.pageYOffset;
      var modalLength = document.querySelectorAll('.ui.modal').length;
      this.modalContainer = nodePortal.querySelector('.modal-container');
      var modalDimmer = nodePortal.querySelector('.modal-dimmer');
      var animationEvent = this.animationProps(this.modalContainer);
      var newZIndex = theme.zIndex.modal + 2; // adding 2 accounts for the frist .modal and .modal-dimmers- z-indexes

      this.modalContainer.addEventListener(animationEvent, this.onOpenAnimationComplete);

      if (onClickOutside) {
        document.addEventListener('click', this._onClickOutside);
      }

      if (_domUtils["default"].hasClassName(body, 'modal-open')) {
        newZIndex += modalLength;

        _domUtils["default"].addClassName(body, 'modal-open-layered');

        nodePortal.style.zIndex = newZIndex;
        this.modalContainer.style.zIndex = newZIndex;
        modalDimmer.style.display = 'none';
      } else {
        body.style.top = "-".concat(scrollPosition, "px");

        _domUtils["default"].addClassName(body, 'modal-open');

        nodePortal.style.zIndex = newZIndex - 1;
        this.modalContainer.style.zIndex = newZIndex + modalLength;
      }

      if (!(0, _lodash.isUndefined)(maxWidth)) {
        this.modalContainer.style.maxWidth = (0, _lodash.isNumber)(maxWidth) ? "".concat(maxWidth, "px") : (0, _lodash.isString)(maxWidth) ? maxWidth : null;
      } else {
        this.modalContainer.style.maxWidth = '768px';
      }

      if (autoHeight) {
        var modalPaddingBottom = parseInt(getComputedStyle(nodePortal).paddingBottom);
        var modalPaddingTop = parseInt(getComputedStyle(nodePortal).paddingTop);
        var modalHeight = nodePortal.offsetHeight;
        var newAutoHeightMax = modalHeight - modalPaddingBottom - modalPaddingTop;
        this.setState({
          autoHeightMax: newAutoHeightMax
        });
      }
    }
  }, {
    key: "onOpenAnimationComplete",
    value: function onOpenAnimationComplete() {
      var animationEvent = this.animationProps(this.modalContainerRef);
      this.modalContainer.removeEventListener(animationEvent, this.onOpenAnimationComplete);
      var onOpenComplete = this.props.onOpenComplete;

      if (typeof onOpenComplete === 'function') {
        onOpenComplete();
      }
    }
  }, {
    key: "_onResize",
    value: function _onResize() {
      if (this._mounted) {
        var dimensions = {};

        if (window.matchMedia('(min-width: 768px)').matches === true) {
          dimensions = {
            height: this.props.height || '500px',
            maxHeight: this.props.maxHeight || this._defaultDimensions.maxHeight,
            maxWidth: this.props.maxWidth || this._defaultDimensions.maxWidth,
            minHeight: this.props.minHeight || '305px',
            minWidth: this.props.minWidth || this._defaultDimensions.minWidth,
            width: this.props.width || '640px'
          };
        } else {
          dimensions = {
            height: this._defaultDimensions.height,
            maxHeight: this._defaultDimensions.maxHeight,
            maxWidth: this._defaultDimensions.maxWidth,
            minHeight: this._defaultDimensions.minHeight,
            minWidth: this._defaultDimensions.minWidth,
            width: this._defaultDimensions.width
          };
        }

        this.setState(dimensions);
      }
    }
  }, {
    key: "_onScrollStart",
    value: function _onScrollStart() {
      var scrollContainerPos = this.modalContainerInner.parentNode.scrollTop;
      this.setState({
        isScrolled: scrollContainerPos > 0
      });
    }
  }, {
    key: "_onScrollStop",
    value: function _onScrollStop() {
      var scrollContainerPos = this.modalContainerInner.parentNode.scrollTop;
      this.setState({
        isScrolled: scrollContainerPos > 0
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var _this$props3 = this.props,
          autoHeight = _this$props3.autoHeight,
          children = _this$props3.children,
          childContainerDataTestId = _this$props3.childContainerDataTestId,
          classes = _this$props3.classes,
          className = _this$props3.className,
          closeButton = _this$props3.closeButton,
          closeButtonDataTestId = _this$props3.closeButtonDataTestId,
          dataTestId = _this$props3.dataTestId,
          fluidContent = _this$props3.fluidContent,
          headerStyle = _this$props3.headerStyle,
          inverse = _this$props3.inverse,
          title = _this$props3.title,
          titleTruncate = _this$props3.titleTruncate,
          style = _this$props3.style;
      var _this$state = this.state,
          autoHeightMax = _this$state.autoHeightMax,
          height = _this$state.height,
          isOpen = _this$state.isOpen,
          isScrolled = _this$state.isScrolled,
          maxHeight = _this$state.maxHeight,
          maxWidth = _this$state.maxWidth,
          minHeight = _this$state.minHeight,
          minWidth = _this$state.minWidth,
          width = _this$state.width;

      if (!isOpen) {
        return false;
      }

      var rootClasses = (0, _classnames["default"])('ui', 'modal', classes.root, className);
      var containerInnerClasses = (0, _classnames["default"])('modal-container', {
        'modal-container-inverse': inverse,
        'modal-container-is-scrolled': isScrolled
      });

      var containerInnerStyles = _objectSpread({
        height: height,
        maxHeight: maxHeight,
        maxWidth: maxWidth,
        minHeight: minHeight,
        minWidth: minWidth,
        width: width
      }, style);

      var containerInnerScrollStyles = _objectSpread(_objectSpread({}, fluidContent && {
        height: '100%'
      }), !title && !closeButton && {
        paddingTop: 33
      });

      return /*#__PURE__*/_react["default"].createElement(_reactPortal.Portal, null, /*#__PURE__*/_react["default"].createElement("div", {
        className: rootClasses,
        "data-testid": dataTestId
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: containerInnerClasses,
        ref: function ref(_ref) {
          return _this4.modalContainerRef = _ref;
        },
        style: containerInnerStyles
      }, /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars["default"], {
        autoHeight: autoHeight,
        autoHeightMax: autoHeightMax,
        autoHide: true,
        onScrollStart: this._onScrollStart,
        onScrollStop: this._onScrollStop
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "modal-container-inner",
        ref: function ref(el) {
          return _this4.modalContainerInner = el;
        },
        style: containerInnerScrollStyles
      }, (title || closeButton) && /*#__PURE__*/_react["default"].createElement(_modalDeprecatedHeader["default"], {
        closeButton: closeButton,
        closeButtonDataTestId: closeButtonDataTestId,
        inverse: inverse,
        key: "modal-header-".concat((0, _lodash.kebabCase)(title)),
        onClose: this._onClose,
        title: title,
        titleTruncate: titleTruncate,
        style: headerStyle
      }), /*#__PURE__*/_react["default"].createElement("div", {
        className: "modal-children",
        "data-testid": childContainerDataTestId,
        key: "modal-children-".concat((0, _lodash.kebabCase)(title))
      }, children)))), /*#__PURE__*/_react["default"].createElement("div", {
        className: "modal-dimmer"
      })));
    }
  }]);

  return ModalDeprecated;
}(_react["default"].Component);

ModalDeprecated.propTypes = propTypes;
ModalDeprecated.defaultProps = defaultProps;

var _default = (0, _withStyles["default"])(styles, {
  withTheme: true
})(ModalDeprecated);

exports["default"] = _default;