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
2018-10-02 13:42:28 -07:00 · 2018-10-02 13:42:28 -07:00 · 408207b356
parent 1fc8a46570
commit 408207b356
3 changed files with 150 additions and 107 deletions
--- a/Libraries/DeprecatedPropTypes/DeprecatedImagePropType.js
+++ 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,
+};
--- 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: {
--- 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<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
  ...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,
+|};