From 275858cccdddd48bd0de5c4ae3a2f7f53b043776 Mon Sep 17 00:00:00 2001 From: Thomas BARRAS Date: Tue, 9 Oct 2018 21:04:24 -0400 Subject: [PATCH 1/3] UPDATE: rm createReactClass --- RNTester/js/CameraRollView.js | 164 +++++++++++++++++----------------- 1 file changed, 82 insertions(+), 82 deletions(-) diff --git a/RNTester/js/CameraRollView.js b/RNTester/js/CameraRollView.js index eac4eed4641493..5f922a01050ca2 100644 --- a/RNTester/js/CameraRollView.js +++ b/RNTester/js/CameraRollView.js @@ -10,11 +10,9 @@ 'use strict'; -var React = require('react'); -var createReactClass = require('create-react-class'); -const PropTypes = require('prop-types'); -var ReactNative = require('react-native'); -var { +const React = require('react'); +const ReactNative = require('react-native'); +const { ActivityIndicator, Alert, CameraRoll, @@ -25,105 +23,111 @@ var { StyleSheet, View, } = ReactNative; +const ListViewDataSource = require('ListViewDataSource'); -var groupByEveryN = require('groupByEveryN'); -var logError = require('logError'); +const groupByEveryN = require('groupByEveryN'); +const logError = require('logError'); + +import type {RNTesterProps} from 'RNTesterTypes'; + +type Props = $ReadOnly<{| + ...RNTesterProps, -var propTypes = { /** * The group where the photos will be fetched from. Possible * values are 'Album', 'All', 'Event', 'Faces', 'Library', 'PhotoStream' * and SavedPhotos. */ - groupTypes: PropTypes.oneOf([ - 'Album', - 'All', - 'Event', - 'Faces', - 'Library', - 'PhotoStream', - 'SavedPhotos', - ]), + groupTypes: + | 'Album' + | 'All' + | 'Event' + | 'Faces' + | 'Library' + | 'PhotoStream' + | 'SavedPhotos', /** * Number of images that will be fetched in one page. */ - batchSize: PropTypes.number, + batchSize: number, /** * A function that takes a single image as a parameter and renders it. */ - renderImage: PropTypes.func, + renderImage: $FlowFixMe => React.Node, /** * imagesPerRow: Number of images to be shown in each row. */ - imagesPerRow: PropTypes.number, + + imagesPerRow: number, /** * The asset type, one of 'Photos', 'Videos' or 'All' */ - assetType: PropTypes.oneOf(['Photos', 'Videos', 'All']), -}; - -var CameraRollView = createReactClass({ - displayName: 'CameraRollView', - propTypes: propTypes, - - getDefaultProps: function(): Object { + assetType: 'Photos' | 'Videos' | 'All', +|}>; + +type State = {| + assets: Array, + lastCursor: ?string, + noMore: boolean, + loadingMore: boolean, + dataSource: ListViewDataSource, +|}; + +class CameraRollView extends React.Component { + static defaultProps = { + groupTypes: 'SavedPhotos', + batchSize: 5, + imagesPerRow: 1, + assetType: 'Photos', + renderImage: function(asset: $FlowFixMe) { + const imageSize = 150; + const imageStyle = [styles.image, {width: imageSize, height: imageSize}]; + return ; + }, + }; + + state = this.getInitialState(); + + getInitialState() { return { - groupTypes: 'SavedPhotos', - batchSize: 5, - imagesPerRow: 1, - assetType: 'Photos', - renderImage: function(asset) { - var imageSize = 150; - var imageStyle = [styles.image, {width: imageSize, height: imageSize}]; - return ; - }, - }; - }, - - getInitialState: function() { - var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged}); - - return { - assets: ([]: Array), - groupTypes: this.props.groupTypes, - lastCursor: (null: ?string), - assetType: this.props.assetType, + assets: [], + lastCursor: null, noMore: false, loadingMore: false, - dataSource: ds, + dataSource: new ListView.DataSource({rowHasChanged: this._rowHasChanged}), }; - }, + } /** * This should be called when the image renderer is changed to tell the * component to re-render its assets. */ - rendererChanged: function() { - var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged}); + rendererChanged() { + const ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged}); this.state.dataSource = ds.cloneWithRows( // $FlowFixMe(>=0.41.0) groupByEveryN(this.state.assets, this.props.imagesPerRow), ); - }, + } - componentDidMount: function() { + componentDidMount() { this.fetch(); - }, + } /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an error * found when Flow v0.68 was deployed. To see the error delete this comment * and run Flow. */ - UNSAFE_componentWillReceiveProps: function(nextProps: {groupTypes?: string}) { + UNSAFE_componentWillReceiveProps(nextProps: {groupTypes?: string}) { if (this.props.groupTypes !== nextProps.groupTypes) { this.fetch(true); } - }, + } - _fetch: async function(clear?: boolean) { + _fetch = async (clear?: boolean) => { if (clear) { this.setState(this.getInitialState(), this.fetch); return; @@ -162,21 +166,21 @@ var CameraRollView = createReactClass({ } catch (e) { logError(e); } - }, + }; /** * Fetches more images from the camera roll. If clear is set to true, it will * set the component to its initial state and re-fetch the images. */ - fetch: function(clear?: boolean) { + fetch = (clear?: boolean) => { if (!this.state.loadingMore) { this.setState({loadingMore: true}, () => { this._fetch(clear); }); } - }, + }; - render: function() { + render() { return ( ); - }, + } - _rowHasChanged: function(r1: Array, r2: Array): boolean { + _rowHasChanged(r1: Array, r2: Array): boolean { if (r1.length !== r2.length) { return true; } @@ -201,22 +205,18 @@ var CameraRollView = createReactClass({ } return false; - }, + } - _renderFooterSpinner: function() { + _renderFooterSpinner = () => { if (!this.state.noMore) { return ; } return null; - }, + }; // rowData is an array of images - _renderRow: function( - rowData: Array, - sectionID: string, - rowID: string, - ) { - var images = rowData.map(image => { + _renderRow = (rowData: Array, sectionID: string, rowID: string) => { + const images = rowData.map(image => { if (image === null) { return null; } @@ -225,11 +225,11 @@ var CameraRollView = createReactClass({ }); return {images}; - }, + }; - _appendAssets: function(data: Object) { - var assets = data.edges; - var newState: Object = {loadingMore: false}; + _appendAssets = (data: Object) => { + const assets = data.edges; + const newState: Object = {loadingMore: false}; if (!data.page_info.has_next_page) { newState.noMore = true; @@ -245,16 +245,16 @@ var CameraRollView = createReactClass({ } this.setState(newState); - }, + }; - _onEndReached: function() { + _onEndReached = () => { if (!this.state.noMore) { this.fetch(); } - }, -}); + }; +} -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ row: { flexDirection: 'row', flex: 1, From c84b56335a83865fe4722d5baef8e0a25f6aa62d Mon Sep 17 00:00:00 2001 From: Thomas BARRAS Date: Wed, 10 Oct 2018 19:19:58 -0400 Subject: [PATCH 2/3] UPDATE: flow types --- Libraries/CameraRoll/CameraRoll.js | 48 +++++++++++++------------ RNTester/js/CameraRollExample.js | 8 +++-- RNTester/js/CameraRollView.js | 58 +++++++++++++++--------------- 3 files changed, 61 insertions(+), 53 deletions(-) diff --git a/Libraries/CameraRoll/CameraRoll.js b/Libraries/CameraRoll/CameraRoll.js index cf66760df155d1..a11aafa06929da 100644 --- a/Libraries/CameraRoll/CameraRoll.js +++ b/Libraries/CameraRoll/CameraRoll.js @@ -79,34 +79,36 @@ const getPhotosParamChecker = createStrictShapeTypeChecker({ mimeTypes: PropTypes.arrayOf(PropTypes.string), }); -type GetPhotosReturn = Promise<{ - edges: Array<{ - node: { - type: string, - group_name: string, - image: { - uri: string, - height: number, - width: number, - isStored?: boolean, - playableDuration: number, - }, - timestamp: number, - location?: { - latitude?: number, - longitude?: number, - altitude?: number, - heading?: number, - speed?: number, - }, +export type GetPhotosEdge = { + node: { + type: string, + group_name: string, + image: { + uri: string, + height: number, + width: number, + isStored?: boolean, + playableDuration: number, }, - }>, + timestamp: number, + location?: { + latitude?: number, + longitude?: number, + altitude?: number, + heading?: number, + speed?: number, + }, + }, +}; + +export type GetPhotosReturn = { + edges: Array, page_info: { has_next_page: boolean, start_cursor?: string, end_cursor?: string, }, -}>; +}; /** * Shape of the return value of the `getPhotos` function. @@ -204,7 +206,7 @@ class CameraRoll { * * See https://facebook.github.io/react-native/docs/cameraroll.html#getphotos */ - static getPhotos(params: GetPhotosParams): GetPhotosReturn { + static getPhotos(params: GetPhotosParams): Promise { if (__DEV__) { checkPropTypes( {params: getPhotosParamChecker}, diff --git a/RNTester/js/CameraRollExample.js b/RNTester/js/CameraRollExample.js index 50abd79d89b477..8ba91f48d85c11 100644 --- a/RNTester/js/CameraRollExample.js +++ b/RNTester/js/CameraRollExample.js @@ -28,6 +28,8 @@ const CameraRollView = require('./CameraRollView'); const AssetScaledImageExampleView = require('./AssetScaledImageExample'); +import type {GetPhotosEdge} from 'CameraRoll'; + class CameraRollExample extends React.Component< $FlowFixMeProps, $FlowFixMeState, @@ -74,7 +76,7 @@ class CameraRollExample extends React.Component< } } - _renderImage = asset => { + _renderImage = (asset: GetPhotosEdge) => { const imageSize = this.state.bigImages ? 150 : 75; const imageStyle = [styles.image, {width: imageSize, height: imageSize}]; const {location} = asset.node; @@ -82,7 +84,9 @@ class CameraRollExample extends React.Component< ? JSON.stringify(location) : 'Unknown location'; return ( - + diff --git a/RNTester/js/CameraRollView.js b/RNTester/js/CameraRollView.js index 5f922a01050ca2..18cef35a9b313c 100644 --- a/RNTester/js/CameraRollView.js +++ b/RNTester/js/CameraRollView.js @@ -28,11 +28,23 @@ const ListViewDataSource = require('ListViewDataSource'); const groupByEveryN = require('groupByEveryN'); const logError = require('logError'); -import type {RNTesterProps} from 'RNTesterTypes'; +import type {GetPhotosEdge, GetPhotosReturn} from 'CameraRoll'; -type Props = $ReadOnly<{| - ...RNTesterProps, +const rowHasChanged = function(r1: Array, r2: Array): boolean { + if (r1.length !== r2.length) { + return true; + } + + for (var i = 0; i < r1.length; i++) { + if (r1[i] !== r2[i]) { + return true; + } + } + + return false; +}; +type Props = $ReadOnly<{| /** * The group where the photos will be fetched from. Possible * values are 'Album', 'All', 'Event', 'Faces', 'Library', 'PhotoStream' @@ -55,7 +67,7 @@ type Props = $ReadOnly<{| /** * A function that takes a single image as a parameter and renders it. */ - renderImage: $FlowFixMe => React.Node, + renderImage: GetPhotosEdge => React.Node, /** * imagesPerRow: Number of images to be shown in each row. @@ -70,7 +82,7 @@ type Props = $ReadOnly<{| |}>; type State = {| - assets: Array, + assets: Array, lastCursor: ?string, noMore: boolean, loadingMore: boolean, @@ -83,7 +95,7 @@ class CameraRollView extends React.Component { batchSize: 5, imagesPerRow: 1, assetType: 'Photos', - renderImage: function(asset: $FlowFixMe) { + renderImage: function(asset: GetPhotosEdge) { const imageSize = 150; const imageStyle = [styles.image, {width: imageSize, height: imageSize}]; return ; @@ -98,7 +110,7 @@ class CameraRollView extends React.Component { lastCursor: null, noMore: false, loadingMore: false, - dataSource: new ListView.DataSource({rowHasChanged: this._rowHasChanged}), + dataSource: new ListView.DataSource({rowHasChanged: rowHasChanged}), }; } @@ -107,7 +119,7 @@ class CameraRollView extends React.Component { * component to re-render its assets. */ rendererChanged() { - const ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged}); + const ds = new ListView.DataSource({rowHasChanged: rowHasChanged}); this.state.dataSource = ds.cloneWithRows( // $FlowFixMe(>=0.41.0) groupByEveryN(this.state.assets, this.props.imagesPerRow), @@ -127,7 +139,7 @@ class CameraRollView extends React.Component { } } - _fetch = async (clear?: boolean) => { + async _fetch(clear?: boolean) { if (clear) { this.setState(this.getInitialState(), this.fetch); return; @@ -166,7 +178,7 @@ class CameraRollView extends React.Component { } catch (e) { logError(e); } - }; + } /** * Fetches more images from the camera roll. If clear is set to true, it will @@ -193,20 +205,6 @@ class CameraRollView extends React.Component { ); } - _rowHasChanged(r1: Array, r2: Array): boolean { - if (r1.length !== r2.length) { - return true; - } - - for (var i = 0; i < r1.length; i++) { - if (r1[i] !== r2[i]) { - return true; - } - } - - return false; - } - _renderFooterSpinner = () => { if (!this.state.noMore) { return ; @@ -215,7 +213,11 @@ class CameraRollView extends React.Component { }; // rowData is an array of images - _renderRow = (rowData: Array, sectionID: string, rowID: string) => { + _renderRow = ( + rowData: Array, + sectionID: string, + rowID: string, + ) => { const images = rowData.map(image => { if (image === null) { return null; @@ -227,9 +229,9 @@ class CameraRollView extends React.Component { return {images}; }; - _appendAssets = (data: Object) => { + _appendAssets(data: GetPhotosReturn) { const assets = data.edges; - const newState: Object = {loadingMore: false}; + const newState: $Shape = {loadingMore: false}; if (!data.page_info.has_next_page) { newState.noMore = true; @@ -245,7 +247,7 @@ class CameraRollView extends React.Component { } this.setState(newState); - }; + } _onEndReached = () => { if (!this.state.noMore) { From 77acac95f56bae7f74404c1683b665187d6f5eb8 Mon Sep 17 00:00:00 2001 From: Thomas BARRAS Date: Thu, 11 Oct 2018 17:19:46 -0400 Subject: [PATCH 3/3] UPDATE: rm $FlowFixMe --- Libraries/CameraRoll/CameraRoll.js | 8 ++++---- RNTester/js/CameraRollExample.js | 4 ++-- RNTester/js/CameraRollView.js | 26 +++++++++++--------------- 3 files changed, 17 insertions(+), 21 deletions(-) diff --git a/Libraries/CameraRoll/CameraRoll.js b/Libraries/CameraRoll/CameraRoll.js index a11aafa06929da..726f589d818dc2 100644 --- a/Libraries/CameraRoll/CameraRoll.js +++ b/Libraries/CameraRoll/CameraRoll.js @@ -79,7 +79,7 @@ const getPhotosParamChecker = createStrictShapeTypeChecker({ mimeTypes: PropTypes.arrayOf(PropTypes.string), }); -export type GetPhotosEdge = { +export type PhotoIdentifier = { node: { type: string, group_name: string, @@ -101,8 +101,8 @@ export type GetPhotosEdge = { }, }; -export type GetPhotosReturn = { - edges: Array, +export type PhotoIdentifiersPage = { + edges: Array, page_info: { has_next_page: boolean, start_cursor?: string, @@ -206,7 +206,7 @@ class CameraRoll { * * See https://facebook.github.io/react-native/docs/cameraroll.html#getphotos */ - static getPhotos(params: GetPhotosParams): Promise { + static getPhotos(params: GetPhotosParams): Promise { if (__DEV__) { checkPropTypes( {params: getPhotosParamChecker}, diff --git a/RNTester/js/CameraRollExample.js b/RNTester/js/CameraRollExample.js index 8ba91f48d85c11..9630f436ad6aba 100644 --- a/RNTester/js/CameraRollExample.js +++ b/RNTester/js/CameraRollExample.js @@ -28,7 +28,7 @@ const CameraRollView = require('./CameraRollView'); const AssetScaledImageExampleView = require('./AssetScaledImageExample'); -import type {GetPhotosEdge} from 'CameraRoll'; +import type {PhotoIdentifier} from 'CameraRoll'; class CameraRollExample extends React.Component< $FlowFixMeProps, @@ -76,7 +76,7 @@ class CameraRollExample extends React.Component< } } - _renderImage = (asset: GetPhotosEdge) => { + _renderImage = (asset: PhotoIdentifier) => { const imageSize = this.state.bigImages ? 150 : 75; const imageStyle = [styles.image, {width: imageSize, height: imageSize}]; const {location} = asset.node; diff --git a/RNTester/js/CameraRollView.js b/RNTester/js/CameraRollView.js index 18cef35a9b313c..70313b6c31a095 100644 --- a/RNTester/js/CameraRollView.js +++ b/RNTester/js/CameraRollView.js @@ -28,7 +28,7 @@ const ListViewDataSource = require('ListViewDataSource'); const groupByEveryN = require('groupByEveryN'); const logError = require('logError'); -import type {GetPhotosEdge, GetPhotosReturn} from 'CameraRoll'; +import type {PhotoIdentifier, PhotoIdentifiersPage} from 'CameraRoll'; const rowHasChanged = function(r1: Array, r2: Array): boolean { if (r1.length !== r2.length) { @@ -44,7 +44,7 @@ const rowHasChanged = function(r1: Array, r2: Array): boolean { return false; }; -type Props = $ReadOnly<{| +type PropsObject = {| /** * The group where the photos will be fetched from. Possible * values are 'Album', 'All', 'Event', 'Faces', 'Library', 'PhotoStream' @@ -67,7 +67,7 @@ type Props = $ReadOnly<{| /** * A function that takes a single image as a parameter and renders it. */ - renderImage: GetPhotosEdge => React.Node, + renderImage: PhotoIdentifier => React.Node, /** * imagesPerRow: Number of images to be shown in each row. @@ -79,10 +79,12 @@ type Props = $ReadOnly<{| * The asset type, one of 'Photos', 'Videos' or 'All' */ assetType: 'Photos' | 'Videos' | 'All', -|}>; +|}; + +type Props = $ReadOnly; type State = {| - assets: Array, + assets: Array, lastCursor: ?string, noMore: boolean, loadingMore: boolean, @@ -95,7 +97,7 @@ class CameraRollView extends React.Component { batchSize: 5, imagesPerRow: 1, assetType: 'Photos', - renderImage: function(asset: GetPhotosEdge) { + renderImage: function(asset: PhotoIdentifier) { const imageSize = 150; const imageStyle = [styles.image, {width: imageSize, height: imageSize}]; return ; @@ -121,7 +123,6 @@ class CameraRollView extends React.Component { rendererChanged() { const ds = new ListView.DataSource({rowHasChanged: rowHasChanged}); this.state.dataSource = ds.cloneWithRows( - // $FlowFixMe(>=0.41.0) groupByEveryN(this.state.assets, this.props.imagesPerRow), ); } @@ -130,10 +131,7 @@ class CameraRollView extends React.Component { this.fetch(); } - /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an error - * found when Flow v0.68 was deployed. To see the error delete this comment - * and run Flow. */ - UNSAFE_componentWillReceiveProps(nextProps: {groupTypes?: string}) { + UNSAFE_componentWillReceiveProps(nextProps: $Shape) { if (this.props.groupTypes !== nextProps.groupTypes) { this.fetch(true); } @@ -214,7 +212,7 @@ class CameraRollView extends React.Component { // rowData is an array of images _renderRow = ( - rowData: Array, + rowData: Array, sectionID: string, rowID: string, ) => { @@ -222,14 +220,13 @@ class CameraRollView extends React.Component { if (image === null) { return null; } - // $FlowFixMe(>=0.41.0) return this.props.renderImage(image); }); return {images}; }; - _appendAssets(data: GetPhotosReturn) { + _appendAssets(data: PhotoIdentifiersPage) { const assets = data.edges; const newState: $Shape = {loadingMore: false}; @@ -241,7 +238,6 @@ class CameraRollView extends React.Component { newState.lastCursor = data.page_info.end_cursor; newState.assets = this.state.assets.concat(assets); newState.dataSource = this.state.dataSource.cloneWithRows( - // $FlowFixMe(>=0.41.0) groupByEveryN(newState.assets, this.props.imagesPerRow), ); }