Skip to content

Commit

Permalink
Using ReadOnly and Exact types for StyleSheet
Browse files Browse the repository at this point in the history 
Summary: There are a few more things that need to be tightened up but they cause *tons* of errors in FBSource and require more investigation before we can change them.

Reviewed By: sahrens

Differential Revision: D7160522

fbshipit-source-id: 17167efd80fd6c3bac5a055d2ab58b3b251c1b8b
  • Loading branch information
@elicwhite @facebook-github-bot
elicwhite authored and facebook-github-bot committed Mar 6, 2018
1 parent b98bf1e commit b6c7e55
Showing 1 changed file with 142 additions and 137 deletions.
279 changes: 142 additions & 137 deletions Libraries/StyleSheet/StyleSheetTypes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,153 +18,155 @@ export opaque type StyleSheetStyle: number = number;
export type ColorValue = null | string;
export type DimensionValue = null | number | string | AnimatedNode;

export type LayoutStyle = {
+display?: 'none' | 'flex',
+width?: DimensionValue,
+height?: DimensionValue,
+bottom?: DimensionValue,
+end?: DimensionValue,
+left?: DimensionValue,
+right?: DimensionValue,
+start?: DimensionValue,
+top?: DimensionValue,
+minWidth?: DimensionValue,
+maxWidth?: DimensionValue,
+minHeight?: DimensionValue,
+maxHeight?: DimensionValue,
+margin?: DimensionValue,
+marginBottom?: DimensionValue,
+marginEnd?: DimensionValue,
+marginHorizontal?: DimensionValue,
+marginLeft?: DimensionValue,
+marginRight?: DimensionValue,
+marginStart?: DimensionValue,
+marginTop?: DimensionValue,
+marginVertical?: DimensionValue,
+padding?: DimensionValue,
+paddingBottom?: DimensionValue,
+paddingEnd?: DimensionValue,
+paddingHorizontal?: DimensionValue,
+paddingLeft?: DimensionValue,
+paddingRight?: DimensionValue,
+paddingStart?: DimensionValue,
+paddingTop?: DimensionValue,
+paddingVertical?: DimensionValue,
+borderWidth?: number,
+borderBottomWidth?: number,
+borderEndWidth?: number,
+borderLeftWidth?: number,
+borderRightWidth?: number,
+borderStartWidth?: number,
+borderTopWidth?: number,
+position?: 'absolute' | 'relative',
+flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse',
+flexWrap?: 'wrap' | 'nowrap',
+justifyContent?:
export type LayoutStyle = $ReadOnly<{|
display?: 'none' | 'flex',
width?: DimensionValue,
height?: DimensionValue,
bottom?: DimensionValue,
end?: DimensionValue,
left?: DimensionValue,
right?: DimensionValue,
start?: DimensionValue,
top?: DimensionValue,
minWidth?: DimensionValue,
maxWidth?: DimensionValue,
minHeight?: DimensionValue,
maxHeight?: DimensionValue,
margin?: DimensionValue,
marginBottom?: DimensionValue,
marginEnd?: DimensionValue,
marginHorizontal?: DimensionValue,
marginLeft?: DimensionValue,
marginRight?: DimensionValue,
marginStart?: DimensionValue,
marginTop?: DimensionValue,
marginVertical?: DimensionValue,
padding?: DimensionValue,
paddingBottom?: DimensionValue,
paddingEnd?: DimensionValue,
paddingHorizontal?: DimensionValue,
paddingLeft?: DimensionValue,
paddingRight?: DimensionValue,
paddingStart?: DimensionValue,
paddingTop?: DimensionValue,
paddingVertical?: DimensionValue,
borderWidth?: number,
borderBottomWidth?: number,
borderEndWidth?: number,
borderLeftWidth?: number,
borderRightWidth?: number,
borderStartWidth?: number,
borderTopWidth?: number,
position?: 'absolute' | 'relative',
flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse',
flexWrap?: 'wrap' | 'nowrap',
justifyContent?:
| 'flex-start'
| 'flex-end'
| 'center'
| 'space-between'
| 'space-around'
| 'space-evenly',
+alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline',
+alignSelf?:
alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline',
alignSelf?:
| 'auto'
| 'flex-start'
| 'flex-end'
| 'center'
| 'stretch'
| 'baseline',
+alignContent?:
alignContent?:
| 'flex-start'
| 'flex-end'
| 'center'
| 'stretch'
| 'space-between'
| 'space-around',
+overflow?: 'visible' | 'hidden' | 'scroll',
+flex?: number,
+flexGrow?: number,
+flexShrink?: number,
+flexBasis?: number | string,
+aspectRatio?: number,
+zIndex?: number,
+direction?: 'inherit' | 'ltr' | 'rtl',
};
overflow?: 'visible' | 'hidden' | 'scroll',
flex?: number,
flexGrow?: number,
flexShrink?: number,
flexBasis?: number | string,
aspectRatio?: number,
zIndex?: number,
direction?: 'inherit' | 'ltr' | 'rtl',
|}>;

