# Code coverage report for lib/addons/ReactMixin.js

## Statements: 89.66% (52 / 58) Branches: 76.92% (20 / 26) Functions: 91.67% (11 / 12) Lines: 94.12% (48 / 51) Ignored: none

All files » lib/addons/ » ReactMixin.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166

    1

    17

    16

    1
    1
    1

    1
    6
    2

    6

    29

    17
    17
    17

    17

    1

    16

    1
    1

    1
    1

    1

    1

    27
    27
    27
    27

    27
    7

    7
    20

    27
    10
    10

    10

    10

    10

    10

    10

    10
    9
    9

    10

    10

    10

    27

    1
    12

     /**
     * React Mixin
     *
     * Exports a function that creates a React component mixin. The mixin exposes
     * a Flux instance as `this.flux`. This requires that flux be passed as either
     * context or as a prop (prop takes precedence). Children also are given access
     * to flux instance as `context.flux`.
     *
     * It also adds the method `connectToStores()`, which ensures that the component
     * state stays in sync with the specified Flux stores. See the inline docs
     * of `connectToStores` for details.
     *
     * Any arguments passed to the mixin creator are passed to `connectToStores()`
     * and used as the return value of `getInitialState()`. This lets you handle
     * all of the state initialization and updates in a single place, while removing
     * the burden of manually adding and removing store listeners.
     *
     * @example
     * let Component = React.createClass({
     *   mixins: [ReactMixin({
     *     storeA: store => ({
     *       foo: store.state.a,
     *     }),
     *     storeB: store => ({
     *       bar: store.state.b,
     *     })
     *   }]
     * });
     */

    "use strict";

    var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };

    var _defineProperty = function (obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); };

    var _toArray = function (arr) { return Array.isArray(arr) ? arr : Array.from(arr); };

    var PropTypes = require("react").PropTypes;
    var Flux = require("../Flux").Flux;
    var assign = _interopRequire(require("object-assign"));

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

      return {

        contextTypes: {
          flux: PropTypes.instanceOf(Flux) },

        childContextTypes: {
          flux: PropTypes.instanceOf(Flux) },

        getChildContext: function getChildContext() {
          return {
            flux: this.flux
          };
        },

        getInitialState: function getInitialState() {
          var _ref;
          this._flux_listeners = {};
          this.flux = this.props.flux || this.context.flux;

          if (!(this.flux instanceof Flux)) {
            // TODO: print the actual class name here
            throw new Error("ReactMixin: Could not find Flux instance. Ensure that your component " + "has either `this.context.flux` or `this.props.flux`.");
          }

          return (_ref = this).connectToStores.apply(_ref, _toArray(args));
        },

        componentWillUnmount: function componentWillUnmount() {
          for (var key in this._flux_listeners) {
            Iif (!this._flux_listeners.hasOwnProperty(key)) continue;

            var store = this.flux.getStore(key);
            Iif (typeof store === "undefined") continue;

            var listener = this._flux_listeners[key];

            store.removeListener("change", listener);
          }
        },

        /**
         * Connect component to stores, get the combined initial state, and
         * subscribe to future changes. There are three ways to call it. The
         * simplest is to pass a single store key and, optionally, a state getter.
         * The state getter is a function that takes the store as a parameter and
         * returns the state that should be passed to the component's `setState()`.
         * If no state getter is specified, the default getter is used, which simply
         * returns the entire store state.
         *
         * The second form accepts an array of store keys. With this form, every
         * store uses the default state getter.
         *
         * The last form accepts an object of store keys mapped to state getters. As
         * a shortcut, you can pass `null` as a state getter to use the default
         * state getter.
         *
         * Returns the combined initial state of all specified stores.
         *
         * This way you can write all the initialization and update logic in a single
         * location, without having to mess with adding/removing listeners.
         *
         * @type {string|array|object} stateGetterMap - map of keys to getters
         * @returns {object} Combined initial state of stores
         */
        connectToStores: function connectToStores() {
          var _this = this;
          var stateGetterMap = arguments[0] === undefined ? {} : arguments[0];
          var stateGetter = arguments[1] === undefined ? defaultStateGetter : arguments[1];
          var initialState = {};

          // Ensure that stateGetterMap is an object
          if (typeof stateGetterMap === "string") {
            var key = stateGetterMap;

            stateGetterMap = _defineProperty({}, key, stateGetter);
          } else Iif (Array.isArray(stateGetterMap)) {
            stateGetterMap.reduce(function (result, key) {
              result[key] = stateGetter;
              return result;
            }, {});
          }

          for (var key in stateGetterMap) {
            (function (key) {
              var store = _this.flux.getStore(key);

              Iif (typeof store === "undefined") throw new Error("connectToStores(): Store with key '" + key + "' does not exist.");

              var storeStateGetter = stateGetterMap[key];

              if (storeStateGetter === null) storeStateGetter = defaultStateGetter;

              storeStateGetter = storeStateGetter.bind(_this);

              var initialStoreState = storeStateGetter(store);

              var listener = function () {
                var state = storeStateGetter(store);
                _this.setState(state);
              };

              store.addListener("change", listener);

              assign(_this._flux_listeners, _defineProperty({}, key, listener));

              assign(initialState, initialStoreState);
            })(key);
          }

          return initialState;
        }

      };
    };

    function defaultStateGetter(store) {
      return store.state;
    }
    //# sourceMappingURL=data:application/json;base64,