From b09e3f7547453c73de74db25a3ae93e98cfacb3a Mon Sep 17 00:00:00 2001 From: nd-02110114 Date: Tue, 9 Oct 2018 22:31:06 +0900 Subject: [PATCH 1/3] remove createReactClass --- RNTester/js/ImageExample.js | 219 +++++++++++++++++++++++------------- 1 file changed, 141 insertions(+), 78 deletions(-) diff --git a/RNTester/js/ImageExample.js b/RNTester/js/ImageExample.js index 830978f46fc8be..441d6dc1bc7878 100644 --- a/RNTester/js/ImageExample.js +++ b/RNTester/js/ImageExample.js @@ -10,47 +10,67 @@ '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 NetworkImageCallbackExampleState = { + events: string[], + startLoadPrefetched: boolean, + mountTime: Date, +}; + +type NetworkImageCallbackExampleProps = $ReadOnly<{| + source: { + uri: string, }, + prefetchedSource: { + uri: string, + }, +|}>; + +class NetworkImageCallbackExample extends React.Component< + NetworkImageCallbackExampleProps, + NetworkImageCallbackExampleState, +> { + static displayName: ?string = 'NetworkImageCallbackExample'; + + state = { + events: [], + startLoadPrefetched: false, + mountTime: new Date(), + }; UNSAFE_componentWillMount() { this.setState({mountTime: new Date()}); - }, + } - render: function() { - var {mountTime} = this.state; + _loadEventFired = (event: string) => { + const {events} = this.state; + this.setState({events: [...events, event]}); + }; + render() { + const {mountTime} = this.state; return ( {this.state.events.join('\n')} ); - }, + } +} - _loadEventFired(event) { - this.setState(state => { - return (state.events = [...state.events, event]); - }); +type NetworkImageExampleProps = $ReadOnly<{| + source: { + uri: string, }, -}); +|}>; + +type NetworkImageExampleState = { + error: boolean, + loading: boolean, + progress: number, +}; -var NetworkImageExample = createReactClass({ - getInitialState: function() { - return { - error: false, - loading: false, - progress: 0, - }; - }, - render: function() { +class NetworkImageExample extends React.Component< + NetworkImageExampleProps, + NetworkImageExampleState, +> { + state = { + error: false, + loading: false, + progress: 0, + }; + + render() { var loader = this.state.loading ? ( {this.state.progress}% @@ -178,22 +206,38 @@ var NetworkImageExample = createReactClass({ {loader} ); - }, -}); + } +} -var ImageSizeExample = createReactClass({ - getInitialState: function() { - return { - width: 0, - height: 0, - }; - }, - componentDidMount: function() { - Image.getSize(this.props.source.uri, (width, height) => { - this.setState({width, height}); - }); +type ImageSizeExampleState = { + width: number, + height: number, +}; + +type ImageSizeExampleProps = $ReadOnly<{| + source: { + uri: string, }, - render: function() { +|}>; + +class ImageSizeExample extends React.Component< + ImageSizeExampleProps, + ImageSizeExampleState, +> { + state = { + width: 0, + height: 0, + }; + + componentDidMount() { + if (this.props.source.uri != null) { + Image.getSize(this.props.source.uri, (width, height) => { + this.setState({width, height}); + }); + } + } + + render() { return ( ); - }, -}); + } +} + +type MultipleSourcesExampleState = { + width: number, + height: number, +}; + +class MultipleSourcesExample extends React.Component< + {}, + 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, + }); + }; -var MultipleSourcesExample = createReactClass({ - getInitialState: function() { - return { - width: 30, - height: 30, - }; - }, - render: function() { + 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 ( @@ -260,26 +341,8 @@ var MultipleSourcesExample = createReactClass({ ); - }, - 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'; From adfd5d9143e9a74f5eb60048365bcd62c47e8c78 Mon Sep 17 00:00:00 2001 From: nd-02110114 Date: Wed, 10 Oct 2018 10:15:56 +0900 Subject: [PATCH 2/3] fix flow --- RNTester/js/ImageExample.js | 56 +++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 30 deletions(-) diff --git a/RNTester/js/ImageExample.js b/RNTester/js/ImageExample.js index 441d6dc1bc7878..11e6efaa7860f4 100644 --- a/RNTester/js/ImageExample.js +++ b/RNTester/js/ImageExample.js @@ -33,19 +33,19 @@ const prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL); * found when Flow v0.63 was deployed. To see the error delete this comment and * run Flow. */ -type NetworkImageCallbackExampleState = { - events: string[], +type ImageSource = $ReadOnly<{| + uri: string, +|}>; + +type NetworkImageCallbackExampleState = {| + events: Array, startLoadPrefetched: boolean, mountTime: Date, -}; +|}; type NetworkImageCallbackExampleProps = $ReadOnly<{| - source: { - uri: string, - }, - prefetchedSource: { - uri: string, - }, + source: ImageSource, + prefetchedSource: ImageSource, |}>; class NetworkImageCallbackExample extends React.Component< @@ -156,17 +156,15 @@ class NetworkImageCallbackExample extends React.Component< } } -type NetworkImageExampleProps = $ReadOnly<{| - source: { - uri: string, - }, -|}>; - -type NetworkImageExampleState = { +type NetworkImageExampleState = {| error: boolean, loading: boolean, progress: number, -}; +|}; + +type NetworkImageExampleProps = $ReadOnly<{| + source: ImageSource, +|}>; class NetworkImageExample extends React.Component< NetworkImageExampleProps, @@ -209,15 +207,13 @@ class NetworkImageExample extends React.Component< } } -type ImageSizeExampleState = { +type ImageSizeExampleState = {| width: number, height: number, -}; +|}; type ImageSizeExampleProps = $ReadOnly<{| - source: { - uri: string, - }, + source: ImageSource, |}>; class ImageSizeExample extends React.Component< @@ -230,11 +226,9 @@ class ImageSizeExample extends React.Component< }; componentDidMount() { - if (this.props.source.uri != null) { - Image.getSize(this.props.source.uri, (width, height) => { - this.setState({width, height}); - }); - } + Image.getSize(this.props.source.uri, (width, height) => { + this.setState({width, height}); + }); } render() { @@ -258,13 +252,15 @@ class ImageSizeExample extends React.Component< } } -type MultipleSourcesExampleState = { +type MultipleSourcesExampleState = {| width: number, height: number, -}; +|}; + +type MultipleSourcesExampleProps = $ReadOnly<{||}>; class MultipleSourcesExample extends React.Component< - {}, + MultipleSourcesExampleProps, MultipleSourcesExampleState, > { state = { From 5705cbba4f6e4a1abd5da9351b7cabb7777e3fec Mon Sep 17 00:00:00 2001 From: nd-02110114 Date: Wed, 10 Oct 2018 10:21:55 +0900 Subject: [PATCH 3/3] some fix --- RNTester/js/ImageExample.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/RNTester/js/ImageExample.js b/RNTester/js/ImageExample.js index 11e6efaa7860f4..f25033ae1920e9 100644 --- a/RNTester/js/ImageExample.js +++ b/RNTester/js/ImageExample.js @@ -29,10 +29,6 @@ const IMAGE_PREFETCH_URL = 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now(); 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. */ - type ImageSource = $ReadOnly<{| uri: string, |}>; @@ -52,8 +48,6 @@ class NetworkImageCallbackExample extends React.Component< NetworkImageCallbackExampleProps, NetworkImageCallbackExampleState, > { - static displayName: ?string = 'NetworkImageCallbackExample'; - state = { events: [], startLoadPrefetched: false,