1 | import * as React from 'react';
|
2 | import * as ReactNative from 'react-native';
|
3 | import { GestureResponderEvent, TransformsStyle, OpaqueColorValue } from 'react-native';
|
4 |
|
5 |
|
6 | export type NumberProp = string | number;
|
7 | export type NumberArray = NumberProp[] | NumberProp;
|
8 |
|
9 | export type FillRule = 'evenodd' | 'nonzero';
|
10 | export type Units = 'userSpaceOnUse' | 'objectBoundingBox';
|
11 |
|
12 | export type TextAnchor = 'start' | 'middle' | 'end';
|
13 | export type FontStyle = 'normal' | 'italic' | 'oblique';
|
14 | export type FontVariant = 'normal' | 'small-caps';
|
15 | export type FontWeight =
|
16 | | NumberProp
|
17 | | 'normal'
|
18 | | 'bold'
|
19 | | 'bolder'
|
20 | | 'lighter'
|
21 | | '100'
|
22 | | '200'
|
23 | | '300'
|
24 | | '400'
|
25 | | '500'
|
26 | | '600'
|
27 | | '700'
|
28 | | '800'
|
29 | | '900';
|
30 | export type FontStretch =
|
31 | | 'normal'
|
32 | | 'wider'
|
33 | | 'narrower'
|
34 | | 'ultra-condensed'
|
35 | | 'extra-condensed'
|
36 | | 'condensed'
|
37 | | 'semi-condensed'
|
38 | | 'semi-expanded'
|
39 | | 'expanded'
|
40 | | 'extra-expanded'
|
41 | | 'ultra-expanded';
|
42 | export type TextDecoration =
|
43 | | 'none'
|
44 | | 'underline'
|
45 | | 'overline'
|
46 | | 'line-through'
|
47 | | 'blink';
|
48 | export type FontVariantLigatures = 'normal' | 'none';
|
49 | export type AlignmentBaseline =
|
50 | | 'baseline'
|
51 | | 'text-bottom'
|
52 | | 'alphabetic'
|
53 | | 'ideographic'
|
54 | | 'middle'
|
55 | | 'central'
|
56 | | 'mathematical'
|
57 | | 'text-top'
|
58 | | 'bottom'
|
59 | | 'center'
|
60 | | 'top'
|
61 | | 'text-before-edge'
|
62 | | 'text-after-edge'
|
63 | | 'before-edge'
|
64 | | 'after-edge'
|
65 | | 'hanging';
|
66 | export type BaselineShift =
|
67 | | 'sub'
|
68 | | 'super'
|
69 | | 'baseline'
|
70 | | ReadonlyArray<NumberProp>
|
71 | | NumberProp;
|
72 | export type LengthAdjust = 'spacing' | 'spacingAndGlyphs';
|
73 |
|
74 | export type TextPathMethod = 'align' | 'stretch';
|
75 | export type TextPathSpacing = 'auto' | 'exact';
|
76 | export type TextPathMidLine = 'sharp' | 'smooth';
|
77 |
|
78 | export type Linecap = 'butt' | 'square' | 'round';
|
79 | export type Linejoin = 'miter' | 'bevel' | 'round';
|
80 |
|
81 | export interface TouchableProps {
|
82 | disabled?: boolean;
|
83 | onPress?: (event: GestureResponderEvent) => void;
|
84 | onPressIn?: (event: GestureResponderEvent) => void;
|
85 | onPressOut?: (event: GestureResponderEvent) => void;
|
86 | onLongPress?: (event: GestureResponderEvent) => void;
|
87 | delayPressIn?: number;
|
88 | delayPressOut?: number;
|
89 | delayLongPress?: number;
|
90 | }
|
91 |
|
92 | export interface ResponderProps extends ReactNative.GestureResponderHandlers {
|
93 | pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
|
94 | }
|
95 |
|
96 |
|
97 |
|
98 | export type rgbaArray = ReadonlyArray<number>;
|
99 |
|
100 |
|
101 |
|
102 | export type int32ARGBColor = number;
|
103 |
|
104 | export type Color = int32ARGBColor | rgbaArray | OpaqueColorValue | string;
|
105 |
|
106 | export interface FillProps {
|
107 | fill?: Color;
|
108 | fillOpacity?: NumberProp;
|
109 | fillRule?: FillRule;
|
110 | }
|
111 |
|
112 | export interface ClipProps {
|
113 | clipRule?: FillRule;
|
114 | clipPath?: string;
|
115 | }
|
116 |
|
117 | export interface VectorEffectProps {
|
118 | vectorEffect?:
|
119 | | 'none'
|
120 | | 'non-scaling-stroke'
|
121 | | 'nonScalingStroke'
|
122 | | 'default'
|
123 | | 'inherit'
|
124 | | 'uri';
|
125 | }
|
126 |
|
127 | export interface DefinitionProps {
|
128 | id?: string;
|
129 | }
|
130 |
|
131 | export interface StrokeProps {
|
132 | stroke?: Color;
|
133 | strokeWidth?: NumberProp;
|
134 | strokeOpacity?: NumberProp;
|
135 | strokeDasharray?: ReadonlyArray<NumberProp> | NumberProp;
|
136 | strokeDashoffset?: NumberProp;
|
137 | strokeLinecap?: Linecap;
|
138 | strokeLinejoin?: Linejoin;
|
139 | strokeMiterlimit?: NumberProp;
|
140 | }
|
141 |
|
142 | export interface FontObject {
|
143 | fontStyle?: FontStyle;
|
144 | fontVariant?: FontVariant;
|
145 | fontWeight?: FontWeight;
|
146 | fontStretch?: FontStretch;
|
147 | fontSize?: NumberProp;
|
148 | fontFamily?: string;
|
149 | textAnchor?: TextAnchor;
|
150 | textDecoration?: TextDecoration;
|
151 | letterSpacing?: NumberProp;
|
152 | wordSpacing?: NumberProp;
|
153 | kerning?: NumberProp;
|
154 | fontFeatureSettings?: string;
|
155 | fontVariantLigatures?: FontVariantLigatures;
|
156 | fontVariationSettings?: string;
|
157 | }
|
158 |
|
159 | export interface FontProps extends FontObject {
|
160 | font?: FontObject;
|
161 | }
|
162 |
|
163 | export interface TransformObject {
|
164 | translate?: NumberArray;
|
165 | translateX?: NumberProp;
|
166 | translateY?: NumberProp;
|
167 | origin?: NumberArray;
|
168 | originX?: NumberProp;
|
169 | originY?: NumberProp;
|
170 | scale?: NumberArray;
|
171 | scaleX?: NumberProp;
|
172 | scaleY?: NumberProp;
|
173 | skew?: NumberArray;
|
174 | skewX?: NumberProp;
|
175 | skewY?: NumberProp;
|
176 | rotation?: NumberProp;
|
177 | x?: NumberArray;
|
178 | y?: NumberArray;
|
179 | }
|
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 | export type ColumnMajorTransformMatrix = [
|
197 | number,
|
198 | number,
|
199 | number,
|
200 | number,
|
201 | number,
|
202 | number,
|
203 | ];
|
204 |
|
205 | export interface TransformProps extends TransformObject {
|
206 | transform?:
|
207 | | ColumnMajorTransformMatrix
|
208 | | string
|
209 | | TransformObject
|
210 | | TransformsStyle['transform'];
|
211 | }
|
212 |
|
213 | export interface CommonMaskProps {
|
214 | mask?: string;
|
215 | }
|
216 |
|
217 | export interface CommonMarkerProps {
|
218 | marker?: string;
|
219 | markerStart?: string;
|
220 | markerMid?: string;
|
221 | markerEnd?: string;
|
222 | }
|
223 |
|
224 | export interface CommonPathProps
|
225 | extends FillProps,
|
226 | StrokeProps,
|
227 | ClipProps,
|
228 | TransformProps,
|
229 | VectorEffectProps,
|
230 | ResponderProps,
|
231 | TouchableProps,
|
232 | DefinitionProps,
|
233 | CommonMarkerProps,
|
234 | CommonMaskProps {}
|
235 |
|
236 |
|
237 | export interface CircleProps extends CommonPathProps {
|
238 | cx?: NumberProp;
|
239 | cy?: NumberProp;
|
240 | opacity?: NumberProp;
|
241 | r?: NumberProp;
|
242 | }
|
243 | export const Circle: React.ComponentClass<CircleProps>;
|
244 | export type Circle = React.ComponentClass<CircleProps>;
|
245 |
|
246 | export interface ClipPathProps {
|
247 | id?: string;
|
248 | }
|
249 | export const ClipPath: React.ComponentClass<ClipPathProps>;
|
250 | export type ClipPath = React.ComponentClass<ClipPathProps>;
|
251 |
|
252 | export const Defs: React.ComponentClass<{}>;
|
253 | export type Defs = React.ComponentClass<{}>;
|
254 |
|
255 | export interface EllipseProps extends CommonPathProps {
|
256 | cx?: NumberProp;
|
257 | cy?: NumberProp;
|
258 | opacity?: NumberProp;
|
259 | rx?: NumberProp;
|
260 | ry?: NumberProp;
|
261 | }
|
262 | export const Ellipse: React.ComponentClass<EllipseProps>;
|
263 | export type Ellipse = React.ComponentClass<EllipseProps>;
|
264 |
|
265 | export interface GProps extends CommonPathProps, FontProps {
|
266 | opacity?: NumberProp;
|
267 | }
|
268 | export const G: React.ComponentClass<GProps>;
|
269 | export type G = React.ComponentClass<GProps>;
|
270 |
|
271 | export interface ForeignObjectProps {
|
272 | x?: NumberProp;
|
273 | y?: NumberProp;
|
274 | width?: NumberProp;
|
275 | height?: NumberProp;
|
276 | }
|
277 | export const ForeignObject: React.ComponentClass<ForeignObjectProps>;
|
278 | export type ForeignObject = React.ComponentClass<ForeignObjectProps>;
|
279 |
|
280 | export interface ImageProps
|
281 | extends ResponderProps,
|
282 | CommonMaskProps,
|
283 | ClipProps,
|
284 | TouchableProps {
|
285 | x?: NumberProp;
|
286 | y?: NumberProp;
|
287 | width?: NumberProp;
|
288 | height?: NumberProp;
|
289 | xlinkHref?: ReactNative.ImageProps['source'];
|
290 | href?: ReactNative.ImageProps['source'];
|
291 | preserveAspectRatio?: string;
|
292 | opacity?: NumberProp;
|
293 | clipPath?: string;
|
294 | id?: string;
|
295 | }
|
296 | export const Image: React.ComponentClass<ImageProps>;
|
297 | export type Image = React.ComponentClass<ImageProps>;
|
298 |
|
299 | export interface LineProps extends CommonPathProps {
|
300 | opacity?: NumberProp;
|
301 | x1?: NumberProp;
|
302 | x2?: NumberProp;
|
303 | y1?: NumberProp;
|
304 | y2?: NumberProp;
|
305 | }
|
306 | export const Line: React.ComponentClass<LineProps>;
|
307 | export type Line = React.ComponentClass<LineProps>;
|
308 |
|
309 | export interface LinearGradientProps {
|
310 | x1?: NumberProp;
|
311 | x2?: NumberProp;
|
312 | y1?: NumberProp;
|
313 | y2?: NumberProp;
|
314 | gradientUnits?: Units;
|
315 | gradientTransform?: ColumnMajorTransformMatrix | string;
|
316 | id?: string;
|
317 | }
|
318 | export const LinearGradient: React.ComponentClass<LinearGradientProps>;
|
319 | export type LinearGradient = React.ComponentClass<LinearGradientProps>;
|
320 |
|
321 | export interface PathProps extends CommonPathProps {
|
322 | d?: string;
|
323 | opacity?: NumberProp;
|
324 | }
|
325 | export const Path: React.ComponentClass<PathProps>;
|
326 | export type Path = React.ComponentClass<PathProps>;
|
327 |
|
328 | export interface PatternProps {
|
329 | id?: string;
|
330 | x?: NumberProp;
|
331 | y?: NumberProp;
|
332 | width?: NumberProp;
|
333 | height?: NumberProp;
|
334 | patternTransform?: ColumnMajorTransformMatrix | string;
|
335 | patternUnits?: Units;
|
336 | patternContentUnits?: Units;
|
337 | viewBox?: string;
|
338 | preserveAspectRatio?: string;
|
339 | }
|
340 | export const Pattern: React.ComponentClass<PatternProps>;
|
341 | export type Pattern = React.ComponentClass<PatternProps>;
|
342 |
|
343 | export interface PolygonProps extends CommonPathProps {
|
344 | opacity?: NumberProp;
|
345 | points?: string | ReadonlyArray<NumberProp>;
|
346 | }
|
347 | export const Polygon: React.ComponentClass<PolygonProps>;
|
348 | export type Polygon = React.ComponentClass<PolygonProps>;
|
349 |
|
350 | export interface PolylineProps extends CommonPathProps {
|
351 | opacity?: NumberProp;
|
352 | points?: string | ReadonlyArray<NumberProp>;
|
353 | }
|
354 | export const Polyline: React.ComponentClass<PolylineProps>;
|
355 | export type Polyline = React.ComponentClass<PolylineProps>;
|
356 |
|
357 | export interface RadialGradientProps {
|
358 | fx?: NumberProp;
|
359 | fy?: NumberProp;
|
360 | rx?: NumberProp;
|
361 | ry?: NumberProp;
|
362 | cx?: NumberProp;
|
363 | cy?: NumberProp;
|
364 | r?: NumberProp;
|
365 | gradientUnits?: Units;
|
366 | gradientTransform?: ColumnMajorTransformMatrix | string;
|
367 | id?: string;
|
368 | }
|
369 | export const RadialGradient: React.ComponentClass<RadialGradientProps>;
|
370 | export type RadialGradient = React.ComponentClass<RadialGradientProps>;
|
371 |
|
372 | export interface RectProps extends CommonPathProps {
|
373 | x?: NumberProp;
|
374 | y?: NumberProp;
|
375 | width?: NumberProp;
|
376 | height?: NumberProp;
|
377 | rx?: NumberProp;
|
378 | ry?: NumberProp;
|
379 | opacity?: NumberProp;
|
380 | }
|
381 | export const Rect: React.ComponentClass<RectProps>;
|
382 | export type Rect = React.ComponentClass<RectProps>;
|
383 |
|
384 | export interface StopProps {
|
385 | stopColor?: Color;
|
386 | stopOpacity?: NumberProp;
|
387 | offset?: NumberProp;
|
388 | }
|
389 | export const Stop: React.ComponentClass<StopProps>;
|
390 | export type Stop = React.ComponentClass<StopProps>;
|
391 |
|
392 | export interface SvgProps extends GProps, ReactNative.ViewProperties {
|
393 | width?: NumberProp;
|
394 | height?: NumberProp;
|
395 | viewBox?: string;
|
396 | preserveAspectRatio?: string;
|
397 | color?: Color;
|
398 | title?: string;
|
399 | }
|
400 |
|
401 |
|
402 | export const Svg: React.ComponentClass<SvgProps>;
|
403 | export type Svg = React.ComponentClass<SvgProps>;
|
404 | export default Svg;
|
405 |
|
406 | export interface SymbolProps {
|
407 | id?: string;
|
408 | viewBox?: string;
|
409 | preserveAspectRatio?: string;
|
410 | opacity?: NumberProp;
|
411 | }
|
412 | export const Symbol: React.ComponentClass<SymbolProps>;
|
413 | export type Symbol = React.ComponentClass<SymbolProps>;
|
414 |
|
415 | export interface TSpanProps extends CommonPathProps, FontProps {
|
416 | x?: NumberArray;
|
417 | y?: NumberArray;
|
418 | dx?: NumberArray;
|
419 | dy?: NumberArray;
|
420 | rotate?: NumberArray;
|
421 | inlineSize?: NumberProp;
|
422 | }
|
423 | export const TSpan: React.ComponentClass<TSpanProps>;
|
424 | export type TSpan = React.ComponentClass<TSpanProps>;
|
425 |
|
426 | export interface TextSpecificProps extends CommonPathProps, FontProps {
|
427 | alignmentBaseline?: AlignmentBaseline;
|
428 | baselineShift?: BaselineShift;
|
429 | verticalAlign?: NumberProp;
|
430 | lengthAdjust?: LengthAdjust;
|
431 | textLength?: NumberProp;
|
432 | fontData?: null | { [name: string]: unknown };
|
433 | fontFeatureSettings?: string;
|
434 | }
|
435 |
|
436 | export interface TextProps extends TextSpecificProps {
|
437 | x?: NumberArray;
|
438 | y?: NumberArray;
|
439 | dx?: NumberArray;
|
440 | dy?: NumberArray;
|
441 | rotate?: NumberArray;
|
442 | opacity?: NumberProp;
|
443 | inlineSize?: NumberProp;
|
444 | }
|
445 | export const Text: React.ComponentClass<TextProps>;
|
446 | export type Text = React.ComponentClass<TextProps>;
|
447 |
|
448 | export interface TextPathProps extends TextSpecificProps {
|
449 | xlinkHref?: string;
|
450 | href?: string;
|
451 | startOffset?: NumberProp;
|
452 | method?: TextPathMethod;
|
453 | spacing?: TextPathSpacing;
|
454 | midLine?: TextPathMidLine;
|
455 | }
|
456 | export const TextPath: React.ComponentClass<TextPathProps>;
|
457 | export type TextPath = React.ComponentClass<TextPathProps>;
|
458 |
|
459 | export interface UseProps extends CommonPathProps {
|
460 | xlinkHref?: string;
|
461 | href?: string;
|
462 | width?: NumberProp;
|
463 | height?: NumberProp;
|
464 | x?: NumberProp;
|
465 | y?: NumberProp;
|
466 | opacity?: NumberProp;
|
467 | }
|
468 | export const Use: React.ComponentClass<UseProps>;
|
469 | export type Use = React.ComponentClass<UseProps>;
|
470 |
|
471 | export enum EMaskUnits {
|
472 | USER_SPACE_ON_USE = 'userSpaceOnUse',
|
473 | OBJECT_BOUNDING_BOX = 'objectBoundingBox',
|
474 | }
|
475 |
|
476 | export type TMaskUnits =
|
477 | | EMaskUnits.USER_SPACE_ON_USE
|
478 | | EMaskUnits.OBJECT_BOUNDING_BOX;
|
479 |
|
480 | export interface MaskProps extends CommonPathProps {
|
481 | id?: string;
|
482 | x?: NumberProp;
|
483 | y?: NumberProp;
|
484 | width?: NumberProp;
|
485 | height?: NumberProp;
|
486 | maskTransform?: ColumnMajorTransformMatrix | string;
|
487 | maskUnits?: TMaskUnits;
|
488 | maskContentUnits?: TMaskUnits;
|
489 | }
|
490 | export const Mask: React.ComponentClass<MaskProps>;
|
491 | export type Mask = React.ComponentClass<MaskProps>;
|
492 |
|
493 | export enum MarkerUnits {
|
494 | STROKE_WIDTH = 'strokeWidth',
|
495 | USER_SPACE_ON_USE = 'userSpaceOnUse',
|
496 | }
|
497 |
|
498 | export enum Orient {
|
499 | AUTO = 'auto',
|
500 | AUTO_START_REVERSE = 'auto-start-reverse',
|
501 | }
|
502 |
|
503 | export interface MarkerProps {
|
504 | id?: string;
|
505 | viewBox?: string;
|
506 | preserveAspectRatio?: string;
|
507 | refX?: NumberProp;
|
508 | refY?: NumberProp;
|
509 | markerWidth?: NumberProp;
|
510 | markerHeight?: NumberProp;
|
511 | markerUnits?: MarkerUnits;
|
512 | orient?: Orient | NumberProp;
|
513 | }
|
514 | export const Marker: React.ComponentClass<MarkerProps>;
|
515 | export type Marker = React.ComponentClass<MarkerProps>;
|
516 |
|
517 | export type Styles = { [property: string]: string };
|
518 |
|
519 | export interface AST {
|
520 | tag: string;
|
521 | style?: Styles;
|
522 | styles?: string;
|
523 | priority?: Map<string, boolean | undefined>;
|
524 | parent: AST | null;
|
525 | children: (AST | string)[] | (JSX.Element | string)[];
|
526 | props: {
|
527 | [prop: string]: Styles | string | undefined;
|
528 | };
|
529 | Tag: React.ComponentType;
|
530 | }
|
531 |
|
532 | export interface XmlAST extends AST {
|
533 | children: (XmlAST | string)[];
|
534 | parent: XmlAST | null;
|
535 | }
|
536 |
|
537 | export interface JsxAST extends AST {
|
538 | children: (JSX.Element | string)[];
|
539 | }
|
540 |
|
541 | export interface UriProps extends SvgProps {
|
542 | uri: string | null;
|
543 | override?: SvgProps;
|
544 | }
|
545 | export type UriState = { xml: string | null };
|
546 |
|
547 | export interface XmlProps extends SvgProps {
|
548 | xml: string | null;
|
549 | override?: SvgProps;
|
550 | }
|
551 | export type XmlState = { ast: JsxAST | null };
|
552 |
|
553 | export interface AstProps extends SvgProps {
|
554 | ast: JsxAST | null;
|
555 | override?: SvgProps;
|
556 | }
|
557 |
|
558 | export type Middleware = (ast: XmlAST) => XmlAST;
|
559 |
|
560 | export function parse(source: string, middleware?: Middleware): JsxAST | null;
|
561 |
|
562 | export const SvgAst: React.FunctionComponent<AstProps>;
|
563 |
|
564 | export const SvgXml: React.FunctionComponent<XmlProps>;
|
565 | export const SvgFromXml: React.ComponentClass<XmlProps, XmlState>;
|
566 |
|
567 | export const SvgUri: React.FunctionComponent<UriProps>;
|
568 | export const SvgFromUri: React.ComponentClass<UriProps, UriState>;
|
569 |
|
570 | export const SvgCss: React.FunctionComponent<XmlProps>;
|
571 | export const SvgWithCss: React.ComponentClass<XmlProps, XmlState>;
|
572 |
|
573 | export const SvgCssUri: React.FunctionComponent<UriProps>;
|
574 | export const SvgWithCssUri: React.ComponentClass<UriProps, UriState>;
|
575 |
|
576 | export const inlineStyles: Middleware;
|