Merge pull request #34 from react-component/1.0

update 1.0.0
react-component · Apr 13, 2017 · 3fb3ead · 3fb3ead
2 parents 3b8386c + 722a9d2
commit 3fb3ead
Show file tree

Hide file tree

Showing 14 changed files with 401 additions and 471 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -7,7 +7,7 @@ notifications:
   - [email protected]
 
 node_js:
-- 4.0.0
+- 6.0.0
 
 before_install:
 - |

diff --git a/examples/animating-class.js b/examples/animating-class.js
@@ -4,9 +4,10 @@ import React from 'react';
 import ReactDom from 'react-dom';
 import '../assets/animating-class.less';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       items: [{
         children: '依次进入1',
         key: 1,
@@ -27,24 +28,26 @@ const App = React.createClass({
         key: 6,
       }],
     };
-  },
-  removeAll() {
+  }
+
+  removeAll = () => {
     this.setState({
       items: [],
     });
-  },
+  }
+
   render() {
     return (
       <div>
         <QueueAnim>
-        {this.state.items.map((item) => <div key={item.key}>
-          {item.children}
-        </div>)}
+          {this.state.items.map((item) => <div key={item.key}>
+            {item.children}
+          </div>)}
         </QueueAnim>
         <button onClick={this.removeAll}>移出所有</button>
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDom.render(<App />, document.getElementById('__react-content'));
diff --git a/examples/custom-ease.js b/examples/custom-ease.js
@@ -4,8 +4,8 @@ import React from 'react';
 import ReactDom from 'react-dom';
 
 ReactDom.render(
-  <div>
-    <QueueAnim ease={[0.42, 0, 0.58, 1]}>
+  <div style={{ height: 500 }}>
+    <QueueAnim ease={[0.175, 0.885, 0.32, 1.275]}>
       <div key="1">div 1</div>
       <div key="2">div 1</div>
       <div key="3">div 1</div>

diff --git a/examples/dialog-style.js b/examples/dialog-style.js
@@ -6,22 +6,25 @@ import ReactDom from 'react-dom';
 import Dialog from 'rc-dialog';
 import 'rc-dialog/assets/index.css';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       show: false,
     };
-  },
-  onClick() {
+  }
+
+  onClick = () => {
     this.setState({
       show: true,
     });
-  },
-  onClose() {
+  }
+  onClose = () => {
     this.setState({
       show: false,
     });
-  },
+  }
+
   render() {
     let dialog;
     if (this.state.show) {
@@ -57,7 +60,7 @@ const App = React.createClass({
         <button onClick={this.onClick}>弹出框口</button>
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDom.render(<App />, document.getElementById('__react-content'));
diff --git a/examples/dynamic.js b/examples/dynamic.js
@@ -3,10 +3,11 @@ import QueueAnim from 'rc-queue-anim';
 import React from 'react';
 import ReactDom from 'react-dom';
 
-const App = React.createClass({
-  getInitialState() {
+class App extends React.Component {
+  constructor(props) {
+    super(props);
     this.index = 100;
-    return {
+    this.state = {
       items: [{
         children: '依次进入1',
         key: 1,
@@ -27,16 +28,17 @@ const App = React.createClass({
         key: 6,
       }],
     };
-  },
-  add() {
+  }
+
+  add = () => {
     const items = this.state.items;
     items.push({
       children: '新节点',
       key: this.index++,
     });
     this.setState({ items });
-  },
-  addTwo() {
+  }
+  addTwo = () => {
     const items = this.state.items;
     items.push({
       children: '新节点',
@@ -47,8 +49,8 @@ const App = React.createClass({
       key: this.index++,
     });
     this.setState({ items });
-  },
-  remove(key, e) {
+  }
+  remove = (key, e) => {
     e.preventDefault();
     const items = this.state.items;
     const target = items.filter(item => item.key === key);
@@ -60,22 +62,22 @@ const App = React.createClass({
       items.splice(index, 1);
     }
     this.setState({ items });
-  },
-  removeAll() {
+  }
+  removeAll = () => {
     this.setState({
       items: [],
     });
-  },
-  removeAndAdd() {
+  }
+  removeAndAdd = () => {
     const items = this.state.items;
     items.splice(items.length - 1, 1);
     items.push({
       children: `新节点${Date.now()}`,
       key: this.index++,
     });
     this.setState({ items });
-  },
-  removeAndAddTow() {
+  }
+  removeAndAddTow = () => {
     const items = this.state.items;
     items.splice(items.length - 1, 1);
     items.splice(items.length - 2, 1);
@@ -88,12 +90,13 @@ const App = React.createClass({
       key: this.index++,
     });
     this.setState({ items });
-  },
-  removeTwo() {
+  }
+  removeTwo = () => {
     const items = this.state.items;
     items.splice(1, 1);
     this.setState({ items });
-  },
+  }
+
   render() {
     return (
       <div>
@@ -110,7 +113,7 @@ const App = React.createClass({
         </QueueAnim>
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDom.render(<App />, document.getElementById('__react-content'));
diff --git a/examples/empty-children.js b/examples/empty-children.js
@@ -3,7 +3,7 @@ import QueueAnim from 'rc-queue-anim';
 import React from 'react';
 import ReactDom from 'react-dom';
 
-const QueueItem = React.createClass({
+class QueueItem extends React.Component {
   render() {
     return (
       <QueueAnim>
@@ -12,18 +12,18 @@ const QueueItem = React.createClass({
         <div key="3">Item</div>
       </QueueAnim>
     );
-  },
-});
+  }
+}
 
-const Item = React.createClass({
+class Item extends React.Component {
   render() {
     return (
       <div>Item</div>
     );
-  },
-});
+  }
+}
 
-const Page1 = React.createClass({
+class Page1 extends React.Component {
   render() {
     return (
       <div>
@@ -42,7 +42,7 @@ const Page1 = React.createClass({
         </QueueAnim>
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDom.render(<Page1 />, document.getElementById('__react-content'));
diff --git a/examples/enter-leave.js b/examples/enter-leave.js
@@ -3,9 +3,10 @@ import QueueAnim from 'rc-queue-anim';
 import React from 'react';
 import ReactDom from 'react-dom';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       items: [{
         children: '依次进入1',
         key: 1,
@@ -26,12 +27,14 @@ const App = React.createClass({
         key: 6,
       }],
     };
-  },
-  removeAll() {
+  }
+
+  removeAll = () => {
     this.setState({
       items: [],
     });
-  },
+  }
+
   render() {
     return (
       <div>
@@ -46,7 +49,7 @@ const App = React.createClass({
         <button onClick={this.removeAll}>移出所有</button>
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDom.render(<App />, document.getElementById('__react-content'));
diff --git a/examples/monkey-click.js b/examples/monkey-click.js
@@ -3,9 +3,10 @@ import QueueAnim from 'rc-queue-anim';
 import React from 'react';
 import ReactDom from 'react-dom';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       show: true,
       items: [{
         children: '依次进入1',
@@ -27,25 +28,27 @@ const App = React.createClass({
         key: 6,
       }],
     };
-  },
-  toggle() {
+  }
+
+  toggle = () => {
     this.setState({
       show: !this.state.show,
     });
-  },
+  }
+
   render() {
     return (
       <div>
         <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}
+              {item.children}
+            </div>) : null}
         </QueueAnim>
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDom.render(<App />, document.getElementById('__react-content'));