Permalink
Browse files

Improve types for React Native styles.

Reviewed By: TheSavior

Differential Revision: D6226807

fbshipit-source-id: b64a77383e6e685f4017c47fc9a5095ed63b062c
  • Loading branch information...
nmn authored and facebook-github-bot committed Nov 14, 2017
1 parent 3e4cf0e commit da047966e4c2064a48e02ff74830c99808d8194b
@@ -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,
@@ -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]);
@@ -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>;

0 comments on commit da04796

Please sign in to comment.