Skip to content

Commit

Permalink
Image from createReactClass -> ES6 Class
Browse files Browse the repository at this point in the history 
Summary: These are the flow errors that resulted from this diff: P59723027

Reviewed By: sahrens

Differential Revision: D8454977

fbshipit-source-id: e10901d3ecfc541b25f2fefb18702629f0bbab71
  • Loading branch information
@elicwhite @facebook-github-bot
elicwhite authored and facebook-github-bot committed Jun 20, 2018
1 parent 2455fd6 commit 64d9c48
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 101 deletions.
202 changes: 103 additions & 99 deletions Libraries/Image/Image.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,11 @@
'use strict';

const ImageProps = require('ImageProps');
const NativeMethodsMixin = require('NativeMethodsMixin');
const NativeModules = require('NativeModules');
const React = require('React');
const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
const ReactNative = require('ReactNative');
const StyleSheet = require('StyleSheet');

const createReactClass = require('create-react-class');
const flattenStyle = require('flattenStyle');
const requireNativeComponent = require('requireNativeComponent');
const resolveAssetSource = require('resolveAssetSource');
Expand All @@ -25,120 +23,126 @@ const ImageViewManager = NativeModules.ImageViewManager;

const RCTImageView = requireNativeComponent('RCTImageView');

import type {ImageProps as ImagePropsType} from 'ImageProps';

function getSize(
uri: string,
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);
},
);
}

function prefetch(url: string) {
return ImageViewManager.prefetchImage(url);
}

declare class ImageComponentType extends ReactNative.NativeComponent<
ImagePropsType,
> {
static getSize: typeof getSize;
static prefetch: typeof prefetch;
static resolveAssetSource: typeof resolveAssetSource;
static propTypes: typeof ImageProps;
}

/**
* A React component for displaying different types of images,
* including network images, static resources, temporary local images, and
* images from local disk, such as the camera roll.
*
* See https://facebook.github.io/react-native/docs/image.html
*/
const Image = createReactClass({
displayName: 'Image',
propTypes: ImageProps,

statics: {
/**
* Retrieve the width and height (in pixels) of an image prior to displaying it.
*
* See https://facebook.github.io/react-native/docs/image.html#getsize
*/
getSize: function(
uri: string,
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);
},
);
},
/**
* Prefetches a remote image for later use by downloading it to the disk
* cache.
*
* See https://facebook.github.io/react-native/docs/image.html#prefetch
*/
prefetch(url: string) {
return ImageViewManager.prefetchImage(url);
},
/**
* Resolves an asset reference into an object.
*
* See https://facebook.github.io/react-native/docs/image.html#resolveassetsource
*/
resolveAssetSource: resolveAssetSource,
},
let Image = (
props: ImagePropsType,
forwardedRef: ?React.Ref<'RCTImageView'>,
) => {
const source = resolveAssetSource(props.source) || {
uri: undefined,
width: undefined,
height: undefined,
};

let sources;
let style;
if (Array.isArray(source)) {
style = flattenStyle([styles.base, props.style]) || {};
sources = source;
} else {
const {width, height, uri} = source;
style = flattenStyle([{width, height}, styles.base, props.style]) || {};
sources = [source];

if (uri === '') {
console.warn('source.uri should not be an empty string');
}
}

mixins: [NativeMethodsMixin],
const resizeMode = props.resizeMode || (style || {}).resizeMode || 'cover'; // Workaround for flow bug t7737108
const tintColor = (style || {}).tintColor; // Workaround for flow bug t7737108

/**
* `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We
* make `this` look like an actual native component class.
*/
viewConfig: {
uiViewClassName: 'UIView',
validAttributes: ReactNativeViewAttributes.UIView,
},
if (props.src != null) {
console.warn(
'The <Image> component requires a `source` property rather than `src`.',
);
}

render: function() {
const source = resolveAssetSource(this.props.source) || {
uri: undefined,
width: undefined,
height: undefined,
};

let sources;
let style;
if (Array.isArray(source)) {
style = flattenStyle([styles.base, this.props.style]) || {};
sources = source;
} else {
const {width, height, uri} = source;
style =
flattenStyle([{width, height}, styles.base, this.props.style]) || {};
sources = [source];

if (uri === '') {
console.warn('source.uri should not be an empty string');
}
}
if (props.children != null) {
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.',
);
}

return (
<RCTImageView
{...props}
ref={forwardedRef}
style={style}
resizeMode={resizeMode}
tintColor={tintColor}
source={sources}
/>
);
};

// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
Image = React.forwardRef(Image);

const resizeMode =
this.props.resizeMode || (style || {}).resizeMode || 'cover'; // Workaround for flow bug t7737108
const tintColor = (style || {}).tintColor; // Workaround for flow bug t7737108
/**
* Retrieve the width and height (in pixels) of an image prior to displaying it.
*
* See https://facebook.github.io/react-native/docs/image.html#getsize
*/
Image.getSize = getSize;

if (this.props.src) {
console.warn(
'The <Image> component requires a `source` property rather than `src`.',
);
}
/**
* Prefetches a remote image for later use by downloading it to the disk
* cache.
*
* See https://facebook.github.io/react-native/docs/image.html#prefetch
*/
Image.prefetch = prefetch;

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.',
);
}
/**
* Resolves an asset reference into an object.
*
* See https://facebook.github.io/react-native/docs/image.html#resolveassetsource
*/
Image.resolveAssetSource = resolveAssetSource;

return (
<RCTImageView
{...this.props}
style={style}
resizeMode={resizeMode}
tintColor={tintColor}
source={sources}
/>
);
},
});
Image.propTypes = ImageProps;

const styles = StyleSheet.create({
base: {
overflow: 'hidden',
},
});

module.exports = Image;
module.exports = (Image: Class<ImageComponentType>);
12 changes: 10 additions & 2 deletions Libraries/Image/ImageSource.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@
'use strict';

// This is to sync with ImageSourcePropTypes.js.
type ImageURISource = $ReadOnly<{|
// We explicitly don't want this to be strict so that we can pass in objects
// that might have more keys. This also has to be inexact to support taking
// instances of classes like FBIcon.
// https://fburl.com/8lynhvtw
type ImageURISource = $ReadOnly<{
uri?: ?string,
bundle?: ?string,
method?: ?string,
Expand All @@ -20,6 +24,10 @@ type ImageURISource = $ReadOnly<{|
width?: ?number,
height?: ?number,
scale?: ?number,
|}>;
}>;

// We have to export any because of an issue in Flow with objects that come from Relay:
// https://fburl.com/8ljo5tmr
// https://fb.facebook.com/groups/flow/permalink/1824103160971624/
// $FlowFixMe T26861415
export type ImageSource = ImageURISource | number | Array<ImageURISource>;

0 comments on commit 64d9c48

Please sign in to comment.