1 | import React from 'react';
|
2 | import extractTransform from '../lib/extract/extractTransform';
|
3 | import extractViewBox from '../lib/extract/extractViewBox';
|
4 | import { NumberProp, TransformProps } from '../lib/extract/types';
|
5 | import units from '../lib/units';
|
6 | import Shape from './Shape';
|
7 | import { RNSVGPattern } from './NativeComponents';
|
8 |
|
9 | export default class Pattern extends Shape<{
|
10 | id?: string;
|
11 | x?: NumberProp;
|
12 | y?: NumberProp;
|
13 | width?: NumberProp;
|
14 | height?: NumberProp;
|
15 | viewBox?: string;
|
16 | preserveAspectRatio?: string;
|
17 | transform?: number[] | string | TransformProps;
|
18 | patternTransform?: number[] | string | TransformProps;
|
19 | patternUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
|
20 | patternContentUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
|
21 | }> {
|
22 | static displayName = 'Pattern';
|
23 |
|
24 | static defaultProps = {
|
25 | x: '0%',
|
26 | y: '0%',
|
27 | width: '100%',
|
28 | height: '100%',
|
29 | };
|
30 |
|
31 | render() {
|
32 | const { props } = this;
|
33 | const {
|
34 | patternTransform,
|
35 | transform,
|
36 | id,
|
37 | x,
|
38 | y,
|
39 | width,
|
40 | height,
|
41 | patternUnits,
|
42 | patternContentUnits,
|
43 | children,
|
44 | viewBox,
|
45 | preserveAspectRatio,
|
46 | } = props;
|
47 | const matrix = extractTransform(patternTransform || transform || props);
|
48 | const patternProps = {
|
49 | name: id,
|
50 | x,
|
51 | y,
|
52 | width,
|
53 | height,
|
54 | matrix,
|
55 | patternTransform: matrix,
|
56 | patternUnits: (patternUnits && units[patternUnits]) || 0,
|
57 | patternContentUnits: patternContentUnits ? units[patternContentUnits] : 1,
|
58 | };
|
59 | return (
|
60 | <RNSVGPattern
|
61 | ref={this.refMethod}
|
62 | {...patternProps}
|
63 | {...extractViewBox({ viewBox, preserveAspectRatio })}
|
64 | >
|
65 | {children}
|
66 | </RNSVGPattern>
|
67 | );
|
68 | }
|
69 | }
|