mirror of
https://github.com/status-im/react-native.git
synced 2025-02-22 14:18:23 +00:00
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: https://github.com/facebook/react-native/pull/21602 Reviewed By: TheSavior Differential Revision: D10304857 Pulled By: RSNara fbshipit-source-id: 339b1220828c6218cad0d09c7a5034a61e623bc6
This commit is contained in:
nd-02110114
Facebook Github Bot
parent
96bdfe3a60
commit
897f721728
@ -10,47 +10,62 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var createReactClass = require('create-react-class');
|
||||
var ReactNative = require('react-native');
|
||||
var {
|
||||
const React = require('react');
|
||||
const ReactNative = require('react-native');
|
||||
const {
|
||||
ActivityIndicator,
|
||||
Image,
|
||||
Platform,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
ImageBackground,
|
||||
} = ReactNative;
|
||||
|
||||
var base64Icon =
|
||||
const base64Icon =
|
||||
'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==';
|
||||
|
||||
var ImageCapInsetsExample = require('./ImageCapInsetsExample');
|
||||
const ImageCapInsetsExample = require('./ImageCapInsetsExample');
|
||||
const IMAGE_PREFETCH_URL =
|
||||
'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
|
||||
var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
|
||||
const prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
|
||||
|
||||
/* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an error
|
||||
* found when Flow v0.63 was deployed. To see the error delete this comment and
|
||||
* run Flow. */
|
||||
var NetworkImageCallbackExample = createReactClass({
|
||||
displayName: 'NetworkImageCallbackExample',
|
||||
getInitialState: function() {
|
||||
return {
|
||||
events: [],
|
||||
startLoadPrefetched: false,
|
||||
mountTime: new Date(),
|
||||
};
|
||||
},
|
||||
type ImageSource = $ReadOnly<{|
|
||||
uri: string,
|
||||
|}>;
|
||||
|
||||
type NetworkImageCallbackExampleState = {|
|
||||
events: Array<string>,
|
||||
startLoadPrefetched: boolean,
|
||||
mountTime: Date,
|
||||
|};
|
||||
|
||||
type NetworkImageCallbackExampleProps = $ReadOnly<{|
|
||||
source: ImageSource,
|
||||
prefetchedSource: ImageSource,
|
||||
|}>;
|
||||
|
||||
class NetworkImageCallbackExample extends React.Component<
|
||||
NetworkImageCallbackExampleProps,
|
||||
NetworkImageCallbackExampleState,
|
||||
> {
|
||||
state = {
|
||||
events: [],
|
||||
startLoadPrefetched: false,
|
||||
mountTime: new Date(),
|
||||
};
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this.setState({mountTime: new Date()});
|
||||
},
|
||||
}
|
||||
|
||||
render: function() {
|
||||
var {mountTime} = this.state;
|
||||
_loadEventFired = (event: string) => {
|
||||
this.setState(state => ({
|
||||
events: [...state.events, event],
|
||||
}));
|
||||
};
|
||||
|
||||
render() {
|
||||
const {mountTime} = this.state;
|
||||
return (
|
||||
<View>
|
||||
<Image
|
||||
@ -133,24 +148,30 @@ var NetworkImageCallbackExample = createReactClass({
|
||||
<Text style={{marginTop: 20}}>{this.state.events.join('\n')}</Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
_loadEventFired(event) {
|
||||
this.setState(state => {
|
||||
return (state.events = [...state.events, event]);
|
||||
});
|
||||
},
|
||||
});
|
||||
type NetworkImageExampleState = {|
|
||||
error: boolean,
|
||||
loading: boolean,
|
||||
progress: number,
|
||||
|};
|
||||
|
||||
var NetworkImageExample = createReactClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
error: false,
|
||||
loading: false,
|
||||
progress: 0,
|
||||
};
|
||||
},
|
||||
render: function() {
|
||||
type NetworkImageExampleProps = $ReadOnly<{|
|
||||
source: ImageSource,
|
||||
|}>;
|
||||
|
||||
class NetworkImageExample extends React.Component<
|
||||
NetworkImageExampleProps,
|
||||
NetworkImageExampleState,
|
||||
> {
|
||||
state = {
|
||||
error: false,
|
||||
loading: false,
|
||||
progress: 0,
|
||||
};
|
||||
|
||||
render() {
|
||||
var loader = this.state.loading ? (
|
||||
<View style={styles.progress}>
|
||||
<Text>{this.state.progress}%</Text>
|
||||
@ -178,22 +199,34 @@ var NetworkImageExample = createReactClass({
|
||||
{loader}
|
||||
</ImageBackground>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var ImageSizeExample = createReactClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
width: 0,
|
||||
height: 0,
|
||||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
type ImageSizeExampleState = {|
|
||||
width: number,
|
||||
height: number,
|
||||
|};
|
||||
|
||||
type ImageSizeExampleProps = $ReadOnly<{|
|
||||
source: ImageSource,
|
||||
|}>;
|
||||
|
||||
class ImageSizeExample extends React.Component<
|
||||
ImageSizeExampleProps,
|
||||
ImageSizeExampleState,
|
||||
> {
|
||||
state = {
|
||||
width: 0,
|
||||
height: 0,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
Image.getSize(this.props.source.uri, (width, height) => {
|
||||
this.setState({width, height});
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={{flexDirection: 'row'}}>
|
||||
<Image
|
||||
@ -211,17 +244,56 @@ var ImageSizeExample = createReactClass({
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var MultipleSourcesExample = createReactClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
width: 30,
|
||||
height: 30,
|
||||
};
|
||||
},
|
||||
render: function() {
|
||||
type MultipleSourcesExampleState = {|
|
||||
width: number,
|
||||
height: number,
|
||||
|};
|
||||
|
||||
type MultipleSourcesExampleProps = $ReadOnly<{||}>;
|
||||
|
||||
class MultipleSourcesExample extends React.Component<
|
||||
MultipleSourcesExampleProps,
|
||||
MultipleSourcesExampleState,
|
||||
> {
|
||||
state = {
|
||||
width: 30,
|
||||
height: 30,
|
||||
};
|
||||
|
||||
increaseImageSize = () => {
|
||||
if (this.state.width >= 100) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
width: this.state.width + 10,
|
||||
height: this.state.height + 10,
|
||||
});
|
||||
};
|
||||
|
||||
increaseImageSize = () => {
|
||||
if (this.state.width >= 100) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
width: this.state.width + 10,
|
||||
height: this.state.height + 10,
|
||||
});
|
||||
};
|
||||
|
||||
decreaseImageSize = () => {
|
||||
if (this.state.width <= 10) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
width: this.state.width - 10,
|
||||
height: this.state.height - 10,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
|
||||
@ -260,26 +332,8 @@ var MultipleSourcesExample = createReactClass({
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
increaseImageSize: function() {
|
||||
if (this.state.width >= 100) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
width: this.state.width + 10,
|
||||
height: this.state.height + 10,
|
||||
});
|
||||
},
|
||||
decreaseImageSize: function() {
|
||||
if (this.state.width <= 10) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
width: this.state.width - 10,
|
||||
height: this.state.height - 10,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
exports.displayName = (undefined: ?string);
|
||||
exports.framework = 'React';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user