From 47dc31d4649a8495942e8a702af9ef0bf28b7cf8 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Fri, 24 Aug 2018 10:38:42 -0700 Subject: [PATCH] RN: Nullable Image, Text, & View Props Summary: Changes the Flow prop types for `Image`, `Text`, and `View` to be nullable and optional. This makes these components easier to compose. Reviewed By: sahrens Differential Revision: D9494285 fbshipit-source-id: c3f17147f063b31217b239a3abc085d1850f8df9 --- .../Components/View/ViewAccessibility.js | 6 +- Libraries/Components/View/ViewPropTypes.js | 59 ++++++++++--------- Libraries/Image/ImageProps.js | 8 +-- Libraries/Text/TextProps.js | 28 ++++----- 4 files changed, 50 insertions(+), 51 deletions(-) diff --git a/Libraries/Components/View/ViewAccessibility.js b/Libraries/Components/View/ViewAccessibility.js index c3512c42c..28e10b8dd 100644 --- a/Libraries/Components/View/ViewAccessibility.js +++ b/Libraries/Components/View/ViewAccessibility.js @@ -52,11 +52,7 @@ export type AccessibilityRole = | 'header' | 'summary'; -export type AccessibilityState = 'selected' | 'disabled'; - -export type AccessibilityStates = - | AccessibilityState - | $ReadOnlyArray; +export type AccessibilityStates = $ReadOnlyArray<'disabled' | 'selected'>; module.exports = { AccessibilityTraits: [ diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index d802a6a71..252cd711d 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -10,27 +10,26 @@ 'use strict'; -const React = require('React'); - import type {Layout, LayoutEvent} from 'CoreEventTypes'; import type {EdgeInsetsProp} from 'EdgeInsetsPropType'; +import type React from 'React'; import type {ViewStyleProp} from 'StyleSheet'; import type {TVViewProps} from 'TVViewPropTypes'; import type { AccessibilityComponentType, AccessibilityTrait, AccessibilityRole, - AccessibilityState, + AccessibilityStates, } from 'ViewAccessibility'; export type ViewLayout = Layout; export type ViewLayoutEvent = LayoutEvent; type DirectEventProps = $ReadOnly<{| - onAccessibilityAction?: Function, - onAccessibilityTap?: Function, + onAccessibilityAction?: ?Function, + onAccessibilityTap?: ?Function, onLayout?: ?(event: LayoutEvent) => void, - onMagicTap?: Function, + onMagicTap?: ?Function, |}>; type TouchEventProps = $ReadOnly<{| @@ -84,33 +83,37 @@ export type ViewProps = $ReadOnly<{| // so we must include TVViewProps ...TVViewProps, - accessible?: boolean, - accessibilityLabel?: + accessible?: ?boolean, + accessibilityLabel?: ?( | null | React$PropType$Primitive | Stringish - | Array - | any, - accessibilityHint?: Stringish, - accessibilityActions?: Array, - accessibilityComponentType?: AccessibilityComponentType, - accessibilityLiveRegion?: 'none' | 'polite' | 'assertive', - importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants', - accessibilityIgnoresInvertColors?: boolean, - accessibilityTraits?: AccessibilityTrait | Array, - accessibilityRole?: AccessibilityRole, - accessibilityStates?: Array, - accessibilityViewIsModal?: boolean, - accessibilityElementsHidden?: boolean, + | $ReadOnlyArray + | any + ), + accessibilityHint?: ?Stringish, + accessibilityActions?: ?$ReadOnlyArray, + accessibilityComponentType?: ?AccessibilityComponentType, + accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'), + importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), + accessibilityIgnoresInvertColors?: ?boolean, + accessibilityTraits?: ?( + | AccessibilityTrait + | $ReadOnlyArray + ), + accessibilityRole?: ?AccessibilityRole, + accessibilityStates?: ?AccessibilityStates, + accessibilityViewIsModal?: ?boolean, + accessibilityElementsHidden?: ?boolean, children?: ?React.Node, testID?: ?string, - nativeID?: string, + nativeID?: ?string, hitSlop?: ?EdgeInsetsProp, - pointerEvents?: null | 'box-none' | 'none' | 'box-only' | 'auto', + pointerEvents?: ?('auto' | 'box-none' | 'box-only' | 'none'), style?: ?ViewStyleProp, - removeClippedSubviews?: boolean, - renderToHardwareTextureAndroid?: boolean, - shouldRasterizeIOS?: boolean, - collapsable?: boolean, - needsOffscreenAlphaCompositing?: boolean, + removeClippedSubviews?: ?boolean, + renderToHardwareTextureAndroid?: ?boolean, + shouldRasterizeIOS?: ?boolean, + collapsable?: ?boolean, + needsOffscreenAlphaCompositing?: ?boolean, |}>; diff --git a/Libraries/Image/ImageProps.js b/Libraries/Image/ImageProps.js index f22209383..02fda6b25 100644 --- a/Libraries/Image/ImageProps.js +++ b/Libraries/Image/ImageProps.js @@ -54,7 +54,7 @@ export type ImageProps = {| ...$Diff>, ...IOSImageProps, ...AndroidImageProps, - blurRadius?: number, + blurRadius?: ?number, capInsets?: ?EdgeInsetsProp, onError?: ?(event: SyntheticEvent<$ReadOnly<{||}>>) => void, @@ -63,11 +63,11 @@ export type ImageProps = {| onLoadStart?: ?() => void, resizeMethod?: ?('auto' | 'resize' | 'scale'), source?: ?ImageSource, - style?: ImageStyleProp, + style?: ?ImageStyleProp, // Can be set via props or style, for now - height?: DimensionValue, - width?: DimensionValue, + height?: ?DimensionValue, + width?: ?DimensionValue, resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center'), src?: empty, diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js index 183594e41..7426b5ab5 100644 --- a/Libraries/Text/TextProps.js +++ b/Libraries/Text/TextProps.js @@ -10,14 +10,14 @@ 'use strict'; -import type {AccessibilityRole} from 'ViewAccessibility'; -import type {AccessibilityState} from 'ViewAccessibility'; -import type {AccessibilityTrait} from 'ViewAccessibility'; - -import type {Node} from 'react'; - import type {LayoutEvent, PressEvent} from 'CoreEventTypes'; +import type React from 'React'; import type {DangerouslyImpreciseStyleProp} from 'StyleSheet'; +import type { + AccessibilityRole, + AccessibilityStates, + AccessibilityTrait, +} from 'ViewAccessibility'; export type PressRetentionOffset = $ReadOnly<{| top: number, @@ -31,13 +31,13 @@ export type PressRetentionOffset = $ReadOnly<{| */ export type TextProps = $ReadOnly<{ accessible?: ?boolean, - accessibilityRole?: AccessibilityRole, - accessibilityStates?: Array, - accessibilityTraits?: AccessibilityTrait | Array, + accessibilityRole?: ?AccessibilityRole, + accessibilityStates?: ?AccessibilityStates, + accessibilityTraits?: ?(AccessibilityTrait | Array), allowFontScaling?: ?boolean, - children?: Node, - ellipsizeMode?: 'clip' | 'head' | 'middle' | 'tail', - nativeID?: string, + children?: ?React.Node, + ellipsizeMode?: ?('clip' | 'head' | 'middle' | 'tail'), + nativeID?: ?string, numberOfLines?: ?number, onLayout?: ?(event: LayoutEvent) => mixed, onLongPress?: ?(event: PressEvent) => mixed, @@ -51,12 +51,12 @@ export type TextProps = $ReadOnly<{ pressRetentionOffset?: ?PressRetentionOffset, selectable?: ?boolean, style?: ?DangerouslyImpreciseStyleProp, - testID?: string, + testID?: ?string, // Android Only disabled?: ?boolean, selectionColor?: ?string, - textBreakStrategy?: 'balanced' | 'highQuality' | 'simple', + textBreakStrategy?: ?('balanced' | 'highQuality' | 'simple'), // iOS Only adjustsFontSizeToFit?: ?boolean,