export type TransformStyle = {
+transform?: $ReadOnlyArray<
| {+perspective: number | AnimatedNode}
| {+rotate: string}
| {+rotateX: string}
| {+rotateY: string}
| {+rotateZ: string}
| {+scale: number | AnimatedNode}
| {+scaleX: number | AnimatedNode}
| {+scaleY: number | AnimatedNode}
| {+translateX: number | AnimatedNode}
| {+translateY: number | AnimatedNode}
| {
export type TransformStyle = $ReadOnly<{|
transform?: $ReadOnlyArray<
| {|+perspective: number | AnimatedNode|}
| {|+rotate: string|}
| {|+rotateX: string|}
| {|+rotateY: string|}
| {|+rotateZ: string|}
| {|+scale: number | AnimatedNode|}
| {|+scaleX: number | AnimatedNode|}
| {|+scaleY: number | AnimatedNode|}
| {|+translateX: number | AnimatedNode|}
| {|+translateY: number | AnimatedNode|}
| {|
+translate: [number | AnimatedNode, number | AnimatedNode] | AnimatedNode,
}
| {+skewX: string}
| {+skewY: string}
|}
| {|+skewX: string|}
| {|+skewY: string|}
// TODO: what is the actual type it expects?
| {+matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode},
| {|
+matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
|},
>,
};
|}>;

export type ShadowStyle = {
+shadowColor?: ColorValue,
+shadowOffset?: {
+width?: number,
+height?: number,
},
+shadowOpacity?: number | AnimatedNode,
+shadowRadius?: number,
};
export type ShadowStyle = $ReadOnly<{|
shadowColor?: ColorValue,
shadowOffset?: $ReadOnly<{|
width?: number,
height?: number,
|}>,
shadowOpacity?: number | AnimatedNode,
shadowRadius?: number,
|}>;

export type ViewStyle = {
export type ViewStyle = $ReadOnly<{|
...$Exact<LayoutStyle>,
...$Exact<ShadowStyle>,
...$Exact<TransformStyle>,
+backfaceVisibility?: 'visible' | 'hidden',
+backgroundColor?: ColorValue,
+borderColor?: ColorValue,
+borderBottomColor?: ColorValue,
+borderEndColor?: ColorValue,
+borderLeftColor?: ColorValue,
+borderRightColor?: ColorValue,
+borderStartColor?: ColorValue,
+borderTopColor?: ColorValue,
+borderRadius?: number,
+borderBottomEndRadius?: number,
+borderBottomLeftRadius?: number,
+borderBottomRightRadius?: number,
+borderBottomStartRadius?: number,
+borderTopEndRadius?: number,
+borderTopLeftRadius?: number,
+borderTopRightRadius?: number,
+borderTopStartRadius?: number,
+borderStyle?: 'solid' | 'dotted' | 'dashed',
+borderWidth?: number,
+borderBottomWidth?: number,
+borderEndWidth?: number,
+borderLeftWidth?: number,
+borderRightWidth?: number,
+borderStartWidth?: number,
+borderTopWidth?: number,
+opacity?: number | AnimatedNode,
+elevation?: number,
};
backfaceVisibility?: 'visible' | 'hidden',
backgroundColor?: ColorValue,
borderColor?: ColorValue,
borderBottomColor?: ColorValue,
borderEndColor?: ColorValue,
borderLeftColor?: ColorValue,
borderRightColor?: ColorValue,
borderStartColor?: ColorValue,
borderTopColor?: ColorValue,
borderRadius?: number,
borderBottomEndRadius?: number,
borderBottomLeftRadius?: number,
borderBottomRightRadius?: number,
borderBottomStartRadius?: number,
borderTopEndRadius?: number,
borderTopLeftRadius?: number,
borderTopRightRadius?: number,
borderTopStartRadius?: number,
borderStyle?: 'solid' | 'dotted' | 'dashed',
borderWidth?: number,
borderBottomWidth?: number,
borderEndWidth?: number,
borderLeftWidth?: number,
borderRightWidth?: number,
borderStartWidth?: number,
borderTopWidth?: number,
opacity?: number | AnimatedNode,
elevation?: number,
|}>;

export type TextStyle = {
export type TextStyle = $ReadOnly<{|
...$Exact<ViewStyle>,
+color?: ColorValue,
+fontFamily?: string,
+fontSize?: number,
+fontStyle?: 'normal' | 'italic',
+fontWeight?:
color?: ColorValue,
fontFamily?: string,
fontSize?: number,
fontStyle?: 'normal' | 'italic',
fontWeight?:
| 'normal'
| 'bold'
| '100'
Expand All @@ -176,37 +178,40 @@ export type TextStyle = {
| '700'
| '800'
| '900',
+fontVariant?: $ReadOnlyArray<
fontVariant?: $ReadOnlyArray<
| 'small-caps'
| 'oldstyle-nums'
| 'lining-nums'
| 'tabular-nums'
| 'proportional-nums',
>,
+textShadowOffset?: {+width?: number, +height?: number},
+textShadowRadius?: number,
+textShadowColor?: ColorValue,
+letterSpacing?: number,
+lineHeight?: number,
+textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify',
+textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center',
+includeFontPadding?: boolean,
+textDecorationLine?:
textShadowOffset?: $ReadOnly<{|
width?: number,
height?: number,
|}>,
textShadowRadius?: number,
textShadowColor?: ColorValue,
letterSpacing?: number,
lineHeight?: number,
textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify',
textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center',
includeFontPadding?: boolean,
textDecorationLine?:
| 'none'
| 'underline'
| 'line-through'
| 'underline line-through',
+textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',
+textDecorationColor?: ColorValue,
+writingDirection?: 'auto' | 'ltr' | 'rtl',
};
textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',
textDecorationColor?: ColorValue,
writingDirection?: 'auto' | 'ltr' | 'rtl',
|}>;

export type ImageStyle = {
export type ImageStyle = $ReadOnly<{|
...$Exact<ViewStyle>,
+resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
+tintColor?: ColorValue,
+overlayColor?: string,
};
resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
tintColor?: ColorValue,
overlayColor?: string,
|}>;

export type Style = {
...$Exact<TextStyle>,
Expand Down

0 comments on commit b6c7e55

Please sign in to comment.