react-mf-modal/themes/materialize/sidebar-modal.js

A markup free modal component for React

'use strict';

var _get = require('babel-runtime/helpers/get')['default'];

var _inherits = require('babel-runtime/helpers/inherits')['default'];

var _createClass = require('babel-runtime/helpers/create-class')['default'];

var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default'];

var _extends = require('babel-runtime/helpers/extends')['default'];

var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var defaultSize = 250;

var SimpleMaterializeModal = (function (_React$Component) {
  _inherits(SimpleMaterializeModal, _React$Component);

  function SimpleMaterializeModal() {
    _classCallCheck(this, SimpleMaterializeModal);

    _get(Object.getPrototypeOf(SimpleMaterializeModal.prototype), 'constructor', this).apply(this, arguments);
  }

  _createClass(SimpleMaterializeModal, [{
    key: 'render',
    value: function render() {
      var style;

      switch (this.props.position) {
        case 'left':
        case 'right':
        default:
          style = _extends({}, modalStyle, {
            top: 0,
            bottom: 0,
            width: this.props.width || defaultSize
          });
          //default right
          if (this.props.position === 'left') {
            style.left = 0;
          } else {
            style.right = 0;
          }
          break;
        case 'top':
        case 'bottom':
          style = _extends({}, modalStyle, {
            left: 0,
            right: 0,
            height: this.props.height || defaultSize
          });
          if (this.props.position === 'top') {
            style.top = 0;
          } else {
            style.bottom = 0;
          }
          break;
      }

      return _react2['default'].createElement(
        'div',
        { className: 'z-depth-2', style: style },
        this.props.children
      );
    }
  }], [{
    key: 'propTypes',
    value: {
      dismiss: _react2['default'].PropTypes.func.isRequired,
      resolve: _react2['default'].PropTypes.func.isRequired,
      position: _react2['default'].PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
      width: _react2['default'].PropTypes.number,
      height: _react2['default'].PropTypes.number
    },
    enumerable: true
  }, {
    key: 'defaultProps',
    value: {
      position: 'right'
    },
    enumerable: true
  }]);

  return SimpleMaterializeModal;
})(_react2['default'].Component);

exports['default'] = SimpleMaterializeModal;

var modalStyle = {
  display: 'block',
  position: 'fixed',
  zIndex: 1003,
  background: 'white'
};
module.exports = exports['default'];