react-mf-modal/themes/bootstrap/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;

/**
 * SidebarModal is the basic area on a screen side.
 */

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

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

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

  _createClass(SidebarBootstrapModal, [{
    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',
        { style: style },
        this.props.children
      );
    }
  }], [{
    key: 'propTypes',
    value: {
      /**
       * Choose your sidebar position
       */
      position: _react2['default'].PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
      /**
       * Width for left|right sidebars
       */
      width: _react2['default'].PropTypes.number,
      /**
       * Height for top|bottom sidebars
       */
      height: _react2['default'].PropTypes.number,
      /**
       * You HAVE TO pass dismiss function injected by the service
       */
      dismiss: _react2['default'].PropTypes.func.isRequired,
      /**
       * You HAVE TO pass resolve function injected by the service
       */
      resolve: _react2['default'].PropTypes.func.isRequired
    },
    enumerable: true
  }, {
    key: 'defaultProps',
    value: {
      position: 'right'
    },
    enumerable: true
  }]);

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

exports['default'] = SidebarBootstrapModal;

var modalStyle = {
  display: 'block',
  position: 'fixed',
  zIndex: 1050,
  background: 'white',
  boxShadow: '0 5px 15px rgba(0,0,0,.5)'
};
module.exports = exports['default'];