Skip to content
Permalink
Browse files

Remove polymorphic types from StyleSheetTypes

Summary:
These types were polymorphic so that stricter types could be passed in for dimension or color. For example, color could be a union of allowed colors. However, since `rgb(0,0,0)` is a valid color, these would have to be allowed opaque types and every creator or caller of these colors would have to use a function.

This would require a massive change to every RN product in the world for negligable gain because StyleSheet values are validated at dev at runtime and cause redboxes for invalid uses.

Since we don't plan to adopt these widely, lets clean up the complexity of these types.

Reviewed By: sahrens

Differential Revision: D7158920

fbshipit-source-id: c58ae402c8248b0863c217c27153191a49c6b980
  • Loading branch information...
TheSavior authored and facebook-github-bot committed Mar 6, 2018
1 parent b4ce427 commit b98bf1e09739860d82e37225f1635bba3bc817b3
Showing with 60 additions and 60 deletions.
  1. +58 −58 Libraries/StyleSheet/StyleSheetTypes.js
  2. +2 −2 Libraries/StyleSheet/flattenStyle.js
@@ -18,38 +18,38 @@ export opaque type StyleSheetStyle: number = number;
export type ColorValue = null | string;
export type DimensionValue = null | number | string | AnimatedNode;

export type LayoutStyle<+Dimension = DimensionValue> = {
export type LayoutStyle = {
+display?: 'none' | 'flex',
+width?: Dimension,
+height?: Dimension,
+bottom?: Dimension,
+end?: Dimension,
+left?: Dimension,
+right?: Dimension,
+start?: Dimension,
+top?: Dimension,
+minWidth?: Dimension,
+maxWidth?: Dimension,
+minHeight?: Dimension,
+maxHeight?: Dimension,
+margin?: Dimension,
+marginBottom?: Dimension,
+marginEnd?: Dimension,
+marginHorizontal?: Dimension,
+marginLeft?: Dimension,
+marginRight?: Dimension,
+marginStart?: Dimension,
+marginTop?: Dimension,
+marginVertical?: Dimension,
+padding?: Dimension,
+paddingBottom?: Dimension,
+paddingEnd?: Dimension,
+paddingHorizontal?: Dimension,
+paddingLeft?: Dimension,
+paddingRight?: Dimension,
+paddingStart?: Dimension,
+paddingTop?: Dimension,
+paddingVertical?: Dimension,
+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,
@@ -114,8 +114,8 @@ export type TransformStyle = {
>,
};

export type ShadowStyle<+Color = ColorValue> = {
+shadowColor?: Color,
export type ShadowStyle = {
+shadowColor?: ColorValue,
+shadowOffset?: {
+width?: number,
+height?: number,
@@ -124,19 +124,19 @@ export type ShadowStyle<+Color = ColorValue> = {
+shadowRadius?: number,
};

export type ViewStyle<+Dimension = DimensionValue, +Color = ColorValue> = {
...$Exact<LayoutStyle<Dimension>>,
...$Exact<ShadowStyle<Color>>,
export type ViewStyle = {
...$Exact<LayoutStyle>,
...$Exact<ShadowStyle>,
...$Exact<TransformStyle>,
+backfaceVisibility?: 'visible' | 'hidden',
+backgroundColor?: Color,
+borderColor?: Color,
+borderBottomColor?: Color,
+borderEndColor?: Color,
+borderLeftColor?: Color,
+borderRightColor?: Color,
+borderStartColor?: Color,
+borderTopColor?: Color,
+backgroundColor?: ColorValue,
+borderColor?: ColorValue,
+borderBottomColor?: ColorValue,
+borderEndColor?: ColorValue,
+borderLeftColor?: ColorValue,
+borderRightColor?: ColorValue,
+borderStartColor?: ColorValue,
+borderTopColor?: ColorValue,
+borderRadius?: number,
+borderBottomEndRadius?: number,
+borderBottomLeftRadius?: number,
@@ -158,9 +158,9 @@ export type ViewStyle<+Dimension = DimensionValue, +Color = ColorValue> = {
+elevation?: number,
};

export type TextStyle<+Dimension = DimensionValue, +Color = ColorValue> = {
...$Exact<ViewStyle<Dimension, Color>>,
+color?: Color,
export type TextStyle = {
...$Exact<ViewStyle>,
+color?: ColorValue,
+fontFamily?: string,
+fontSize?: number,
+fontStyle?: 'normal' | 'italic',
@@ -185,7 +185,7 @@ export type TextStyle<+Dimension = DimensionValue, +Color = ColorValue> = {
>,
+textShadowOffset?: {+width?: number, +height?: number},
+textShadowRadius?: number,
+textShadowColor?: Color,
+textShadowColor?: ColorValue,
+letterSpacing?: number,
+lineHeight?: number,
+textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify',
@@ -197,21 +197,21 @@ export type TextStyle<+Dimension = DimensionValue, +Color = ColorValue> = {
| 'line-through'
| 'underline line-through',
+textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',
+textDecorationColor?: Color,
+textDecorationColor?: ColorValue,
+writingDirection?: 'auto' | 'ltr' | 'rtl',
};

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

export type Style<+Dimension = DimensionValue, +Color = ColorValue> = {
...$Exact<TextStyle<Dimension, Color>>,
export type Style = {
...$Exact<TextStyle>,
+resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
+tintColor?: Color,
+tintColor?: ColorValue,
+overlayColor?: string,
};

@@ -233,15 +233,15 @@ export type StyleProp<+T> =
// $Shape<ImageStyle<DimensionValue, ColorValue>>,
// >;

export type StyleObj = StyleProp<$Shape<Style<DimensionValue, ColorValue>>>;
export type StyleObj = StyleProp<$Shape<Style>>;
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>>,
+[key: string]: $Shape<Style>,
};
export type StyleSheet<+S: Styles> = $ObjMap<S, (Object) => StyleSheetStyle>;

@@ -260,4 +260,4 @@ 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>;
export type TypeForStyleKey<+key: $Keys<Style>> = $ElementType<Style, key>;
@@ -11,7 +11,7 @@

var ReactNativePropRegistry;

import type { DimensionValue, ColorValue, StyleProp, Style } from 'StyleSheetTypes';
import type { StyleProp, Style } from 'StyleSheetTypes';

function getStyle(style) {
if (ReactNativePropRegistry === undefined) {
@@ -23,7 +23,7 @@ function getStyle(style) {
return style;
}

function flattenStyle(style: ?StyleProp<Style<DimensionValue, ColorValue>>): ?Style<DimensionValue, ColorValue> {
function flattenStyle(style: ?StyleProp<Style>): ?Style {
if (style == null) {
return undefined;
}

0 comments on commit b98bf1e

Please sign in to comment.
You can’t perform that action at this time.