diff --git a/packages/react-native-web/src/exports/Text/types.js b/packages/react-native-web/src/exports/Text/types.js index 681fbd55..81e870b7 100644 --- a/packages/react-native-web/src/exports/Text/types.js +++ b/packages/react-native-web/src/exports/Text/types.js @@ -24,43 +24,45 @@ type FontWeightValue = | '800' | '900'; +type NumberOrString = number | string; + export type TextStyle = { ...ViewStyle, - color?: ColorValue, - fontFamily?: string, - fontFeatureSettings?: string, - fontSize?: number | string, + color?: ?ColorValue, + fontFamily?: ?string, + fontFeatureSettings?: ?string, + fontSize?: ?NumberOrString, fontStyle?: 'italic' | 'normal', - fontWeight?: FontWeightValue, + fontWeight?: ?FontWeightValue, fontVariant?: $ReadOnlyArray< 'small-caps' | 'oldstyle-nums' | 'lining-nums' | 'tabular-nums' | 'proportional-nums' >, - letterSpacing?: number | string, - lineHeight?: number | string, + letterSpacing?: ?NumberOrString, + lineHeight?: ?NumberOrString, textAlign?: 'center' | 'end' | 'inherit' | 'justify' | 'justify-all' | 'left' | 'right' | 'start', - textAlignVertical?: string, - textDecorationColor?: ColorValue, + textAlignVertical?: ?string, + textDecorationColor?: ?ColorValue, textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through', textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed', - textIndent?: number | string, - textOverflow?: string, + textIndent?: ?NumberOrString, + textOverflow?: ?string, textRendering?: 'auto' | 'geometricPrecision' | 'optimizeLegibility' | 'optimizeSpeed', - textShadowColor?: ColorValue, + textShadowColor?: ?ColorValue, textShadowOffset?: {| width?: number, height?: number |}, - textShadowRadius?: number, + textShadowRadius?: ?number, textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase', unicodeBidi?: 'normal' | 'bidi-override' | 'embed' | 'isolate' | 'isolate-override' | 'plaintext', - whiteSpace?: string, + whiteSpace?: ?string, wordBreak?: 'normal' | 'break-all' | 'break-word' | 'keep-all', - wordWrap?: string, + wordWrap?: ?string, writingDirection?: 'auto' | 'ltr' | 'rtl', /* @platform web */ - MozOsxFontSmoothing?: string, - WebkitFontSmoothing?: string + MozOsxFontSmoothing?: ?string, + WebkitFontSmoothing?: ?string }; export type TextProps = { - accessibilityLabel?: string, + accessibilityLabel?: ?string, accessibilityLiveRegion?: 'none' | 'polite' | 'assertive', accessibilityRelationship?: { activedescendant?: ?string, @@ -93,13 +95,13 @@ export type TextProps = { required?: ?boolean, selected?: ?boolean }, - accessible?: boolean, - children?: any, + accessible?: ?boolean, + children?: ?any, dir?: 'auto' | 'ltr' | 'rtl', forwardedRef?: any, importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants', - nativeID?: string, - numberOfLines?: number, + nativeID?: ?string, + numberOfLines?: ?number, onBlur?: (e: any) => void, onFocus?: (e: any) => void, onLayout?: (e: LayoutEvent) => void, @@ -122,7 +124,7 @@ export type TextProps = { onStartShouldSetResponderCapture?: (e: any) => boolean, selectable?: boolean, style?: GenericStyleProp, - testID?: string, + testID?: ?string, // unstable onContextMenu?: (e: any) => void, onKeyDown?: (e: any) => void, @@ -143,14 +145,14 @@ export type TextProps = { onTouchMoveCapture?: (e: any) => void, onTouchStart?: (e: any) => void, onTouchStartCapture?: (e: any) => void, - href?: string, - itemID?: string, - itemRef?: string, - itemProp?: string, - itemScope?: string, - itemType?: string, - rel?: string, - target?: string, + href?: ?string, + itemID?: ?string, + itemRef?: ?string, + itemProp?: ?string, + itemScope?: ?string, + itemType?: ?string, + rel?: ?string, + target?: ?string, unstable_ariaSet?: Object, unstable_dataSet?: Object }; diff --git a/packages/react-native-web/src/exports/TextInput/types.js b/packages/react-native-web/src/exports/TextInput/types.js index 6283254b..24947cc2 100644 --- a/packages/react-native-web/src/exports/TextInput/types.js +++ b/packages/react-native-web/src/exports/TextInput/types.js @@ -20,16 +20,16 @@ export type TextInputStyle = { export type TextInputProps = { ...ViewProps, autoCapitalize?: 'characters' | 'none' | 'sentences' | 'words', - autoComplete?: string, - autoCompleteType?: string, // Compat with React Native (Bug react-native#26003) - autoCorrect?: boolean, - autoFocus?: boolean, - blurOnSubmit?: boolean, - clearTextOnFocus?: boolean, - defaultValue?: string, - disabled?: boolean, - editable?: boolean, - inputAccessoryViewID?: string, + autoComplete?: ?string, + autoCompleteType?: ?string, // Compat with React Native (Bug react-native#26003) + autoCorrect?: ?boolean, + autoFocus?: ?boolean, + blurOnSubmit?: ?boolean, + clearTextOnFocus?: ?boolean, + defaultValue?: ?string, + disabled?: ?boolean, + editable?: ?boolean, + inputAccessoryViewID?: ?string, keyboardType?: | 'default' | 'email-address' @@ -40,9 +40,9 @@ export type TextInputProps = { | 'search' | 'url' | 'web-search', - maxLength?: number, - multiline?: boolean, - numberOfLines?: number, + maxLength?: ?number, + multiline?: ?boolean, + numberOfLines?: ?number, onBlur?: (e: any) => void, onChange?: (e: any) => void, onChangeText?: (e: string) => void, @@ -53,17 +53,17 @@ export type TextInputProps = { onSelectionChange?: (e: any) => void, onScroll?: (e: any) => void, onSubmitEditing?: (e: any) => void, - placeholder?: string, - placeholderTextColor?: ColorValue, + placeholder?: ?string, + placeholderTextColor?: ?ColorValue, returnKeyType?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send', - secureTextEntry?: boolean, - selectTextOnFocus?: boolean, + secureTextEntry?: ?boolean, + selectTextOnFocus?: ?boolean, selection?: {| start: number, end?: number |}, - selectionColor?: ColorValue, - spellCheck?: boolean, - style?: GenericStyleProp, - value?: string + selectionColor?: ?ColorValue, + spellCheck?: ?boolean, + style?: ?GenericStyleProp, + value?: ?string }; diff --git a/packages/react-native-web/src/exports/View/types.js b/packages/react-native-web/src/exports/View/types.js index b116ceea..a5e8126b 100644 --- a/packages/react-native-web/src/exports/View/types.js +++ b/packages/react-native-web/src/exports/View/types.js @@ -19,6 +19,8 @@ import type { TransformStyles } from '../../types/styles'; +type NumberOrString = number | string; + type OverscrollBehaviorValue = 'auto' | 'contain' | 'none'; export type ViewStyle = { @@ -28,36 +30,36 @@ export type ViewStyle = { ...LayoutStyles, ...ShadowStyles, ...TransformStyles, - backdropFilter?: string, - backgroundAttachment?: string, - backgroundBlendMode?: string, - backgroundClip?: string, - backgroundColor?: ColorValue, + backdropFilter?: ?string, + backgroundAttachment?: ?string, + backgroundBlendMode?: ?string, + backgroundClip?: ?string, + backgroundColor?: ?ColorValue, backgroundImage?: ?string, backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box', - backgroundPosition?: string, - backgroundRepeat?: string, - backgroundSize?: string, - boxShadow?: string, - clip?: string, + backgroundPosition?: ?string, + backgroundRepeat?: ?string, + backgroundSize?: ?string, + boxShadow?: ?string, + clip?: ?string, filter?: ?string, - opacity?: number, - outlineColor?: ColorValue, - outlineOffset?: string | number, - outlineStyle?: string, - outlineWidth?: string | number, - overscrollBehavior?: OverscrollBehaviorValue, - overscrollBehaviorX?: OverscrollBehaviorValue, - overscrollBehaviorY?: OverscrollBehaviorValue, + opacity?: ?number, + outlineColor?: ?ColorValue, + outlineOffset?: ?NumberOrString, + outlineStyle?: ?string, + outlineWidth?: ?NumberOrString, + overscrollBehavior?: ?OverscrollBehaviorValue, + overscrollBehaviorX?: ?OverscrollBehaviorValue, + overscrollBehaviorY?: ?OverscrollBehaviorValue, scrollbarWidth?: 'auto' | 'none' | 'thin', - scrollSnapAlign?: string, - scrollSnapType?: string, - WebkitMaskImage?: string, + scrollSnapAlign?: ?string, + scrollSnapType?: ?string, + WebkitMaskImage?: ?string, WebkitOverflowScrolling?: 'auto' | 'touch' }; export type ViewProps = { - accessibilityLabel?: string, + accessibilityLabel?: ?string, accessibilityLiveRegion?: 'none' | 'polite' | 'assertive', accessibilityRelationship?: { activedescendant?: ?string, @@ -68,7 +70,7 @@ export type ViewProps = { labelledby?: ?string, owns?: ?string }, - accessibilityRole?: string, + accessibilityRole?: ?string, accessibilityState?: { busy?: ?boolean, checked?: ?boolean | 'mixed', @@ -90,11 +92,11 @@ export type ViewProps = { text?: ?string }, accessible?: boolean, - children?: any, + children?: ?any, forwardedRef?: any, - hitSlop?: EdgeInsetsValue, + hitSlop?: ?EdgeInsetsValue, importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants', - nativeID?: string, + nativeID?: ?string, onBlur?: (e: any) => void, onFocus?: (e: any) => void, onLayout?: (e: LayoutEvent) => void, @@ -116,7 +118,7 @@ export type ViewProps = { onStartShouldSetResponderCapture?: (e: any) => boolean, pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto', style?: GenericStyleProp, - testID?: string, + testID?: ?string, // unstable onClick?: (e: any) => void, onClickCapture?: (e: any) => void, @@ -141,14 +143,14 @@ export type ViewProps = { onTouchMoveCapture?: (e: any) => void, onTouchStart?: (e: any) => void, onTouchStartCapture?: (e: any) => void, - href?: string, - itemID?: string, - itemRef?: string, - itemProp?: string, - itemScope?: string, - itemType?: string, - rel?: string, - target?: string, + href?: ?string, + itemID?: ?string, + itemRef?: ?string, + itemProp?: ?string, + itemScope?: ?string, + itemType?: ?string, + rel?: ?string, + target?: ?string, unstable_ariaSet?: Object, unstable_dataSet?: Object }; diff --git a/packages/react-native-web/src/types/styles.js b/packages/react-native-web/src/types/styles.js index 41739b38..88d7f9f8 100644 --- a/packages/react-native-web/src/types/styles.js +++ b/packages/react-native-web/src/types/styles.js @@ -22,18 +22,18 @@ type AnimationKeyframes = string | Object; type AnimationPlayState = 'paused' | 'running'; export type AnimationStyles = {| - animationDelay?: string | Array, - animationDirection?: AnimationDirection | Array, - animationDuration?: string | Array, - animationFillMode?: AnimationFillMode | Array, - animationIterationCount?: AnimationIterationCount | Array, - animationKeyframes?: AnimationKeyframes | Array, - animationPlayState?: AnimationPlayState | Array, - animationTimingFunction?: string | Array, - transitionDelay?: string | Array, - transitionDuration?: string | Array, - transitionProperty?: string | Array, - transitionTimingFunction?: string | Array + animationDelay?: ?(string | Array), + animationDirection?: ?(AnimationDirection | Array), + animationDuration?: ?(string | Array), + animationFillMode?: ?(AnimationFillMode | Array), + animationIterationCount?: ?(AnimationIterationCount | Array), + animationKeyframes?: ?(AnimationKeyframes | Array), + animationPlayState?: ?(AnimationPlayState | Array), + animationTimingFunction?: ?(string | Array), + transitionDelay?: ?(string | Array), + transitionDuration?: ?(string | Array), + transitionProperty?: ?(string | Array), + transitionTimingFunction?: ?(string | Array) |}; /** @@ -44,29 +44,29 @@ type BorderRadiusValue = number | string; type BorderStyleValue = 'solid' | 'dotted' | 'dashed'; export type BorderStyles = {| - borderColor?: ColorValue, - borderBottomColor?: ColorValue, - borderEndColor?: ColorValue, - borderLeftColor?: ColorValue, - borderRightColor?: ColorValue, - borderStartColor?: ColorValue, - borderTopColor?: ColorValue, - borderRadius?: BorderRadiusValue, - borderBottomEndRadius?: BorderRadiusValue, - borderBottomLeftRadius?: BorderRadiusValue, - borderBottomRightRadius?: BorderRadiusValue, - borderBottomStartRadius?: BorderRadiusValue, - borderTopEndRadius?: BorderRadiusValue, - borderTopLeftRadius?: BorderRadiusValue, - borderTopRightRadius?: BorderRadiusValue, - borderTopStartRadius?: BorderRadiusValue, - borderStyle?: BorderStyleValue, - borderBottomStyle?: BorderStyleValue, - borderEndStyle?: BorderStyleValue, - borderLeftStyle?: BorderStyleValue, - borderRightStyle?: BorderStyleValue, - borderStartStyle?: BorderStyleValue, - borderTopStyle?: BorderStyleValue + borderColor?: ?ColorValue, + borderBottomColor?: ?ColorValue, + borderEndColor?: ?ColorValue, + borderLeftColor?: ?ColorValue, + borderRightColor?: ?ColorValue, + borderStartColor?: ?ColorValue, + borderTopColor?: ?ColorValue, + borderRadius?: ?BorderRadiusValue, + borderBottomEndRadius?: ?BorderRadiusValue, + borderBottomLeftRadius?: ?BorderRadiusValue, + borderBottomRightRadius?: ?BorderRadiusValue, + borderBottomStartRadius?: ?BorderRadiusValue, + borderTopEndRadius?: ?BorderRadiusValue, + borderTopLeftRadius?: ?BorderRadiusValue, + borderTopRightRadius?: ?BorderRadiusValue, + borderTopStartRadius?: ?BorderRadiusValue, + borderStyle?: ?BorderStyleValue, + borderBottomStyle?: ?BorderStyleValue, + borderEndStyle?: ?BorderStyleValue, + borderLeftStyle?: ?BorderStyleValue, + borderRightStyle?: ?BorderStyleValue, + borderStartStyle?: ?BorderStyleValue, + borderTopStyle?: ?BorderStyleValue |}; /** @@ -129,12 +129,12 @@ type UserSelect = 'all' | 'auto' | 'contain' | 'none' | 'text'; export type InteractionStyles = {| // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Formal_syntax - cursor?: CursorValue, + cursor?: ?CursorValue, // https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Formal_syntax - touchAction?: TouchActionValue, + touchAction?: ?TouchActionValue, // https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Formal_syntax_2 - userSelect?: UserSelect, - willChange?: string + userSelect?: ?UserSelect, + willChange?: ?string |}; /** @@ -152,88 +152,89 @@ export type LayoutStyles = {| | 'space-around' | 'space-between' | 'stretch', - alignItems?: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch', - alignSelf?: 'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch', - backfaceVisibility?: VisiblilityValue, - borderWidth?: DimensionValue, - borderBottomWidth?: DimensionValue, - borderEndWidth?: DimensionValue, - borderLeftWidth?: DimensionValue, - borderRightWidth?: DimensionValue, - borderStartWidth?: DimensionValue, - borderTopWidth?: DimensionValue, - bottom?: DimensionValue, - boxSizing?: 'border-box' | 'content-box' | 'padding-box', - direction?: 'inherit' | 'ltr' | 'rtl', - display?: string, - end?: DimensionValue, - flex?: number, - flexBasis?: DimensionValue, - flexDirection?: 'column' | 'column-reverse' | 'row' | 'row-reverse', - flexGrow?: number, - flexShrink?: number, - flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse', - height?: DimensionValue, - justifyContent?: + alignItems?: ?('baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'), + alignSelf?: ?('auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'), + backfaceVisibility?: ?VisiblilityValue, + borderWidth?: ?DimensionValue, + borderBottomWidth?: ?DimensionValue, + borderEndWidth?: ?DimensionValue, + borderLeftWidth?: ?DimensionValue, + borderRightWidth?: ?DimensionValue, + borderStartWidth?: ?DimensionValue, + borderTopWidth?: ?DimensionValue, + bottom?: ?DimensionValue, + boxSizing?: ?('border-box' | 'content-box' | 'padding-box'), + direction?: ?('inherit' | 'ltr' | 'rtl'), + display?: ?string, + end?: ?DimensionValue, + flex?: ?number, + flexBasis?: ?DimensionValue, + flexDirection?: ?('column' | 'column-reverse' | 'row' | 'row-reverse'), + flexGrow?: ?number, + flexShrink?: ?number, + flexWrap?: ?('nowrap' | 'wrap' | 'wrap-reverse'), + height?: ?DimensionValue, + justifyContent?: ?( | 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' - | 'space-evenly', - left?: DimensionValue, - margin?: DimensionValue, - marginBottom?: DimensionValue, - marginHorizontal?: DimensionValue, - marginEnd?: DimensionValue, - marginLeft?: DimensionValue, - marginRight?: DimensionValue, - marginStart?: DimensionValue, - marginTop?: DimensionValue, - marginVertical?: DimensionValue, - maxHeight?: DimensionValue, - maxWidth?: DimensionValue, - minHeight?: DimensionValue, - minWidth?: DimensionValue, - order?: number, - overflow?: OverflowValue, - overflowX?: OverflowValue, - overflowY?: OverflowValue, - padding?: DimensionValue, - paddingBottom?: DimensionValue, - paddingHorizontal?: DimensionValue, - paddingEnd?: DimensionValue, - paddingLeft?: DimensionValue, - paddingRight?: DimensionValue, - paddingStart?: DimensionValue, - paddingTop?: DimensionValue, - paddingVertical?: DimensionValue, - position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky', - right?: DimensionValue, - start?: DimensionValue, - top?: DimensionValue, - visibility?: VisiblilityValue, - width?: DimensionValue, - zIndex?: number, + | 'space-evenly' + ), + left?: ?DimensionValue, + margin?: ?DimensionValue, + marginBottom?: ?DimensionValue, + marginHorizontal?: ?DimensionValue, + marginEnd?: ?DimensionValue, + marginLeft?: ?DimensionValue, + marginRight?: ?DimensionValue, + marginStart?: ?DimensionValue, + marginTop?: ?DimensionValue, + marginVertical?: ?DimensionValue, + maxHeight?: ?DimensionValue, + maxWidth?: ?DimensionValue, + minHeight?: ?DimensionValue, + minWidth?: ?DimensionValue, + order?: ?number, + overflow?: ?OverflowValue, + overflowX?: ?OverflowValue, + overflowY?: ?OverflowValue, + padding?: ?DimensionValue, + paddingBottom?: ?DimensionValue, + paddingHorizontal?: ?DimensionValue, + paddingEnd?: ?DimensionValue, + paddingLeft?: ?DimensionValue, + paddingRight?: ?DimensionValue, + paddingStart?: ?DimensionValue, + paddingTop?: ?DimensionValue, + paddingVertical?: ?DimensionValue, + position?: ?('absolute' | 'fixed' | 'relative' | 'static' | 'sticky'), + right?: ?DimensionValue, + start?: ?DimensionValue, + top?: ?DimensionValue, + visibility?: ?VisiblilityValue, + width?: ?DimensionValue, + zIndex?: ?number, /** * @platform unsupported */ - aspectRatio?: number, + aspectRatio?: ?number, /** * @platform web */ - gridAutoColumns?: string, - gridAutoFlow?: string, - gridAutoRows?: string, - gridColumnEnd?: string, - gridColumnGap?: string, - gridColumnStart?: string, - gridRowEnd?: string, - gridRowGap?: string, - gridRowStart?: string, - gridTemplateColumns?: string, - gridTemplateRows?: string, - gridTemplateAreas?: string + gridAutoColumns?: ?string, + gridAutoFlow?: ?string, + gridAutoRows?: ?string, + gridColumnEnd?: ?string, + gridColumnGap?: ?string, + gridColumnStart?: ?string, + gridRowEnd?: ?string, + gridRowGap?: ?string, + gridRowStart?: ?string, + gridTemplateColumns?: ?string, + gridTemplateRows?: ?string, + gridTemplateAreas?: ?string |}; /** @@ -241,13 +242,13 @@ export type LayoutStyles = {| */ export type ShadowStyles = {| - shadowColor?: ColorValue, + shadowColor?: ?ColorValue, shadowOffset?: {| width?: DimensionValue, height?: DimensionValue |}, - shadowOpacity?: number, - shadowRadius?: DimensionValue + shadowOpacity?: ?number, + shadowRadius?: ?DimensionValue |}; /** @@ -255,8 +256,8 @@ export type ShadowStyles = {| */ export type TransformStyles = {| - perspective?: NumberOrString, - perspectiveOrigin?: string, + perspective?: ?NumberOrString, + perspectiveOrigin?: ?string, transform?: Array< | {| +perspective: NumberOrString |} | {| +rotate: string |} @@ -275,6 +276,6 @@ export type TransformStyles = {| | {| +translateZ: NumberOrString |} | {| +translate3d: string |} >, - transformOrigin?: string, - transformStyle?: 'flat' | 'preserve-3d' + transformOrigin?: ?string, + transformStyle?: ?('flat' | 'preserve-3d') |};