fix destroy for showProp

react-component · Aug 31, 2015 · 45f57ea · 45f57ea
1 parent 9d132f0
commit 45f57ea
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 25 deletions.
diff --git a/examples/assets/animate/motion.less b/examples/assets/animate/motion.less
@@ -2,6 +2,7 @@
   animation-duration: .5s;
   animation-fill-mode: both;
   display: block !important;
+  visibility: visible !important;
 }
 
 .make-motion(@className, @keyframeName) {

diff --git a/examples/simple-animation.js b/examples/simple-animation.js
@@ -24,6 +24,7 @@ const Box = React.createClass({
 var Demo = React.createClass({
   getInitialState() {
     return {
+      destroyed:false,
       visible: true,
       exclusive: false
     };
@@ -91,6 +92,12 @@ var Demo = React.createClass({
     });
   },
 
+  destroy(){
+    this.setState({
+      destroyed:true
+    });
+  },
+
   render() {
     return (
       <div>
@@ -99,6 +106,8 @@ var Demo = React.createClass({
         &nbsp;
         <label><input type='checkbox' onChange={this.toggle.bind(this,'exclusive')} checked={this.state.exclusive}/>
           exclusive</label>
+        &nbsp;
+        <button onClick={this.destroy}>destroy</button>
         <br/><br/>
         <Animate
           component=""
@@ -108,7 +117,7 @@ var Demo = React.createClass({
             enter:this.animateEnter,
             leave:this.animateLeave
           }}>
-          <Box visible={this.state.visible}/>
+          {this.state.destroyed?null:<Box visible={this.state.visible}/>}
         </Animate>
       </div>
     );

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-animate",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "css-transition ui component for react",
   "keywords": [
     "react",

diff --git a/src/Animate.js b/src/Animate.js
@@ -84,16 +84,22 @@ const Animate = React.createClass({
     // last props children if exclusive
     // exclusive needs immediate response
     let currentChildren = this.state.children;
-    let newChildren;
+    // in case destroy in showProp mode
+    let newChildren = [];
     if (showProp) {
-      newChildren = currentChildren.map((currentChild)=> {
+      currentChildren.forEach((currentChild)=> {
         const nextChild = findChildInChildrenByKey(nextChildren, currentChild.key);
-        if (!nextChild.props[showProp] && currentChild.props[showProp]) {
-          return React.cloneElement(nextChild, {
+        let newChild;
+        if ((!nextChild || !nextChild.props[showProp]) && currentChild.props[showProp]) {
+          newChild = React.cloneElement(nextChild || currentChild, {
             [showProp]: true,
           });
+        } else {
+          newChild = nextChild;
+        }
+        if (newChild) {
+          newChildren.push(newChild);
         }
-        return nextChild;
       });
     } else {
       newChildren = ChildrenUtils.mergeChildren(
@@ -122,12 +128,14 @@ const Animate = React.createClass({
       }
       const hasPrev = findChildInChildrenByKey(currentChildren, key);
       if (showProp) {
+        const showInNext = c.props[showProp];
         if (hasPrev) {
           const showInNow = findShownChildInChildrenByKey(currentChildren, key, showProp);
-          const showInNext = c.props[showProp];
           if (!showInNow && showInNext) {
             this.keysToEnter.push(key);
           }
+        } else if (showInNext) {
+          this.keysToEnter.push(key);
         }
       } else if (!hasPrev) {
         this.keysToEnter.push(key);
@@ -141,12 +149,14 @@ const Animate = React.createClass({
       }
       const hasNext = findChildInChildrenByKey(nextChildren, key);
       if (showProp) {
+        const showInNow = c.props[showProp];
         if (hasNext) {
           const showInNext = findShownChildInChildrenByKey(nextChildren, key, showProp);
-          const showInNow = c.props[showProp];
           if (!showInNext && showInNow) {
             this.keysToLeave.push(key);
           }
+        } else if (showInNow) {
+          this.keysToLeave.push(key);
         }
       } else if (!hasNext) {
         this.keysToLeave.push(key);
@@ -165,21 +175,25 @@ const Animate = React.createClass({
 
   render() {
     const props = this.props;
-    const children = this.state.children.map((child) => {
-      if (!child.key) {
-        throw new Error('must set key for <rc-animate> children');
-      }
-      return (<AnimateChild
-        key={child.key}
-        ref={child.key}
-        animation={props.animation}
-        transitionName={props.transitionName}
-        transitionEnter={props.transitionEnter}
-        transitionAppear={props.transitionAppear}
-        transitionLeave={props.transitionLeave}>
-        {child}
-      </AnimateChild>);
-    });
+    const stateChildren = this.state.children;
+    let children = null;
+    if (stateChildren) {
+      children = stateChildren.map((child) => {
+        if (!child.key) {
+          throw new Error('must set key for <rc-animate> children');
+        }
+        return (<AnimateChild
+          key={child.key}
+          ref={child.key}
+          animation={props.animation}
+          transitionName={props.transitionName}
+          transitionEnter={props.transitionEnter}
+          transitionAppear={props.transitionAppear}
+          transitionLeave={props.transitionLeave}>
+          {child}
+        </AnimateChild>);
+      });
+    }
     const Component = props.component;
     if (Component) {
       return <Component {...this.props}>{children}</Component>;

diff --git a/src/ChildrenUtils.js b/src/ChildrenUtils.js
@@ -10,7 +10,7 @@ const utils = {
   },
 
   findChildInChildrenByKey(children, key) {
-    let ret = 0;
+    let ret = null;
     if (children) {
       children.forEach((c) => {
         if (ret) {