From 408207b356849ca3cefad0ce91a3889e73bd8682 Mon Sep 17 00:00:00 2001 From: JenLindsay Date: Tue, 2 Oct 2018 13:42:28 -0700 Subject: [PATCH] Split ImageProps into DeprecatedPropTypes (#21411) Summary: Related to #21342 - Split ImageProps.js: moved propType declarations to DeprecatedImageProps.js - Renamed ImageProps references to DeprecatedImageProps in Image.ios.js Pull Request resolved: https://github.com/facebook/react-native/pull/21411 Reviewed By: TheSavior Differential Revision: D10146178 Pulled By: RSNara fbshipit-source-id: 4db15eaaa8822e834af347d1927991dff1c427cb --- .../DeprecatedImagePropType.js | 65 ++++++ Libraries/Image/Image.ios.js | 6 +- Libraries/Image/ImageProps.js | 186 ++++++++---------- 3 files changed, 150 insertions(+), 107 deletions(-) create mode 100644 Libraries/DeprecatedPropTypes/DeprecatedImagePropType.js diff --git a/Libraries/DeprecatedPropTypes/DeprecatedImagePropType.js b/Libraries/DeprecatedPropTypes/DeprecatedImagePropType.js new file mode 100644 index 000000000..6b8c16b57 --- /dev/null +++ b/Libraries/DeprecatedPropTypes/DeprecatedImagePropType.js @@ -0,0 +1,65 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + * @format + */ + +'use strict'; + +const DeprecatedEdgeInsetsPropType = require('DeprecatedEdgeInsetsPropType'); +const DeprecatedImageSourcePropType = require('DeprecatedImageSourcePropType'); +const DeprecatedImageStylePropTypes = require('DeprecatedImageStylePropTypes'); +const DeprecatedStyleSheetPropType = require('DeprecatedStyleSheetPropType'); +const PropTypes = require('prop-types'); + +module.exports = { + style: DeprecatedStyleSheetPropType(DeprecatedImageStylePropTypes), + source: DeprecatedImageSourcePropType, + defaultSource: PropTypes.oneOfType([ + PropTypes.shape({ + uri: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + scale: PropTypes.number, + }), + PropTypes.number, + ]), + + accessible: PropTypes.bool, + + accessibilityLabel: PropTypes.node, + + blurRadius: PropTypes.number, + + capInsets: DeprecatedEdgeInsetsPropType, + + resizeMethod: PropTypes.oneOf(['auto', 'resize', 'scale']), + + resizeMode: PropTypes.oneOf([ + 'cover', + 'contain', + 'stretch', + 'repeat', + 'center', + ]), + + testID: PropTypes.string, + + onLayout: PropTypes.func, + + onLoadStart: PropTypes.func, + + onProgress: PropTypes.func, + + onError: PropTypes.func, + + onPartialLoad: PropTypes.func, + + onLoad: PropTypes.func, + + onLoadEnd: PropTypes.func, +}; diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js index 07e34b922..29532dea9 100644 --- a/Libraries/Image/Image.ios.js +++ b/Libraries/Image/Image.ios.js @@ -9,7 +9,7 @@ */ 'use strict'; -const ImageProps = require('ImageProps'); +const DeprecatedImagePropType = require('DeprecatedImagePropType'); const NativeModules = require('NativeModules'); const React = require('React'); const ReactNative = require('ReactNative'); @@ -58,7 +58,7 @@ declare class ImageComponentType extends ReactNative.NativeComponent< static prefetch: typeof prefetch; static queryCache: typeof queryCache; static resolveAssetSource: typeof resolveAssetSource; - static propTypes: typeof ImageProps; + static propTypes: typeof DeprecatedImagePropType; } /** @@ -154,7 +154,7 @@ Image.queryCache = queryCache; */ Image.resolveAssetSource = resolveAssetSource; -Image.propTypes = ImageProps; +Image.propTypes = DeprecatedImagePropType; const styles = StyleSheet.create({ base: { diff --git a/Libraries/Image/ImageProps.js b/Libraries/Image/ImageProps.js index e91b70d52..9dcf083be 100644 --- a/Libraries/Image/ImageProps.js +++ b/Libraries/Image/ImageProps.js @@ -10,13 +10,7 @@ 'use strict'; -const DeprecatedEdgeInsetsPropType = require('DeprecatedEdgeInsetsPropType'); -const DeprecatedImageSourcePropType = require('DeprecatedImageSourcePropType'); -const DeprecatedImageStylePropTypes = require('DeprecatedImageStylePropTypes'); -const DeprecatedStyleSheetPropType = require('DeprecatedStyleSheetPropType'); -const PropTypes = require('prop-types'); - -import type {SyntheticEvent} from 'CoreEventTypes'; +import type {SyntheticEvent, LayoutEvent} from 'CoreEventTypes'; import type {EdgeInsetsProp} from 'EdgeInsetsPropType'; import type {ImageSource} from 'ImageSource'; import type {ViewStyleProp, ImageStyleProp} from 'StyleSheet'; @@ -37,8 +31,23 @@ type OnLoadEvent = SyntheticEvent< >; type IOSImageProps = $ReadOnly<{| + /** + * A static image to display while loading the image source. + * + * See https://facebook.github.io/react-native/docs/image.html#defaultsource + */ defaultSource?: ?ImageSource, + /** + * Invoked when a partial load of the image is complete. + * + * See https://facebook.github.io/react-native/docs/image.html#onpartialload + */ onPartialLoad?: ?() => void, + /** + * Invoked on download progress with `{nativeEvent: {loaded, total}}`. + * + * See https://facebook.github.io/react-native/docs/image.html#onprogress + */ onProgress?: ?( event: SyntheticEvent<$ReadOnly<{|loaded: number, total: number|}>>, ) => void, @@ -54,139 +63,108 @@ export type ImageProps = {| ...$Diff>, ...IOSImageProps, ...AndroidImageProps, - blurRadius?: ?number, - capInsets?: ?EdgeInsetsProp, - onError?: ?(event: SyntheticEvent<$ReadOnly<{||}>>) => void, - onLoad?: ?(event: OnLoadEvent) => void, - onLoadEnd?: ?() => void, - onLoadStart?: ?() => void, - resizeMethod?: ?('auto' | 'resize' | 'scale'), - source?: ?ImageSource, - style?: ?ImageStyleProp, - - // Can be set via props or style, for now - height?: ?DimensionValue, - width?: ?DimensionValue, - resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center'), - - src?: empty, - children?: empty, -|}; - -module.exports = { - /** - * See https://facebook.github.io/react-native/docs/image.html#style - */ - style: DeprecatedStyleSheetPropType(DeprecatedImageStylePropTypes), - /** - * The image source (either a remote URL or a local file resource). - * - * See https://facebook.github.io/react-native/docs/image.html#source - */ - source: DeprecatedImageSourcePropType, - /** - * A static image to display while loading the image source. - * - * See https://facebook.github.io/react-native/docs/image.html#defaultsource - */ - defaultSource: PropTypes.oneOfType([ - PropTypes.shape({ - uri: PropTypes.string, - width: PropTypes.number, - height: PropTypes.number, - scale: PropTypes.number, - }), - PropTypes.number, - ]), /** * When true, indicates the image is an accessibility element. * * See https://facebook.github.io/react-native/docs/image.html#accessible */ - accessible: PropTypes.bool, + accessible?: ?boolean, + /** * The text that's read by the screen reader when the user interacts with * the image. * * See https://facebook.github.io/react-native/docs/image.html#accessibilitylabel */ - accessibilityLabel: PropTypes.node, + accessibilityLabel?: ?Stringish, + /** * blurRadius: the blur radius of the blur filter added to the image * * See https://facebook.github.io/react-native/docs/image.html#blurradius */ - blurRadius: PropTypes.number, + blurRadius?: ?number, + /** * See https://facebook.github.io/react-native/docs/image.html#capinsets */ - capInsets: DeprecatedEdgeInsetsPropType, + capInsets?: ?EdgeInsetsProp, + /** - * See https://facebook.github.io/react-native/docs/image.html#resizemethod - */ - resizeMethod: PropTypes.oneOf(['auto', 'resize', 'scale']), - /** - * Determines how to resize the image when the frame doesn't match the raw - * image dimensions. + * Invoked on load error with `{nativeEvent: {error}}`. * - * See https://facebook.github.io/react-native/docs/image.html#resizemode + * See https://facebook.github.io/react-native/docs/image.html#onerror */ - resizeMode: PropTypes.oneOf([ - 'cover', - 'contain', - 'stretch', - 'repeat', - 'center', - ]), - /** - * A unique identifier for this element to be used in UI Automation - * testing scripts. - * - * See https://facebook.github.io/react-native/docs/image.html#testid - */ - testID: PropTypes.string, + onError?: ?(event: SyntheticEvent<$ReadOnly<{||}>>) => void, + /** * Invoked on mount and layout changes with * `{nativeEvent: {layout: {x, y, width, height}}}`. * * See https://facebook.github.io/react-native/docs/image.html#onlayout */ - onLayout: PropTypes.func, - /** - * Invoked on load start. - * - * See https://facebook.github.io/react-native/docs/image.html#onloadstart - */ - onLoadStart: PropTypes.func, - /** - * Invoked on download progress with `{nativeEvent: {loaded, total}}`. - * - * See https://facebook.github.io/react-native/docs/image.html#onprogress - */ - onProgress: PropTypes.func, - /** - * Invoked on load error with `{nativeEvent: {error}}`. - * - * See https://facebook.github.io/react-native/docs/image.html#onerror - */ - onError: PropTypes.func, - /** - * Invoked when a partial load of the image is complete. - * - * See https://facebook.github.io/react-native/docs/image.html#onpartialload - */ - onPartialLoad: PropTypes.func, + + onLayout?: ?(event: LayoutEvent) => mixed, + /** * Invoked when load completes successfully. * * See https://facebook.github.io/react-native/docs/image.html#onload */ - onLoad: PropTypes.func, + onLoad?: ?(event: OnLoadEvent) => void, + /** * Invoked when load either succeeds or fails. * * See https://facebook.github.io/react-native/docs/image.html#onloadend */ - onLoadEnd: PropTypes.func, -}; + onLoadEnd?: ?() => void, + + /** + * Invoked on load start. + * + * See https://facebook.github.io/react-native/docs/image.html#onloadstart + */ + onLoadStart?: ?() => void, + + /** + * See https://facebook.github.io/react-native/docs/image.html#resizemethod + */ + resizeMethod?: ?('auto' | 'resize' | 'scale'), + + /** + * The image source (either a remote URL or a local file resource). + * + * See https://facebook.github.io/react-native/docs/image.html#source + */ + source?: ?ImageSource, + + /** + * See https://facebook.github.io/react-native/docs/image.html#style + */ + style?: ?ImageStyleProp, + + // Can be set via props or style, for now + height?: ?DimensionValue, + width?: ?DimensionValue, + + /** + * Determines how to resize the image when the frame doesn't match the raw + * image dimensions. + * + * See https://facebook.github.io/react-native/docs/image.html#resizemode + */ + resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center'), + + /** + * A unique identifier for this element to be used in UI Automation + * testing scripts. + * + * See https://facebook.github.io/react-native/docs/image.html#testid + */ + testID?: ?string, + + src?: empty, + children?: empty, +|};