Merge pull request #17 from react-component/leave-warning

afc163 · web-flow · commit 4f34176bddca · 2016-06-16T16:24:06.000+08:00
Leave warning
diff --git a/.travis.yml b/.travis.yml
@@ -7,7 +7,7 @@ notifications:
   - yiminghe@gmail.com
 
 node_js:
-- 5
+- 4.0.0
 
 before_install:
 - |
@@ -16,7 +16,7 @@ before_install:
       echo "Only docs were updated, stopping build process."
       exit
     fi
-    npm install mocha-phantomjs -g
+    npm install npm@3.x -g
     phantomjs --version
 script:
 - |
@@ -28,11 +28,10 @@ script:
 env:
   matrix:
   - TEST_TYPE=lint
-  - TEST_TYPE=browser-test
-  - TEST_TYPE=browser-test-cover
-  - TEST_TYPE=saucelabs
+  - TEST_TYPE=test
+  - TEST_TYPE=coverage
 
 
 matrix:
   allow_failures:
-  - env: "TEST_TYPE=saucelabs"
+  - env: "TEST_TYPE=saucelabs"
diff --git a/examples/custom.js b/examples/custom.js
@@ -4,7 +4,7 @@ import React from 'react';
 import ReactDom from 'react-dom';
 
 ReactDom.render(<div>
-  <QueueAnim animConfig={{translateX: [100, 0]}}>
+  <QueueAnim animConfig={{ translateX: [100, 0] }}>
     <div key="1">依次进入</div>
     <div key="2">依次进入</div>
     <div key="3">依次进入</div>
diff --git a/examples/dialog-style.js b/examples/dialog-style.js
@@ -30,8 +30,9 @@ const App = React.createClass({
           animation="zoom"
           maskAnimation="fade"
           onClose={this.onClose}
-          style={{width: 600}}
-          title={<div> 第二个弹框</div>}>
+          style={{ width: 600 }}
+          title={<div> 第二个弹框</div>}
+        >
           <QueueAnim>
             <div key="1">依次进入</div>
             <div key="2">依次进入</div>
@@ -43,7 +44,10 @@ const App = React.createClass({
     }
     return (
       <div>
-        <QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]} duration={[500, 2000]} ease={['easeOutBack', 'easeInOutCirc']} leaveReverse>
+        <QueueAnim type={['right', 'left']} interval={[100, 200]}
+          delay={[0, 1000]} duration={[500, 2000]}
+          ease={['easeOutBack', 'easeInOutCirc']} leaveReverse
+        >
           <div key="1">依次进入</div>
           <div key="2">依次进入</div>
           <div key="3">依次进入</div>
diff --git a/examples/dynamic.js b/examples/dynamic.js
@@ -64,7 +64,7 @@ const App = React.createClass({
     const items = this.state.items;
     items.splice(items.length - 1, 1);
     items.push({
-      children: '新节点' + Date.now(),
+      children: `新节点${Date.now()}`,
       key: this.index++,
     });
     this.setState({ items });
diff --git a/examples/enter-leave.js b/examples/enter-leave.js
@@ -35,10 +35,13 @@ const App = React.createClass({
   render() {
     return (
       <div>
-        <QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]} duration={[500, 2000]} ease={['easeOutBack', 'easeInOutCirc']} leaveReverse>
-        {this.state.items.map((item) => <div key={item.key}>
-          {item.children}
-        </div>)}
+        <QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]}
+          duration={[500, 2000]}
+          ease={['easeOutBack', 'easeInOutCirc']} leaveReverse
+        >
+          {this.state.items.map((item) => <div key={item.key}>
+            {item.children}
+          </div>)}
         </QueueAnim>
         <button onClick={this.removeAll}>移出所有</button>
       </div>
diff --git a/examples/monkey-click.js b/examples/monkey-click.js
@@ -36,11 +36,12 @@ const App = React.createClass({
   render() {
     return (
       <div>
-        <button onClick={this.toggle}>切换</button><span>{this.state.show ? '显示' : '隐藏'}</span>
+        <button onClick={this.toggle}>切换</button>
+        <span>{this.state.show ? '显示' : '隐藏'}</span>
         <QueueAnim leaveReverse>
-        {this.state.show ? this.state.items.map((item) => <div key={item.key}>
-          {item.children}
-        </div>) : null}
+          {this.state.show ? this.state.items.map((item) => <div key={item.key}>
+            {item.children}
+          </div>) : null}
         </QueueAnim>
       </div>
     );
diff --git a/examples/nested.js b/examples/nested.js
@@ -9,11 +9,11 @@ ReactDom.render(<QueueAnim>
   <div key="3">依次进入</div>
   <div key="4">依次进入</div>
   <div key="5">依次进入</div>
-  <QueueAnim key="6" style={{backgroundColor: 'red'}} delay={1000}>
+  <QueueAnim key="6" style={{ backgroundColor: 'red' }} delay={1000}>
     <div key="7">依次进入</div>
     <div key="8">依次进入</div>
     <div key="9">依次进入</div>
-    <QueueAnim key="10" style={{backgroundColor: 'yellow'}}>
+    <QueueAnim key="10" style={{ backgroundColor: 'yellow' }}>
       <div key="11">依次进入</div>
       <div key="12">依次进入</div>
       <div key="13">依次进入</div>
diff --git a/examples/param-func.js b/examples/param-func.js
@@ -17,9 +17,9 @@ const Page1 = React.createClass({
   },
   animConfigFunc(e) {
     if (e.key === '3') {
-      return {opacity: [1, 0], translateX: [0, 30]};
+      return { opacity: [1, 0], translateX: [0, 30] };
     }
-    return [{opacity: [1, 0], translateX: [0, -30]}, {opacity: [1, 0], translateX: [0, 30]}];
+    return [{ opacity: [1, 0], translateX: [0, -30] }, { opacity: [1, 0], translateX: [0, 30] }];
   },
   durationFunc(e) {
     if (e.key === '3') {
@@ -41,15 +41,18 @@ const Page1 = React.createClass({
   },
   render() {
     return (<div>
-      <button onClick={this.onClick}>切换</button>
-      <QueueAnim interval={300} animConfig={this.animConfigFunc} duration={this.durationFunc} ease={this.easeFunc} delay={this.delayFunc}>
-      {this.state.show ? [<div key="1">依次进入</div>,
-        <div key="2">依次进入</div>,
-        <div key="3">改变type</div>,
-        <div key="4">依次进入</div>,
-        <div key="5">依次进入</div>] : null}
-      </QueueAnim>
-    </div>
+        <button onClick={this.onClick}>切换</button>
+        <QueueAnim interval={300} animConfig={this.animConfigFunc}
+          duration={this.durationFunc} ease={this.easeFunc}
+          delay={this.delayFunc}
+        >
+          {this.state.show ? [<div key="1">依次进入</div>,
+            <div key="2">依次进入</div>,
+            <div key="3">改变type</div>,
+            <div key="4">依次进入</div>,
+            <div key="5">依次进入</div>] : null}
+        </QueueAnim>
+      </div>
     );
   },
 });
diff --git a/examples/router.js b/examples/router.js
@@ -18,7 +18,7 @@ const App = React.createClass({
       &nbsp;
         <Link to="/page2">Page 2</Link>
         <QueueAnim type={['right', 'left']} className="router-wrap">
-          {React.cloneElement(props.children || <h1 key="home">Home Page</h1>, {key: key})}
+          {React.cloneElement(props.children || <h1 key="home">Home Page</h1>, { key })}
         </QueueAnim>
       </div>
     );
diff --git a/examples/shortcut.js b/examples/shortcut.js
@@ -5,71 +5,71 @@ import ReactDom from 'react-dom';
 
 ReactDom.render(<div>
   <h3>left</h3>
-  <QueueAnim type="left" style={{margin: '20px 0'}}>
+  <QueueAnim type="left" style={{ margin: '20px 0' }}>
     <div key="1">依次进入</div>
     <div key="2">依次进入</div>
     <div key="3">依次进入</div>
     <div key="4">依次进入</div>
     <div key="5">依次进入</div>
   </QueueAnim>
   <h3>top</h3>
-  <QueueAnim type="top" style={{margin: '20px 0'}}>
+  <QueueAnim type="top" style={{ margin: '20px 0' }}>
     <div key="1">依次进入</div>
     <div key="2">依次进入</div>
     <div key="3">依次进入</div>
     <div key="4">依次进入</div>
     <div key="5">依次进入</div>
   </QueueAnim>
   <h3>right (default)</h3>
-  <QueueAnim type="right" style={{margin: '20px 0'}}>
+  <QueueAnim type="right" style={{ margin: '20px 0' }}>
     <div key="1">依次进入</div>
     <div key="2">依次进入</div>
     <div key="3">依次进入</div>
     <div key="4">依次进入</div>
     <div key="5">依次进入</div>
   </QueueAnim>
   <h3>bottom</h3>
-  <QueueAnim type="bottom" style={{margin: '20px 0'}}>
+  <QueueAnim type="bottom" style={{ margin: '20px 0' }}>
     <div key="1">依次进入</div>
     <div key="2">依次进入</div>
     <div key="3">依次进入</div>
     <div key="4">依次进入</div>
     <div key="5">依次进入</div>
   </QueueAnim>
   <h3>alpha</h3>
-  <QueueAnim type="alpha" style={{margin: '20px 0'}}>
+  <QueueAnim type="alpha" style={{ margin: '20px 0' }}>
     <div key="1">依次进入</div>
     <div key="2">依次进入</div>
     <div key="3">依次进入</div>
     <div key="4">依次进入</div>
     <div key="5">依次进入</div>
   </QueueAnim>
   <h3>scale</h3>
-  <QueueAnim type="scale" style={{margin: '20px 0'}} interval={100}>
-    <div key="1" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="2" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="3" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="4" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="5" style={{display: 'inline-block'}}>依次进入</div>
+  <QueueAnim type="scale" style={{ margin: '20px 0' }} interval={100}>
+    <div key="1" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="2" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="3" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="4" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="5" style={{ display: 'inline-block' }}>依次进入</div>
   </QueueAnim>
   <h3>scaleBig</h3>
-  <QueueAnim type="scaleBig" style={{margin: '20px 0'}} interval={100}>
-    <div key="1" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="2" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="3" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="4" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="5" style={{display: 'inline-block'}}>依次进入</div>
+  <QueueAnim type="scaleBig" style={{ margin: '20px 0' }} interval={100}>
+    <div key="1" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="2" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="3" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="4" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="5" style={{ display: 'inline-block' }}>依次进入</div>
   </QueueAnim>
   <h3>scaleX</h3>
-  <QueueAnim type="scaleX" style={{margin: '20px 0'}} interval={100}>
-    <div key="1" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="2" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="3" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="4" style={{display: 'inline-block'}}>依次进入</div>
-    <div key="5" style={{display: 'inline-block'}}>依次进入</div>
+  <QueueAnim type="scaleX" style={{ margin: '20px 0' }} interval={100}>
+    <div key="1" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="2" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="3" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="4" style={{ display: 'inline-block' }}>依次进入</div>
+    <div key="5" style={{ display: 'inline-block' }}>依次进入</div>
   </QueueAnim>
   <h3>scaleY</h3>
-  <QueueAnim type="scaleY" style={{margin: '20px 0'}}>
+  <QueueAnim type="scaleY" style={{ margin: '20px 0' }}>
     <div key="1">依次进入</div>
     <div key="2">依次进入</div>
     <div key="3">依次进入</div>
diff --git a/package.json b/package.json
@@ -29,22 +29,22 @@
   "scripts": {
     "build": "rc-tools run build",
     "gh-pages": "rc-tools run gh-pages",
-    "start": "rc-server",
+    "start": "rc-tools run server",
     "pub": "rc-tools run pub",
     "lint": "rc-tools run lint",
     "karma": "rc-tools run karma",
     "saucelabs": "rc-tools run saucelabs",
-    "browser-test": "rc-tools run browser-test",
-    "browser-test-cover": "rc-tools run browser-test-cover"
+    "test": "rc-tools run test",
+    "chrome-test": "rc-tools run chrome-test",
+    "coverage": "rc-tools run coverage"
   },
   "devDependencies": {
     "expect.js": "~0.3.1",
     "history": "^2.0.1",
     "jquery": "~1.11.3",
     "precommit-hook": "1.x",
     "rc-dialog": "~5.2.1",
-    "rc-server": "3.x",
-    "rc-tools": "4.x",
+    "rc-tools": "5.x",
     "react": "~0.14.0",
     "react-addons-test-utils": "~0.14.0",
     "react-dom": "~0.14.0",
diff --git a/src/QueueAnim.jsx b/src/QueueAnim.jsx
diff --git a/src/utils.js b/src/utils.js
diff --git a/tests/index.js b/tests/index.js
diff --git a/tests/runner.html b/tests/runner.html
