cf-component-modal/lib/Modal.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _reactModal = require('react-modal2');

var _reactModal2 = _interopRequireDefault(_reactModal);

var _cfStyleContainer = require('cf-style-container');

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

// document.body.lastElementChild polyfill
if (window) {
  (function (constructor) {
    if (constructor && constructor.prototype && constructor.prototype.lastElementChild === null) {
      Object.defineProperty(constructor.prototype, 'lastElementChild', {
        get: function () {
          var node,
              nodes = this.childNodes,
              i = nodes.length - 1;
          while (node = nodes[i--]) {
            if (node.nodeType === 1) {
              return node;
            }
          }
          return null;
        }
      });
    }
  })(window.Node || window.Element);
}

const BackdropScroller = (0, _cfStyleContainer.createComponent)(({ theme }) => ({
  position: 'fixed',
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  zIndex: theme.zIndexModal,
  overflow: 'auto',
  overflowX: 'hidden',
  overflowY: 'auto',
  '-webkit-overflow-scrolling': 'touch'
}));
BackdropScroller.setDisplayName('BackdropScroller');

const BackdropOuter = (0, _cfStyleContainer.createComponent)(() => ({
  position: 'relative',
  width: '100%',
  height: '100%',
  display: 'table'
}));
BackdropOuter.setDisplayName('BackdropOuter');

const modalStyles = ({ theme, width }) => ({
  position: 'relative',
  width: '100%',
  maxWidth: width ? getWidth(width) : '30rem',
  margin: '0 auto',
  background: theme.colors.white,
  transformOrigin: 'center',
  backfaceVisibility: 'hidden',
  borderRadius: '2px',
  boxShadow: '0 1px 15px rgba(0,0,0,.75)',
  '&:focus': {
    outline: 'none'
  }
});

const backdropStyles = () => ({
  display: 'table-cell',
  verticalAlign: 'middle',
  padding: '1.5rem',
  '-webkit-transform-origin': 'center',
  transformOrigin: 'center',
  background: 'rgba(0,0,0,.7)'
});

const getWidth = width => {
  switch (width) {
    case 'wide':
      return '40rem';
    case 'extra-wide':
      return '53.33rem';
    case 'super-extra-wide':
      return '80rem';
    default:
      return '30rem';
  }
};

class Modal extends _react2.default.Component {
  render() {
    const {
      styles,
      isOpen,
      closeOnEsc,
      closeOnBackdropClick,
      onRequestClose,
      children
    } = this.props;

    return isOpen ? _react2.default.createElement(
      _reactPortal.Portal,
      null,
      _react2.default.createElement(
        BackdropScroller,
        null,
        _react2.default.createElement(
          BackdropOuter,
          null,
          _react2.default.createElement(
            _reactModal2.default,
            {
              key: 'modal',
              backdropClassName: styles.backdropStyles,
              modalClassName: styles.modalStyles,
              closeOnEsc: closeOnEsc,
              closeOnBackdropClick: closeOnBackdropClick,
              onClose: onRequestClose
            },
            children
          )
        )
      )
    ) : null;
  }
}

Modal.propTypes = {
  styles: _propTypes2.default.object,
  isOpen: _propTypes2.default.bool.isRequired,
  onRequestClose: _propTypes2.default.func.isRequired,
  closeOnEsc: _propTypes2.default.bool,
  closeOnBackdropClick: _propTypes2.default.bool,
  children: _propTypes2.default.node,
  width: _propTypes2.default.string
};

Modal.defaultProps = {
  closeOnEsc: true,
  closeOnBackdropClick: true
};
Modal.displayName = 'Modal';

_reactModal2.default.getApplicationElement = function () {
  return document.body.lastElementChild;
};

exports.default = (0, _cfStyleContainer.createComponentStyles)({ modalStyles, backdropStyles }, Modal);