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

Styleless React Components

import _extends from "@babel/runtime-corejs3/helpers/extends";
import _Reflect$deleteProperty from "@babel/runtime-corejs3/core-js-stable/reflect/delete-property";
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs3/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
import _inherits from "@babel/runtime-corejs3/helpers/inherits";
import { __decorate } from "tslib";
import React from 'react';
var _createElement = React.createElement;
var PureComponent = React.PureComponent,
    cloneElement = React.cloneElement;
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';
import { Bind, subscribeEvent } from '../../helpers';
import toggleScrollBlock from '../common/toggleScrollBlock';
import toggleAriaHide from '../common/toggleAriaHide';
import StylableTransition from '../StylableTransition';
import { style, classes, cssStates } from './Modal.st.css';
var ESC_KEY = 27;

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

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

var Modal =
/** @class */
function () {
  var Modal = /*#__PURE__*/function (_PureComponent) {
    _inherits(Modal, _PureComponent);

    function Modal() {
      var _this;

      _classCallCheck(this, Modal);

      _this = _possibleConstructorReturn(this, _getPrototypeOf(Modal).apply(this, arguments));
      _this.unblockScroll = null;
      _this.unsubscribeKeyDown = null;
      _this.ariaShow = null;
      return _this;
    }

    _createClass(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 = _objectWithoutProperties(_this$props, ["className", "onClose", "active", "centered", "closeButton", "children", "transitionDuration"]);

        _Reflect$deleteProperty(props, 'wrapContent');

        return createPortal(_createElement(StylableTransition, {
          in: active,
          states: cssStates,
          timeout: transitionDuration,
          appear: true,
          unmountOnExit: true
        }, _createElement("div", {
          className: style(classes.root, className),
          onClick: onClose
        }, _createElement("div", _extends({
          role: "dialog",
          "aria-modal": true
        }, props, {
          className: style(classes.window, {
            centered: centered
          }),
          onClick: this.onIgnoredEvent
        }), this.wrapContent(_createElement(React.Fragment, null, closeButton && cloneElement(closeButton, {
          className: style(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 = toggleScrollBlock(active, this.unblockScroll);

        if (appElement) {
          this.ariaShow = toggleAriaHide(active, this.ariaShow, appElement);
        }

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

        if (active) {
          if (!keyDownSubscribed) {
            this.unsubscribeKeyDown = 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.func,
    active: PropTypes.bool,
    centered: PropTypes.bool,
    closeButton: PropTypes.element,
    children: PropTypes.node.isRequired,
    transitionDuration: PropTypes.number,
    wrapContent: PropTypes.func
  } : void 0;
  Modal.defaultProps = {
    active: false,
    centered: false,
    closeButton: defaultCloseButton,
    transitionDuration: 0
  };

  __decorate([Bind()], Modal.prototype, "onEscPress", null);

  return Modal;
}();

export default Modal;

if (typeof document === 'undefined') {
  Modal.prototype.render = function () {
    return null;
  };
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL01vZGFsL01vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEtBQVAsTUFRTyxPQVJQOzs7O0FBU0EsU0FDQyxZQURELFFBRU8sV0FGUDtBQUdBLE9BQU8sU0FBUCxNQUFzQixZQUF0QjtBQUNBLFNBRUMsSUFGRCxFQUdDLGNBSEQsUUFJTyxlQUpQO0FBS0EsT0FBTyxpQkFBUCxNQUE4Qiw2QkFBOUI7QUFDQSxPQUFPLGNBQVAsTUFBMkIsMEJBQTNCO0FBQ0EsT0FBTyxrQkFBUCxNQUErQix1QkFBL0I7QUFDQSxTQUNDLEtBREQsRUFFQyxPQUZELEVBR0MsU0FIRCxRQUlPLGdCQUpQO0FBcUJBLElBQU0sT0FBTyxHQUFHLEVBQWhCOztBQUVBLElBQU0sa0JBQWtCLEdBQ3ZCO0FBQVEsRUFBQSxJQUFJLEVBQUM7QUFBYixVQUREOztBQU1BLElBQUksVUFBVSxHQUFHLElBQWpCO0FBRUEsT0FBTSxTQUFVLGFBQVYsQ0FBd0IsZ0JBQXhCLEVBQXdDO0FBQzdDLEVBQUEsVUFBVSxHQUFHLE9BQU8sZ0JBQVAsS0FBNEIsUUFBNUIsR0FDVCxPQUFPLFFBQVAsS0FBb0IsV0FBcEIsR0FDQSxJQURBLEdBRUEsUUFBUSxDQUFDLGFBQVQsQ0FBdUIsZ0JBQXZCLENBSFMsR0FJVixnQkFKSDtBQUtBOztBQUVELElBQUEsS0FBQTtBQUFBO0FBQUEsWUFBQTtBQUFBLE1BQXFCLEtBQXJCO0FBQUE7O0FBQUEscUJBQUE7QUFBQTs7QUFBQTs7O0FBbUJTLFlBQUEsYUFBQSxHQUE0QixJQUE1QjtBQUNBLFlBQUEsa0JBQUEsR0FBaUMsSUFBakM7QUFDQSxZQUFBLFFBQUEsR0FBdUIsSUFBdkI7QUFyQlQ7QUFzTEM7O0FBdExEO0FBQUE7QUFBQSwrQkF1Qk87QUFBQSwwQkFXRCxLQUFLLEtBWEo7QUFBQSxZQUdKLFNBSEksZUFHSixTQUhJO0FBQUEsWUFJSixPQUpJLGVBSUosT0FKSTtBQUFB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