From 91f9878a35333310fc171350e113f7d94b0d14f0 Mon Sep 17 00:00:00 2001 From: nd-02110114 Date: Fri, 28 Sep 2018 23:13:03 -0700 Subject: [PATCH] Move ImageSourcePropType.js, ImageStylePropTypes.js, TextPropTypes.js (#21387) Summary: related #21342 TODO * move ImageSourcePropType.js, ImageStylePropTypes.js, TextPropTypes.js * fix flow error CheckList - [x] `yarn prettier` - [x] `yarn flow-check-android` - [x] `yarn flow-check-ios` All flow checks pass. [GENERAL] [ENHANCEMENT] [DeprecatedImageSourcePropType.js] - Created. [GENERAL] [ENHANCEMENT] [DeprecatedImageStylePropTypes.js] - Created. [GENERAL] [ENHANCEMENT] [DeprecatedTextPropTypes.js] - Created. Pull Request resolved: https://github.com/facebook/react-native/pull/21387 Reviewed By: TheSavior Differential Revision: D10099753 Pulled By: RSNara fbshipit-source-id: c907af6d1549ee42de1a2e17f278998e8422110f --- .../View/ReactNativeStyleAttributes.js | 4 +- .../DeprecatedImageSourcePropType.js | 39 ++++++ .../DeprecatedImageStylePropTypes.js} | 4 +- .../DeprecatedTextPropTypes.js | 41 ++++++ Libraries/Image/Image.android.js | 8 +- Libraries/Image/ImageProps.js | 18 +-- Libraries/Image/ImageSource.js | 58 +++++++++ Libraries/Image/ImageSourcePropType.js | 90 ------------- Libraries/StyleSheet/StyleSheetValidation.js | 4 +- Libraries/Text/Text.js | 4 +- Libraries/Text/TextProps.js | 121 +++++++++++++++++- 11 files changed, 278 insertions(+), 113 deletions(-) create mode 100644 Libraries/DeprecatedPropTypes/DeprecatedImageSourcePropType.js rename Libraries/{Image/ImageStylePropTypes.js => DeprecatedPropTypes/DeprecatedImageStylePropTypes.js} (100%) create mode 100644 Libraries/DeprecatedPropTypes/DeprecatedTextPropTypes.js delete mode 100644 Libraries/Image/ImageSourcePropType.js diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js index 46c821f6675141..7593a4e0b678c4 100644 --- a/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -10,7 +10,7 @@ 'use strict'; -const ImageStylePropTypes = require('ImageStylePropTypes'); +const DeprecatedImageStylePropTypes = require('DeprecatedImageStylePropTypes'); const TextStylePropTypes = require('TextStylePropTypes'); const ViewStylePropTypes = require('ViewStylePropTypes'); @@ -23,7 +23,7 @@ const ReactNativeStyleAttributes = {}; for (const attributeName of Object.keys({ ...ViewStylePropTypes, ...TextStylePropTypes, - ...ImageStylePropTypes, + ...DeprecatedImageStylePropTypes, })) { ReactNativeStyleAttributes[attributeName] = true; } diff --git a/Libraries/DeprecatedPropTypes/DeprecatedImageSourcePropType.js b/Libraries/DeprecatedPropTypes/DeprecatedImageSourcePropType.js new file mode 100644 index 00000000000000..0670023ae73ba2 --- /dev/null +++ b/Libraries/DeprecatedPropTypes/DeprecatedImageSourcePropType.js @@ -0,0 +1,39 @@ +/** + * 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. + * + * @no-flow + * @format + */ +'use strict'; + +const PropTypes = require('prop-types'); + +const ImageURISourcePropType = PropTypes.shape({ + uri: PropTypes.string, + bundle: PropTypes.string, + method: PropTypes.string, + headers: PropTypes.objectOf(PropTypes.string), + body: PropTypes.string, + cache: PropTypes.oneOf([ + 'default', + 'reload', + 'force-cache', + 'only-if-cached', + ]), + width: PropTypes.number, + height: PropTypes.number, + scale: PropTypes.number, +}); + +const ImageSourcePropType = PropTypes.oneOfType([ + ImageURISourcePropType, + // Opaque type returned by require('./image.jpg') + PropTypes.number, + // Multiple sources + PropTypes.arrayOf(ImageURISourcePropType), +]); + +module.exports = ImageSourcePropType; diff --git a/Libraries/Image/ImageStylePropTypes.js b/Libraries/DeprecatedPropTypes/DeprecatedImageStylePropTypes.js similarity index 100% rename from Libraries/Image/ImageStylePropTypes.js rename to Libraries/DeprecatedPropTypes/DeprecatedImageStylePropTypes.js index be1d08201ab7d2..e3b7d8827fb77e 100644 --- a/Libraries/Image/ImageStylePropTypes.js +++ b/Libraries/DeprecatedPropTypes/DeprecatedImageStylePropTypes.js @@ -10,10 +10,10 @@ 'use strict'; const DeprecatedColorPropType = require('DeprecatedColorPropType'); -const LayoutPropTypes = require('LayoutPropTypes'); -const ReactPropTypes = require('prop-types'); const DeprecatedShadowPropTypesIOS = require('DeprecatedShadowPropTypesIOS'); const DeprecatedTransformPropTypes = require('DeprecatedTransformPropTypes'); +const LayoutPropTypes = require('LayoutPropTypes'); +const ReactPropTypes = require('prop-types'); const ImageStylePropTypes = { ...LayoutPropTypes, diff --git a/Libraries/DeprecatedPropTypes/DeprecatedTextPropTypes.js b/Libraries/DeprecatedPropTypes/DeprecatedTextPropTypes.js new file mode 100644 index 00000000000000..690fc1df7df605 --- /dev/null +++ b/Libraries/DeprecatedPropTypes/DeprecatedTextPropTypes.js @@ -0,0 +1,41 @@ +/** + * 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 DeprecatedColorPropType = require('DeprecatedColorPropType'); +const DeprecatedEdgeInsetsPropType = require('DeprecatedEdgeInsetsPropType'); +const PropTypes = require('prop-types'); +const StyleSheetPropType = require('DeprecatedStyleSheetPropType'); +const TextStylePropTypes = require('TextStylePropTypes'); + +const stylePropType = StyleSheetPropType(TextStylePropTypes); + +module.exports = { + ellipsizeMode: PropTypes.oneOf(['head', 'middle', 'tail', 'clip']), + numberOfLines: PropTypes.number, + textBreakStrategy: PropTypes.oneOf(['simple', 'highQuality', 'balanced']), + onLayout: PropTypes.func, + onPress: PropTypes.func, + onLongPress: PropTypes.func, + pressRetentionOffset: DeprecatedEdgeInsetsPropType, + selectable: PropTypes.bool, + selectionColor: DeprecatedColorPropType, + suppressHighlighting: PropTypes.bool, + style: stylePropType, + testID: PropTypes.string, + nativeID: PropTypes.string, + allowFontScaling: PropTypes.bool, + maxFontSizeMultiplier: PropTypes.number, + accessible: PropTypes.bool, + adjustsFontSizeToFit: PropTypes.bool, + minimumFontScale: PropTypes.number, + disabled: PropTypes.bool, +}; diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js index e81db678bdafad..3eda5a7c52d2ec 100644 --- a/Libraries/Image/Image.android.js +++ b/Libraries/Image/Image.android.js @@ -10,15 +10,15 @@ 'use strict'; +const DeprecatedImageStylePropTypes = require('DeprecatedImageStylePropTypes'); +const DeprecatedStyleSheetPropType = require('DeprecatedStyleSheetPropType'); const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes'); -const ImageStylePropTypes = require('ImageStylePropTypes'); +const ImageViewNativeComponent = require('ImageViewNativeComponent'); const NativeModules = require('NativeModules'); const PropTypes = require('prop-types'); const React = require('React'); const ReactNative = require('ReactNative'); const StyleSheet = require('StyleSheet'); -const DeprecatedStyleSheetPropType = require('DeprecatedStyleSheetPropType'); -const ImageViewNativeComponent = require('ImageViewNativeComponent'); const TextAncestor = require('TextAncestor'); const flattenStyle = require('flattenStyle'); @@ -38,7 +38,7 @@ function generateRequestId() { const ImageProps = { ...DeprecatedViewPropTypes, - style: DeprecatedStyleSheetPropType(ImageStylePropTypes), + style: DeprecatedStyleSheetPropType(DeprecatedImageStylePropTypes), /** * See https://facebook.github.io/react-native/docs/image.html#source */ diff --git a/Libraries/Image/ImageProps.js b/Libraries/Image/ImageProps.js index 71396abd43c5c6..e91b70d5227f5b 100644 --- a/Libraries/Image/ImageProps.js +++ b/Libraries/Image/ImageProps.js @@ -11,17 +11,17 @@ 'use strict'; const DeprecatedEdgeInsetsPropType = require('DeprecatedEdgeInsetsPropType'); -const ImageSourcePropType = require('ImageSourcePropType'); -const ImageStylePropTypes = require('ImageStylePropTypes'); -const PropTypes = require('prop-types'); +const DeprecatedImageSourcePropType = require('DeprecatedImageSourcePropType'); +const DeprecatedImageStylePropTypes = require('DeprecatedImageStylePropTypes'); const DeprecatedStyleSheetPropType = require('DeprecatedStyleSheetPropType'); +const PropTypes = require('prop-types'); -import type {DimensionValue} from 'StyleSheetTypes'; -import type {ViewProps} from 'ViewPropTypes'; -import type {ImageSource} from 'ImageSource'; -import type {EdgeInsetsProp} from 'EdgeInsetsPropType'; import type {SyntheticEvent} from 'CoreEventTypes'; +import type {EdgeInsetsProp} from 'EdgeInsetsPropType'; +import type {ImageSource} from 'ImageSource'; import type {ViewStyleProp, ImageStyleProp} from 'StyleSheet'; +import type {DimensionValue} from 'StyleSheetTypes'; +import type {ViewProps} from 'ViewPropTypes'; type OnLoadEvent = SyntheticEvent< $ReadOnly<{| @@ -78,13 +78,13 @@ module.exports = { /** * See https://facebook.github.io/react-native/docs/image.html#style */ - style: DeprecatedStyleSheetPropType(ImageStylePropTypes), + 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: ImageSourcePropType, + source: DeprecatedImageSourcePropType, /** * A static image to display while loading the image source. * diff --git a/Libraries/Image/ImageSource.js b/Libraries/Image/ImageSource.js index 9cb9fceed082e3..0e03dc78c0f5d1 100644 --- a/Libraries/Image/ImageSource.js +++ b/Libraries/Image/ImageSource.js @@ -15,14 +15,72 @@ // instances of classes like FBIcon. // https://fburl.com/8lynhvtw export type ImageURISource = $ReadOnly<{ + /** + * `uri` is a string representing the resource identifier for the image, which + * could be an http address, a local file path, or the name of a static image + * resource (which should be wrapped in the `require('./path/to/image.png')` + * function). + */ uri?: ?string, + + /** + * `bundle` is the iOS asset bundle which the image is included in. This + * will default to [NSBundle mainBundle] if not set. + * @platform ios + */ bundle?: ?string, + + /** + * `method` is the HTTP Method to use. Defaults to GET if not specified. + */ method?: ?string, + + /** + * `headers` is an object representing the HTTP headers to send along with the + * request for a remote image. + */ headers?: ?Object, + + /** + * `body` is the HTTP body to send with the request. This must be a valid + * UTF-8 string, and will be sent exactly as specified, with no + * additional encoding (e.g. URL-escaping or base64) applied. + */ body?: ?string, + + /** + * `cache` determines how the requests handles potentially cached + * responses. + * + * - `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS. + * + * - `reload`: The data for the URL will be loaded from the originating source. + * No existing cache data should be used to satisfy a URL load request. + * + * - `force-cache`: The existing cached data will be used to satisfy the request, + * regardless of its age or expiration date. If there is no existing data in the cache + * corresponding the request, the data is loaded from the originating source. + * + * - `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of + * its age or expiration date. If there is no existing data in the cache corresponding + * to a URL load request, no attempt is made to load the data from the originating source, + * and the load is considered to have failed. + * + * @platform ios + */ cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'), + + /** + * `width` and `height` can be specified if known at build time, in which case + * these will be used to set the default `` component dimensions. + */ width?: ?number, height?: ?number, + + /** + * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if + * unspecified, meaning that one image pixel equates to one display point / DIP. + */ scale?: ?number, }>; diff --git a/Libraries/Image/ImageSourcePropType.js b/Libraries/Image/ImageSourcePropType.js deleted file mode 100644 index 0665c2e108b3fa..00000000000000 --- a/Libraries/Image/ImageSourcePropType.js +++ /dev/null @@ -1,90 +0,0 @@ -/** - * 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. - * - * @no-flow - * @format - */ -'use strict'; - -const PropTypes = require('prop-types'); - -const ImageURISourcePropType = PropTypes.shape({ - /** - * `uri` is a string representing the resource identifier for the image, which - * could be an http address, a local file path, or the name of a static image - * resource (which should be wrapped in the `require('./path/to/image.png')` - * function). - */ - uri: PropTypes.string, - /** - * `bundle` is the iOS asset bundle which the image is included in. This - * will default to [NSBundle mainBundle] if not set. - * @platform ios - */ - bundle: PropTypes.string, - /** - * `method` is the HTTP Method to use. Defaults to GET if not specified. - */ - method: PropTypes.string, - /** - * `headers` is an object representing the HTTP headers to send along with the - * request for a remote image. - */ - headers: PropTypes.objectOf(PropTypes.string), - /** - * `body` is the HTTP body to send with the request. This must be a valid - * UTF-8 string, and will be sent exactly as specified, with no - * additional encoding (e.g. URL-escaping or base64) applied. - */ - body: PropTypes.string, - /** - * `cache` determines how the requests handles potentially cached - * responses. - * - * - `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS. - * - * - `reload`: The data for the URL will be loaded from the originating source. - * No existing cache data should be used to satisfy a URL load request. - * - * - `force-cache`: The existing cached data will be used to satisfy the request, - * regardless of its age or expiration date. If there is no existing data in the cache - * corresponding the request, the data is loaded from the originating source. - * - * - `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of - * its age or expiration date. If there is no existing data in the cache corresponding - * to a URL load request, no attempt is made to load the data from the originating source, - * and the load is considered to have failed. - * - * @platform ios - */ - cache: PropTypes.oneOf([ - 'default', - 'reload', - 'force-cache', - 'only-if-cached', - ]), - /** - * `width` and `height` can be specified if known at build time, in which case - * these will be used to set the default `` component dimensions. - */ - width: PropTypes.number, - height: PropTypes.number, - /** - * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if - * unspecified, meaning that one image pixel equates to one display point / DIP. - */ - scale: PropTypes.number, -}); - -const ImageSourcePropType = PropTypes.oneOfType([ - ImageURISourcePropType, - // Opaque type returned by require('./image.jpg') - PropTypes.number, - // Multiple sources - PropTypes.arrayOf(ImageURISourcePropType), -]); - -module.exports = ImageSourcePropType; diff --git a/Libraries/StyleSheet/StyleSheetValidation.js b/Libraries/StyleSheet/StyleSheetValidation.js index 0ebd8a7f738e88..9fb5bb661ee5f5 100644 --- a/Libraries/StyleSheet/StyleSheetValidation.js +++ b/Libraries/StyleSheet/StyleSheetValidation.js @@ -10,7 +10,7 @@ 'use strict'; -const ImageStylePropTypes = require('ImageStylePropTypes'); +const DeprecatedImageStylePropTypes = require('DeprecatedImageStylePropTypes'); const TextStylePropTypes = require('TextStylePropTypes'); const ViewStylePropTypes = require('ViewStylePropTypes'); @@ -85,7 +85,7 @@ const styleError = function(message1, style, caller?, message2?) { const allStylePropTypes = {}; if (__DEV__ && !global.__RCTProfileIsProfiling) { - StyleSheetValidation.addValidStylePropTypes(ImageStylePropTypes); + StyleSheetValidation.addValidStylePropTypes(DeprecatedImageStylePropTypes); StyleSheetValidation.addValidStylePropTypes(TextStylePropTypes); StyleSheetValidation.addValidStylePropTypes(ViewStylePropTypes); } diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 0fabe24e9abd02..02c4ce284843f5 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -10,10 +10,10 @@ 'use strict'; +const DeprecatedTextPropTypes = require('DeprecatedTextPropTypes'); const React = require('React'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const TextAncestor = require('TextAncestor'); -const TextPropTypes = require('TextPropTypes'); const Touchable = require('Touchable'); const UIManager = require('UIManager'); @@ -279,6 +279,6 @@ const Text = ( const TextToExport = React.forwardRef(Text); // TODO: Deprecate this. -TextToExport.propTypes = TextPropTypes; +TextToExport.propTypes = DeprecatedTextPropTypes; module.exports = (TextToExport: Class>); diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js index 51470a91ce0e24..773125d56be721 100644 --- a/Libraries/Text/TextProps.js +++ b/Libraries/Text/TextProps.js @@ -30,17 +30,81 @@ export type PressRetentionOffset = $ReadOnly<{| * @see https://facebook.github.io/react-native/docs/text.html#reference */ export type TextProps = $ReadOnly<{ + /** + * Indicates whether the view is an accessibility element. + * + * See https://facebook.github.io/react-native/docs/text.html#accessible + */ accessible?: ?boolean, accessibilityRole?: ?AccessibilityRole, accessibilityStates?: ?AccessibilityStates, accessibilityTraits?: ?(AccessibilityTrait | Array), + + /** + * Whether font should be scaled down automatically. + * + * See https://facebook.github.io/react-native/docs/text.html#adjustsfontsizetofit + */ + adjustsFontSizeToFit?: ?boolean, + + /** + * Whether fonts should scale to respect Text Size accessibility settings. + * + * See https://facebook.github.io/react-native/docs/text.html#allowfontscaling + */ allowFontScaling?: ?boolean, children?: ?React.Node, + + /** + * When `numberOfLines` is set, this prop defines how text will be + * truncated. + * + * See https://facebook.github.io/react-native/docs/text.html#ellipsizemode + */ ellipsizeMode?: ?('clip' | 'head' | 'middle' | 'tail'), + + /** + * Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. + * Possible values: + * `null/undefined` (default): inherit from the parent node or the global default (0) + * `0`: no max, ignore parent/global default + * `>= 1`: sets the maxFontSizeMultiplier of this node to this value + */ + maxFontSizeMultiplier?: ?number, + + /** + * Used to locate this view from native code. + * + * See https://facebook.github.io/react-native/docs/text.html#nativeid + */ nativeID?: ?string, + + /** + * Used to truncate the text with an ellipsis. + * + * See https://facebook.github.io/react-native/docs/text.html#numberoflines + */ numberOfLines?: ?number, + + /** + * Invoked on mount and layout changes. + * + * See https://facebook.github.io/react-native/docs/text.html#onlayout + */ onLayout?: ?(event: LayoutEvent) => mixed, + + /** + * This function is called on long press. + * + * See https://facebook.github.io/react-native/docs/text.html#onlongpress + */ onLongPress?: ?(event: PressEvent) => mixed, + + /** + * This function is called on press. + * + * See https://facebook.github.io/react-native/docs/text.html#onpress + */ onPress?: ?(event: PressEvent) => mixed, onResponderGrant?: ?Function, onResponderMove?: ?Function, @@ -49,18 +113,71 @@ export type TextProps = $ReadOnly<{ onResponderTerminationRequest?: ?Function, onStartShouldSetResponder?: ?Function, onTextLayout?: ?(event: TextLayoutEvent) => mixed, + + /** + * Defines how far your touch may move off of the button, before + * deactivating the button. + * + * See https://facebook.github.io/react-native/docs/text.html#pressretentionoffset + */ pressRetentionOffset?: ?PressRetentionOffset, + + /** + * Lets the user select text. + * + * See https://facebook.github.io/react-native/docs/text.html#selectable + */ selectable?: ?boolean, style?: ?DangerouslyImpreciseStyleProp, + + /** + * Used to locate this view in end-to-end tests. + * + * See https://facebook.github.io/react-native/docs/text.html#testid + */ testID?: ?string, - // Android Only + /** + * Android Only + */ + + /** + * Specifies the disabled state of the text view for testing purposes. + * + * See https://facebook.github.io/react-native/docs/text.html#disabled + */ disabled?: ?boolean, + + /** + * The highlight color of the text. + * + * See https://facebook.github.io/react-native/docs/text.html#selectioncolor + */ selectionColor?: ?string, + + /** + * Set text break strategy on Android. + * + * See https://facebook.github.io/react-native/docs/text.html#textbreakstrategy + */ textBreakStrategy?: ?('balanced' | 'highQuality' | 'simple'), - // iOS Only + /** + * iOS Only + */ adjustsFontSizeToFit?: ?boolean, + + /** + * Smallest possible scale a font can reach. + * + * See https://facebook.github.io/react-native/docs/text.html#minimumfontscale + */ minimumFontScale?: ?number, + + /** + * When `true`, no visual change is made when text is pressed down. + * + * See https://facebook.github.io/react-native/docs/text.html#supperhighlighting + */ suppressHighlighting?: ?boolean, }>;