Skip to content

Commit 196fdca

Browse files
afc163afc163
committed
use es6 class
1 parent d068b8a commit 196fdca

File tree

8 files changed

+224
-249
lines changed

8 files changed

+224
-249
lines changed

‎examples/arrowContent.js

Lines changed: 91 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -15,97 +15,95 @@ const styles = {
1515
borderRadius: '6px',
1616
};
1717

18-
const Test = React.createClass({
19-
render() {
20-
return (<div>
21-
<Tooltip
22-
placement="left"
23-
overlay={text}
24-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
25-
>
26-
<a href="#" style={styles}>左边</a>
27-
</Tooltip>
28-
<Tooltip
29-
placement="top"
30-
overlay={text}
31-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
32-
>
33-
<a href="#" style={styles}>上边</a>
34-
</Tooltip>
35-
<Tooltip
36-
placement="bottom"
37-
overlay={text}
38-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
39-
>
40-
<a href="#" style={styles}>下边</a>
41-
</Tooltip>
42-
<Tooltip
43-
placement="right"
44-
overlay={text}
45-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
46-
>
47-
<a href="#" style={styles}>右边</a>
48-
</Tooltip>
49-
<br />
50-
<Tooltip
51-
placement="leftTop"
52-
overlay={text}
53-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
54-
>
55-
<a href="#" style={styles}>左上</a>
56-
</Tooltip>
57-
<Tooltip
58-
placement="leftBottom"
59-
overlay={text}
60-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
61-
>
62-
<a href="#" style={styles}>左下</a>
63-
</Tooltip>
64-
<Tooltip
65-
placement="rightTop"
66-
overlay={text}
67-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
68-
>
69-
<a href="#" style={styles}>右上</a>
70-
</Tooltip>
71-
<Tooltip
72-
placement="rightBottom"
73-
overlay={text}
74-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
75-
>
76-
<a href="#" style={styles}>右下</a>
77-
</Tooltip>
78-
<br />
79-
<Tooltip
80-
placement="topLeft"
81-
overlay={text}
82-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
83-
>
84-
<a href="#" style={styles}>上左</a>
85-
</Tooltip>
86-
<Tooltip
87-
placement="topRight"
88-
overlay={text}
89-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
90-
>
91-
<a href="#" style={styles}>上右</a>
92-
</Tooltip>
93-
<Tooltip
94-
placement="bottomLeft"
95-
overlay={text}
96-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
97-
>
98-
<a href="#" style={styles}>下左</a>
99-
</Tooltip>
100-
<Tooltip
101-
placement="bottomRight"
102-
overlay={text}
103-
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
104-
>
105-
<a href="#" style={styles}>下右</a>
106-
</Tooltip>
107-
</div>);
108-
},
109-
});
18+
const Test = () => (
19+
<div>
20+
<Tooltip
21+
placement="left"
22+
overlay={text}
23+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
24+
>
25+
<a href="#" style={styles}>左边</a>
26+
</Tooltip>
27+
<Tooltip
28+
placement="top"
29+
overlay={text}
30+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
31+
>
32+
<a href="#" style={styles}>上边</a>
33+
</Tooltip>
34+
<Tooltip
35+
placement="bottom"
36+
overlay={text}
37+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
38+
>
39+
<a href="#" style={styles}>下边</a>
40+
</Tooltip>
41+
<Tooltip
42+
placement="right"
43+
overlay={text}
44+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
45+
>
46+
<a href="#" style={styles}>右边</a>
47+
</Tooltip>
48+
<br />
49+
<Tooltip
50+
placement="leftTop"
51+
overlay={text}
52+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
53+
>
54+
<a href="#" style={styles}>左上</a>
55+
</Tooltip>
56+
<Tooltip
57+
placement="leftBottom"
58+
overlay={text}
59+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
60+
>
61+
<a href="#" style={styles}>左下</a>
62+
</Tooltip>
63+
<Tooltip
64+
placement="rightTop"
65+
overlay={text}
66+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
67+
>
68+
<a href="#" style={styles}>右上</a>
69+
</Tooltip>
70+
<Tooltip
71+
placement="rightBottom"
72+
overlay={text}
73+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
74+
>
75+
<a href="#" style={styles}>右下</a>
76+
</Tooltip>
77+
<br />
78+
<Tooltip
79+
placement="topLeft"
80+
overlay={text}
81+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
82+
>
83+
<a href="#" style={styles}>上左</a>
84+
</Tooltip>
85+
<Tooltip
86+
placement="topRight"
87+
overlay={text}
88+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
89+
>
90+
<a href="#" style={styles}>上右</a>
91+
</Tooltip>
92+
<Tooltip
93+
placement="bottomLeft"
94+
overlay={text}
95+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
96+
>
97+
<a href="#" style={styles}>下左</a>
98+
</Tooltip>
99+
<Tooltip
100+
placement="bottomRight"
101+
overlay={text}
102+
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
103+
>
104+
<a href="#" style={styles}>下右</a>
105+
</Tooltip>
106+
</div>
107+
);
110108

