@flexis/ui/components/Modal/Modal.js

Styleless React Components

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.setAppElement = setAppElement;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));

var _deleteProperty = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/reflect/delete-property"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));

var _tslib = require("tslib");

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

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

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

var _helpers = require("../../helpers");

var _toggleScrollBlock = _interopRequireDefault(require("../common/toggleScrollBlock"));

var _toggleAriaHide = _interopRequireDefault(require("../common/toggleAriaHide"));

var _StylableTransition = _interopRequireDefault(require("../StylableTransition"));

var _ModalSt = require("./Modal.st.css");

var _createElement = _react.default.createElement;
var PureComponent = _react.default.PureComponent,
    cloneElement = _react.default.cloneElement;
var ESC_KEY = 27;

var defaultCloseButton = _createElement("button", {
  type: "button"
}, "\xD7");

var appElement = null;

function setAppElement(appElementSource) {
  appElement = typeof appElementSource === 'string' ? typeof document === 'undefined' ? null : document.querySelector(appElementSource) : appElementSource;
}

var Modal =
/** @class */
function () {
  var Modal = /*#__PURE__*/function (_PureComponent) {
    (0, _inherits2.default)(Modal, _PureComponent);

    function Modal() {
      var _this;

      (0, _classCallCheck2.default)(this, Modal);
      _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Modal).apply(this, arguments));
      _this.unblockScroll = null;
      _this.unsubscribeKeyDown = null;
      _this.ariaShow = null;
      return _this;
    }

    (0, _createClass2.default)(Modal, [{
      key: "render",
      value: function render() {
        var _this$props = this.props,
            className = _this$props.className,
            onClose = _this$props.onClose,
            active = _this$props.active,
            centered = _this$props.centered,
            closeButton = _this$props.closeButton,
            children = _this$props.children,
            transitionDuration = _this$props.transitionDuration,
            props = (0, _objectWithoutProperties2.default)(_this$props, ["className", "onClose", "active", "centered", "closeButton", "children", "transitionDuration"]);
        (0, _deleteProperty.default)(props, 'wrapContent');
        return (0, _reactDom.createPortal)(_createElement(_StylableTransition.default, {
          in: active,
          states: _ModalSt.cssStates,
          timeout: transitionDuration,
          appear: true,
          unmountOnExit: true
        }, _createElement("div", {
          className: (0, _ModalSt.style)(_ModalSt.classes.root, className),
          onClick: onClose
        }, _createElement("div", (0, _extends2.default)({
          role: "dialog",
          "aria-modal": true
        }, props, {
          className: (0, _ModalSt.style)(_ModalSt.classes.window, {
            centered: centered
          }),
          onClick: this.onIgnoredEvent
        }), this.wrapContent(_createElement(_react.default.Fragment, null, closeButton && cloneElement(closeButton, {
          className: (0, _ModalSt.style)(_ModalSt.classes.closeButton, closeButton.props.className),
          onClick: onClose
        }), children))))), document.body);
      }
    }, {
      key: "wrapContent",
      value: function wrapContent(content) {
        var wrapContent = this.props.wrapContent;

        if (typeof wrapContent === 'function') {
          return wrapContent(content);
        }

        return content;
      }
    }, {
      key: "componentDidMount",
      value: function componentDidMount() {
        this.toggleEffects();
      }
    }, {
      key: "componentWillUnmount",
      value: function componentWillUnmount() {
        this.removeEffects();
      }
    }, {
      key: "componentDidUpdate",
      value: function componentDidUpdate(_ref) {
        var prevActive = _ref.active;
        var active = this.props.active;

        if (prevActive !== active) {
          this.toggleEffects();
        }
      }
    }, {
      key: "onIgnoredEvent",
      value: function onIgnoredEvent(event) {
        event.stopPropagation();
      }
    }, {
      key: "onEscPress",
      value: function onEscPress(event) {
        var onClose = this.props.onClose;

        if (event.keyCode === ESC_KEY && typeof onClose === 'function') {
          event.stopPropagation();
          onClose(event);
        }
      }
    }, {
      key: "toggleEffects",
      value: function toggleEffects() {
        var active = this.props.active;
        this.unblockScroll = (0, _toggleScrollBlock.default)(active, this.unblockScroll);

        if (appElement) {
          this.ariaShow = (0, _toggleAriaHide.default)(active, this.ariaShow, appElement);
        }

        var keyDownSubscribed = typeof this.unsubscribeKeyDown === 'function';

        if (active) {
          if (!keyDownSubscribed) {
            this.unsubscribeKeyDown = (0, _helpers.subscribeEvent)(document, 'keydown', this.onEscPress);
          }
        } else if (keyDownSubscribed) {
          this.unsubscribeKeyDown();
          this.unsubscribeKeyDown = null;
        }
      }
    }, {
      key: "removeEffects",
      value: function removeEffects() {
        if (typeof this.unblockScroll === 'function') {
          this.unblockScroll();
          this.unblockScroll = null;
        }

        if (typeof this.ariaShow === 'function') {
          this.ariaShow();
          this.ariaShow = null;
        }

        if (typeof this.unsubscribeKeyDown === 'function') {
          this.unsubscribeKeyDown();
          this.unsubscribeKeyDown = null;
        }
      }
    }]);
    return Modal;
  }(PureComponent);

  process.env.NODE_ENV !== "production" ? Modal.propTypes = {
    onClose: _propTypes.default.func,
    active: _propTypes.default.bool,
    centered: _propTypes.default.bool,
    closeButton: _propTypes.default.element,
    children: _propTypes.default.node.isRequired,
    transitionDuration: _propTypes.default.number,
    wrapContent: _propTypes.default.func
  } : void 0;
  Modal.defaultProps = {
    active: false,
    centered: false,
    closeButton: defaultCloseButton,
    transitionDuration: 0
  };
  (0, _tslib.__decorate)([(0, _helpers.Bind)()], Modal.prototype, "onEscPress", null);
  return Modal;
}();

