Merge pull request #43 from asvetliakov/master

Fixes #36
souporserious · Mar 2, 2016 · 83d2e8c · 83d2e8c
2 parents f77dd1c + 4ce1aa5
commit 83d2e8c
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 49 deletions.
diff --git a/lib/Transition.js b/lib/Transition.js
@@ -12,6 +12,8 @@ var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_ag
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 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; }
@@ -20,24 +22,24 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _reactPropTypesLibElementType = require('react-prop-types/lib/elementType');
+
+var _reactPropTypesLibElementType2 = _interopRequireDefault(_reactPropTypesLibElementType);
+
 var _reactMotion = require('react-motion');
 
 var _cloneStyles = require('./clone-styles');
 
 var _cloneStyles2 = _interopRequireDefault(_cloneStyles);
 
-var _toRMStyles = require('./to-RM-styles');
-
-var _toRMStyles2 = _interopRequireDefault(_toRMStyles);
-
-var _fromRMStyles = require('./from-RM-styles');
-
-var _fromRMStyles2 = _interopRequireDefault(_fromRMStyles);
-
 var _configToStyle = require('./config-to-style');
 
 var _configToStyle2 = _interopRequireDefault(_configToStyle);
 
+var _toRMStyles = require('./to-RM-styles');
+
+var _toRMStyles2 = _interopRequireDefault(_toRMStyles);
+
 var _TransitionChild = require('./TransitionChild');
 
 var _TransitionChild2 = _interopRequireDefault(_TransitionChild);
