add currentRef and childRefs

Author: jljsj33

README.md

@@ -58,6 +58,23 @@ ReactDom.render(
 | --- | --- | --- | --- | --- |
 | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
 
+### 1.7.x add childRefs and currentRef; 
+
+```jsx
+<QueueAnim 
+  component={Row} 
+  ref={(c) => {
+    this.ref = c;
+  }}
+  onEnd={() => {
+    // this..currentRef = <Row />
+    // this..childRefs.a = <Col key="a">1212</Col>
+  }}
+>
+  <Col key="a">1212</Col>
+</QueueAnim>
+```
+
 ## API
 
 > You must provide the key attribute for all children of QueueAnim, children would not peform any animation without key.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-queue-anim",
-  "version": "1.6.12",
+  "version": "1.7.0",
   "description": "Queue animation component for react",
   "keywords": [
     "react",
@@ -83,7 +83,7 @@
   "dependencies": {
     "babel-runtime": "6.x",
     "prop-types": "^15.6.0",
-    "rc-tween-one": "^2.3.2"
+    "rc-tween-one": "^2.5.0"
   },
   "types": "index.d.ts",
   "pre-commit": [

src/QueueAnim.jsx

@@ -10,7 +10,7 @@ import {
 } from './utils';
 import AnimTypes from './animTypes';
 
-const noop = () => {};
+const noop = () => { };
 
 const typeDefault = [
   'displayName',
@@ -104,6 +104,16 @@ class QueueAnim extends React.Component {
      * 进场时 deley 的 timeout 记录;
      */
     this.placeholderTimeoutIds = {};
+    /**
+     * @param childRefs;
+     * 储存 children 的 ref;
+     */
+    this.childRefs = {};
+    /**
+     * @param currentRef;
+     * 记录 component 是组件时的 ref;
+     */
+    this.currentRef = null
     // 第一次进入，默认进场
     const children = toArrayChildren(getChildrenFromProps(props));
     const childrenShow = {};
@@ -381,6 +391,9 @@ class QueueAnim extends React.Component {
         }
       });
     }
+    let ref = () => {
+      delete this.childRefs[key];
+    };
     // 处理出场
     if (i >= 0) {
       if (this.leaveUnfinishedChild.indexOf(key) >= 0) {
@@ -396,6 +409,9 @@ class QueueAnim extends React.Component {
     } else {
       // 处理进场;
       i = this.keysToEnterToCallback.indexOf(key);
+      ref = (c) => {
+        this.childRefs[key] = c && c.currentRef ? c.currentRef : c;
+      }
       // appear=false 时，设定 childrenShow 和 tweenToEnter 都为 true, 这里不渲染 animation;
       if (this.tweenToEnter[key] && !forcedReplay) {
         // 如果是已进入的，将直接返回标签。。
@@ -404,6 +420,7 @@ class QueueAnim extends React.Component {
           component: child.type,
           forcedJudg,
           componentProps: child.props,
+          ref,
         });
       } else if (!this.tweenToEnter[key]) {
         animation = this.enterAnimation[key] || this.getTweenEnterOrLeaveData(key, i, 0, 'enter');
@@ -418,6 +435,7 @@ class QueueAnim extends React.Component {
       forcedJudg,
       componentProps: child.props,
       animation,
+      ref,
     });
     this.saveTweenOneTag[key] = tag;
     return tag;
@@ -506,24 +524,28 @@ class QueueAnim extends React.Component {
   };
 
   render() {
-    const { ...tagProps } = this.props;
-    [
-      'component',
-      'componentProps',
-      'interval',
-      'duration',
-      'delay',
-      'type',
-      'animConfig',
-      'ease',
-      'leaveReverse',
-      'animatingClassName',
-      'forcedReplay',
-      'onEnd',
-      'appear',
-    ].forEach(key => delete tagProps[key]);
+    const {
+      component,
+      componentProps,
+      interval,
+      duration,
+      delay,
+      type,
+      animConfig,
+      ease,
+      leaveReverse,
+      animatingClassName,
+      forcedReplay,
+      onEnd,
+      appear,
+      ...tagProps
+    } = this.props;
     const childrenToRender = toArrayChildren(this.state.children).map(this.getChildrenToRender);
-    const props = { ...tagProps, ...this.props.componentProps };
+    const props = {
+      ...tagProps,
+      ...this.props.componentProps,
+      ref: (c) => { this.currentRef = c; }
+    };
     return createElement(this.props.component, props, childrenToRender);
   }
 }