redux-ab-test/dist/components/variation/variation.js

A/B testing React components with Redux and debug tools. Isomorphic with a simple, universal interface. Well documented and lightweight. Tested in popular browsers and Node.js. Includes helpers for React, Redux, and Segment.io

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.mapStateToProps = exports.Variation = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _immutable = require('immutable');

var _immutable2 = _interopRequireDefault(_immutable);

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

var _logger = require('../../utils/logger');

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

/**
 * Variation component
 * - A single variation will be chosen by the parent component: Experiment.
 * - The children can be any JSX component, including plain text.
 * - The child component will recieve 4x data-* attributes with the `id` and `name` of the experiment & variation.
 */
var Variation = exports.Variation = function (_React$Component) {
  (0, _inherits3['default'])(Variation, _React$Component);

  function Variation() {
    (0, _classCallCheck3['default'])(this, Variation);
    return (0, _possibleConstructorReturn3['default'])(this, (Variation.__proto__ || (0, _getPrototypeOf2['default'])(Variation)).apply(this, arguments));
  }

  (0, _createClass3['default'])(Variation, [{
    key: 'render',
    value: function () {
      function render() {
        var _props = this.props,
            reduxAbTest = _props.reduxAbTest,
            experiment = _props.experiment,
            id = _props.id,
            name = _props.name,
            children = _props.children;

        var variation = this.props.variation || experiment.get('variations').find(function (variation) {
          return variation.get('id') === id || variation.get('name') === name;
        }) || _immutable2['default'].Map();
        var experimentProps = experiment.getIn(reduxAbTest.get('props_path'), _immutable2['default'].Map({})).toJS();
        var variationProps = variation.getIn(reduxAbTest.get('props_path'), _immutable2['default'].Map({})).toJS();

        // Generate the data* props to pass to the children
        var additionalProps = (0, _extends3['default'])({}, experimentProps, variationProps, {
          'data-experiment-id': experiment.get('id'),
          'data-experiment-name': experiment.get('name'),
          'data-variation-id': variation.get('id'),
          'data-variation-name': variation.get('name')
        });

        (0, _logger.logger)(__filename + ' Variation rendered experiment.name=\'' + experiment.get('name') + '\', variation.name=\'' + variation.get('name') + '\'');

        // This is text or null content, wrap it in a span and return the contents
        if (!_react2['default'].isValidElement(children)) {
          return _react2['default'].createElement(
            'span',
            additionalProps,
            children
          );
        }

        // Inject the experiment/variation props into the children
        return _react2['default'].cloneElement(children, additionalProps);
      }

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

// Map the Redux Store to the Experiment's props


Variation.defaultProps = {
  id: null,
  name: null,
  variation: null,
  experiment: _immutable2['default'].Map({}),
  reduxAbTest: _immutable2['default'].Map({})
};
var mapStateToProps = exports.mapStateToProps = function () {
  function mapStateToProps(_ref) {
    var reduxAbTest = _ref.reduxAbTest;
    return { reduxAbTest: reduxAbTest };
  }

  return mapStateToProps;
}();
// Export the new React Container.
exports['default'] = (0, _reactRedux.connect)(mapStateToProps)(Variation);