diff --git a/index.d.ts b/index.d.ts index 87d3910c..61df094a 100644 --- a/index.d.ts +++ b/index.d.ts @@ -4,7 +4,71 @@ 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 FontStyle = 'normal' | 'italic' | 'oblique'; +export type FontVariant = 'normal' | 'small-caps'; +export type FontWeight = + | 'normal' + | 'bold' + | 'bolder' + | 'lighter' + | '100' + | '200' + | '300' + | '400' + | '500' + | '600' + | '700' + | '800' + | '900' + ; +export type FontStretch = + | 'normal' + | 'wider' + | 'narrower' + | 'ultra-condensed' + | 'extra-condensed' + | 'condensed' + | 'semi-condensed' + | 'semi-expanded' + | 'expanded' + | 'extra-expanded' + | 'ultra-expanded' + ; +export type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'blink'; +export type FontVariantLigatures = 'normal' | 'none'; +export type AlignmentBaseline = + | 'baseline' + | 'text-bottom' + | 'alphabetic' + | 'ideographic' + | 'middle' + | 'central' + | 'mathematical' + | 'text-top' + | 'bottom' + | 'center' + | 'top' + | 'text-before-edge' + | 'text-after-edge' + | 'before-edge' + | 'after-edge' + | 'hanging' + ; +export type BaselineShift = 'sub' | 'super' | 'baseline' | ReadonlyArray | NumberProp; +export type LengthAdjust = 'spacing' | 'spacingAndGlyphs'; + +export type TextPathMethod = 'align' | 'stretch'; +export type TextPathSpacing = 'auto' | 'exact'; +export type TextPathMidLine = 'sharp' | 'smooth'; + +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,45 +79,56 @@ 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 { - name?: string, +export interface DefinitionProps { + id?: string, } -interface StrokeProps { +export interface StrokeProps { stroke?: string, strokeWidth?: NumberProp, strokeOpacity?: NumberProp, - strokeDasharray?: number[] | string, + strokeDasharray?: ReadonlyArray | string, strokeDashoffset?: NumberProp, - strokeLinecap?: 'butt' | 'square' | 'round', - strokeLinejoin?: 'miter' | 'bevel' | 'round', + strokeLinecap?: Linecap, + strokeLinejoin?: Linejoin, strokeMiterlimit?: NumberProp, } -interface FontProps { - fontFamily?: string, +export interface FontObject { + fontStyle?: FontStyle, + fontVariant?: FontVariant, + fontWeight?: FontWeight, + fontStretch?: FontStretch, fontSize?: NumberProp, - fontWeight?: NumberProp, - fontStyle?: string, - font?: object + fontFamily?: string, + textAnchor?: TextAnchor, + textDecoration?: TextDecoration, + letterSpacing?: NumberProp, + wordSpacing?: NumberProp, + kerning?: NumberProp, + fontVariantLigatures?: FontVariantLigatures, } -interface TransformProps { +export interface FontProps extends FontObject { + font?: FontObject, +} + +export interface TransformObject { scale?: NumberProp, scaleX?: NumberProp, scaleY?: NumberProp, @@ -70,28 +145,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 +177,21 @@ 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 interface ImageProps extends ResponderProps, TouchableProps { x?: NumberProp, y?: NumberProp, width?: NumberProp, height?: NumberProp, - href: ReactNative.ImageURISource | ReactNative.ImageURISource[] | ReactNative.ImageRequireSource, + href: ReactNative.ImageProperties['source'], preserveAspectRatio?: string, } export const Image: React.ComponentClass; -interface LineProps extends PathProps { +export interface LineProps extends CommonPathProps { x1?: NumberProp, x2?: NumberProp, y1?: NumberProp, @@ -119,43 +199,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 { - points: string | any[], +export interface PolygonProps extends CommonPathProps { + points: string | ReadonlyArray, } export const Polygon: React.ComponentClass; -interface PolylineProps extends PathProps { - points: string | any[], +export interface PolylineProps extends CommonPathProps { + points: string | ReadonlyArray, } export const Polyline: React.ComponentClass; -interface RadialGradientProps { +export interface RadialGradientProps { fx?: NumberProp, fy?: NumberProp, rx?: NumberProp, @@ -163,72 +243,82 @@ 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<{}>; - -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, + 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 SymbolProps { id: string, viewBox?: string, preserveAspectRatio?: string, } -export const Symbols: React.ComponentClass; +export const Symbol: React.ComponentClass; -interface TSpanProps extends PathProps, FontProps { +export interface TSpanProps extends CommonPathProps, FontProps { dx?: NumberProp, dy?: NumberProp, - textAnchor?: 'start' | 'middle' | 'end', } export const TSpan: React.ComponentClass; -interface TextProps extends PathProps, FontProps { +export interface TextSpecificProps extends CommonPathProps, FontProps { + alignmentBaseline?: AlignmentBaseline, + baselineShift?: BaselineShift, + verticalAlign?: NumberProp, + lengthAdjust?: LengthAdjust, + textLength?: NumberProp, + fontData?: null | { [name: string]: any }, + fontFeatureSettings?: string, +} + +export interface TextProps extends TextSpecificProps { dx?: NumberProp, dy?: NumberProp, - textAnchor?: 'start' | 'middle' | 'end', } export const Text: React.ComponentClass; -interface TextPathProps extends PathProps, FontProps { +export interface TextPathProps extends TextSpecificProps { href: string, startOffset?: NumberProp, + method?: TextPathMethod, + spacing?: TextPathSpacing, + midLine: TextPathMidLine, } export const TextPath: React.ComponentClass; -interface UseProps extends PathProps { +export interface UseProps extends CommonPathProps { href: string, - width?: NumberProp, - height?: NumberProp, + width: string, + height: string, } export const Use: React.ComponentClass;