From ed1ab61f59b0fcc8f28a02aaade8be95db4b170d Mon Sep 17 00:00:00 2001 From: Simon Buchan Date: Thu, 18 Jan 2018 14:38:34 +1300 Subject: [PATCH] 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. --- index.d.ts | 110 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 63 insertions(+), 47 deletions(-) diff --git a/index.d.ts b/index.d.ts index 87d3910c..9d87e781 100644 --- a/index.d.ts +++ b/index.d.ts @@ -4,7 +4,13 @@ import * as ReactNative from 'react-native'; // Common props 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, onPress?: (event: any) => any, onPressIn?: (event: any) => any, @@ -15,37 +21,37 @@ interface TouchableProps { delayLongPress?: number } -interface ResponderProps extends ReactNative.GestureResponderHandlers { +export interface ResponderProps extends ReactNative.GestureResponderHandlers { pointerEvents?: (event: any) => any, } -interface FillProps { +export interface FillProps { fill?: string, fillOpacity?: NumberProp, - fillRule?: 'evenodd' | 'nonzero', + fillRule?: FillRule, } -interface ClipProps { - clipRule?: 'evenodd' | 'nonzero', +export interface ClipProps { + clipRule?: FillRule, clipPath?: string } -interface DefinationProps { +export interface DefinitionProps { name?: string, } -interface StrokeProps { +export interface StrokeProps { stroke?: string, strokeWidth?: NumberProp, strokeOpacity?: NumberProp, strokeDasharray?: number[] | string, strokeDashoffset?: NumberProp, - strokeLinecap?: 'butt' | 'square' | 'round', - strokeLinejoin?: 'miter' | 'bevel' | 'round', + strokeLinecap?: Linecap, + strokeLinejoin?: Linejoin, strokeMiterlimit?: NumberProp, } -interface FontProps { +export interface FontProps { fontFamily?: string, fontSize?: NumberProp, fontWeight?: NumberProp, @@ -53,7 +59,7 @@ interface FontProps { font?: object } -interface TransformProps { +export interface TransformObject { scale?: NumberProp, scaleX?: NumberProp, scaleY?: NumberProp, @@ -70,28 +76,31 @@ interface TransformProps { skew?: NumberProp, skewX?: 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 -interface CircleProps extends PathProps { +export interface CircleProps extends CommonPathProps { cx?: NumberProp, cy?: NumberProp, r?: NumberProp, } export const Circle: React.ComponentClass; -interface ClipPathProps { +export interface ClipPathProps { id: string, } export const ClipPath: React.ComponentClass; export const Defs: React.ComponentClass<{}>; -interface EllipseProps extends PathProps { +export interface EllipseProps extends CommonPathProps { cx?: NumberProp, cy?: NumberProp, rx?: NumberProp, @@ -99,19 +108,23 @@ interface EllipseProps extends PathProps { } export const Ellipse: React.ComponentClass; -export const G: React.ComponentClass; +export interface GProps extends CommonPathProps { +} +export const G: React.ComponentClass; -interface ImageProps extends ResponderProps, TouchableProps { +export type ImageHref = ReactNative.ImageURISource | ReactNative.ImageURISource[] | ReactNative.ImageRequireSource; + +export interface ImageProps extends ResponderProps, TouchableProps { x?: NumberProp, y?: NumberProp, width?: NumberProp, height?: NumberProp, - href: ReactNative.ImageURISource | ReactNative.ImageURISource[] | ReactNative.ImageRequireSource, + href: ImageHref, preserveAspectRatio?: string, } export const Image: React.ComponentClass; -interface LineProps extends PathProps { +export interface LineProps extends CommonPathProps { x1?: NumberProp, x2?: NumberProp, y1?: NumberProp, @@ -119,43 +132,43 @@ interface LineProps extends PathProps { } export const Line: React.ComponentClass; -interface LinearGradientProps { +export interface LinearGradientProps { x1?: NumberProp, x2?: NumberProp, y1?: NumberProp, y2?: NumberProp, - gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse', + gradientUnits?: Units, id: string, } export const LinearGradient: React.ComponentClass; -interface PathElementProps extends PathProps { +export interface PathProps extends CommonPathProps { d: string, } -export const Path: React.ComponentClass; +export const Path: React.ComponentClass; -interface PatternProps { +export interface PatternProps { x1?: NumberProp, x2?: NumberProp, y1?: NumberProp, y2?: NumberProp, patternTransform?: string, - patternUnits?: 'userSpaceOnUse' | 'objectBoundingBox', - patternContentUnits?: 'userSpaceOnUse' | 'objectBoundingBox', + patternUnits?: Units, + patternContentUnits?: Units, } export const Pattern: React.ComponentClass; -interface PolygonProps extends PathProps { +export interface PolygonProps extends CommonPathProps { points: string | any[], } export const Polygon: React.ComponentClass; -interface PolylineProps extends PathProps { +export interface PolylineProps extends CommonPathProps { points: string | any[], } export const Polyline: React.ComponentClass; -interface RadialGradientProps { +export interface RadialGradientProps { fx?: NumberProp, fy?: NumberProp, rx?: NumberProp, @@ -163,70 +176,73 @@ interface RadialGradientProps { cx?: NumberProp, cy?: NumberProp, r?: NumberProp, - gradientUnits: 'objectBoundingBox' | 'userSpaceOnUse', + gradientUnits?: Units, id: string, } export const RadialGradient: React.ComponentClass; -interface RectProps extends PathProps { +export interface RectProps extends CommonPathProps { x?: NumberProp, y?: NumberProp, width?: NumberProp, height?: NumberProp, rx?: NumberProp, ry?: NumberProp, - class? : string + class?: string, } export const Rect: React.ComponentClass; -export const Shape: React.ComponentClass<{}>; +export interface ShapeProps { +} +export const Shape: React.ComponentClass; -interface StopProps { +export interface StopProps { stopColor?: string, stopOpacity?: NumberProp, - offset?: string + offset?: string, } export const Stop: React.ComponentClass; -interface SvgProps extends ReactNative.ViewProperties { +export interface SvgProps extends ReactNative.ViewProperties { opacity?: NumberProp, width?: NumberProp, height?: NumberProp, viewBox?: string, - preserveAspectRatio?: string + preserveAspectRatio?: string, } -declare const Svg: React.ComponentClass; +// Svg is both regular and default exported +export const Svg: React.ComponentClass; export default Svg; -interface SymbolsProps { +export interface SymbolsProps { id: string, viewBox?: string, preserveAspectRatio?: string, } export const Symbols: React.ComponentClass; -interface TSpanProps extends PathProps, FontProps { +export interface TSpanProps extends CommonPathProps, FontProps { dx?: NumberProp, dy?: NumberProp, - textAnchor?: 'start' | 'middle' | 'end', + textAnchor?: TextAnchor, } export const TSpan: React.ComponentClass; -interface TextProps extends PathProps, FontProps { +export interface TextProps extends CommonPathProps, FontProps { dx?: NumberProp, dy?: NumberProp, - textAnchor?: 'start' | 'middle' | 'end', + textAnchor?: TextAnchor, } export const Text: React.ComponentClass; -interface TextPathProps extends PathProps, FontProps { +export interface TextPathProps extends CommonPathProps, FontProps { href: string, startOffset?: NumberProp, } export const TextPath: React.ComponentClass; -interface UseProps extends PathProps { +export interface UseProps extends CommonPathProps { href: string, width?: NumberProp, height?: NumberProp,