111-
ReactDOM.render(<Test/>, document.getElementById('__react-content'));
109+
ReactDOM.render(<Test />, document.getElementById('__react-content'));

‎examples/formError.js

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
1-
import React from 'react';
1+
import React, { Component } from 'react';
22
import ReactDOM from 'react-dom';
33
import Tooltip from 'rc-tooltip';
44
import 'rc-tooltip/assets/bootstrap.less';
55

6-
const Test = React.createClass({
7-
getInitialState() {
8-
return {
9-
visible: false,
10-
};
11-
},
12-
handleDestroy() {
6+
class Test extends Component {
7+
state = {
8+
visible: false,
9+
};
10+
handleDestroy = () => {
1311
this.setState({
1412
destroy: true,
1513
});
16-
},
17-
handleChange(e) {
14+
}
15+
handleChange = (e) => {
1816
this.setState({
1917
visible: !e.target.value,
2018
});
21-
},
19+
}
2220
render() {
2321
if (this.state.destroy) {
2422
return null;
2523
}
26-
return (<div>
27-
<div style={{ marginTop: 100, marginLeft: 100, marginBottom: 100 }}>
28-
<Tooltip
29-
visible={this.state.visible}
30-
animation="zoom"
31-
trigger={[]}
32-
overlayStyle={{ zIndex: 1000 }}
33-
overlay={<span>required!</span>}
34-
>
35-
<input onChange={this.handleChange}/>
36-
</Tooltip>
24+
return (
25+
<div>
26+
<div style={{ marginTop: 100, marginLeft: 100, marginBottom: 100 }}>
27+
<Tooltip
28+
visible={this.state.visible}
29+
animation="zoom"
30+
trigger={[]}
31+
overlayStyle={{ zIndex: 1000 }}
32+
overlay={<span>required!</span>}
33+
>
34+
<input onChange={this.handleChange}/>
35+
</Tooltip>
36+
</div>
37+
<button onClick={this.handleDestroy}>destroy</button>
3738
</div>
38-
<button onClick={this.handleDestroy}>destroy</button>
39-
</div>);
40-
},
41-
});
39+
);
40+
}
41+
}
4242

43-
ReactDOM.render(<Test/>, document.getElementById('__react-content'));
43+
ReactDOM.render(<Test />, document.getElementById('__react-content'));

‎examples/onVisibleChange.js

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { Component } from 'react';
22
import ReactDOM from 'react-dom';
33
import Tooltip from 'rc-tooltip';
44
import 'rc-tooltip/assets/bootstrap.less';
@@ -7,22 +7,20 @@ function preventDefault(e) {
77
e.preventDefault();
88
}
99

10-
const Test = React.createClass({
11-
getInitialState() {
12-
return {
13-
visible: false,
14-
};
15-
},
16-
onVisibleChange(visible) {
10+
class Test extends Component {
11+
state = {
12+
visible: false,
13+
};
14+
onVisibleChange = (visible) => {
1715
this.setState({
1816
visible,
1917
});
20-
},
21-
onDestroy() {
18+
}
19+
onDestroy = () => {
2220
this.setState({
2321
destroy: true,
2422
});
25-
},
23+
}
2624
render() {
2725
if (this.state.destroy) {
2826
return null;
@@ -41,7 +39,7 @@ const Test = React.createClass({
4139
</div>
4240
<button onClick={this.onDestroy}>destroy</button>
4341
</div>);
44-
},
45-
});
42+
}
43+
}
4644

47-
ReactDOM.render(<Test/>, document.getElementById('__react-content'));
45+
ReactDOM.render(<Test />, document.getElementById('__react-content'));

0 commit comments

Comments
 (0)