update objectEqual, fix bezier scale simultaneous use

Author: jljsj33

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-tween-one",
-  "version": "2.6.5",
+  "version": "2.6.6",
   "description": "tween-one anim component for react",
   "keywords": [
     "react",

src/TweenOne.jsx

@@ -314,48 +314,49 @@ class TweenOne extends Component {
   }
 
   render() {
-    const props = { ...this.props };
-    [
-      'animation',
-      'component',
-      'componentProps',
-      'reverseDelay',
-      'attr',
-      'paused',
-      'reverse',
-      'repeat',
-      'yoyo',
-      'moment',
-      'resetStyle',
-      'forcedJudg',
-    ].forEach(key => delete props[key]);
-    props.style = { ...this.props.style };
-    Object.keys(props.style).forEach(p => {
+    const {
+      animation,
+      component,
+      componentProps,
+      reverseDelay,
+      attr,
+      paused,
+      reverse,
+      repeat,
+      yoyo,
+      moment,
+      resetStyle,
+      forcedJudg,
+      children,
+      ...props
+    } = this.props;
+    Object.keys(props.style || {}).forEach(p => {
       if (p.match(/filter/i)) {
         ['Webkit', 'Moz', 'Ms', 'ms'].forEach(prefix => {
           props.style[`${prefix}Filter`] = props.style[p];
         });
       }
     });
     // component 为空时调用子级的。。
-    if (!this.props.component) {
-      if (!this.props.children) {
-        return this.props.children;
+    const { className } = props;
+    if (!component && typeof children !== 'string') {
+      if (!children) {
+        return children;
       }
-      const childrenProps = this.props.children.props;
-      const { style, className } = childrenProps;
+      const childrenProps = children.props;
+      const { style: childStyle, className: childClass } = childrenProps || {};
       // 合并 style 与 className。
-      const newStyle = { ...style, ...props.style };
-      const newClassName = props.className ? `${props.className} ${className}` : className;
-      return React.cloneElement(this.props.children, { style: newStyle, className: newClassName });
+      const newStyle = { ...childStyle, ...props.style };
+      const newClassName = className ? `${className} ${childClass}` : childClass;
+      return React.cloneElement(children, { style: newStyle, className: newClassName });
     }
-    return React.createElement(this.props.component, {
+    return React.createElement(component, {
       ref: (c) => {
         this.currentRef = c;
       },
       ...props,
-      ...this.props.componentProps
-    });
+      ...componentProps
+    }, children);
   }
 }
 TweenOne.isTweenOne = true;

src/plugin/BezierPlugin.jsx

@@ -6,6 +6,7 @@
 import {
   checkStyleName,
   createMatrix,
+  getTransform,
 } from 'style-utils';
 const _RAD2DEG = 180 / Math.PI;
 const _r1 = [];
@@ -508,7 +509,7 @@ Bezier.prototype = {
     this.init();
   },
   setRatio(r, t, computedStyle) {
-    t.style.transform = this.set(r);
+    t.style.transform = getTransform(this.set(r));
     if (computedStyle) {
       computedStyle.transformSVG = createMatrix(t.style.transform).toString();
     }

src/util.js

@@ -52,8 +52,12 @@ function deepEql(a, b) {
       let aa = a[key];
       let bb = b[key];
       if (Array.isArray(aa) && Array.isArray(bb)) {
-        aa = aa.join();
-        bb = bb.join();
+        const aaa = aa.join();
+        const bbb = bb.join();
+        if (aaa === bbb && !aaa.match(/\[object object\]/ig)) {
+          aa = aaa;
+          bb = bbb;
+        }
       }
       return aa !== bb;
     });
@@ -65,38 +69,14 @@ export function objectEqual(obj1, obj2) {
   if (obj1 === obj2 || deepEql(obj1, obj2)) {
     return true;
   }
-  if (!obj1 || !obj2) {
+  if (!obj1 || !obj2 || Object.keys(obj1).length !== Object.keys(obj2).length) {
     return false;
   }
   // animation 写在标签上的进行判断是否相等， 判断每个参数有没有 function;
   let equalBool = true;
-  if (Array.isArray(obj1) && Array.isArray(obj2)) {
-    if (obj1.length !== obj2.length) {
-      return false;
-    }
-    for (let i = 0; i < obj1.length; i++) {
-      const currentObj = obj1[i];
-      const nextObj = obj2[i];
-      for (const p in currentObj) { // eslint-disable-line no-restricted-syntax
-        if (currentObj[p] !== nextObj[p]) {
-          if (typeof currentObj[p] === 'object' && typeof nextObj[p] === 'object') {
-            equalBool = objectEqual(currentObj[p], nextObj[p]);
-          } else if (typeof currentObj[p] === 'function' && typeof nextObj[p] === 'function') {
-            if (currentObj[p].name !== nextObj[p].name) {
-              equalBool = false;
-            }
-          } else {
-            equalBool = false;
-          }
-          if (!equalBool) {
-            return false;
-          }
-        }
-      }
-    }
-  }
-
-  const setEqualBool = (objA, objB) => {
+  const setEqualBool = ($a, $b) => {
+    const objA = Object.keys($a).length > Object.keys($b).length ? $a : $b;
+    const objB = Object.keys($a).length > Object.keys($b).length ? $b : $a;
     Object.keys(objA).forEach(key => {
       // 如果前面有参数匹配不相同则直接返回；
       if (!equalBool) {
@@ -109,7 +89,7 @@ export function objectEqual(obj1, obj2) {
       if (typeof objA[key] === 'object' && typeof objB[key] === 'object') {
         equalBool = objectEqual(objA[key], objB[key]);
       } else if (typeof objA[key] === 'function' && typeof objB[key] === 'function') {
-        if (objA[key].name !== objB[key].name) {
+        if (objA[key].toString().replace(/\s+/g, '') !== objB[key].toString().replace(/\s+/g, '')) {
           equalBool = false;
         }
       } else if (objA[key] !== objB[key]) {
@@ -118,8 +98,16 @@ export function objectEqual(obj1, obj2) {
     });
   };
 
-  setEqualBool(obj1, obj2);
-  setEqualBool(obj2, obj1);
+  if (Array.isArray(obj1) && Array.isArray(obj2)) {
+    if (obj1.length !== obj2.length) {
+      return false;
+    }
+    obj1.forEach((item, i) => {
+      setEqualBool(item, obj2[i]);
+    });
+  } else {
+    setEqualBool(obj1, obj2);
+  }
   return equalBool;
 }