react-animationjs - npm Package Compare versions

Comparing version 2.1.2 to 2.2.0

build/index.js

@@ -34,2 +34,15 @@ 'use strict';
 
+function filterNullEls(el) {
+  return el !== null;
+}
+
+function filterNullKeys(el) {
+  return el.key !== null;
+}
+
+function createKeyHash(hash, el) {
+  hash[el.key] = true;
+  return hash;
+}
+
 var Anime = exports.Anime = function (_Component) {
@@ -73,14 +86,18 @@ _inherits(Anime, _Component);
 
-      var filteredChildren = children.filter(function (el) {
-        return el !== null;
-      });
-      var filteredPrevChildren = prevChildren.filter(function (el) {
-        return el !== null;
-      });
+      var filteredChildren = children.filter(filterNullEls);
+      var filteredPrevChildren = prevChildren.filter(filterNullEls);
       // new child added
       if (filteredChildren.length > filteredPrevChildren.length) {
-        this.props.onEnter();
+        var filteredPrevChildrenHash = filteredPrevChildren.filter(filterNullKeys).reduce(createKeyHash, {});
+        var addedChildren = filteredChildren.filter(filterNullKeys).filter(function (el) {
+          return !filteredPrevChildrenHash.hasOwnProperty(el.key);
+        });
+        this.props.onEnter(addedChildren);
         // child removed
       } else if (filteredChildren.length < filteredPrevChildren.length) {
-        this.props.onExit();
+        var filteredChildrenHash = filteredChildren.filter(filterNullKeys).reduce(createKeyHash, {});
+        var removedChildren = filteredPrevChildren.filter(filterNullKeys).filter(function (el) {
+          return !filteredChildrenHash.hasOwnProperty(el.key);
+        });
+        this.props.onExit(removedChildren);
       }
@@ -92,10 +109,10 @@
 
-      this.removeAnime(nextProps);
+      this.updateAnime(nextProps);
     }
+
+    // componentDidUpdate() {
+    //   this.createAnime(this.props);
+    // }
+
   }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      this.createAnime(this.props);
-    }
-  }, {
     key: 'render',
@@ -117,5 +134,3 @@
         { style: _extends({}, style) },
-        cur.filter(function (el) {
-          return el !== null;
-        }).map(function (child, i) {
+        cur.filter(filterNullEls).map(function (child, i) {
           return _react2.default.cloneElement(child, { key: i, ref: _this2.addTarget });
@@ -158,5 +173,3 @@ })
   this.addTarget = function (newTarget) {
-    _this3.targets = [].concat(_toConsumableArray(_this3.targets), [newTarget]).filter(function (el) {
-      return el !== null;
-    });
+    _this3.targets = [].concat(_toConsumableArray(_this3.targets), [newTarget]).filter(filterNullEls);
   };
@@ -163,0 +176,0 @@ };

package.json

 {
   "name": "react-animationjs",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "(ﾉ´ヮ´)ﾉ*:･ﾟ✧ A super easy animation library for React.",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

 This is a temp copy of https://github.com/hyperfuse/react-anime
 
-Download from npm here; https://www.npmjs.com/package/react-animationjs
+Download from npm here: https://www.npmjs.com/package/react-animationjs
 
@@ -5,0 +5,0 @@ Make changes to src/react-anime.js

src/react-anime.js

@@ -5,2 +5,15 @@ import React, { Component } from 'react';
 
+function filterNullEls (el) {
+  return  el !== null;
+}
+
+function filterNullKeys (el) {
+  return el.key !== null;
+}
+
+function createKeyHash (hash, el) {
+  hash[el.key] = true;
+  return hash;
+}
+
 export class Anime extends Component {
@@ -32,10 +45,18 @@ constructor(props) {
 
-    const filteredChildren = children.filter((el)=> el !== null);
-    const filteredPrevChildren = prevChildren.filter((el)=> el !== null);
+    const filteredChildren = children.filter(filterNullEls);
+    const filteredPrevChildren = prevChildren.filter(filterNullEls);
     // new child added
     if ( filteredChildren.length > filteredPrevChildren.length ) {
-      this.props.onEnter();
+      const filteredPrevChildrenHash = filteredPrevChildren.filter(filterNullKeys).reduce(createKeyHash, {});
+      const addedChildren = filteredChildren.filter(filterNullKeys).filter((el)=>{
+        return !filteredPrevChildrenHash.hasOwnProperty(el.key);
+      });
+      this.props.onEnter(addedChildren);
       // child removed
     } else if ( filteredChildren.length < filteredPrevChildren.length ) {
-      this.props.onExit();
+      const filteredChildrenHash = filteredChildren.filter(filterNullKeys).reduce(createKeyHash, {});
+      const removedChildren = filteredPrevChildren.filter(filterNullKeys).filter((el)=>{
+        return !filteredChildrenHash.hasOwnProperty(el.key);
+      });
+      this.props.onExit(removedChildren);
     }
@@ -73,3 +94,3 @@
   addTarget = newTarget => {
-    this.targets = [...this.targets, newTarget].filter((el)=> el !== null);
+    this.targets = [...this.targets, newTarget].filter(filterNullEls);
   }
@@ -88,3 +109,3 @@
           cur
-          .filter((el)=> el !== null )
+          .filter(filterNullEls)
           .map((child, i) =>
@@ -91,0 +112,0 @@ React.cloneElement(child, { key: i, ref: this.addTarget })

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

Total package byte prevSize

81442

increased by1.63%

Lines of code

2373

increased by1.11%

No dependency changes