redux-plugins-immutable-react/dist/lib/LoadPluginComponent.js

React components that work with redux-plugins-immutable

'use strict';

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

var _jsx = function () { var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7; return function createRawReactElement(type, props, key, children) { var defaultProps = type && type.defaultProps; var childrenLength = arguments.length - 3; if (!props && childrenLength !== 0) { props = {}; } if (props && defaultProps) { for (var propName in defaultProps) { if (props[propName] === void 0) { props[propName] = defaultProps[propName]; } } } else if (!props) { props = defaultProps || {}; } if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { var childArray = Array(childrenLength); for (var i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 3]; } props.children = childArray; } return { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key === undefined ? null : '' + key, ref: null, props: props, _owner: null }; }; }();

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _immutable = require('immutable');

var Immutable = _interopRequireWildcard(_immutable);

var _reactRedux = require('react-redux');

var _warning = require('warning');

var _warning2 = _interopRequireDefault(_warning);

var _reduxPluginsImmutable = require('redux-plugins-immutable');

var _propTypes = require('./util/propTypes');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var LOADING = _reduxPluginsImmutable.pluginTypes.LOADING;
var LOADED = _reduxPluginsImmutable.pluginTypes.LOADED;
var NOT_LOADED = _reduxPluginsImmutable.pluginTypes.NOT_LOADED;
var loadPlugin = _reduxPluginsImmutable.pluginActions.loadPlugin;

var DefaultSkin = function (_Component) {
  _inherits(DefaultSkin, _Component);

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

    return _possibleConstructorReturn(this, Object.getPrototypeOf(DefaultSkin).apply(this, arguments));
  }

  _createClass(DefaultSkin, [{
    key: 'render',
    value: function render() {
      var _props = this.props;
      var loading = _props.loading;
      var pluginName = _props.pluginName;
      var loadError = _props.loadError;
      var children = _props.children;


      if (loading) {
        return _jsx('h1', {}, void 0, 'Loading ', pluginName, ' plugin...');
      }
      if (loadError) {
        return _jsx('h1', {}, void 0, 'Failed to load ', pluginName || '', ' plugin: ', loadError.message || loadError);
      }
      if (!children) {
        return _jsx('h1', {}, void 0, 'Couldn\'t find component for ' + (pluginName || '') + ' plugin');
      }
      return children;
    }
  }]);

  return DefaultSkin;
}(_react.Component);

DefaultSkin.propTypes = {
  children: _react.PropTypes.any,
  loading: _react.PropTypes.bool,
  loadError: _react.PropTypes.any,
  pluginName: _react.PropTypes.string.isRequired
};


/**
 * Renders a Component from a plugin that may not be loaded.  If it is not loaded,
 * this will show a loading alert and dispatch an action to load the plugin, rendering
 * the Component when the plugin finishes loading.
 *
 * All you have to do is provide the pluginKey prop, and one of the following two props
 * that specify what Component from the plugin to use:
 * * componentKey prop - use plugin.getIn(['components', componentKey])
 * * getComponent prop - use getComponent(plugin)
 */

var LoadPluginComponent = function (_Component2) {
  _inherits(LoadPluginComponent, _Component2);

  function LoadPluginComponent() {
    var _Object$getPrototypeO;

    var _temp, _this2, _ret;

    _classCallCheck(this, LoadPluginComponent);

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

    return _ret = (_temp = (_this2 = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(LoadPluginComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this2), _this2.getComponent = function (plugin) {
      var props = arguments.length <= 1 || arguments[1] === undefined ? _this2.props : arguments[1];
      var getComponent = props.getComponent;
      var componentKey = props.componentKey;

      if (getComponent) return getComponent(plugin);
      if (componentKey) return plugin.getIn(['components', componentKey]);
    }, _this2.loadPluginIfNecessary = function () {
      var props = arguments.length <= 0 || arguments[0] === undefined ? _this2.props : arguments[0];
      var plugin = props.plugin;
      var pluginKey = props.pluginKey;
      var dispatch = props.dispatch;

      if (plugin && plugin.get('loadStatus') === NOT_LOADED && !_this2.getComponent(plugin, props)) {
        dispatch(loadPlugin(pluginKey));
      }
    }, _temp), _possibleConstructorReturn(_this2, _ret);
  }

  _createClass(LoadPluginComponent, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.loadPluginIfNecessary();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var plugin = nextProps.plugin;
      var pluginKey = nextProps.pluginKey;
      var getComponent = nextProps.getComponent;
      var componentKey = nextProps.componentKey;

      (0, _warning2.default)(getComponent || componentKey, 'you must provide a getComponent or componentKey');
      if (pluginKey !== this.props.pluginKey || getComponent !== this.props.getComponent || componentKey !== this.props.componentKey || plugin && this.props.plugin && plugin !== this.props.plugin && plugin.get('loadStatus') === NOT_LOADED && this.props.plugin.get('loadStatus') === LOADED) {
        this.loadPluginIfNecessary(nextProps);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props;
      var pluginKey = _props2.pluginKey;
      var plugin = _props2.plugin;
      var componentProps = _props2.componentProps;
      var children = _props2.children;

      var skin = this.context.LoadPluginComponentSkin || DefaultSkin;

      var pluginName = pluginKey;
      var component = void 0,
          loading = void 0,
          loadError = void 0;

      if (plugin) {
        pluginName = plugin.get('name');
        component = this.getComponent(plugin);
        loadError = plugin.get('loadError');
        loading = plugin.get('loadStatus') === LOADING || plugin.get('loadStatus') === NOT_LOADED && !component && !loadError;
      } else {
        loading = false;
        loadError = new Error('plugin ' + pluginKey.toString() + ' not found');
      }

      if (children) return children({ loading: loading, loadError: loadError, component: component });

      var finalChildren = void 0;

      if (_react2.default.isValidElement(component)) {
        if (component && componentProps) finalChildren = _react2.default.cloneElement(component, componentProps);
      } else if (component) {
        finalChildren = _react2.default.createElement(component, componentProps || {});
      }

      return _react2.default.createElement(skin, { pluginName: pluginName, loading: loading, loadError: loadError, children: finalChildren });
    }
  }]);

  return LoadPluginComponent;
}(_react.Component);

LoadPluginComponent.contextTypes = {
  LoadPluginComponentSkin: _react.PropTypes.any
};
LoadPluginComponent.propTypes = {
  dispatch: _react.PropTypes.func.isRequired,
  getComponent: _react.PropTypes.func,
  children: _react.PropTypes.func,
  componentKey: _propTypes.mapKey,
  componentProps: _react.PropTypes.object,
  pluginKey: _propTypes.mapKey.isRequired,
  plugin: _react.PropTypes.instanceOf(Immutable.Map)
};


function select(state, props) {
  return {
    plugin: state.getIn(['plugins', props.pluginKey])
  };
}

exports.default = (0, _reactRedux.connect)(select)(LoadPluginComponent);