Skip to content

Commit

Permalink
Prettier for View, Image and co.
Browse files Browse the repository at this point in the history
Summary: Trivial beauty.

Reviewed By: sahrens

Differential Revision: D6715955

fbshipit-source-id: 3632750591f53d4673a2ce76309a0cc62946524d
  • Loading branch information
shergin authored and facebook-github-bot committed Jan 15, 2018
1 parent bf9cabb commit a5af841
Show file tree
Hide file tree
Showing 12 changed files with 134 additions and 74 deletions.
17 changes: 10 additions & 7 deletions Libraries/Components/View/View.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*
* @providesModule View
* @flow
* @format
*/
'use strict';

Expand Down Expand Up @@ -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 <View> within <Text> is not supported on Android.');
'Nesting of <View> within <Text> 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
Expand All @@ -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 + '`',
);
}
}
Expand All @@ -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);
5 changes: 2 additions & 3 deletions Libraries/Image/AssetRegistry.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
*
* @providesModule AssetRegistry
* @flow
* @format
*/
'use strict';


export type PackagerAsset = {
+__packager_asset: boolean,
+fileSystemLocation: string,
Expand All @@ -24,7 +24,6 @@ export type PackagerAsset = {
+type: string,
};


var assets: Array<PackagerAsset> = [];

function registerAsset(asset: PackagerAsset): number {
Expand All @@ -37,4 +36,4 @@ function getAssetByID(assetId: number): PackagerAsset {
return assets[assetId - 1];
}

module.exports = { registerAsset, getAssetByID };
module.exports = {registerAsset, getAssetByID};
41 changes: 22 additions & 19 deletions Libraries/Image/AssetSourceResolver.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*
* @providesModule AssetSourceResolver
* @flow
* @format
*/
'use strict';

Expand All @@ -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');
Expand All @@ -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;
Expand All @@ -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();
}
Expand All @@ -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,
);
}

Expand Down Expand Up @@ -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),
);
}

/**
Expand All @@ -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 {
Expand All @@ -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;
68 changes: 46 additions & 22 deletions Libraries/Image/Image.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*
* @providesModule Image
* @flow
* @format
*/
'use strict';

Expand All @@ -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() {
Expand Down Expand Up @@ -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).
Expand All @@ -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
Expand Down Expand Up @@ -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);
},
);
},

/**
Expand All @@ -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<string>): Promise<Map<string, 'memory' | 'disk'>> {
async queryCache(
urls: Array<string>,
): Promise<Map<string, 'memory' | 'disk'>> {
return await ImageLoader.queryCache(urls);
},

Expand All @@ -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.
Expand All @@ -270,11 +279,15 @@ var Image = createReactClass({
}

if (this.props.src) {
console.warn('The <Image> component requires a `source` property rather than `src`.');
console.warn(
'The <Image> component requires a `source` property rather than `src`.',
);
}

if (this.props.children) {
throw new Error('The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.');
throw new Error(
'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
);
}

if (source && (source.uri || Array.isArray(source))) {
Expand All @@ -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 <RCTTextInlineImage {...nativeProps}/>;
return <RCTTextInlineImage {...nativeProps} />;
} else {
return <RKImage {...nativeProps}/>;
return <RKImage {...nativeProps} />;
}
}
return null;
}
},
});

var styles = StyleSheet.create({
Expand All @@ -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;
Loading

0 comments on commit a5af841

Please sign in to comment.