Skip to content

Commit 3fb3ead

Browse files
jljsj33jljsj33
authored
Merge pull request #34 from react-component/1.0
update 1.0.0
2 parents 3b8386c + 722a9d2 commit 3fb3ead

14 files changed

+401
-471
lines changed

‎.travis.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ notifications:
77
- [email protected]
88

99
node_js:
10-
- 4.0.0
10+
- 6.0.0
1111

1212
before_install:
1313
- |

‎examples/animating-class.js

+14-11
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import React from 'react';
44
import ReactDom from 'react-dom';
55
import '../assets/animating-class.less';
66

7-
const App = React.createClass({
8-
getInitialState() {
9-
return {
7+
class App extends React.Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = {
1011
items: [{
1112
children: '依次进入1',
1213
key: 1,
@@ -27,24 +28,26 @@ const App = React.createClass({
2728
key: 6,
2829
}],
2930
};
30-
},
31-
removeAll() {
31+
}
32+
33+
removeAll = () => {
3234
this.setState({
3335
items: [],
3436
});
35-
},
37+
}
38+
3639
render() {
3740
return (
3841
<div>
3942
<QueueAnim>
40-
{this.state.items.map((item) => <div key={item.key}>
41-
{item.children}
42-
</div>)}
43+
{this.state.items.map((item) => <div key={item.key}>
44+
{item.children}
45+
</div>)}
4346
</QueueAnim>
4447
<button onClick={this.removeAll}>移出所有</button>
4548
</div>
4649
);
47-
},
48-
});
50+
}
51+
}
4952

5053
ReactDom.render(<App />, document.getElementById('__react-content'));

‎examples/custom-ease.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import React from 'react';
44
import ReactDom from 'react-dom';
55

