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

## Statements: 100% (14 / 14) Branches: 87.5% (7 / 8) Functions: 100% (4 / 4) Lines: 100% (12 / 12) Ignored: none

All files » lib/addons/ » ReactFluxComponent.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

    3

    1

    1

    1

    1

    5

    9
    9

    4
    4

    4

    1
     /**
     * React Flux Component
     *
     * Component form of ReactMixin. Uses ReactMixin as part of its implementation,
     * so requires a flux instance to be provided as either context or a prop.
     *
     * Like ReactMixin, children are given access to the flux instance via
     * `context.flux`. Use this near the top of your app hierarchy and all children
     * will have easy access to the flux instance (including, of course, other
     * Flux components!):
     *
     * <FluxComponent flux={flux}>
     *    ...the rest of your app
     * </FluxComponent>
     *
     * Now any child can access the flux instance again like this:
     *
     * <FluxComponent>
     *    ...children
     * </FluxComponent>
     *
     * We don't need the flux prop this time because flux is already part of
     * the context.
     *
     * Additionally, immediate children are given a `flux` prop.
     *
     * The component has an optional prop `connectToStores`, which is -- you guessed
     * it -- passed directly to ReactMixin's `connectToStores()` function and
     * set as the initial state. The component's state is injected as props to
     * child components.
     *
     * The practical upshot of all this is that ReactMixin, state changes, and
     * context are now simply implementation details. Among other things, this means
     * you can write your components as plain ES6 classes. Here's an example:
     *
     * class ParentComponent extends React.Component {
     *
     *   render() {
     *     <FluxComponent connectToStore="fooStore">
     *       <ChildComponent />
     *     </FluxComponent>
     *   }
     *
     * }
     *
     * ChildComponent in this example has prop `flux` containing the flux instance,
     * and props that sync with each of the state keys of fooStore.
     */

    "use strict";

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

    var React = _interopRequire(require("react/addons"));

    var ReactMixin = _interopRequire(require("./ReactMixin"));

    var assign = _interopRequire(require("object-assign"));

    var ReactFluxComponent = React.createClass({
      displayName: "ReactFluxComponent",

      mixins: [ReactMixin()],

      getInitialState: function getInitialState() {
        return this.connectToStores(this.props.connectToStores);
      },

      render: function render() {
        var _this = this;
        if (!this.props.children) return null;

        var children = React.Children.map(this.props.children, function (child) {
          return React.addons.cloneWithProps(child, assign({
            key: child.key || undefined,
            flux: _this.flux }, _this.state));
        });

        return React.createElement(
          "span",
          null,
          children
        );
      }

    });

    module.exports = ReactFluxComponent;
    //# sourceMappingURL=data:application/json;base64,