@@ -92,7 +94,7 @@ var Transition = (function (_Component) {
 
       return _react.Children.map(children, function (child) {
         // if null is being passed, bail out
-        if (!child) return;
+        if (!child) return {};
 
         var key = child.key;
 
@@ -123,18 +125,17 @@ var Transition = (function (_Component) {
 
         if (!key) {
           throw new Error('You must provide a key for every child of Transition.');
-        } else {
-          return {
-            key: key,
-            data: child,
-            style: _extends({}, childStyles)
-          };
         }
+
+        return {
+          key: key,
+          data: child,
+          style: _extends({}, childStyles)
+        };
       });
     };
 
     this._willEnter = function (_ref) {
-      var key = _ref.key;
       var style = _ref.style;
       var _props3 = _this.props;
       var appear = _props3.appear;
@@ -153,13 +154,12 @@ var Transition = (function (_Component) {
     };
 
     this._willLeave = function (_ref2) {
-      var key = _ref2.key;
       var style = _ref2.style;
       var _props4 = _this.props;
       var leave = _props4.leave;
       var onLeave = _props4.onLeave;
 
-      //const flatValues = fromRMStyles(currentStyles[key])
+      // const flatValues = fromRMStyles(currentStyles[key])
 
       // TODO: when RM implements onEnd callback do cleanup
       // clean up dimensions when item leaves
@@ -189,19 +189,17 @@ var Transition = (function (_Component) {
     };
 
     this._childrenToRender = function (currValues) {
-      var children = _this.props.children;
-
       return currValues.map(function (_ref3) {
         var key = _ref3.key;
         var data = _ref3.data;
-        var style = _ref3.style;
+        var _style = _ref3._style;
 
         var child = data;
         var childStyle = child.props.style;
         var dimensions = _this.state.dimensions && _this.state.dimensions[key];
 
         // convert styles to a friendly structure
-        style = (0, _configToStyle2['default'])(style);
+        var style = (0, _configToStyle2['default'])(_style);
 
         var currHeight = style.height;
 
@@ -239,11 +237,35 @@ var Transition = (function (_Component) {
   }
 
   _createClass(Transition, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      var _this2 = this;
+
+      var _props5 = this.props;
+      var children = _props5.children;
+      var runOnMount = _props5.runOnMount;
+
+      if (runOnMount) return;
+
+      // render things instantly when runOnMount is set to `false`
+      _react.Children.forEach(children, function (child) {
+        if (!child) return;
+        var key = child.key || _this2._onlyKey;
+        _this2._instant[key] = true;
+      });
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
+
+      /* eslint-disable no-use-before-define */
+      var _props6 = this.props;
+      var component = _props6.component;
+
+      var otherProps = _objectWithoutProperties(_props6, ['component']);
 
-      var component = this.props.component;
+      /* eslint-enable no-use-before-define */
 
       return _react2['default'].createElement(
         _reactMotion.TransitionMotion,
@@ -254,7 +276,7 @@ var Transition = (function (_Component) {
           willLeave: this._willLeave
         },
         function (currValues) {
-          var children = _this2._childrenToRender(currValues);
+          var children = _this3._childrenToRender(currValues);
           var wrapper = null;
 
           if (!component || component === 'false') {
@@ -264,7 +286,7 @@ var Transition = (function (_Component) {
               wrapper = (0, _react.createElement)('span', { style: { display: 'none' } });
             }
           } else {
-            wrapper = (0, _react.createElement)(component, _this2.props, children);
+            wrapper = (0, _react.createElement)(component, otherProps, children);
           }
 
           return wrapper;
@@ -274,13 +296,14 @@ var Transition = (function (_Component) {
   }], [{
     key: 'propTypes',
     value: {
-      component: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.bool]),
-      runOnMount: _react.PropTypes.bool,
+      children: _react.PropTypes.element,
+      component: _react.PropTypes.oneOfType([_reactPropTypesLibElementType2['default'], _react.PropTypes.bool]),
       appear: _react.PropTypes.object,
       enter: _react.PropTypes.object,
       leave: _react.PropTypes.object,
       onEnter: _react.PropTypes.func,
-      onLeave: _react.PropTypes.func
+      onLeave: _react.PropTypes.func,
+      runOnMount: _react.PropTypes.bool
     },
     enumerable: true
   }, {
@@ -304,4 +327,5 @@ var Transition = (function (_Component) {
 })(_react.Component);
 
 exports['default'] = Transition;
-module.exports = exports['default'];
+module.exports = exports['default'];
+// eslint-disable-line react/sort-comp
diff --git a/lib/TransitionChild.js b/lib/TransitionChild.js
@@ -14,18 +14,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 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 _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
-
-var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
-
 var _reactMeasure = require('react-measure');
 
 var _reactMeasure2 = _interopRequireDefault(_reactMeasure);
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 var TransitionChild = (function (_Component) {
   _inherits(TransitionChild, _Component);
 
@@ -36,11 +32,6 @@ var TransitionChild = (function (_Component) {
   }
 
   _createClass(TransitionChild, [{
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState);
-    }
-  }, {
     key: 'render',
     value: function render() {
       var _props = this.props;
@@ -61,6 +52,16 @@ var TransitionChild = (function (_Component) {
         onMeasure: onMeasure
       }, (0, _react.cloneElement)(child, { style: style, dimensions: dimensions }));
     }
+  }], [{
+    key: 'propTypes',
+    value: {
+      key: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]),
+      onMeasure: _react.PropTypes.func,
+      child: _react.PropTypes.element,
+      style: _react.PropTypes.object,
+      dimensions: _react.PropTypes.object
+    },
+    enumerable: true
   }]);
 
   return TransitionChild;

diff --git a/lib/config-to-style.js b/lib/config-to-style.js
@@ -12,9 +12,9 @@ var TRANSFORMS = UNIT_TRANSFORMS.concat(DEGREE_TRANFORMS, UNITLESS_TRANSFORMS);
 exports['default'] = function (configs) {
   var styles = {};
 
-  Object.keys(configs).map(function (key) {
+  Object.keys(configs).forEach(function (key) {
     var isTransform = TRANSFORMS.indexOf(key) > -1;
-    var value = configs[key].toFixed(4);
+    var value = configs[key].toFixed ? configs[key].toFixed(4) : configs[key];
 
     if (isTransform) {
       var transformProps = styles[TRANSFORM] || '';

diff --git a/package.json b/package.json
@@ -36,7 +36,8 @@
     "get-prefix": "^1.0.0",
     "react": "^0.14.0",
     "react-measure": "^0.3.4",
-    "react-motion": "^0.4.2"
+    "react-motion": "^0.4.2",
+    "react-prop-types": "^0.3.0"
   },
   "devDependencies": {
     "babel": "^5.8.23",

diff --git a/src/Transition.jsx b/src/Transition.jsx
@@ -1,4 +1,5 @@
 import React, { Component, PropTypes, Children, createElement } from 'react'
+import elementType from 'react-prop-types/lib/elementType'
 import { TransitionMotion } from 'react-motion'
 
 import cloneStyles from './clone-styles'
@@ -10,7 +11,7 @@ class Transition extends Component {
   static propTypes = {
     children: PropTypes.element,
     component: PropTypes.oneOfType([
-      PropTypes.string,
+      elementType,
       PropTypes.bool,
     ]),
     appear: PropTypes.object,
@@ -214,7 +215,9 @@ class Transition extends Component {
     })
 
   render() {
-    const { component } = this.props
+    /* eslint-disable no-use-before-define */
+    const { component, ...otherProps } = this.props
+    /* eslint-enable no-use-before-define */
 
     return (
       <TransitionMotion
@@ -234,7 +237,7 @@ class Transition extends Component {
               wrapper = createElement('span', { style: { display: 'none' } })
             }
           } else {
-            wrapper = createElement(component, this.props, children)
+            wrapper = createElement(component, otherProps, children)
           }
 
           return wrapper