Skip to content

Commit 897f721

Browse files
nissy-devfacebook-github-bot
nissy-dev
authored and
facebook-github-bot
committed
remove createReactClass from RNTester/js/ImageExample.js (#21602)
Summary: Related to #21581 . Removed createReactClass from the RNTester/js/ImageExample.js The diff of this PR is a little big. If there are any problems, please teach me � - [x] npm run prettier - [x] npm run flow-check-ios - [x] npm run flow-check-android [GENERAL] [ENHANCEMENT] [RNTester/js/ImageExample.js] - remove createReactClass dependency Pull Request resolved: #21602 Reviewed By: TheSavior Differential Revision: D10304857 Pulled By: RSNara fbshipit-source-id: 339b1220828c6218cad0d09c7a5034a61e623bc6
1 parent 96bdfe3 commit 897f721

File tree

1 file changed

+135
-81
lines changed

1 file changed

+135
-81
lines changed

‎RNTester/js/ImageExample.js‎

Lines changed: 135 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -10,47 +10,62 @@
1010

1111
'use strict';
1212

13-
var React = require('react');
14-
var createReactClass = require('create-react-class');
15-
var ReactNative = require('react-native');
16-
var {
13+
const React = require('react');
14+
const ReactNative = require('react-native');
15+
const {
1716
ActivityIndicator,
1817
Image,
19-
Platform,
2018
StyleSheet,
2119
Text,
2220
View,
2321
ImageBackground,
2422
} = ReactNative;
2523

26-
var base64Icon =
24+
const base64Icon =
2725
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
2826

29-
var ImageCapInsetsExample = require('./ImageCapInsetsExample');
27+
const ImageCapInsetsExample = require('./ImageCapInsetsExample');
3028
const IMAGE_PREFETCH_URL =
3129
'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
32-
var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
30+
const prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
3331

34-
/* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an error
35-
* found when Flow v0.63 was deployed. To see the error delete this comment and
36-
* run Flow. */
37-
var NetworkImageCallbackExample = createReactClass({
38-
displayName: 'NetworkImageCallbackExample',
39-
getInitialState: function() {
40-
return {
41-
events: [],
42-
startLoadPrefetched: false,
43-
mountTime: new Date(),
44-
};
45-
},
32+
type ImageSource = $ReadOnly<{|
33+
uri: string,
34+
|}>;
35+
36+
type NetworkImageCallbackExampleState = {|
37+
events: Array<string>,
38+
startLoadPrefetched: boolean,
39+
mountTime: Date,
40+
|};
41+
42+
type NetworkImageCallbackExampleProps = $ReadOnly<{|
43+
source: ImageSource,
44+
prefetchedSource: ImageSource,
45+
|}>;
46+
47+
class NetworkImageCallbackExample extends React.Component<
48+
NetworkImageCallbackExampleProps,
49+
NetworkImageCallbackExampleState,
50+
> {
51+
state = {
52+
events: [],
53+
startLoadPrefetched: false,
54+
mountTime: new Date(),
55+
};
4656

4757
UNSAFE_componentWillMount() {
4858
this.setState({mountTime: new Date()});
49-
},
59+
}
5060

51-
render: function() {
52-
var {mountTime} = this.state;
61+
_loadEventFired = (event: string) => {
62+
this.setState(state => ({
63+
events: [...state.events, event],
64+
}));
65+
};
5366

67+
render() {
68+
const {mountTime} = this.state;
5469
return (
5570
<View>
5671
<Image
@@ -133,24 +148,30 @@ var NetworkImageCallbackExample = createReactClass({
133148
<Text style={{marginTop: 20}}>{this.state.events.join('\n')}</Text>
134149
</View>
135150
);
136-
},
151+
}
152+
}
137153

138-
_loadEventFired(event) {
139-
this.setState(state => {
140-
return (state.events = [...state.events, event]);
141-
});
142-
},
143-
});
154+
type NetworkImageExampleState = {|
155+
error: boolean,
156+
loading: boolean,
157+
progress: number,
158+
|};
144159

145-
var NetworkImageExample = createReactClass({
146-
getInitialState: function() {
147-
return {
148-
error: false,
149-
loading: false,
150-
progress: 0,
151-
};
152-
},
153-
render: function() {
160+
type NetworkImageExampleProps = $ReadOnly<{|
161+
source: ImageSource,
162+
|}>;
163+
164+
class NetworkImageExample extends React.Component<
165+
NetworkImageExampleProps,
166+
NetworkImageExampleState,
167+
> {
168+
state = {
169+
error: false,
170+
loading: false,
171+
progress: 0,
172+
};
173+
174+
render() {
154175
var loader = this.state.loading ? (
155176
<View style={styles.progress}>
156177
<Text>{this.state.progress}%</Text>
@@ -178,22 +199,34 @@ var NetworkImageExample = createReactClass({
178199
{loader}
179200
</ImageBackground>
180201
);
181-
},
182-
});
202+
}
203+
}
183204

184-
var ImageSizeExample = createReactClass({
185-
getInitialState: function() {
186-
return {
187-
width: 0,
188-
height: 0,
189-
};
190-
},
191-
componentDidMount: function() {
205+
type ImageSizeExampleState = {|
206+
width: number,
207+
height: number,
208+
|};
209+
210+
type ImageSizeExampleProps = $ReadOnly<{|
211+
source: ImageSource,
212+
|}>;
213+
214+
class ImageSizeExample extends React.Component<
215+
ImageSizeExampleProps,
216+
ImageSizeExampleState,
217+
> {
218+
state = {
219+
width: 0,
220+
height: 0,
221+
};
222+
223+
componentDidMount() {
192224
Image.getSize(this.props.source.uri, (width, height) => {
193225
this.setState({width, height});
194226
});
195-
},
196-
render: function() {
227+
}
228+
229+
render() {
197230
return (
198231
<View style={{flexDirection: 'row'}}>
199232
<Image
@@ -211,17 +244,56 @@ var ImageSizeExample = createReactClass({
211244
</Text>
212245
</View>
213246
);
214-
},
215-
});
247+
}
248+
}
249+
250+
type MultipleSourcesExampleState = {|
251+
width: number,
252+
height: number,
253+
|};
254+
255+
type MultipleSourcesExampleProps = $ReadOnly<{||}>;
256+
257+
class MultipleSourcesExample extends React.Component<
258+
MultipleSourcesExampleProps,
259+
MultipleSourcesExampleState,
260+
> {
261+
state = {
262+
width: 30,
263+
height: 30,
264+
};
265+
266+
increaseImageSize = () => {
267+
if (this.state.width >= 100) {
268+
return;
269+
}
270+
this.setState({
271+
width: this.state.width + 10,
272+
height: this.state.height + 10,
273+
});
274+
};
216275

217-
var MultipleSourcesExample = createReactClass({
218-
getInitialState: function() {
219-
return {
220-
width: 30,
221-
height: 30,
222-
};
223-
},
224-
render: function() {
276+
increaseImageSize = () => {
277+
if (this.state.width >= 100) {
278+
return;
279+
}
280+
this.setState({
281+
width: this.state.width + 10,
282+
height: this.state.height + 10,
283+
});
284+
};
285+
286+
decreaseImageSize = () => {
287+
if (this.state.width <= 10) {
288+
return;
289+
}
290+
this.setState({
291+
width: this.state.width - 10,
292+
height: this.state.height - 10,
293+
});
294+
};
295+
296+
render() {
225297
return (
226298
<View>
227299
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
@@ -260,26 +332,8 @@ var MultipleSourcesExample = createReactClass({
260332
</View>
261333
</View>
262334
);
263-
},
264-
increaseImageSize: function() {
265-
if (this.state.width >= 100) {
266-
return;
267-
}
268-
this.setState({
269-
width: this.state.width + 10,
270-
height: this.state.height + 10,
271-
});
272-
},
273-
decreaseImageSize: function() {
274-
if (this.state.width <= 10) {
275-
return;
276-
}
277-
this.setState({
278-
width: this.state.width - 10,
279-
height: this.state.height - 10,
280-
});
281-
},
282-
});
335+
}
336+
}
283337

284338
exports.displayName = (undefined: ?string);
285339
exports.framework = 'React';

0 commit comments

Comments
 (0)