1 | import React from 'react';
|
2 | import { requireNativeComponent } from 'react-native';
|
3 | import { withoutXY } from '../lib/extract/extractProps';
|
4 | import { NumberProp } from '../lib/extract/types';
|
5 | import { idPattern } from '../lib/util';
|
6 | import Shape from './Shape';
|
7 |
|
8 | export default class Use extends Shape<{
|
9 | x?: NumberProp;
|
10 | y?: NumberProp;
|
11 | width?: NumberProp;
|
12 | height?: NumberProp;
|
13 | xlinkHref?: string;
|
14 | href?: string;
|
15 | }> {
|
16 | static displayName = 'Use';
|
17 |
|
18 | static defaultProps = {
|
19 | x: 0,
|
20 | y: 0,
|
21 | width: 0,
|
22 | height: 0,
|
23 | };
|
24 |
|
25 | render() {
|
26 | const { props } = this;
|
27 | const {
|
28 | children,
|
29 | x,
|
30 | y,
|
31 | width,
|
32 | height,
|
33 | xlinkHref,
|
34 | href = xlinkHref,
|
35 | } = props;
|
36 |
|
37 | const matched = href && href.match(idPattern);
|
38 | const match = matched && matched[1];
|
39 |
|
40 | if (!match) {
|
41 | console.warn(
|
42 | 'Invalid `href` prop for `Use` element, expected a href like "#id", but got: "' +
|
43 | href +
|
44 | '"',
|
45 | );
|
46 | }
|
47 |
|
48 | return (
|
49 | <RNSVGUse
|
50 | ref={this.refMethod}
|
51 | {...withoutXY(this, props)}
|
52 | href={match}
|
53 | x={x}
|
54 | y={y}
|
55 | width={width}
|
56 | height={height}
|
57 | >
|
58 | {children}
|
59 | </RNSVGUse>
|
60 | );
|
61 | }
|
62 | }
|
63 |
|
64 | export const RNSVGUse = requireNativeComponent('RNSVGUse');
|