Run codemod react-codemod/transforms/class again (#7679)
ref. #7321
Toru Kobayashi committed
Sep 9, 2016 at 02:38 UTC
df033180f0b56443985ad6e79c2eafdcc49384f7
3 files changed
+57
-64
src/addons/transitions/ReactCSSTransitionGroup.js
+14
-16
@@ -46,10 +46,10 @@ function createTransitionTimeoutPropValidator(transitionType) {
46
* enters or leaves the DOM.
47
* See https://facebook.github.io/react/docs/animation.html#high-level-api-reactcsstransitiongroup
48
*/
49
-var ReactCSSTransitionGroup = React.createClass({
50
- displayName: 'ReactCSSTransitionGroup',
49
+class ReactCSSTransitionGroup extends React.Component {
50
+ static displayName = 'ReactCSSTransitionGroup';
51
52
- propTypes: {
52
+ static propTypes = {
53
transitionName: ReactCSSTransitionGroupChild.propTypes.name,
54
55
transitionAppear: React.PropTypes.bool,
@@ -58,17 +58,15 @@ var ReactCSSTransitionGroup = React.createClass({
58
transitionAppearTimeout: createTransitionTimeoutPropValidator('Appear'),
59
transitionEnterTimeout: createTransitionTimeoutPropValidator('Enter'),
60
transitionLeaveTimeout: createTransitionTimeoutPropValidator('Leave'),
61
- },
61
+ };
62
63
- getDefaultProps: function() {
64
- return {
65
- transitionAppear: false,
66
- transitionEnter: true,
67
- transitionLeave: true,
68
- };
69
- },
63
+ static defaultProps = {
64
+ transitionAppear: false,
65
+ transitionEnter: true,
66
+ transitionLeave: true,
67
+ };
68
71
- _wrapChild: function(child) {
69
+ _wrapChild = (child) => {
70
// We need to provide this childFactory so that
71
// ReactCSSTransitionGroupChild can receive updates to name, enter, and
72
// leave while it is leaving.
@@ -85,14 +83,14 @@ var ReactCSSTransitionGroup = React.createClass({
83
},
84
child
85
);
88
- },
86
+ };
87
90
- render: function() {
88
+ render() {
89
return React.createElement(
90
ReactTransitionGroup,
91
Object.assign({}, this.props, {childFactory: this._wrapChild})
92
);
95
- },
96
-});
93
+ }
94
+}
95
96
module.exports = ReactCSSTransitionGroup;
src/addons/transitions/ReactTransitionGroup.js
+38
-42
@@ -22,44 +22,40 @@ var emptyFunction = require('emptyFunction');
22
* special lifecycle hooks are called.
23
* See https://facebook.github.io/react/docs/animation.html#low-level-api-reacttransitiongroup
24
*/
25
-var ReactTransitionGroup = React.createClass({
26
- displayName: 'ReactTransitionGroup',
25
+class ReactTransitionGroup extends React.Component {
26
+ static displayName = 'ReactTransitionGroup';
27
28
- propTypes: {
28
+ static propTypes = {
29
component: React.PropTypes.any,
30
childFactory: React.PropTypes.func,
31
- },
32
-
33
- getDefaultProps: function() {
34
- return {
35
- component: 'span',
36
- childFactory: emptyFunction.thatReturnsArgument,
37
- };
38
- },
39
-
40
- getInitialState: function() {
41
- return {
42
- // TODO: can we get useful debug information to show at this point?
43
- children: ReactTransitionChildMapping.getChildMapping(this.props.children),
44
- };
45
- },
46
-
47
- componentWillMount: function() {
31
+ };
32
+
33
+ static defaultProps = {
34
+ component: 'span',
35
+ childFactory: emptyFunction.thatReturnsArgument,
36
+ };
37
+
38
+ state = {
39
+ // TODO: can we get useful debug information to show at this point?
40
+ children: ReactTransitionChildMapping.getChildMapping(this.props.children),
41
+ };
42
+
43
+ componentWillMount() {
44
this.currentlyTransitioningKeys = {};
45
this.keysToEnter = [];
46
this.keysToLeave = [];
51
- },
47
+ }
48
53
- componentDidMount: function() {
49
+ componentDidMount() {
50
var initialChildMapping = this.state.children;
51
for (var key in initialChildMapping) {
52
if (initialChildMapping[key]) {
53
this.performAppear(key);
54
}
55
}
60
- },
56
+ }
57
62
- componentWillReceiveProps: function(nextProps) {
58
+ componentWillReceiveProps(nextProps) {
59
var nextChildMapping;
60
if (__DEV__) {
61
nextChildMapping = ReactTransitionChildMapping.getChildMapping(
@@ -99,9 +95,9 @@ var ReactTransitionGroup = React.createClass({
95
}
96
97
// If we want to someday check for reordering, we could do it here.
102
- },
98
+ }
99
104
- componentDidUpdate: function() {
100
+ componentDidUpdate() {
101
var keysToEnter = this.keysToEnter;
102
this.keysToEnter = [];
103
keysToEnter.forEach(this.performEnter);
@@ -109,9 +105,9 @@ var ReactTransitionGroup = React.createClass({
105
var keysToLeave = this.keysToLeave;
106
this.keysToLeave = [];
107
keysToLeave.forEach(this.performLeave);
112
- },
108
+ }
109
114
- performAppear: function(key) {
110
+ performAppear = (key) => {
111
this.currentlyTransitioningKeys[key] = true;
112
113
var component = this.refs[key];
@@ -123,9 +119,9 @@ var ReactTransitionGroup = React.createClass({
119
} else {
120
this._handleDoneAppearing(key);
121
}
126
- },
122
+ };
123
128
- _handleDoneAppearing: function(key) {
124
+ _handleDoneAppearing = (key) => {
125
var component = this.refs[key];
126
if (component.componentDidAppear) {
127
component.componentDidAppear();
@@ -149,9 +145,9 @@ var ReactTransitionGroup = React.createClass({
145
// This was removed before it had fully appeared. Remove it.
146
this.performLeave(key);
147
}
152
- },
148
+ };
149
154
- performEnter: function(key) {
150
+ performEnter = (key) => {
151
this.currentlyTransitioningKeys[key] = true;
152
153
var component = this.refs[key];
@@ -163,9 +159,9 @@ var ReactTransitionGroup = React.createClass({
159
} else {
160
this._handleDoneEntering(key);
161
}
166
- },
162
+ };
163
168
- _handleDoneEntering: function(key) {
164
+ _handleDoneEntering = (key) => {
165
var component = this.refs[key];
166
if (component.componentDidEnter) {
167
component.componentDidEnter();
@@ -189,9 +185,9 @@ var ReactTransitionGroup = React.createClass({
185
// This was removed before it had fully entered. Remove it.
186
this.performLeave(key);
187
}
192
- },
188
+ };
189
194
- performLeave: function(key) {
190
+ performLeave = (key) => {
191
this.currentlyTransitioningKeys[key] = true;
192
193
var component = this.refs[key];
@@ -203,9 +199,9 @@ var ReactTransitionGroup = React.createClass({
199
// is done.
200
this._handleDoneLeaving(key);
201
}
206
- },
202
+ };
203
208
- _handleDoneLeaving: function(key) {
204
+ _handleDoneLeaving = (key) => {
205
var component = this.refs[key];
206
207
if (component.componentDidLeave) {
@@ -236,9 +232,9 @@ var ReactTransitionGroup = React.createClass({
232
return {children: newChildren};
233
});
234
}
239
- },
235
+ };
236
241
- render: function() {
237
+ render() {
238
// TODO: we could get rid of the need for the wrapper node
239
// by cloning a single child
240
var childrenToRender = [];
@@ -274,7 +270,7 @@ var ReactTransitionGroup = React.createClass({
270
props,
271
childrenToRender
272
);
277
- },
278
-});
273
+ }
274
+}
275
276
module.exports = ReactTransitionGroup;
src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+5
-6
@@ -868,15 +868,14 @@ describe('ReactDOMInput', () => {
868
});
869
870
it('does not raise a validation warning when it switches types', () => {
871
- var Input = React.createClass({
872
- getInitialState() {
873
- return { type: 'number', value: 1000 };
874
- },
871
+ class Input extends React.Component {
872
+ state = { type: 'number', value: 1000 };
873
+
874
render() {
875
var { value, type } = this.state;
876
return (<input onChange={() => {}} type={type} value={value} />);
878
- },
879
- });
877
+ }
878
+ }
879
880
var input = ReactTestUtils.renderIntoDocument(<Input />);
881
var node = ReactDOM.findDOMNode(input);