react-data-binding/lib/createContainer.js

do react data binding easily

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _get = function get(_x3, _x4, _x5) { var _again = true; _function: while (_again) { var object = _x3, property = _x4, receiver = _x5; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x3 = parent; _x4 = property; _x5 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

exports.createContainer = createContainer;

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 _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 _shallowequal = require('shallowequal');

var _shallowequal2 = _interopRequireDefault(_shallowequal);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reselect = require('reselect');

var _utils = require('./utils');

var _createEmptyContainer = require('./createEmptyContainer');

function createSelectGetter(s) {
  return function (state) {
    return state[s];
  };
}

function defaultMapStoreProps(store) {
  return {
    getStoreState: store.getState,
    setStoreState: store.setState,
    batchStore: store.batch
  };
}

function createContainer(selector_) {
  var option = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
  var _option$pure = option.pure;
  var pure = _option$pure === undefined ? true : _option$pure;
  var _option$mapStoreProps = option.mapStoreProps;
  var mapStoreProps = _option$mapStoreProps === undefined ? defaultMapStoreProps : _option$mapStoreProps;
  var ref = option.ref;
  var _option$storeName = option.storeName;
  var storeName = _option$storeName === undefined ? 'store' : _option$storeName;

  if (!selector_) {
    return (0, _createEmptyContainer.createEmptyContainer)(mapStoreProps, storeName);
  }

  var selector = selector_;

  if (typeof selector === 'object') {
    var selectMap = {};
    for (var s in selector) {
      if (selector.hasOwnProperty(s)) {
        selectMap[s] = createSelectGetter(selector[s]);
      }
    }
    selector = (0, _reselect.createStructuredSelector)(selectMap);
  }

  var shouldUpdateStateProps = selector.length > 1;

  return function create(WrappedComponent) {
    var Container = (function (_Component) {
      _inherits(Container, _Component);

      function Container(props, context) {
        _classCallCheck(this, Container);

        _get(Object.getPrototypeOf(Container.prototype), 'constructor', this).call(this, props, context);
        this.onChange = this.onChange.bind(this);
        this.state = {
          appState: this.getAppState() || {}
        };
      }

      // use componentWillMount instead of componentDidMount to support setState inside WrappedComponent's componentDidMount and componentWillMount

      _createClass(Container, [{
        key: 'componentWillMount',
        value: function componentWillMount() {
          if (!this.unsubscribe) {
            this.unsubscribe = this.context[storeName].subscribe(this.onChange);
          }
        }
      }, {
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
          var appState = undefined;
          if (pure) {
            var propsChanged = false;
            if (shouldUpdateStateProps) {
              propsChanged = !(0, _shallowequal2['default'])(nextProps, this.props);
            }
            if (propsChanged) {
              appState = this.getAppState(nextProps);
            }
          } else if (shouldUpdateStateProps) {
            appState = this.getAppState(nextProps);
          }
          if (appState) {
            this.setState({
              appState: appState
            });
          }
        }
      }, {
        key: 'shouldComponentUpdate',
        value: function shouldComponentUpdate(nextProps, nextState) {
          if (pure) {
            var propsChanged = !(0, _shallowequal2['default'])(nextProps, this.props);
            if (propsChanged) {
              return true;
            }
            return !(0, _shallowequal2['default'])(nextState.appState, this.state.appState);
          }
          return true;
        }
      }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
          if (this.unsubscribe) {
            this.unsubscribe();
            this.unsubscribe = null;
          }
        }
      }, {
        key: 'onChange',
        value: function onChange() {
          this.setState({
            appState: this.getAppState()
          });
        }
      }, {
        key: 'getAppState',
        value: function getAppState() {
          var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];

          var store = this.context[storeName];
          var state = store.getState();
          return shouldUpdateStateProps ? selector(state, props) : selector(state);
        }
      }, {
        key: 'render',
        value: function render() {
          var appState = this.state.appState;

          var store = this.context[storeName];
          return _react2['default'].createElement(WrappedComponent, _extends({}, appState, mapStoreProps(store), this.props, {
            ref: ref }));
        }
      }]);

      return Container;
    })(_react.Component);

    return (0, _utils.argumentContainer)(Container, WrappedComponent, storeName);
  };
}