Improve types for React Native styles.

Reviewed By: TheSavior Differential Revision: D6226807 fbshipit-source-id: b64a77383e6e685f4017c47fc9a5095ed63b062c
facebook · Nov 14, 2017 · da04796 · da04796
1 parent 3e4cf0e
commit da04796
Show file tree

Hide file tree

Showing 3 changed files with 255 additions and 10 deletions.
diff --git a/Libraries/Inspector/ElementProperties.js b/Libraries/Inspector/ElementProperties.js
@@ -25,9 +25,11 @@ const flattenStyle = require('flattenStyle');
 const mapWithSeparator = require('mapWithSeparator');
 const openFileInEditor = require('openFileInEditor');
 
+import type {StyleObj} from 'StyleSheetTypes';
+
 class ElementProperties extends React.Component<{
   hierarchy: Array<$FlowFixMe>,
-  style?: Object | Array<$FlowFixMe> | number,
+  style?: StyleObj,
   source?: {
     fileName?: string,
     lineNumber?: number,

diff --git a/Libraries/StyleSheet/StyleSheet.js b/Libraries/StyleSheet/StyleSheet.js
@@ -18,24 +18,34 @@ const StyleSheetValidation = require('StyleSheetValidation');
 
 const flatten = require('flattenStyle');
 
-export type Styles = {[key: string]: Object};
-export type StyleSheet<S: Styles> = {[key: $Keys<S>]: number};
-export type StyleValue = Object | number | false | null | void | '';
-export type StyleProp = StyleValue | Array<StyleProp>;
+import type {
+  StyleSheetStyle as _StyleSheetStyle,
+  Styles as _Styles,
+  StyleSheet as _StyleSheet,
+  StyleValue as _StyleValue,
+  StyleObj,
+} from 'StyleSheetTypes';
+
+export type StyleProp = StyleObj;
+export type Styles = _Styles;
+export type StyleSheet<S> = _StyleSheet<S>;
+export type StyleValue = _StyleValue;
+export type StyleSheetStyle = _StyleSheetStyle;
 
 let hairlineWidth = PixelRatio.roundToNearestPixel(0.4);
 if (hairlineWidth === 0) {
   hairlineWidth = 1 / PixelRatio.get();
 }
 
 const absoluteFillObject = {
-  position: 'absolute',
+  position: ('absolute': 'absolute'),
   left: 0,
   right: 0,
   top: 0,
   bottom: 0,
 };
-const absoluteFill = ReactNativePropRegistry.register(absoluteFillObject); // This also freezes it
+const absoluteFill: typeof absoluteFillObject =
+  ReactNativePropRegistry.register(absoluteFillObject); // This also freezes it
 
 /**
  * A StyleSheet is an abstraction similar to CSS StyleSheets
@@ -197,7 +207,7 @@ module.exports = {
    * Creates a StyleSheet style reference from the given object.
    */
   create<S: Styles>(obj: S): StyleSheet<S> {
-    const result: StyleSheet<S> = {};
+    const result = {};
     for (const key in obj) {
       StyleSheetValidation.validateStyle(key, obj);
       result[key] = obj[key] && ReactNativePropRegistry.register(obj[key]);

diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js
@@ -8,8 +8,241 @@
  *
  * @providesModule StyleSheetTypes
  * @flow
+ * @format
  */
+
 'use strict';
 
-type Atom = number | bool | Object | Array<?Atom>;
-export type StyleObj = Atom;
+import AnimatedNode from 'AnimatedNode';
+
+export opaque type StyleSheetStyle: number = number;
+
+export type ColorValue = null | string;
+export type DimensionValue = null | number | string | AnimatedNode;
+
+export type LayoutStyle<+Dimension = DimensionValue> = {
+  +display?: 'none' | 'flex',
+  +width?: Dimension,
+  +height?: Dimension,
+  +top?: Dimension,
+  +bottom?: Dimension,
+  +left?: Dimension,
+  +right?: Dimension,
+  +minWidth?: Dimension,
+  +maxWidth?: Dimension,
+  +minHeight?: Dimension,
+  +maxHeight?: Dimension,
+  +margin?: Dimension,
+  +marginVertical?: Dimension,
+  +marginHorizontal?: Dimension,
+  +marginTop?: Dimension,
+  +marginBottom?: Dimension,
+  +marginLeft?: Dimension,
+  +marginRight?: Dimension,
+  +padding?: Dimension,
+  +paddingVertical?: Dimension,
+  +paddingHorizontal?: Dimension,
+  +paddingTop?: Dimension,
+  +paddingBottom?: Dimension,
+  +paddingLeft?: Dimension,
+  +paddingRight?: Dimension,
+  +borderWidth?: number,
+  +borderTopWidth?: number,
+  +borderBottomWidth?: number,
+  +borderLeftWidth?: number,
+  +borderRightWidth?: number,
+  +position?: 'absolute' | 'relative',
+  +flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse',
+  +flexWrap?: 'wrap' | 'nowrap',
+  +justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around',
+  +alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline',
+  +alignSelf?:
+    | 'auto'
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'stretch'
+    | 'baseline',
+  +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',
+};
+
+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}
+    | {
+      +translate: [number | AnimatedNode, number | AnimatedNode] | AnimatedNode,
+    }
+    | {+skewX: string}
+    | {+skewY: string}
+    // TODO: what is the actual type it expects?
+    | {+matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode},
+  >,
+};
+
+export type ShadowStyle<+Color = ColorValue> = {
+  +shadowColor?: Color,
+  +shadowOffset?: {
+    +width?: number,
+    +height?: number,
+  },
+  +shadowOpacity?: number | AnimatedNode,
+  +shadowRadius?: number,
+};
+
+export type ViewStyle<+Dimension = DimensionValue, +Color = ColorValue> = {
+  ...$Exact<LayoutStyle<Dimension>>,
+  ...$Exact<ShadowStyle<Color>>,
+  ...$Exact<TransformStyle>,
+  +backfaceVisibility?: 'visible' | 'hidden',
+  +backgroundColor?: Color,
+  +borderColor?: Color,
+  +borderTopColor?: Color,
+  +borderRightColor?: Color,
+  +borderBottomColor?: Color,
+  +borderLeftColor?: Color,
+  +borderRadius?: number,
+  +borderTopLeftRadius?: number,
+  +borderTopRightRadius?: number,
+  +borderBottomLeftRadius?: number,
+  +borderBottomRightRadius?: number,
+  +borderStyle?: 'solid' | 'dotted' | 'dashed',
+  +borderWidth?: number,
+  +borderTopWidth?: number,
+  +borderRightWidth?: number,
+  +borderBottomWidth?: number,
+  +borderLeftWidth?: number,
+  +opacity?: number | AnimatedNode,
+  +elevation?: number,
+};
+
+export type TextStyle<+Dimension = DimensionValue, +Color = ColorValue> = {
+  ...$Exact<ViewStyle<Dimension, Color>>,
+  +color?: Color,
+  +fontFamily?: string,
+  +fontSize?: number,
+  +fontStyle?: 'normal' | 'italic',
+  +fontWeight?:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900',
+  +fontVariant?: $ReadOnlyArray<
+    | 'small-caps'
+    | 'oldstyle-nums'
+    | 'lining-nums'
+    | 'tabular-nums'
+    | 'proportional-nums',
+  >,
+  +textShadowOffset?: {+width?: number, +height?: number},
+  +textShadowRadius?: number,
+  +textShadowColor?: Color,
+  +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?: Color,
+  +writingDirection?: 'auto' | 'ltr' | 'rtl',
+};
+
+export type ImageStyle<+Dimension = DimensionValue, +Color = ColorValue> = {
+  ...$Exact<ViewStyle<Dimension, Color>>,
+  +resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
+  +tintColor?: Color,
+  +overlayColor?: string,
+};
+
+export type Style<+Dimension = DimensionValue, +Color = ColorValue> = {
+  ...$Exact<TextStyle<Dimension, Color>>,
+  +resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
+  +tintColor?: Color,
+  +overlayColor?: string,
+};
+
+export type StyleProp<+T> =
+  | null
+  | void
+  | T
+  | StyleSheetStyle
+  | number
+  | false
+  | ''
+  | $ReadOnlyArray<StyleProp<T>>;
+
+// export type ViewStyleProp = StyleProp<$Shape<ViewStyle<DimensionValue>>>;
+// export type TextStyleProp = StyleProp<
+//   $Shape<TextStyle<DimensionValue, ColorValue>>,
+// >;
+// export type ImageStyleProp = StyleProp<
+//   $Shape<ImageStyle<DimensionValue, ColorValue>>,
+// >;
+
+export type StyleObj = StyleProp<$Shape<Style<DimensionValue, ColorValue>>>;
+export type StyleValue = StyleObj;
+
+export type ViewStyleProp = StyleObj;
+export type TextStyleProp = StyleObj;
+export type ImageStyleProp = StyleObj;
+
+export type Styles = {
+  +[key: string]: $Shape<Style<DimensionValue, ColorValue>>,
+};
+export type StyleSheet<+S: Styles> = $ObjMap<S, (Object) => StyleSheetStyle>;
+
+/*
+Utility type get non-nullable types for specific style keys.
+Useful when a component requires values for certain Style Keys.
+So Instead:
+```
+type Props = {position: string};
+```
+You should use:
+```
+type Props = {position: TypeForStyleKey<'position'>};
+```
+
+This will correctly give you the type 'absolute' | 'relative' instead of the
+weak type of just string;
+*/
+export type TypeForStyleKey<+key: $Keys<Style<>>> = $ElementType<Style<>, key>;