From 556690e9f1e9badfcb260bf8f21425c4ede75a3e Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Tue, 26 Jul 2022 12:02:48 +0200 Subject: [PATCH] fix: types from lib folder (#1813) Added missing component props and made Svg* component props extend SvgProps. Also removed custom Color type which is now just ColorValue from react-native. --- package.json | 2 +- src/ReactNativeSVG.ts | 88 +++++++++++++++++++++++++++++----------- src/elements/Stop.tsx | 5 ++- src/elements/Svg.tsx | 4 +- src/lib/extract/types.ts | 6 +-- src/xml.tsx | 8 ++-- 6 files changed, 76 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 858d7bb2..78c544dd 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "bob": "bob build", "flow": "flow src", "flowtyped": "flow-typed install", - "format": "prettier README.md CONTRIBUTING.md CODE_OF_CONDUCT.md './src/**/*.{ts,tsx}'", + "format": "prettier --write README.md CONTRIBUTING.md CODE_OF_CONDUCT.md './src/**/*.{ts,tsx}'", "jest": "jest", "lint": "eslint --ext .ts,.tsx src", "peg": "pegjs -o src/lib/extract/transform.js ./src/lib/extract/transform.peg", diff --git a/src/ReactNativeSVG.ts b/src/ReactNativeSVG.ts index cc15811f..27620a3b 100644 --- a/src/ReactNativeSVG.ts +++ b/src/ReactNativeSVG.ts @@ -1,29 +1,40 @@ import Shape from './elements/Shape'; -import Rect from './elements/Rect'; -import Circle from './elements/Circle'; -import Ellipse from './elements/Ellipse'; -import Polygon from './elements/Polygon'; -import Polyline from './elements/Polyline'; -import Line from './elements/Line'; -import Svg from './elements/Svg'; -import Path from './elements/Path'; -import G from './elements/G'; -import Text from './elements/Text'; -import TSpan from './elements/TSpan'; -import TextPath from './elements/TextPath'; -import Use from './elements/Use'; -import Image from './elements/Image'; -import Symbol from './elements/Symbol'; +import Rect, { RectProps } from './elements/Rect'; +import Circle, { CircleProps } from './elements/Circle'; +import Ellipse, { EllipseProps } from './elements/Ellipse'; +import Polygon, { PolygonProps } from './elements/Polygon'; +import Polyline, { PolylineProps } from './elements/Polyline'; +import Line, { LineProps } from './elements/Line'; +import Svg, { SvgProps } from './elements/Svg'; +import Path, { PathProps } from './elements/Path'; +import G, { GProps } from './elements/G'; +import Text, { TextProps } from './elements/Text'; +import TSpan, { TSpanProps } from './elements/TSpan'; +import TextPath, { TextPathProps } from './elements/TextPath'; +import Use, { UseProps } from './elements/Use'; +import Image, { ImageProps } from './elements/Image'; +import Symbol, { SymbolProps } from './elements/Symbol'; import Defs from './elements/Defs'; -import LinearGradient from './elements/LinearGradient'; -import RadialGradient from './elements/RadialGradient'; -import Stop from './elements/Stop'; -import ClipPath from './elements/ClipPath'; -import Pattern from './elements/Pattern'; -import Mask from './elements/Mask'; -import Marker from './elements/Marker'; -import ForeignObject from './elements/ForeignObject'; -import { parse, SvgAst, SvgFromUri, SvgFromXml, SvgUri, SvgXml } from './xml'; +import LinearGradient, { LinearGradientProps } from './elements/LinearGradient'; +import RadialGradient, { RadialGradientProps } from './elements/RadialGradient'; +import Stop, { StopProps } from './elements/Stop'; +import ClipPath, { ClipPathProps } from './elements/ClipPath'; +import Pattern, { PatternProps } from './elements/Pattern'; +import Mask, { MaskProps } from './elements/Mask'; +import Marker, { MarkerProps } from './elements/Marker'; +import ForeignObject, { ForeignObjectProps } from './elements/ForeignObject'; + +import { + parse, + SvgAst, + SvgFromUri, + SvgFromXml, + SvgUri, + SvgXml, + UriProps, + XmlProps, + AstProps, +} from './xml'; import { SvgCss, SvgCssUri, @@ -56,6 +67,35 @@ import { RNSVGUse, } from './elements/NativeComponents'; +export { + RectProps, + CircleProps, + EllipseProps, + PolygonProps, + PolylineProps, + LineProps, + SvgProps, + PathProps, + GProps, + TextProps, + TSpanProps, + TextPathProps, + UseProps, + ImageProps, + SymbolProps, + LinearGradientProps, + RadialGradientProps, + StopProps, + ClipPathProps, + PatternProps, + MaskProps, + MarkerProps, + ForeignObjectProps, + UriProps, + XmlProps, + AstProps, +}; + export { Svg, Circle, diff --git a/src/elements/Stop.tsx b/src/elements/Stop.tsx index 95de7f37..6eb2d9b4 100644 --- a/src/elements/Stop.tsx +++ b/src/elements/Stop.tsx @@ -1,8 +1,9 @@ import { Component } from 'react'; -import { Color, NumberProp } from '../lib/extract/types'; +import { ColorValue } from 'react-native'; +import { NumberProp } from '../lib/extract/types'; export interface StopProps { - stopColor?: Color; + stopColor?: ColorValue; stopOpacity?: NumberProp; offset?: NumberProp; parent?: Component; diff --git a/src/elements/Svg.tsx b/src/elements/Svg.tsx index d4ff166a..2619d882 100644 --- a/src/elements/Svg.tsx +++ b/src/elements/Svg.tsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import { + ColorValue, findNodeHandle, MeasureInWindowOnSuccessCallback, MeasureLayoutOnSuccessCallback, @@ -12,7 +13,6 @@ import { ViewStyle, } from 'react-native'; import { - Color, extractedProps, NumberProp, ResponderInstanceProps, @@ -38,7 +38,7 @@ export interface SvgProps extends GProps, ViewProps { height?: NumberProp; viewBox?: string; preserveAspectRatio?: string; - color?: Color; + color?: ColorValue; title?: string; } diff --git a/src/lib/extract/types.ts b/src/lib/extract/types.ts index 02c9c1fc..eb1bac8c 100644 --- a/src/lib/extract/types.ts +++ b/src/lib/extract/types.ts @@ -96,10 +96,8 @@ export interface ResponderProps extends GestureResponderHandlers { pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto'; } -export type Color = ColorValue; - export interface FillProps { - fill?: Color; + fill?: ColorValue; fillOpacity?: NumberProp; fillRule?: FillRule; } @@ -124,7 +122,7 @@ export interface DefinitionProps { } export interface StrokeProps { - stroke?: Color; + stroke?: ColorValue; strokeWidth?: NumberProp; strokeOpacity?: NumberProp; strokeDasharray?: ReadonlyArray | NumberProp; diff --git a/src/xml.tsx b/src/xml.tsx index a3ef58a5..2f424fea 100644 --- a/src/xml.tsx +++ b/src/xml.tsx @@ -11,7 +11,7 @@ import Ellipse from './elements/Ellipse'; import Polygon from './elements/Polygon'; import Polyline from './elements/Polyline'; import Line from './elements/Line'; -import Svg from './elements/Svg'; +import Svg, { SvgProps } from './elements/Svg'; import Path from './elements/Path'; import G from './elements/G'; import Text from './elements/Text'; @@ -86,13 +86,13 @@ export type AdditionalProps = { override?: Object; }; -export type UriProps = { uri: string | null } & AdditionalProps; +export type UriProps = SvgProps & { uri: string | null } & AdditionalProps; export type UriState = { xml: string | null }; -export type XmlProps = { xml: string | null } & AdditionalProps; +export type XmlProps = SvgProps & { xml: string | null } & AdditionalProps; export type XmlState = { ast: JsxAST | null }; -export type AstProps = { ast: JsxAST | null } & AdditionalProps; +export type AstProps = SvgProps & { ast: JsxAST | null } & AdditionalProps; export function SvgAst({ ast, override }: AstProps) { if (!ast) {