"use strict";

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

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

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

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

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

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

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

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

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

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

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

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

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; } }

// Style
var classes = {};
/* istanbul ignore next */

if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = {
  "slate": "#384248",
  "blue": "#118CFD",
  "green": "#12CA93",
  "red": "#E95F6A",
  "yellow": "#F7C543",
  "purple": "#8470BE",
  "graphite": "#4F5A66",
  "shale": "#939EAE",
  "chalk": "#c6cbd3",
  "ivory": "#F0F0F0",
  "lightGray": "#F8F8F8",
  "white": "#FFF",
  "Modal": "_3g8wC-Modal",
  "Modal_open": "_2SFZy-Modal_open",
  "Modal_scrollable": "TsCUE-Modal_scrollable",
  "Modal_sm": "_3bRHu-Modal_sm",
  "Modal_md": "D7Fk_-Modal_md",
  "Modal_lg": "_1kEX7-Modal_lg",
  "Modal-Header": "KJdTC-Modal-Header",
  "Modal-Body": "_2495S-Modal-Body",
  "Modal-Footer": "Eig39-Modal-Footer",
  "Modal-Header-Close": "_12uMh-Modal-Header-Close",
  "shake": "_3cUAj-shake"
};

var classy = function classy() {
  for (var _len = arguments.length, classlist = new Array(_len), _key = 0; _key < _len; _key++) {
    classlist[_key] = arguments[_key];
  }

  return classlist.filter(function (e) {
    return e;
  }).join(' ');
};

var Modal = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(Modal, _React$Component);

  var _super = _createSuper(Modal);

  function Modal(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Modal);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClickOut", function (_ref) {
      var target = _ref.target;
      if (target === _this.root) _this.toggle(false);
    });
    _this.root = typeof window !== 'undefined' ? document.querySelector(props.target) : null;
    _this.el = /*#__PURE__*/_react["default"].createRef();
    _this.state = {
      open: !!props.open
    };
    return _this;
  }

  (0, _createClass2["default"])(Modal, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.root) {
        if (!this.props.noDismiss) {
          this.root.addEventListener('mousedown', this.handleClickOut);
          if (this.state.open) this.root.classList.add(classes.Modal_open);
        }

        if (this.props.noDismiss) this.root.classList.add('ModalWrapper_noDismiss');
        if (this.props.verticalCenter) this.root.classList.add('ModalWrapper_verticalCenter');
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.root) this.root.removeEventListener('mousedown', this.handleClickOut);
    }
  }, {
    key: "toggle",
    value: function toggle(toState) {
      var _this2 = this;

      // eslint-disable-next-line no-param-reassign
      toState = typeof toState === 'boolean' ? toState : !this.state.open;
      this.setState({
        open: toState
      });
      setTimeout(function () {
        var _this2$props = _this2.props,
            onClose = _this2$props.onClose,
            onOpen = _this2$props.onOpen;
        var el = _this2.el.current;

        if (toState) {
          _this2.root.classList.add(classes.Modal_open);

          el.focus(); // focus modal

          if (typeof onOpen === 'function') onOpen();
        } else {
          _this2.root.classList.remove(classes.Modal_open);

          if (typeof onClose === 'function') onClose();
        }
      }, 0);
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var open = this.state.open;
      var _this$props = this.props,
          className = _this$props.className,
          children = _this$props.children,
          noDismiss = _this$props.noDismiss,
          scrollable = _this$props.scrollable,
          size = _this$props.size,
          verticalCenter = _this$props.verticalCenter,
          attrs = (0, _objectWithoutProperties2["default"])(_this$props, ["className", "children", "noDismiss", "scrollable", "size", "verticalCenter"]);
      var modalClasses = ['Box', 'Box_modal', 'Modal', open && 'Modal_open', scrollable && 'Modal_scrollable', size && "Modal_".concat(size), verticalCenter && 'Modal_verticalCenter', className].map(function (cn) {
        return cn in classes ? classes[cn] : cn;
      });
      return this.root ? /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement("section", (0, _extends2["default"])({
        ref: this.el,
        "aria-hidden": !open,
        "aria-modal": true,
        className: classy.apply(void 0, (0, _toConsumableArray2["default"])(modalClasses)),
        onKeyDown: function onKeyDown(_ref2) {
          var key = _ref2.key;
          if (!noDismiss && key === 'Escape') _this3.toggle(false);
        },
        role: "dialog",
        tabIndex: 0
      }, attrs), this.props.children), this.root) : null;
    }
  }]);
  return Modal;
}(_react["default"].Component);

(0, _defineProperty2["default"])(Modal, "propTypes", {
  children: _propTypes["default"].any,
  className: _propTypes["default"].string,
  id: _propTypes["default"].string,
  noDismiss: _propTypes["default"].bool,
  onClose: _propTypes["default"].func,
  onOpen: _propTypes["default"].func,

  /** The modal's initial state.
   */
  open: _propTypes["default"].bool,
  scrollable: _propTypes["default"].bool,
  size: _propTypes["default"].oneOf(['sm', 'md', 'lg']),

  /** DOM element to inject the modal in to.
   */
  target: _propTypes["default"].string,
  verticalCenter: _propTypes["default"].bool
});
(0, _defineProperty2["default"])(Modal, "defaultProps", {
  open: false,
  target: 'body'
});
var _default = Modal;
exports["default"] = _default;