From a5af841d259b6b29d95a9fb346a0ffce9c6efbfe Mon Sep 17 00:00:00 2001 From: Valentin Shergin Date: Sun, 14 Jan 2018 19:32:26 -0800 Subject: [PATCH] Prettier for View, Image and co. Summary: Trivial beauty. Reviewed By: sahrens Differential Revision: D6715955 fbshipit-source-id: 3632750591f53d4673a2ce76309a0cc62946524d --- Libraries/Components/View/View.js | 17 ++++--- Libraries/Image/AssetRegistry.js | 5 +- Libraries/Image/AssetSourceResolver.js | 41 +++++++++------- Libraries/Image/Image.android.js | 68 +++++++++++++++++--------- Libraries/Image/Image.ios.js | 46 ++++++++++++----- Libraries/Image/ImageEditor.js | 3 +- Libraries/Image/ImageResizeMode.js | 9 ++-- Libraries/Image/ImageSource.js | 1 + Libraries/Image/ImageSourcePropType.js | 1 + Libraries/Image/ImageStore.js | 7 +-- Libraries/Image/ImageStylePropTypes.js | 3 +- Libraries/Image/nativeImageSource.js | 7 ++- 12 files changed, 134 insertions(+), 74 deletions(-) diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js index f10f183c0..87a8ca088 100644 --- a/Libraries/Components/View/View.js +++ b/Libraries/Components/View/View.js @@ -8,6 +8,7 @@ * * @providesModule View * @flow + * @format */ 'use strict'; @@ -52,17 +53,18 @@ const View = createReactClass({ */ viewConfig: { uiViewClassName: 'RCTView', - validAttributes: ReactNativeViewAttributes.RCTView + validAttributes: ReactNativeViewAttributes.RCTView, }, contextTypes: { isInAParentText: PropTypes.bool, }, - render: function() { + render() { invariant( !(this.context.isInAParentText && Platform.OS === 'android'), - 'Nesting of within is not supported on Android.'); + 'Nesting of within is not supported on Android.', + ); // WARNING: This method will not be used in production mode as in that mode we // replace wrapper component View with generated native wrapper RCTView. Avoid @@ -76,17 +78,18 @@ const RCTView = requireNativeComponent('RCTView', View, { nativeOnly: { nativeBackgroundAndroid: true, nativeForegroundAndroid: true, - } + }, }); if (__DEV__) { const UIManager = require('UIManager'); - const viewConfig = UIManager.viewConfigs && UIManager.viewConfigs.RCTView || {}; + const viewConfig = + (UIManager.viewConfigs && UIManager.viewConfigs.RCTView) || {}; for (const prop in viewConfig.nativeProps) { const viewAny: any = View; // Appease flow if (!viewAny.propTypes[prop] && !ReactNativeStyleAttributes[prop]) { throw new Error( - 'View is missing propType for native prop `' + prop + '`' + 'View is missing propType for native prop `' + prop + '`', ); } } @@ -98,4 +101,4 @@ if (__DEV__) { } // No one should depend on the DEV-mode createClass View wrapper. -module.exports = ((ViewToExport : any) : typeof RCTView); +module.exports = ((ViewToExport: any): typeof RCTView); diff --git a/Libraries/Image/AssetRegistry.js b/Libraries/Image/AssetRegistry.js index 116500eda..4871fe370 100644 --- a/Libraries/Image/AssetRegistry.js +++ b/Libraries/Image/AssetRegistry.js @@ -8,10 +8,10 @@ * * @providesModule AssetRegistry * @flow + * @format */ 'use strict'; - export type PackagerAsset = { +__packager_asset: boolean, +fileSystemLocation: string, @@ -24,7 +24,6 @@ export type PackagerAsset = { +type: string, }; - var assets: Array = []; function registerAsset(asset: PackagerAsset): number { @@ -37,4 +36,4 @@ function getAssetByID(assetId: number): PackagerAsset { return assets[assetId - 1]; } -module.exports = { registerAsset, getAssetByID }; +module.exports = {registerAsset, getAssetByID}; diff --git a/Libraries/Image/AssetSourceResolver.js b/Libraries/Image/AssetSourceResolver.js index 0869c39e4..db7f642b8 100644 --- a/Libraries/Image/AssetSourceResolver.js +++ b/Libraries/Image/AssetSourceResolver.js @@ -8,6 +8,7 @@ * * @providesModule AssetSourceResolver * @flow + * @format */ 'use strict'; @@ -19,7 +20,7 @@ export type ResolvedAssetSource = { scale: number, }; -import type { PackagerAsset } from 'AssetRegistry'; +import type {PackagerAsset} from 'AssetRegistry'; const PixelRatio = require('PixelRatio'); const Platform = require('Platform'); @@ -43,22 +44,18 @@ function getScaledAssetPath(asset): string { function getAssetPathInDrawableFolder(asset): string { var scale = AssetSourceResolver.pickScale(asset.scales, PixelRatio.get()); var drawbleFolder = assetPathUtils.getAndroidResourceFolderName(asset, scale); - var fileName = assetPathUtils.getAndroidResourceIdentifier(asset); + var fileName = assetPathUtils.getAndroidResourceIdentifier(asset); return drawbleFolder + '/' + fileName + '.' + asset.type; } class AssetSourceResolver { - serverUrl: ?string; // where the jsbundle is being run from jsbundleUrl: ?string; // the asset to resolve asset: PackagerAsset; - constructor(serverUrl: ?string, - jsbundleUrl: ?string, - asset: PackagerAsset - ) { + constructor(serverUrl: ?string, jsbundleUrl: ?string, asset: PackagerAsset) { this.serverUrl = serverUrl; this.jsbundleUrl = jsbundleUrl; this.asset = asset; @@ -78,9 +75,9 @@ class AssetSourceResolver { } if (Platform.OS === 'android') { - return this.isLoadedFromFileSystem() ? - this.drawableFolderInBundle() : - this.resourceIdentifierWithoutScale(); + return this.isLoadedFromFileSystem() + ? this.drawableFolderInBundle() + : this.resourceIdentifierWithoutScale(); } else { return this.scaledAssetURLNearBundle(); } @@ -93,8 +90,12 @@ class AssetSourceResolver { assetServerURL(): ResolvedAssetSource { invariant(!!this.serverUrl, 'need server to load from'); return this.fromSource( - this.serverUrl + getScaledAssetPath(this.asset) + - '?platform=' + Platform.OS + '&hash=' + this.asset.hash + this.serverUrl + + getScaledAssetPath(this.asset) + + '?platform=' + + Platform.OS + + '&hash=' + + this.asset.hash, ); } @@ -122,8 +123,13 @@ class AssetSourceResolver { * E.g. 'assets_awesomemodule_icon' */ resourceIdentifierWithoutScale(): ResolvedAssetSource { - invariant(Platform.OS === 'android', 'resource identifiers work on Android'); - return this.fromSource(assetPathUtils.getAndroidResourceIdentifier(this.asset)); + invariant( + Platform.OS === 'android', + 'resource identifiers work on Android', + ); + return this.fromSource( + assetPathUtils.getAndroidResourceIdentifier(this.asset), + ); } /** @@ -133,9 +139,7 @@ class AssetSourceResolver { */ drawableFolderInBundle(): ResolvedAssetSource { const path = this.jsbundleUrl || 'file://'; - return this.fromSource( - path + getAssetPathInDrawableFolder(this.asset) - ); + return this.fromSource(path + getAssetPathInDrawableFolder(this.asset)); } fromSource(source: string): ResolvedAssetSource { @@ -161,7 +165,6 @@ class AssetSourceResolver { // in which case we default to 1 return scales[scales.length - 1] || 1; } - } - module.exports = AssetSourceResolver; +module.exports = AssetSourceResolver; diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js index 1105134e4..a8cac24a5 100644 --- a/Libraries/Image/Image.android.js +++ b/Libraries/Image/Image.android.js @@ -8,6 +8,7 @@ * * @providesModule Image * @flow + * @format */ 'use strict'; @@ -32,9 +33,7 @@ var merge = require('merge'); var requireNativeComponent = require('requireNativeComponent'); var resolveAssetSource = require('resolveAssetSource'); -var { - ImageLoader, -} = NativeModules; +var {ImageLoader} = NativeModules; let _requestId = 1; function generateRequestId() { @@ -75,14 +74,16 @@ var ImageViewAttributes = merge(ReactNativeViewAttributes.UIView, { }); var ViewStyleKeys = new Set(Object.keys(ViewStylePropTypes)); -var ImageSpecificStyleKeys = new Set(Object.keys(ImageStylePropTypes).filter(x => !ViewStyleKeys.has(x))); +var ImageSpecificStyleKeys = new Set( + Object.keys(ImageStylePropTypes).filter(x => !ViewStyleKeys.has(x)), +); var Image = createReactClass({ displayName: 'Image', propTypes: { ...ViewPropTypes, style: StyleSheetPropType(ImageStylePropTypes), - /** + /** * `uri` is a string representing the resource identifier for the image, which * could be an http address, a local file path, or a static image * resource (which should be wrapped in the `require('./path/to/image.png')` function). @@ -108,11 +109,12 @@ var Image = createReactClass({ width: PropTypes.number, height: PropTypes.number, headers: PropTypes.objectOf(PropTypes.string), - })) + }), + ), ]), /** - * blurRadius: the blur radius of the blur filter added to the image - */ + * blurRadius: the blur radius of the blur filter added to the image + */ blurRadius: PropTypes.number, /** * similarly to `source`, this property represents the resource used to render @@ -202,9 +204,12 @@ var Image = createReactClass({ .then(function(sizes) { success(sizes.width, sizes.height); }) - .catch(failure || function() { - console.warn('Failed to get size for image: ' + url); - }); + .catch( + failure || + function() { + console.warn('Failed to get size for image: ' + url); + }, + ); }, /** @@ -231,7 +236,9 @@ var Image = createReactClass({ * @return a mapping from url to cache status, such as "disk" or "memory". If a requested URL is * not in the mapping, it means it's not in the cache. */ - async queryCache(urls: Array): Promise> { + async queryCache( + urls: Array, + ): Promise> { return await ImageLoader.queryCache(urls); }, @@ -255,12 +262,14 @@ var Image = createReactClass({ }, contextTypes: { - isInAParentText: PropTypes.bool + isInAParentText: PropTypes.bool, }, render: function() { const source = resolveAssetSource(this.props.source); - const loadingIndicatorSource = resolveAssetSource(this.props.loadingIndicatorSource); + const loadingIndicatorSource = resolveAssetSource( + this.props.loadingIndicatorSource, + ); // As opposed to the ios version, here we render `null` when there is no source, source.uri // or source array. @@ -270,11 +279,15 @@ var Image = createReactClass({ } if (this.props.src) { - console.warn('The component requires a `source` property rather than `src`.'); + console.warn( + 'The component requires a `source` property rather than `src`.', + ); } if (this.props.children) { - throw new Error('The component cannot contain children. If you want to render content on top of the image, consider using the component or absolute positioning.'); + throw new Error( + 'The component cannot contain children. If you want to render content on top of the image, consider using the component or absolute positioning.', + ); } if (source && (source.uri || Array.isArray(source))) { @@ -292,20 +305,27 @@ var Image = createReactClass({ const {onLoadStart, onLoad, onLoadEnd, onError} = this.props; const nativeProps = merge(this.props, { style, - shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError), + shouldNotifyLoadEvents: !!( + onLoadStart || + onLoad || + onLoadEnd || + onError + ), src: sources, headers: source.headers, - loadingIndicatorSrc: loadingIndicatorSource ? loadingIndicatorSource.uri : null, + loadingIndicatorSrc: loadingIndicatorSource + ? loadingIndicatorSource.uri + : null, }); if (this.context.isInAParentText) { - return ; + return ; } else { - return ; + return ; } } return null; - } + }, }); var styles = StyleSheet.create({ @@ -323,6 +343,10 @@ var cfg = { }, }; var RKImage = requireNativeComponent('RCTImageView', Image, cfg); -var RCTTextInlineImage = requireNativeComponent('RCTTextInlineImage', Image, cfg); +var RCTTextInlineImage = requireNativeComponent( + 'RCTTextInlineImage', + Image, + cfg, +); module.exports = Image; diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js index a9c4a8f8f..fd99b986b 100644 --- a/Libraries/Image/Image.ios.js +++ b/Libraries/Image/Image.ios.js @@ -8,6 +8,7 @@ * * @providesModule Image * @flow + * @format */ 'use strict'; @@ -190,8 +191,8 @@ const Image = createReactClass({ */ accessibilityLabel: PropTypes.node, /** - * blurRadius: the blur radius of the blur filter added to the image - */ + * blurRadius: the blur radius of the blur filter added to the image + */ blurRadius: PropTypes.number, /** * When the image is resized, the corners of the size specified @@ -241,7 +242,13 @@ const Image = createReactClass({ * - `repeat`: Repeat the image to cover the frame of the view. The * image will keep it's size and aspect ratio. (iOS only) */ - resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']), + resizeMode: PropTypes.oneOf([ + 'cover', + 'contain', + 'stretch', + 'repeat', + 'center', + ]), /** * A unique identifier for this element to be used in UI Automation * testing scripts. @@ -314,9 +321,14 @@ const Image = createReactClass({ success: (width: number, height: number) => void, failure?: (error: any) => void, ) { - ImageViewManager.getSize(uri, success, failure || function() { - console.warn('Failed to get size for image: ' + uri); - }); + ImageViewManager.getSize( + uri, + success, + failure || + function() { + console.warn('Failed to get size for image: ' + uri); + }, + ); }, /** * Prefetches a remote image for later use by downloading it to the disk @@ -345,11 +357,15 @@ const Image = createReactClass({ */ viewConfig: { uiViewClassName: 'UIView', - validAttributes: ReactNativeViewAttributes.UIView + validAttributes: ReactNativeViewAttributes.UIView, }, render: function() { - const source = resolveAssetSource(this.props.source) || { uri: undefined, width: undefined, height: undefined }; + const source = resolveAssetSource(this.props.source) || { + uri: undefined, + width: undefined, + height: undefined, + }; let sources; let style; @@ -358,7 +374,8 @@ const Image = createReactClass({ sources = source; } else { const {width, height, uri} = source; - style = flattenStyle([{width, height}, styles.base, this.props.style]) || {}; + style = + flattenStyle([{width, height}, styles.base, this.props.style]) || {}; sources = [source]; if (uri === '') { @@ -366,15 +383,20 @@ const Image = createReactClass({ } } - const resizeMode = this.props.resizeMode || (style || {}).resizeMode || 'cover'; // Workaround for flow bug t7737108 + const resizeMode = + this.props.resizeMode || (style || {}).resizeMode || 'cover'; // Workaround for flow bug t7737108 const tintColor = (style || {}).tintColor; // Workaround for flow bug t7737108 if (this.props.src) { - console.warn('The component requires a `source` property rather than `src`.'); + console.warn( + 'The component requires a `source` property rather than `src`.', + ); } if (this.props.children) { - throw new Error('The component cannot contain children. If you want to render content on top of the image, consider using the component or absolute positioning.'); + throw new Error( + 'The component cannot contain children. If you want to render content on top of the image, consider using the component or absolute positioning.', + ); } return ( diff --git a/Libraries/Image/ImageEditor.js b/Libraries/Image/ImageEditor.js index 3e0a4d3d2..90868c773 100644 --- a/Libraries/Image/ImageEditor.js +++ b/Libraries/Image/ImageEditor.js @@ -8,6 +8,7 @@ * * @providesModule ImageEditor * @flow + * @format */ 'use strict'; @@ -63,7 +64,7 @@ class ImageEditor { uri: string, cropData: ImageCropData, success: (uri: string) => void, - failure: (error: Object) => void + failure: (error: Object) => void, ) { RCTImageEditingManager.cropImage(uri, cropData, success, failure); } diff --git a/Libraries/Image/ImageResizeMode.js b/Libraries/Image/ImageResizeMode.js index 0f9cb3b3d..26c0029e2 100644 --- a/Libraries/Image/ImageResizeMode.js +++ b/Libraries/Image/ImageResizeMode.js @@ -8,6 +8,7 @@ * * @providesModule ImageResizeMode * @flow + * @format */ 'use strict'; @@ -38,10 +39,10 @@ var ImageResizeMode = keyMirror({ */ stretch: null, /** - * center - The image will be scaled down such that it is completely visible, - * if bigger than the area of the view. - * The image will not be scaled up. - */ + * center - The image will be scaled down such that it is completely visible, + * if bigger than the area of the view. + * The image will not be scaled up. + */ center: null, /** diff --git a/Libraries/Image/ImageSource.js b/Libraries/Image/ImageSource.js index 57e38da0f..59fa2c017 100644 --- a/Libraries/Image/ImageSource.js +++ b/Libraries/Image/ImageSource.js @@ -8,6 +8,7 @@ * * @providesModule ImageSource * @flow + * @format */ 'use strict'; diff --git a/Libraries/Image/ImageSourcePropType.js b/Libraries/Image/ImageSourcePropType.js index eb21de802..3ace885f6 100644 --- a/Libraries/Image/ImageSourcePropType.js +++ b/Libraries/Image/ImageSourcePropType.js @@ -8,6 +8,7 @@ * * @providesModule ImageSourcePropType * @no-flow + * @format */ 'use strict'; diff --git a/Libraries/Image/ImageStore.js b/Libraries/Image/ImageStore.js index f03262d6d..6eb06418e 100644 --- a/Libraries/Image/ImageStore.js +++ b/Libraries/Image/ImageStore.js @@ -8,6 +8,7 @@ * * @providesModule ImageStore * @flow + * @format */ 'use strict'; @@ -18,7 +19,7 @@ class ImageStore { * Check if the ImageStore contains image data for the specified URI. * @platform ios */ - static hasImageForTag(uri: string, callback: (hasImage: bool) => void) { + static hasImageForTag(uri: string, callback: (hasImage: boolean) => void) { if (RCTImageStoreManager.hasImageForTag) { RCTImageStoreManager.hasImageForTag(uri, callback); } else { @@ -56,7 +57,7 @@ class ImageStore { static addImageFromBase64( base64ImageData: string, success: (uri: string) => void, - failure: (error: any) => void + failure: (error: any) => void, ) { RCTImageStoreManager.addImageFromBase64(base64ImageData, success, failure); } @@ -75,7 +76,7 @@ class ImageStore { static getBase64ForTag( uri: string, success: (base64ImageData: string) => void, - failure: (error: any) => void + failure: (error: any) => void, ) { RCTImageStoreManager.getBase64ForTag(uri, success, failure); } diff --git a/Libraries/Image/ImageStylePropTypes.js b/Libraries/Image/ImageStylePropTypes.js index 70f21d32d..2953b81ab 100644 --- a/Libraries/Image/ImageStylePropTypes.js +++ b/Libraries/Image/ImageStylePropTypes.js @@ -8,6 +8,7 @@ * * @providesModule ImageStylePropTypes * @flow + * @format */ 'use strict'; @@ -51,7 +52,7 @@ var ImageStylePropTypes = { * http://frescolib.org/docs/rounded-corners-and-circles.html * * @platform android - */ + */ overlayColor: ReactPropTypes.string, // Android-Specific styles diff --git a/Libraries/Image/nativeImageSource.js b/Libraries/Image/nativeImageSource.js index d9d71da7c..5cb79ecff 100644 --- a/Libraries/Image/nativeImageSource.js +++ b/Libraries/Image/nativeImageSource.js @@ -8,6 +8,7 @@ * * @providesModule nativeImageSource * @flow + * @format */ 'use strict'; @@ -21,7 +22,7 @@ type SourceSpec = { // http://facebook.github.io/react-native/docs/images.html#why-not-automatically-size-everything width: number, height: number, -} +}; /** * In hybrid apps, use `nativeImageSource` to access images that are already available @@ -40,7 +41,9 @@ type SourceSpec = { function nativeImageSource(spec: SourceSpec): Object { const uri = Platform.select(spec); if (!uri) { - console.warn(`No image name given for ${Platform.OS}: ${JSON.stringify(spec)}`); + console.warn( + `No image name given for ${Platform.OS}: ${JSON.stringify(spec)}`, + ); } return {