async callback

react-component · Jun 16, 2016 · e707fda · e707fda
1 parent 5d6b295
commit e707fda
Show file tree

Hide file tree

Showing 24 changed files with 185 additions and 131 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,4 +24,4 @@ dist
 assets/**/*.css
 build
 lib
-examples/**/*.css
+coverage
diff --git a/.travis.yml b/.travis.yml
@@ -5,35 +5,28 @@ sudo: false
 notifications:
   email:
   - yiminghe@gmail.com
+
 node_js:
 - 4.0.0
+
 before_install:
 - |
-  if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
-  then
-    echo "Only docs were updated, stopping build process."
-    exit
-  fi
-  npm install mocha-phantomjs -g
-  phantomjs --version
+    if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
+    then
+      echo "Only docs were updated, stopping build process."
+      exit
+    fi
+    npm install npm@3.x -g
+    phantomjs --version
 script:
 - |
-  if [ "$TEST_TYPE" = test ]; then
-    npm test
-  else
-    npm run $TEST_TYPE
-  fi
+    if [ "$TEST_TYPE" = test ]; then
+      npm test
+    else
+      npm run $TEST_TYPE
+    fi
 env:
   matrix:
   - TEST_TYPE=lint
-  - TEST_TYPE=browser-test
-  - TEST_TYPE=browser-test-cover
-  - TEST_TYPE=saucelabs
-  global:
-  - secure: 0xaoSLtXTfjq6iLAO4w/oBTazQgXT4QHdXQ9XQTgy8PALXpaPJt/PnUqyWGAuCrUnrnVIcHx6gvEYUnVDRDQBmD3QfWiNFz5xvqr5sMmd5uCG0lwY2aV4KlEP4UTSLe6DmNCMSHii+JNaOZX32cAuirmo8Ze3x8Oyt/4JebDNG/iu2M/5qI2Zs+aUzx2AmioHUGfVnEUod/SlkuySOwkgiDGWShCQHqYQrbiCVLMQIgt95aGEHL6vy4KqXxsi425Z0Kd8jTXxVY64mRDH67p2nv5Nbd7DHEjl+pasKvVXwPCf6VIEV1pqRzYrXcjKWEJmuIyhY335kQNCkxCcDYS9QiOvObolR91TrHJEcsFmWcSOQgIShq/APFR6papzoF1+6uJUnJnoLKHMuq1eaPNHE5fXyDDig6+5N6jMOW4AwzpRLnwsP78mzgi+GpxUxsAFut/f4OtUQzg3VmX+H8UWGeiV2yaJO0SIknh2nHH/NrE5qi4679JnxepiM2y38w0yZIzbB4kgD6d5W7v7wM4qW6zzpEkby/WZCUeYQPjWXRn3bMraRTYJIJ/DuM4y7DuxX0Jix0nyip9k36lj/xBLzsc3QD8n08uRpEUsgqtQxTtKxRtDVCVB5MVC5CLl7ybimST9XtbbFDFuiuthduj8sg/TzbG0wl4AE8qzNK8RkE=
-  - secure: KodeDbhAXomR9SA0tNT88aj0Zqlt9O4t7SBB5qTBYcb3z1IjHZfe+Bd7L3BxMCjwqPt9S0aC1hFD09GWPgAW6xx5YFExoc3EDF7TvOfHwTDAkDR+mD4mp6RgYdiRtUQpkVleNvu7GQYNmRICoXqNWAg0HdF1BlMR1ntdhA1L3j9l1PGuBugjeeLqx1cHO6kEiMtc80cFL065jbds8NCBNmdKHCgXb3gwOJtDW3ui275tsbQRx+bX/sLaWxDF7TNburLpmyDBbZEzvUFhudkLRk8VmGa59rvvNDDhqzmYakTpNgZWZ+hXQ64w66bU0i2eauEGbn1rPHfXxOWbUJQYC5yVa4EANGJQ28ZZ/Mp/xKMf2AInUGwfcbT9vUKABojeaprstAzSryLXrCSa0yWORN3eWCiVBlWGOQYWpQ3oJKL5JzPjZ6deNa9fdTG5yLk4pjnoEhOGdToJbIhybi9IBFTgFuVm00ppGv17bO7Whlj8W+1GpFvrPvHEiFWdjkchi9DkKKR/SMgYF/tWNh+CX7X8OqiXbZJFMIm55Q/XZviHGT11n5OOU6CBI+HKp0SP1g+DYWIbaaLA1WEDs3+b2tqc3BAOC1kBRuWfM90FU8JgxG3Cx0Qs6sw+F4JUWgFuK8abB6Wvku4U1E0DcERsso3/ceE96Ja/e1Iq2T9Lm5Q=
-
-
-matrix:
-  allow_failures:
-  - env: "TEST_TYPE=saucelabs"
+  - TEST_TYPE=test
+  - TEST_TYPE=coverage
diff --git a/HISTORY.md b/HISTORY.md
@@ -0,0 +1,6 @@
+# History
+----
+
+## 2.1.0 / 2016-06-16
+
+- make onEnter/onLeave/onAppear async
diff --git a/README.md b/README.md
@@ -10,10 +10,6 @@ animate react element easily
 [![node version][node-image]][node-url]
 [![npm download][download-image]][download-url]
 