66
ReactDom.render(
7-
<div>
8-
<QueueAnim ease={[0.42, 0, 0.58, 1]}>
7+
<div style={{ height: 500 }}>
8+
<QueueAnim ease={[0.175, 0.885, 0.32, 1.275]}>
99
<div key="1">div 1</div>
1010
<div key="2">div 1</div>
1111
<div key="3">div 1</div>

‎examples/dialog-style.js

+13-10
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,25 @@ import ReactDom from 'react-dom';
66
import Dialog from 'rc-dialog';
77
import 'rc-dialog/assets/index.css';
88

9-
const App = React.createClass({
10-
getInitialState() {
11-
return {
9+
class App extends React.Component {
10+
constructor(props) {
11+
super(props);
12+
this.state = {
1213
show: false,
1314
};
14-
},
15-
onClick() {
15+
}
16+
17+
onClick = () => {
1618
this.setState({
1719
show: true,
1820
});
19-
},
20-
onClose() {
21+
}
22+
onClose = () => {
2123
this.setState({
2224
show: false,
2325
});
24-
},
26+
}
27+
2528
render() {
2629
let dialog;
2730
if (this.state.show) {
@@ -57,7 +60,7 @@ const App = React.createClass({
5760
<button onClick={this.onClick}>弹出框口</button>
5861
</div>
5962
);
60-
},
61-
});
63+
}
64+
}
6265

6366
ReactDom.render(<App />, document.getElementById('__react-content'));

‎examples/dynamic.js

+23-20
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import QueueAnim from 'rc-queue-anim';
33
import React from 'react';
44
import ReactDom from 'react-dom';
55

6-
const App = React.createClass({
7-
getInitialState() {
6+
class App extends React.Component {
7+
constructor(props) {
8+
super(props);
89
this.index = 100;
9-
return {
10+
this.state = {
1011
items: [{
1112
children: '依次进入1',
1213
key: 1,
@@ -27,16 +28,17 @@ const App = React.createClass({
2728
key: 6,
2829
}],
2930
};
30-
},
31-
add() {
31+
}
32+
33+
add = () => {
3234
const items = this.state.items;
3335
items.push({
3436
children: '新节点',
3537
key: this.index++,
3638
});
3739
this.setState({ items });
38-
},
39-
addTwo() {
40+
}
41+
addTwo = () => {
4042
const items = this.state.items;
4143
items.push({
4244
children: '新节点',
@@ -47,8 +49,8 @@ const App = React.createClass({
4749
key: this.index++,
4850
});
4951
this.setState({ items });
50-
},
51-
remove(key, e) {
52+
}
53+
remove = (key, e) => {
5254
e.preventDefault();
5355
const items = this.state.items;
5456
const target = items.filter(item => item.key === key);
@@ -60,22 +62,22 @@ const App = React.createClass({
6062
items.splice(index, 1);
6163
}
6264
this.setState({ items });
63-
},
64-
removeAll() {
65+
}
66+
removeAll = () => {
6567
this.setState({
6668
items: [],
6769
});
68-
},
69-
removeAndAdd() {
70+
}
71+
removeAndAdd = () => {
7072
const items = this.state.items;
7173
items.splice(items.length - 1, 1);
7274
items.push({
7375
children: `新节点${Date.now()}`,
7476
key: this.index++,
7577
});
7678
this.setState({ items });
77-
},
78-
removeAndAddTow() {
79+
}
80+
removeAndAddTow = () => {
7981
const items = this.state.items;
8082
items.splice(items.length - 1, 1);
8183
items.splice(items.length - 2, 1);
@@ -88,12 +90,13 @@ const App = React.createClass({
8890
key: this.index++,
8991
});
9092
this.setState({ items });
91-
},
92-
removeTwo() {
93+
}
94+
removeTwo = () => {
9395
const items = this.state.items;
9496
items.splice(1, 1);
9597
this.setState({ items });
96-
},
98+
}
99+
97100
render() {
98101
return (
99102
<div>
@@ -110,7 +113,7 @@ const App = React.createClass({
110113
</QueueAnim>
111114
</div>
112115
);
113-
},
114-
});
116+
}
117+
}
115118

116119
ReactDom.render(<App />, document.getElementById('__react-content'));

‎examples/empty-children.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import QueueAnim from 'rc-queue-anim';
33
import React from 'react';
44
import ReactDom from 'react-dom';
55

6-
const QueueItem = React.createClass({
6+
class QueueItem extends React.Component {
77
render() {
88
return (
99
<QueueAnim>
@@ -12,18 +12,18 @@ const QueueItem = React.createClass({
1212
<div key="3">Item</div>
1313
</QueueAnim>
1414
);
15-
},
16-
});
15+
}
16+
}
1717

18-
const Item = React.createClass({
18+
class Item extends React.Component {
1919
render() {
2020
return (
2121
<div>Item</div>
2222
);
23-
},
24-
});
23+
}
24+
}
2525

26-
const Page1 = React.createClass({
26+
class Page1 extends React.Component {
2727
render() {
2828
return (
2929
<div>
@@ -42,7 +42,7 @@ const Page1 = React.createClass({
4242
</QueueAnim>
4343
</div>
4444
);
45-
},
46-
});
45+
}
46+
}
4747

4848
ReactDom.render(<Page1 />, document.getElementById('__react-content'));

‎examples/enter-leave.js

+11-8
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import QueueAnim from 'rc-queue-anim';
33
import React from 'react';
44
import ReactDom from 'react-dom';
55

6-
const App = React.createClass({
7-
getInitialState() {
8-
return {
6+
class App extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = {
910
items: [{
1011
children: '依次进入1',
1112
key: 1,
@@ -26,12 +27,14 @@ const App = React.createClass({
2627
key: 6,
2728
}],
2829
};
29-
},
30-
removeAll() {
30+
}
31+
32+
removeAll = () => {
3133
this.setState({
3234
items: [],
3335
});
34-
},
36+
}
37+
3538
render() {
3639
return (
3740
<div>
@@ -46,7 +49,7 @@ const App = React.createClass({
4649
<button onClick={this.removeAll}>移出所有</button>
4750
</div>
4851
);
49-
},
50-
});
52+
}
53+
}
5154

5255
ReactDom.render(<App />, document.getElementById('__react-content'));

‎examples/monkey-click.js

+13-10
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import QueueAnim from 'rc-queue-anim';
33
import React from 'react';
44
import ReactDom from 'react-dom';
55

6-
const App = React.createClass({
7-
getInitialState() {
8-
return {
6+
class App extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = {
910
show: true,
1011
items: [{
1112
children: '依次进入1',
@@ -27,25 +28,27 @@ const App = React.createClass({
2728
key: 6,
2829
}],
2930
};
30-
},
31-
toggle() {
31+
}
32+
33+
toggle = () => {
3234
this.setState({
3335
show: !this.state.show,
3436
});
35-
},
37+
}
38+
3639
render() {
3740
return (
3841
<div>
3942
<button onClick={this.toggle}>切换</button>
4043
<span>{this.state.show ? '显示' : '隐藏'}</span>
4144
<QueueAnim leaveReverse>
4245
{this.state.show ? this.state.items.map((item) => <div key={item.key}>
43-
{item.children}
44-
</div>) : null}
46+
{item.children}
47+
</div>) : null}
4548
</QueueAnim>
4649
</div>
4750
);
48-
},
49-
});
51+
}
52+
}
5053

5154
ReactDom.render(<App />, document.getElementById('__react-content'));

0 commit comments

Comments
 (0)