var _default = Modal;
exports.default = _default;

if (typeof document === 'undefined') {
  Modal.prototype.render = function () {
    return null;
  };
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL01vZGFsL01vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7O0FBU0E7O0FBR0E7O0FBQ0E7O0FBS0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7Ozs7O0FBcUJBLElBQU0sT0FBTyxHQUFHLEVBQWhCOztBQUVBLElBQU0sa0JBQWtCLEdBQ3ZCO0FBQVEsRUFBQSxJQUFJLEVBQUM7QUFBYixVQUREOztBQU1BLElBQUksVUFBVSxHQUFHLElBQWpCOztBQUVNLFNBQVUsYUFBVixDQUF3QixnQkFBeEIsRUFBd0M7QUFDN0MsRUFBQSxVQUFVLEdBQUcsT0FBTyxnQkFBUCxLQUE0QixRQUE1QixHQUNULE9BQU8sUUFBUCxLQUFvQixXQUFwQixHQUNBLElBREEsR0FFQSxRQUFRLENBQUMsYUFBVCxDQUF1QixnQkFBdkIsQ0FIUyxHQUlWLGdCQUpIO0FBS0E7O0FBRUQsSUFBQSxLQUFBO0FBQUE7QUFBQSxZQUFBO0FBQUEsTUFBcUIsS0FBckI7QUFBQTs7QUFBQSxxQkFBQTtBQUFBOztBQUFBOztBQW1CUyxZQUFBLGFBQUEsR0FBNEIsSUFBNUI7QUFDQSxZQUFBLGtCQUFBLEdBQWlDLElBQWpDO0FBQ0EsWUFBQSxRQUFBLEdBQXVCLElBQXZCO0FBckJUO0FBc0xDOztBQXRMRDtBQUFBO0FBQUEsK0JBdUJPO0FBQUEsMEJBV0QsS0FBSyxLQVhKO0FBQUEsWUFHSixTQUhJLGVBR0osU0FISTtBQUFBLFlBSUosT0FKSSxlQUlKLE9BSkk7QUFBQSxZQUtKLE1BTEksZUFLSixNQUxJO0FBQUEsWUFNSixRQU5JLGVBTUosUUFOSTtBQUFBLFlBT0osV0FQSSxlQU9KLFdBUEk7QUFBQSxZQVFKLFFBUkksZUFRSixRQVJJO0FBQUEsWUFTSixrQkFUSSxlQVNKLGtCQVRJO0FBQUEsWUFVRCxLQVZDO0FBYUwscUNBQXVCLEtBQXZCLEVBQThCLGFBQTlCO0FBRUEsZUFBTyw0QkFDTixlQUFDLDJCQUFEO0FBQ0MsVUFBQSxFQUFFLEVBQUUsTUFETDtBQUVDLFVBQUEsTUFBTSxFQUFFLGtCQUZUO0FBR0MsVUFBQSxPQUFPLEVBQUUsa0JBSFY7QUFJQyxVQUFBLE1BQU0sTUFKUDtBQUtDLFVBQUEsYUFBYTtBQUxkLFdBT0M7QUFDQyxVQUFBLFNBQVMsRUFBRSxvQkFBTSxpQkFBUSxJQUFkLEVBQW9CLFNBQXBCLENBRFo7QUFFQyxVQUFBLE9BQU8sRUFBRTtBQUZWLFdBSUM7QUFDQyxVQUFBLElBQUksRUFBQyxRQUROO0FBRUM7QUFGRCxXQUdLLEtBSEw7QUFJQyxVQUFBLFNBQVMsRUFBRSxvQkFBTSxpQkFBUSxNQUFkLEVBQXNCO0FBQ2hDLFlBQUEsUUFBUSxFQUFSO0FBRGdDLFdBQXRCLENBSlo7QUFPQyxVQUFBLE9BQU8sRUFBRSxLQUFLO0FBUGYsWUFTRSxLQUFLLFdBQUwsQ0FDQSw4Q0FDRSxXQUFXLElBQUksWUFBWSxDQUMzQixXQUQyQixFQUUzQjtBQUNDLFVBQUEsU0FBUyxFQUFFLG9CQUFNLGlCQUFRLFdBQWQsRUFBMkIsV0FBVyxDQUFDLEtBQVosQ0FBa0IsU0FBN0MsQ0FEWjtBQUVDLFVBQUEsT0FBTyxFQUFJO0FBRlosU0FGMkIsQ0FEN0IsRUFRRSxRQVJGLENBREEsQ0FURixDQUpELENBUEQsQ0FETSxFQW9DSixRQUFRLENBQUMsSUFwQ0wsQ0FBUDtBQXFDQTtBQTNFRjtBQUFBO0FBQUEsa0NBNkVxQixPQTdFckIsRUE2RStDO0FBQUEsWUFHNUMsV0FINEMsR0FJekMsS0FBSyxLQUpvQyxDQUc1QyxXQUg0Qzs7QUFNN0MsWUFBSSxPQUFPLFdBQVAsS0FBdUIsVUFBM0IsRUFBdUM7QUFDdEMsaUJBQU8sV0FBVyxDQUFDLE9BQUQsQ0FBbEI7QUFDQTs7QUFFRCxlQUFPLE9BQVA7QUFDQTtBQXhGRjtBQUFBO0FBQUEsMENBMEZrQjtBQUNoQixhQUFLLGFBQUw7QUFDQTtBQTVGRjtBQUFBO0FBQUEsNkNBOEZxQjtBQUNuQixhQUFLLGFBQUw7QUFDQTtBQWhHRjtBQUFBO0FBQUEsK0NBa0drRDtBQUFBLFlBQXBCLFVBQW9CLFFBQTVCLE1BQTRCO0FBQUEsWUFHL0MsTUFIK0MsR0FJNUMsS0FBSyxLQUp1QyxDQUcvQyxNQUgrQzs7QUFNaEQsWUFBSSxVQUFVLEtBQUssTUFBbkIsRUFBMkI7QUFDMUIsZUFBSyxhQUFMO0FBQ0E7QUFDRDtBQTNHRjtBQUFBO0FBQUEscUNBNkd3QixLQTdHeEIsRUE2R3lEO0FBQ3ZELFFBQUEsS0FBSyxDQUFDLGVBQU47QUFDQTtBQS9HRjtBQUFBO0FBQUEsaUNBa0hvQixLQWxIcEIsRUFrSHdDO0FBQUEsWUFHckMsT0FIcUMsR0FJbEMsS0FBSyxLQUo2QixDQUdyQyxPQUhxQzs7QUFNdEMsWUFBSSxLQUFLLENBQUMsT0FBTixLQUFrQixPQUFsQixJQUNBLE9BQU8sT0FBUCxLQUFtQixVQUR2QixFQUVFO0FBQ0QsVUFBQSxLQUFLLENBQUMsZUFBTjtBQUNBLFVBQUEsT0FBTyxDQUFDLEtBQUQsQ0FBUDtBQUNBO0FBQ0Q7QUE5SEY7QUFBQTtBQUFBLHNDQWdJc0I7QUFBQSxZQUduQixNQUhtQixHQUloQixLQUFLLEtBSlcsQ0FHbkIsTUFIbUI7QUFNcEIsYUFBSyxhQUFMLEdBQXFCLGdDQUNwQixNQURvQixFQUVwQixLQUFLLGFBRmUsQ0FBckI7O0FBS0EsWUFBSSxVQUFKLEVBQWdCO0FBQ2YsZUFBSyxRQUFMLEdBQWdCLDZCQUNmLE1BRGUsRUFFZixLQUFLLFFBRlUsRUFHZixVQUhlLENBQWhCO0FBS0E7O0FBRUQsWUFBTSxpQkFBaUIsR0FBRyxPQUFPLEtBQUssa0JBQVosS0FBbUMsVUFBN0Q7O0FBRUEsWUFBSSxNQUFKLEVBQVk7QUFFWCxjQUFJLENBQUMsaUJBQUwsRUFBd0I7QUFDdkIsaUJBQUssa0JBQUwsR0FBMEIsNkJBQ3pCLFFBRHlCLEVBRXpCLFNBRnlCLEVBR3pCLEtBQUssVUFIb0IsQ0FBMUI7QUFLQTtBQUNELFNBVEQsTUFVQSxJQUFJLGlCQUFKLEVBQXVCO0FBQ3RCLGVBQUssa0JBQUw7QUFDQSxlQUFLLGtCQUFMLEdBQTBCLElBQTFCO0FBQ0E7QUFDRDtBQW5LRjtBQUFBO0FBQUEsc0NBcUtzQjtBQUVwQixZQUFJLE9BQU8sS0FBSyxhQUFaLEtBQThCLFVBQWxDLEVBQThDO0FBQzdDLGVBQUssYUFBTDtBQUNBLGVBQUssYUFBTCxHQUFxQixJQUFyQjtBQUNBOztBQUVELFlBQUksT0FBTyxLQUFLLFFBQVosS0FBeUIsVUFBN0IsRUFBeUM7QUFDeEMsZUFBSyxRQUFMO0FBQ0EsZUFBSyxRQUFMLEdBQWdCLElBQWhCO0FBQ0E7O0FBRUQsWUFBSSxPQUFPLEtBQUssa0JBQVosS0FBbUMsVUFBdkMsRUFBbUQ7QUFDbEQsZUFBSyxrQkFBTDtBQUNBLGVBQUssa0JBQUwsR0FBMEIsSUFBMUI7QUFDQTtBQUNEO0FBckxGO0FBQUE7QUFBQSxJQUFtQyxhQUFuQzs7QUFFUSwwQ0FBQSxLQUFBLENBQUEsU0FBQSxHQUFZO0FBQ2xCLElBQUEsT0FBTyxFQUFhLG1CQUFVLElBRFo7QUFFbEIsSUFBQSxNQUFNLEVBQWMsbUJBQVUsSUFGWjtBQUdsQixJQUFBLFFBQVEsRUFBWSxtQkFBVSxJQUhaO0FBSWxCLElBQUEsV0FBVyxFQUFTLG1CQUFVLE9BSlo7QUFLbEIsSUFBQSxRQUFRLEVBQVksbUJBQVUsSUFBVixDQUFlLFVBTGpCO0FBTWxCLElBQUEsa0JBQWtCLEVBQUUsbUJBQVUsTUFOWjtBQU9sQixJQUFBLFdBQVcsRUFBUyxtQkFBVTtBQVBaLEdBQVo7QUFVQSxFQUFBLEtBQUEsQ0FBQSxZQUFBLEdBQWU7QUFDckIsSUFBQSxNQUFNLEVBQWMsS0FEQztBQUVyQixJQUFBLFFBQVEsRUFBWSxLQUZDO0FBR3JCLElBQUEsV0FBVyxFQUFTLGtCQUhDO0FBSXJCLElBQUEsa0JBQWtCLEVBQUU7QUFKQyxHQUFmO0FBc0dQLHlCQUFBLENBREMsb0JBQ0QsQ0FBQSxFLGVBQUEsRSxZQUFBLEVBWUMsSUFaRDtBQW9FRCxTQUFBLEtBQUE7QUFBQyxDQXRMRCxFQUFBOztlQUFxQixLOzs7QUF3THJCLElBQUksT0FBTyxRQUFQLEtBQW9CLFdBQXhCLEVBQXFDO0FBQ3BDLEVBQUEsS0FBSyxDQUFDLFNBQU4sQ0FBZ0IsTUFBaEIsR0FBeUI7QUFBQSxXQUFNLElBQU47QUFBQSxHQUF6QjtBQUNBIiwic291cmNlUm9vdCI6IiJ9