Add exports for prop types, additional type fixes.

Also:
- Extracts and exports the string enum types
- Adds or renames prop types such that every `Foo`
  component export also has a `FooProps`
- Adds non-default export of `Svg`, so `import * as Svg ...`
  is usable.
- Makes `RadialGradientProps.gradientUnits` optional, like
  for `LinearGradientProps.gradientUnits`.
- Adds stronger type for `TransformProps.transform` based
  on code in `extractTranform.js` (please double-check!)
- Fixes typo in `DefinationProps` name.
- A handful of minor formatting normalizations.
This commit is contained in:
Simon Buchan
2018-01-18 14:38:34 +13:00
parent 5e05c21f2a
commit ed1ab61f59
Vendored
+63 -47
View File
@@ -4,7 +4,13 @@ import * as ReactNative from 'react-native';
// Common props // Common props
type NumberProp = string | number; type NumberProp = string | number;
interface TouchableProps { export type FillRule = 'evenodd' | 'nonzero';
export type Units = 'userSpaceOnUse' | 'objectBoundingBox';
export type TextAnchor = 'start' | 'middle' | 'end';
export type Linecap = 'butt' | 'square' | 'round';
export type Linejoin = 'miter' | 'bevel' | 'round';
export interface TouchableProps {
disabled?: boolean, disabled?: boolean,
onPress?: (event: any) => any, onPress?: (event: any) => any,
onPressIn?: (event: any) => any, onPressIn?: (event: any) => any,
@@ -15,37 +21,37 @@ interface TouchableProps {
delayLongPress?: number delayLongPress?: number
} }
interface ResponderProps extends ReactNative.GestureResponderHandlers { export interface ResponderProps extends ReactNative.GestureResponderHandlers {
pointerEvents?: (event: any) => any, pointerEvents?: (event: any) => any,
} }
interface FillProps { export interface FillProps {
fill?: string, fill?: string,
fillOpacity?: NumberProp, fillOpacity?: NumberProp,
fillRule?: 'evenodd' | 'nonzero', fillRule?: FillRule,
} }
interface ClipProps { export interface ClipProps {
clipRule?: 'evenodd' | 'nonzero', clipRule?: FillRule,
clipPath?: string clipPath?: string
} }
interface DefinationProps { export interface DefinitionProps {
name?: string, name?: string,
} }
interface StrokeProps { export interface StrokeProps {
stroke?: string, stroke?: string,
strokeWidth?: NumberProp, strokeWidth?: NumberProp,
strokeOpacity?: NumberProp, strokeOpacity?: NumberProp,
strokeDasharray?: number[] | string, strokeDasharray?: number[] | string,
strokeDashoffset?: NumberProp, strokeDashoffset?: NumberProp,
strokeLinecap?: 'butt' | 'square' | 'round', strokeLinecap?: Linecap,
strokeLinejoin?: 'miter' | 'bevel' | 'round', strokeLinejoin?: Linejoin,
strokeMiterlimit?: NumberProp, strokeMiterlimit?: NumberProp,
} }
interface FontProps { export interface FontProps {
fontFamily?: string, fontFamily?: string,
fontSize?: NumberProp, fontSize?: NumberProp,
fontWeight?: NumberProp, fontWeight?: NumberProp,
@@ -53,7 +59,7 @@ interface FontProps {
font?: object font?: object
} }
interface TransformProps { export interface TransformObject {
scale?: NumberProp, scale?: NumberProp,
scaleX?: NumberProp, scaleX?: NumberProp,
scaleY?: NumberProp, scaleY?: NumberProp,
@@ -70,28 +76,31 @@ interface TransformProps {
skew?: NumberProp, skew?: NumberProp,
skewX?: NumberProp, skewX?: NumberProp,
skewY?: NumberProp, skewY?: NumberProp,
transform?: object,
} }
interface PathProps extends FillProps, StrokeProps, ClipProps, TransformProps, ResponderProps, TouchableProps, DefinationProps {} export interface TransformProps extends TransformObject {
transform?: string | TransformObject,
}
export interface CommonPathProps extends FillProps, StrokeProps, ClipProps, TransformProps, ResponderProps, TouchableProps, DefinitionProps {}
// Element props // Element props
interface CircleProps extends PathProps { export interface CircleProps extends CommonPathProps {
cx?: NumberProp, cx?: NumberProp,
cy?: NumberProp, cy?: NumberProp,
r?: NumberProp, r?: NumberProp,
} }
export const Circle: React.ComponentClass<CircleProps>; export const Circle: React.ComponentClass<CircleProps>;
interface ClipPathProps { export interface ClipPathProps {
id: string, id: string,
} }
export const ClipPath: React.ComponentClass<ClipPathProps>; export const ClipPath: React.ComponentClass<ClipPathProps>;
export const Defs: React.ComponentClass<{}>; export const Defs: React.ComponentClass<{}>;
interface EllipseProps extends PathProps { export interface EllipseProps extends CommonPathProps {
cx?: NumberProp, cx?: NumberProp,
cy?: NumberProp, cy?: NumberProp,
rx?: NumberProp, rx?: NumberProp,
@@ -99,19 +108,23 @@ interface EllipseProps extends PathProps {
} }
export const Ellipse: React.ComponentClass<EllipseProps>; export const Ellipse: React.ComponentClass<EllipseProps>;
export const G: React.ComponentClass<PathProps>; export interface GProps extends CommonPathProps {
}
export const G: React.ComponentClass<GProps>;
interface ImageProps extends ResponderProps, TouchableProps { export type ImageHref = ReactNative.ImageURISource | ReactNative.ImageURISource[] | ReactNative.ImageRequireSource;
export interface ImageProps extends ResponderProps, TouchableProps {
x?: NumberProp, x?: NumberProp,
y?: NumberProp, y?: NumberProp,
width?: NumberProp, width?: NumberProp,
height?: NumberProp, height?: NumberProp,
href: ReactNative.ImageURISource | ReactNative.ImageURISource[] | ReactNative.ImageRequireSource, href: ImageHref,
preserveAspectRatio?: string, preserveAspectRatio?: string,
} }
export const Image: React.ComponentClass<ImageProps>; export const Image: React.ComponentClass<ImageProps>;
interface LineProps extends PathProps { export interface LineProps extends CommonPathProps {
x1?: NumberProp, x1?: NumberProp,
x2?: NumberProp, x2?: NumberProp,
y1?: NumberProp, y1?: NumberProp,
@@ -119,43 +132,43 @@ interface LineProps extends PathProps {
} }
export const Line: React.ComponentClass<LineProps>; export const Line: React.ComponentClass<LineProps>;
interface LinearGradientProps { export interface LinearGradientProps {
x1?: NumberProp, x1?: NumberProp,
x2?: NumberProp, x2?: NumberProp,
y1?: NumberProp, y1?: NumberProp,
y2?: NumberProp, y2?: NumberProp,
gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse', gradientUnits?: Units,
id: string, id: string,
} }
export const LinearGradient: React.ComponentClass<LinearGradientProps>; export const LinearGradient: React.ComponentClass<LinearGradientProps>;
interface PathElementProps extends PathProps { export interface PathProps extends CommonPathProps {
d: string, d: string,
} }
export const Path: React.ComponentClass<PathElementProps>; export const Path: React.ComponentClass<PathProps>;
interface PatternProps { export interface PatternProps {
x1?: NumberProp, x1?: NumberProp,
x2?: NumberProp, x2?: NumberProp,
y1?: NumberProp, y1?: NumberProp,
y2?: NumberProp, y2?: NumberProp,
patternTransform?: string, patternTransform?: string,
patternUnits?: 'userSpaceOnUse' | 'objectBoundingBox', patternUnits?: Units,
patternContentUnits?: 'userSpaceOnUse' | 'objectBoundingBox', patternContentUnits?: Units,
} }
export const Pattern: React.ComponentClass<PatternProps>; export const Pattern: React.ComponentClass<PatternProps>;
interface PolygonProps extends PathProps { export interface PolygonProps extends CommonPathProps {
points: string | any[], points: string | any[],
} }
export const Polygon: React.ComponentClass<PolygonProps>; export const Polygon: React.ComponentClass<PolygonProps>;
interface PolylineProps extends PathProps { export interface PolylineProps extends CommonPathProps {
points: string | any[], points: string | any[],
} }
export const Polyline: React.ComponentClass<PolylineProps>; export const Polyline: React.ComponentClass<PolylineProps>;
interface RadialGradientProps { export interface RadialGradientProps {
fx?: NumberProp, fx?: NumberProp,
fy?: NumberProp, fy?: NumberProp,
rx?: NumberProp, rx?: NumberProp,
@@ -163,70 +176,73 @@ interface RadialGradientProps {
cx?: NumberProp, cx?: NumberProp,
cy?: NumberProp, cy?: NumberProp,
r?: NumberProp, r?: NumberProp,
gradientUnits: 'objectBoundingBox' | 'userSpaceOnUse', gradientUnits?: Units,
id: string, id: string,
} }
export const RadialGradient: React.ComponentClass<RadialGradientProps>; export const RadialGradient: React.ComponentClass<RadialGradientProps>;
interface RectProps extends PathProps { export interface RectProps extends CommonPathProps {
x?: NumberProp, x?: NumberProp,
y?: NumberProp, y?: NumberProp,
width?: NumberProp, width?: NumberProp,
height?: NumberProp, height?: NumberProp,
rx?: NumberProp, rx?: NumberProp,
ry?: NumberProp, ry?: NumberProp,
class? : string class?: string,
} }
export const Rect: React.ComponentClass<RectProps>; export const Rect: React.ComponentClass<RectProps>;
export const Shape: React.ComponentClass<{}>; export interface ShapeProps {
}
export const Shape: React.ComponentClass<ShapeProps>;
interface StopProps { export interface StopProps {
stopColor?: string, stopColor?: string,
stopOpacity?: NumberProp, stopOpacity?: NumberProp,
offset?: string offset?: string,
} }
export const Stop: React.ComponentClass<StopProps>; export const Stop: React.ComponentClass<StopProps>;
interface SvgProps extends ReactNative.ViewProperties { export interface SvgProps extends ReactNative.ViewProperties {
opacity?: NumberProp, opacity?: NumberProp,
width?: NumberProp, width?: NumberProp,
height?: NumberProp, height?: NumberProp,
viewBox?: string, viewBox?: string,
preserveAspectRatio?: string preserveAspectRatio?: string,
} }
declare const Svg: React.ComponentClass<SvgProps>; // Svg is both regular and default exported
export const Svg: React.ComponentClass<SvgProps>;
export default Svg; export default Svg;
interface SymbolsProps { export interface SymbolsProps {
id: string, id: string,
viewBox?: string, viewBox?: string,
preserveAspectRatio?: string, preserveAspectRatio?: string,
} }
export const Symbols: React.ComponentClass<SymbolsProps>; export const Symbols: React.ComponentClass<SymbolsProps>;
interface TSpanProps extends PathProps, FontProps { export interface TSpanProps extends CommonPathProps, FontProps {
dx?: NumberProp, dx?: NumberProp,
dy?: NumberProp, dy?: NumberProp,
textAnchor?: 'start' | 'middle' | 'end', textAnchor?: TextAnchor,
} }
export const TSpan: React.ComponentClass<TSpanProps>; export const TSpan: React.ComponentClass<TSpanProps>;
interface TextProps extends PathProps, FontProps { export interface TextProps extends CommonPathProps, FontProps {
dx?: NumberProp, dx?: NumberProp,
dy?: NumberProp, dy?: NumberProp,
textAnchor?: 'start' | 'middle' | 'end', textAnchor?: TextAnchor,
} }
export const Text: React.ComponentClass<TextProps>; export const Text: React.ComponentClass<TextProps>;
interface TextPathProps extends PathProps, FontProps { export interface TextPathProps extends CommonPathProps, FontProps {
href: string, href: string,
startOffset?: NumberProp, startOffset?: NumberProp,
} }
export const TextPath: React.ComponentClass<TextPathProps>; export const TextPath: React.ComponentClass<TextPathProps>;
interface UseProps extends PathProps { export interface UseProps extends CommonPathProps {
href: string, href: string,
width?: NumberProp, width?: NumberProp,
height?: NumberProp, height?: NumberProp,