react-tween-state - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

HISTORY.md

@@ -5,2 +5,7 @@ Legend:
 
+### 0.0.5 (March 17th 2015)
+**Note**: this is the last release compatible with React < 0.13!
+- [I] Small optimizations.
+- [F] [#24](https://github.com/chenglou/react-tween-state/issues/24): Prevent error when `onEnd` unmounts the component (through parent).
+
 ### 0.0.4 (November 14th 2014)
@@ -7,0 +12,0 @@ - [I] Bower support!

index.js

 'use strict';
 
-var easingTypes = require('./easingTypes');
+var easingTypes = require('tween-functions');
 
@@ -13,13 +13,2 @@ // additive is the new iOS 8 default. In most cases it simulates a physics-
 
-function shallowClone(obj) {
-  var ret = {};
-  for (var key in obj) {
-    if (!obj.hasOwnProperty(key)) {
-      continue;
-    }
-    ret[key] = obj[key];
-  }
-  return ret;
-}
-
 // see usage below
@@ -63,4 +52,4 @@ function returnState(state) {
   _tweenState: function(stateRefFunc, stateName, config) {
-    config = shallowClone(config);
-
+    // _pendingState doesn't exist in React 0.13 anymore. No harm leaving it
+    // here for backward compat
     var state = this._pendingState || this.state;
@@ -70,10 +59,14 @@ var stateRef = stateRefFunc(state);
     // see the reasoning for these defaults at the top
-    config.stackBehavior = config.stackBehavior || DEFAULT_STACK_BEHAVIOR;
-    config.easing = config.easing || DEFAULT_EASING;
-    config.duration = config.duration == null ? DEFAULT_DURATION : config.duration;
-    config.beginValue = config.beginValue == null ? stateRef[stateName] : config.beginValue;
-    config.delay = config.delay == null ? DEFAULT_DELAY : config.delay;
+    var newConfig = {
+      easing: config.easing || DEFAULT_EASING,
+      duration: config.duration == null ? DEFAULT_DURATION : config.duration,
+      delay: config.delay == null ? DEFAULT_DELAY : config.delay,
+      beginValue: config.beginValue == null ? stateRef[stateName] : config.beginValue,
+      endValue: config.endValue,
+      onEnd: config.onEnd,
+      stackBehavior: config.stackBehavior || DEFAULT_STACK_BEHAVIOR,
+    };
 
     var newTweenQueue = state.tweenQueue;
-    if (config.stackBehavior === tweenState.stackBehavior.DESTRUCTIVE) {
+    if (newConfig.stackBehavior === tweenState.stackBehavior.DESTRUCTIVE) {
       newTweenQueue = state.tweenQueue.filter(function(item) {
@@ -87,4 +80,4 @@ return item.stateName !== stateName || item.stateRefFunc(state) !== stateRef;
       stateName: stateName,
-      config: config,
-      initTime: Date.now() + config.delay,
+      config: newConfig,
+      initTime: Date.now() + newConfig.delay,
     });
@@ -94,3 +87,3 @@
     // sorry for mutating. No idea where in the state the value is
-    stateRef[stateName] = config.endValue;
+    stateRef[stateName] = newConfig.endValue;
     // this will also include the above update
@@ -146,6 +139,2 @@ this.setState({tweenQueue: newTweenQueue});
   _rafCb: function() {
-    if (!this.isMounted()) {
-      return;
-    }
-
     var state = this.state;
@@ -157,11 +146,17 @@ if (state.tweenQueue.length === 0) {
     var now = Date.now();
-    state.tweenQueue.forEach(function(item) {
-      if (now - item.initTime >= item.config.duration) {
+    var newTweenQueue = [];
+
+    for (var i = 0; i < state.tweenQueue.length; i++) {
+      var item = state.tweenQueue[i];
+      if (now - item.initTime < item.config.duration) {
+        newTweenQueue.push(item);
+      } else {
         item.config.onEnd && item.config.onEnd();
       }
-    });
+    }
 
-    var newTweenQueue = state.tweenQueue.filter(function(item) {
-      return now - item.initTime < item.config.duration;
-    });
+    // onEnd might trigger a parent callback that removes this component
+    if (!this.isMounted()) {
+      return;
+    }
 
@@ -168,0 +163,0 @@ this.setState({

package.json

 {
   "name": "react-tween-state",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React animation.",
@@ -35,3 +35,6 @@ "main": "index.js",
     "browserify": "^6.3.2"
+  },
+  "dependencies": {
+    "tween-functions": "^1.0.1"
   }
 }

README.md

 # [React](http://facebook.github.io/react/) Tween State
 
+For React 0.13+ users: see the subtle differences [here] vs 0.12.
+
 The equivalent of React's `this.setState`, but for animated tweening: `this.tweenState`.
@@ -17,3 +19,3 @@
 
-*For Bower*: the single source file is `index-bower.js`, not `index.js`.
+*For Bower*: the single source file is `index-bower.js`.
 
@@ -83,3 +85,3 @@ ## API
 
-\* For a destructive animation, starting the next one with a delay still immediately kills the previous tween. If that's not your intention, try `setTimeout` or additive animation.
+\* For a destructive animation, starting the next one with a delay still immediately kills the previous tween. If that's not your intention, try `setTimeout` or additive animation. `DESTRUCTIVE` + `duration` 0 effectively cancels all in-flight animations.
 
@@ -86,0 +88,0 @@ \*\* For an additive animation, since the tweens stack and never get destroyed, the end callback is effectively fired at the end of `duration`.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

125

increased by1.63%

Worsened metrics

Total package byte prevSize

12974

decreased by-24.88%

Dependency count

1

increased byInfinity%

Number of package files

6

decreased by-14.29%

Lines of code

141

decreased by-46.39%

Dependency changes

• + Addedtween-functions@^1.0.1

• + Addedtween-functions@1.2.0(transitive)