backpack-ui/dist/libs/react-motion-ui-pack/Transition.js

Lonely Planet's Components

'use strict';

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

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

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 _class, _temp2; /* eslint-disable */
// https://github.com/souporserious/react-motion-ui-pack/blob/master/src/Transition.jsx


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactMotion = require('react-motion');

var _isElement = require('./is-element');

var _isElement2 = _interopRequireDefault(_isElement);

var _fromRMStyles = require('./from-RM-styles');

var _fromRMStyles2 = _interopRequireDefault(_fromRMStyles);

var _toRMStyles = require('./to-RM-styles');

var _toRMStyles2 = _interopRequireDefault(_toRMStyles);

var _configToStyle = require('./config-to-style');

var _configToStyle2 = _interopRequireDefault(_configToStyle);

var _specialAssign = require('./special-assign');

var _specialAssign2 = _interopRequireDefault(_specialAssign);

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

var checkedProps = {
  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool, _isElement2.default]),
  runOnMount: _propTypes2.default.bool,
  appear: _propTypes2.default.object,
  enter: _propTypes2.default.object,
  leave: _propTypes2.default.object,
  onEnter: _propTypes2.default.func,
  onLeave: _propTypes2.default.func
};

var Transition = (_temp2 = _class = function (_Component) {
  (0, _inherits3.default)(Transition, _Component);

  function Transition() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Transition);

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

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Transition.__proto__ || (0, _getPrototypeOf2.default)(Transition)).call.apply(_ref, [this].concat(args))), _this), _this._getDefaultStyles = function () {
      return _react.Children.map(_this.props.children, function (child) {
        if (child) {
          return {
            key: child.key,
            data: child,
            style: (0, _extends3.default)({}, _this._getMountStyles())
          };
        }
      });
    }, _this._getStyles = function () {
      var _this$props = _this.props,
          component = _this$props.component,
          children = _this$props.children,
          enter = _this$props.enter;


      return _react.Children.map(children, function (child) {
        if (!child) return;

        var key = child.key;


        if (!key) {
          console.error('You must provide a key for every child of Transition.');
        }

        return {
          key: key,
          data: child,
          style: (0, _extends3.default)({}, (0, _toRMStyles2.default)(enter))
        };
      });
    }, _this._willEnter = function (_ref2) {
      var key = _ref2.key,
          style = _ref2.style;
      var _this$props2 = _this.props,
          appear = _this$props2.appear,
          leave = _this$props2.leave,
          onEnter = _this$props2.onEnter;

      var childStyles = (typeof appear === 'undefined' ? 'undefined' : (0, _typeof3.default)(appear)) === 'object' ? appear : leave;

      // fire enter callback
      onEnter(childStyles);

      return childStyles;
    }, _this._willLeave = function (_ref3) {
      var key = _ref3.key,
          style = _ref3.style;
      var _this$props3 = _this.props,
          leave = _this$props3.leave,
          onLeave = _this$props3.onLeave;

      // fire leaving callback

      onLeave(style);

      return (0, _toRMStyles2.default)(leave);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(Transition, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _props = this.props,
          component = _props.component,
          runOnMount = _props.runOnMount,
          onEnter = _props.onEnter,
          children = _props.children;


      if (runOnMount) {
        onEnter(this._getMountStyles());
      }
    }
  }, {
    key: '_getMountStyles',
    value: function _getMountStyles() {
      var _props2 = this.props,
          runOnMount = _props2.runOnMount,
          appear = _props2.appear,
          enter = _props2.enter,
          leave = _props2.leave,
          children = _props2.children;

      return (0, _fromRMStyles2.default)(runOnMount ? appear || leave : enter);
    }
  }, {
    key: '_childrenToRender',
    value: function _childrenToRender(currValues) {
      return currValues.map(function (_ref4) {
        var key = _ref4.key,
            data = _ref4.data,
            style = _ref4.style;

        var child = data;
        var childStyle = child.props.style;

        // convert styles to a friendly structure
        style = (0, _configToStyle2.default)(style);

        // merge in any styles set by the user
        // Transition styles will take precedence
        if (childStyle) {
          style = (0, _extends3.default)({}, childStyle, style);
        }

        return (0, _react.cloneElement)(child, { style: style });
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var component = this.props.component;

      var props = (0, _specialAssign2.default)({}, this.props, checkedProps);

      return _react2.default.createElement(
        _reactMotion.TransitionMotion,
        {
          defaultStyles: this._getDefaultStyles(),
          styles: this._getStyles(),
          willEnter: this._willEnter,
          willLeave: this._willLeave
        },
        function (currValues) {
          var children = _this2._childrenToRender(currValues);
          var child = null;

          if (!component || component === 'false') {
            if (_react.Children.count(children) === 1) {
              child = _react.Children.only(children[0]);
            }
          } else {
            child = (0, _react.createElement)(component, props, children);
          }

          return child;
        }
      );
    }
  }]);
  return Transition;
}(_react.Component), _class.propTypes = checkedProps, _class.defaultProps = {
  component: 'div',
  runOnMount: true,
  enter: { opacity: 1 },
  leave: { opacity: 0 },
  onEnter: function onEnter() {
    return null;
  },
  onLeave: function onLeave() {
    return null;
  }
}, _temp2);
exports.default = Transition;