add exclusive prop

react-component · May 20, 2015 · 1c0e068 · 1c0e068
1 parent 69c18a6
commit 1c0e068
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 6 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,6 +1,10 @@
 # History
 ----
 
+## 2.1.0 / 2015-05-19
+
+`new` add exclusive prop
+
 ## 2.0.0 / 2015-05-19
 
-`new` [#21](https://github.com/react-component/calendar/issues/21) add trigger prop for DatePicker
+`new` [#2](https://github.com/react-component/css-transition-group/issues/2) add showProp prop
diff --git a/README.md b/README.md
@@ -70,7 +70,13 @@ React.render(<CSSTransitionGroup><p>1</p><p>2</p></CSSTransitionGroup>, containe
           <td><span style="color:red;">showProp</span></td>
           <td>String</td>
           <td></td>
-          <td>using prop for show and hide. [demo]() </td>
+          <td>using prop for show and hide. [demo](http://react-component.github.io/css-transition-group/build/examples/hide-todo.html) </td>
+        </tr>
+        <tr>
+          <td><span style="color:red;">exclusive</span></td>
+          <td>Boolean</td>
+          <td></td>
+          <td>whether allow only one set of animations(enter and leave) at the same time. </td>
         </tr>
         <tr>
           <td>transitionName</td>

diff --git a/lib/CSSTransitionGroup.jsx b/lib/CSSTransitionGroup.jsx
@@ -39,6 +39,7 @@ var CSSTransitionGroup = React.createClass({
   componentWillReceiveProps(nextProps) {
     var nextChildMapping = [];
     var showProp = this.props.showProp;
+    var exclusive = this.props.exclusive;
 
     React.Children.forEach(nextProps.children, (c)=> {
       nextChildMapping.push(c);
@@ -60,6 +61,13 @@ var CSSTransitionGroup = React.createClass({
       });
     }
 
+    if (exclusive) {
+      newChildren.forEach((c)=> {
+        this.stop(c.key);
+      });
+      prevChildMapping = this.state.children;
+    }
+
     this.setState({
       children: newChildren
     });
@@ -110,6 +118,7 @@ var CSSTransitionGroup = React.createClass({
   },
 
   _handleDoneEntering(key) {
+    //console.log('_handleDoneEntering, ', key);
     delete this.currentlyTransitioningKeys[key];
     var currentChildMapping = this.props.children;
     var showProp = this.props.showProp;
@@ -119,7 +128,18 @@ var CSSTransitionGroup = React.createClass({
       showProp && !ReactTransitionChildMapping.isShownInChildrenByKey(currentChildMapping, key, showProp)
       )) {
       // This was removed before it had fully entered. Remove it.
+      //console.log('releave ',key);
       this.performLeave(key);
+    } else {
+      this.setState({children: currentChildMapping});
+    }
+  },
+
+  stop(key) {
+    delete this.currentlyTransitioningKeys[key];
+    var component = this.refs[key];
+    if (component) {
+      component.stop();
     }
   },
 
@@ -138,6 +158,7 @@ var CSSTransitionGroup = React.createClass({
   },
 
   _handleDoneLeaving(key) {
+    //console.log('_handleDoneLeaving, ', key);
     delete this.currentlyTransitioningKeys[key];
     var showProp = this.props.showProp;
     var currentChildMapping = this.props.children;
@@ -146,6 +167,7 @@ var CSSTransitionGroup = React.createClass({
       this.performEnter(key);
     } else if (!showProp && currentChildMapping && ReactTransitionChildMapping.inChildrenByKey(currentChildMapping, key)) {
       // This entered again before it fully left. Add it again.
+      //console.log('reenter ',key);
       this.performEnter(key);
     } else {
       this.setState({children: currentChildMapping});

diff --git a/lib/CSSTransitionGroupChild.jsx b/lib/CSSTransitionGroupChild.jsx
@@ -25,15 +25,20 @@ var ReactCSSTransitionGroupChild = React.createClass({
     var className = this.props.name + '-' + animationType;
     var activeClassName = className + '-active';
 
-    var endListener = function (e) {
+    if (this.endListener) {
+      this.endListener();
+    }
+
+    this.endListener = (e) => {
       if (e && e.target !== node) {
         return;
       }
 
       CSSCore.removeClass(node, className);
       CSSCore.removeClass(node, activeClassName);
 
-      ReactTransitionEvents.removeEndEventListener(node, endListener);
+      ReactTransitionEvents.removeEndEventListener(node, this.endListener);
+      this.endListener = null;
 
       // Usually this optional callback is used for informing an owner of
       // a leave animation and telling it to remove the child.
@@ -42,7 +47,7 @@ var ReactCSSTransitionGroupChild = React.createClass({
       }
     };
 
-    ReactTransitionEvents.addEndEventListener(node, endListener);
+    ReactTransitionEvents.addEndEventListener(node, this.endListener);
 
     CSSCore.addClass(node, className);
 
@@ -58,6 +63,18 @@ var ReactCSSTransitionGroupChild = React.createClass({
     }
   },
 
+  stop() {
+    //console.log('force stop')
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      this.classNameQueue.length = 0;
+      this.timeout = null;
+    }
+    if (this.endListener) {
+      this.endListener();
+    }
+  },
+
   flushClassNameQueue() {
     if (this.isMounted()) {
       this.classNameQueue.forEach(

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