-[![Sauce Test Status](https://saucelabs.com/buildstatus/rc_animate)](https://saucelabs.com/u/rc_animate)
-
-[![Sauce Test Status](https://saucelabs.com/browser-matrix/rc_animate.svg)](https://saucelabs.com/u/rc_animate)
-
 [npm-image]: http://img.shields.io/npm/v/rc-animate.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-animate
 [travis-image]: https://img.shields.io/travis/react-component/animate.svg?style=flat-square
@@ -163,11 +159,18 @@ online example: http://react-component.github.io/animate/examples/
 
 ## Test Case
 
-http://localhost:8200/tests/runner.html?coverage
+```
+npm test
+npm run chrome-test
+```
 
 ## Coverage
 
-http://localhost:8200/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8200/tests/runner.html?coverage
+```
+npm run coverage
+```
+
+open coverage/ dir
 
 ## License
 

diff --git a/examples/alert.js b/examples/alert.js
@@ -82,7 +82,7 @@ const AlertGroup = React.createClass({
     const children = alerts.map((a) => {
       if (!a.key) {
         seed++;
-        a.key = seed + '';
+        a.key = String(seed);
       }
       return <Alert {...a} onEnd={self.onEnd.bind(self, a.key)}/>;
     });
@@ -107,10 +107,10 @@ function alert(str, time, type, callback) {
     alertGroup = ReactDOM.render(<AlertGroup/>, div);
   }
   alertGroup.addAlert({
-    str: str,
-    time: time,
-    type: type,
-    callback: callback,
+    str,
+    time,
+    type,
+    callback,
   });
 }
 

diff --git a/examples/hide-todo.js b/examples/hide-todo.js
@@ -1,7 +1,7 @@
 /* eslint no-console:0, react/no-multi-comp:0 */
 
 import './assets/index.less';
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import assign from 'object-assign';
@@ -33,8 +33,10 @@ const Todo = React.createClass({
       padding: 10,
       margin: 10,
     };
-    return (<div onClick={this.props.onClick}
-                style={style}>
+    return (<div
+      onClick={this.props.onClick}
+      style={style}
+    >
       {props.children}
     </div>);
   },
@@ -43,30 +45,32 @@ const TodoList = React.createClass({
   getInitialState() {
     return {
       items: [
-        {content: 'hello', visible: true},
-        {content: 'world', visible: true},
-        {content: 'click', visible: true},
-        {content: 'me', visible: true}],
+        { content: 'hello', visible: true },
+        { content: 'world', visible: true },
+        { content: 'click', visible: true },
+        { content: 'me', visible: true }],
     };
   },
   handleHide(i, item) {
     const newItems = this.state.items.concat([]);
-    newItems.forEach((n, index)=> {
+    newItems.forEach((n, index) => {
       newItems[index] = assign({}, n, {
         visible: true,
       });
     });
     newItems[i] = assign({}, item, {
       visible: false,
     });
-    this.setState({items: newItems});
+    this.setState({ items: newItems });
   },
   render() {
     const items = this.state.items.map((item, i) => {
       return (
-        <Todo key={item.content}
-              visible={item.visible}
-              onClick={this.handleHide.bind(this, i, item)}>
+        <Todo
+          key={item.content}
+          visible={item.visible}
+          onClick={this.handleHide.bind(this, i, item)}
+        >
           {item.content}
         </Todo>
       );
@@ -75,7 +79,8 @@ const TodoList = React.createClass({
       <div>
         <Animate
           showProp="visible"
-          transitionName="fade">
+          transitionName="fade"
+        >
           {items}
         </Animate>
       </div>

diff --git a/examples/simple-animation.js b/examples/simple-animation.js
@@ -2,7 +2,7 @@
 
 import './assets/index.less';
 import Animate from 'rc-animate';
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import velocity from 'velocity-animate';
 const Box = React.createClass({
@@ -49,7 +49,7 @@ const Demo = React.createClass({
 
     velocity(node, 'slideDown', {
       duration: 1000,
-      complete: complete,
+      complete,
     });
     return {
       stop() {
@@ -74,7 +74,7 @@ const Demo = React.createClass({
 
     velocity(node, 'slideUp', {
       duration: 1000,
-      complete: complete,
+      complete,
     });
     return {
       stop() {
@@ -104,10 +104,18 @@ const Demo = React.createClass({
     };
     return (
       <div>
-        <label><input type="checkbox" onChange={this.toggle.bind(this, 'visible')} checked={this.state.visible}/>
+        <label><input
+          type="checkbox"
+          onChange={this.toggle.bind(this, 'visible')}
+          checked={this.state.visible}
+        />
           show</label>
         &nbsp;
-        <label><input type="checkbox" onChange={this.toggle.bind(this, 'exclusive')} checked={this.state.exclusive}/>
+        <label><input
+          type="checkbox"
+          onChange={this.toggle.bind(this, 'exclusive')}
+          checked={this.state.exclusive}
+        />
           exclusive</label>
         &nbsp;
         <button onClick={this.destroy}>destroy</button>
@@ -116,7 +124,8 @@ const Demo = React.createClass({
           component=""
           exclusive={this.state.exclusive}
           showProp="visible"
-          animation={anim}>
+          animation={anim}
+        >
           {this.state.destroyed ? null : <Box visible={this.state.visible}/>}
         </Animate>
       </div>

diff --git a/examples/simple-remove.js b/examples/simple-remove.js
@@ -31,7 +31,8 @@ const Demo = React.createClass({
         <button onClick={this.toggleAnimate}>toggle</button>
         <Animate
           component=""
-          transitionName="fade">
+          transitionName="fade"
+        >
           {this.state.enter ? <div key="1" style={style}/> : null}
         </Animate>
       </div>

diff --git a/examples/simple.js b/examples/simple.js
@@ -2,18 +2,23 @@
 
 import './assets/slow.less';
 import Animate from 'rc-animate';
-import React, {Component} from 'react';
+import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import assign from 'object-assign';
 
-const Div = (props)=> {
-  const {style, show} = props;
+const Div = (props) => {
+  const { style, show } = props;
   const newStyle = assign({}, style, {
     display: show ? '' : 'none',
   });
   return <div {...props} style={newStyle}/>;
 };
 
+Div.propTypes = {
+  style: PropTypes.object,
+  show: PropTypes.bool,
+};
+
 class Demo extends Component {
 
   constructor(props) {
@@ -38,17 +43,26 @@ class Demo extends Component {
     };
     return (
       <div>
-        <label><input type="checkbox" onChange={this.toggle.bind(this, 'enter')} checked={this.state.enter}/>
+        <label><input
+          type="checkbox"
+          onChange={this.toggle.bind(this, 'enter')}
+          checked={this.state.enter}
+        />
           show</label>
         &nbsp;
-        <label><input type="checkbox" onChange={this.toggle.bind(this, 'exclusive')} checked={this.state.exclusive}/>
+        <label><input
+          type="checkbox"
+          onChange={this.toggle.bind(this, 'exclusive')}
+          checked={this.state.exclusive}
+        />
           exclusive</label>
         <br/><br/>
         <Animate
           component=""
           exclusive={this.state.exclusive}
           showProp="show"
-          transitionName="fade">
+          transitionName="fade"
+        >
           <Div show={this.state.enter} style={style}/>
         </Animate>
       </div>

diff --git a/examples/todo-animation.js b/examples/todo-animation.js
@@ -1,7 +1,7 @@
 /* eslint no-console:0, react/no-multi-comp:0, no-alert:0 */
 
 import './assets/index.less';
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import velocity from 'velocity-animate';
@@ -55,7 +55,7 @@ const TodoList = React.createClass({
 
     velocity(node, 'slideDown', {
       duration: 1000,
-      complete: complete,
+      complete,
     });
     return {
       stop() {
@@ -77,7 +77,7 @@ const TodoList = React.createClass({
 
     velocity(node, 'slideUp', {
       duration: 1000,
-      complete: complete,
+      complete,
     });
     return {
       stop() {
@@ -90,12 +90,12 @@ const TodoList = React.createClass({
   handleAdd() {
     const newItems =
       this.state.items.concat([prompt('Enter some text')]);
-    this.setState({items: newItems});
+    this.setState({ items: newItems });
   },
   handleRemove(i) {
     const newItems = this.state.items;
     newItems.splice(i, 1);
-    this.setState({items: newItems});
+    this.setState({ items: newItems });
   },
   toggle(field) {
     this.setState({
@@ -118,12 +118,18 @@ const TodoList = React.createClass({
       <div>
         <button onClick={this.handleAdd}>Add Item</button>
         &nbsp;
-        <label><input type="checkbox" onChange={this.toggle.bind(this, 'exclusive')} checked={this.state.exclusive}/>
+        <label>
+          <input
+            type="checkbox"
+            onChange={this.toggle.bind(this, 'exclusive')}
+            checked={this.state.exclusive}
+          />
           exclusive</label>
         <br/><br/>
         <Animate
           exclusive={this.state.exclusive}
-          animation={anim}>
+          animation={anim}
+        >
           {items}
         </Animate>
       </div>