1 | import React, { Component } from 'react';
|
2 | import { requireNativeComponent } from 'react-native';
|
3 | import extractTransform from '../lib/extract/extractTransform';
|
4 | import { withoutXY } from '../lib/extract/extractProps';
|
5 | import { NumberProp, TransformProps } from '../lib/extract/types';
|
6 | import extractText from '../lib/extract/extractText';
|
7 | import { idPattern, pickNotNil } from '../lib/util';
|
8 | import Shape from './Shape';
|
9 | import TSpan from './TSpan';
|
10 |
|
11 | export default class TextPath extends Shape<{
|
12 | children?: NumberProp | [NumberProp | React.ComponentType];
|
13 | alignmentBaseline?: string;
|
14 | startOffset?: NumberProp;
|
15 | xlinkHref?: string;
|
16 | midLine?: string;
|
17 | spacing?: string;
|
18 | method?: string;
|
19 | href?: string;
|
20 | side?: string;
|
21 | }> {
|
22 | static displayName = 'TextPath';
|
23 |
|
24 | setNativeProps = (
|
25 | props: Object & {
|
26 | matrix?: number[];
|
27 | style?: [] | {};
|
28 | } & TransformProps,
|
29 | ) => {
|
30 | const matrix = !props.matrix && extractTransform(props);
|
31 | if (matrix) {
|
32 | props.matrix = matrix;
|
33 | }
|
34 | Object.assign(props, pickNotNil(extractText(props, true)));
|
35 | this.root && this.root.setNativeProps(props);
|
36 | };
|
37 |
|
38 | render() {
|
39 | const {
|
40 | children,
|
41 | xlinkHref,
|
42 | href = xlinkHref,
|
43 | startOffset = 0,
|
44 | method,
|
45 | spacing,
|
46 | side,
|
47 | alignmentBaseline,
|
48 | midLine,
|
49 | ...prop
|
50 | } = this.props;
|
51 | const matched = href && href.match(idPattern);
|
52 | const match = matched && matched[1];
|
53 | if (match) {
|
54 | const props = withoutXY(this, prop);
|
55 | Object.assign(
|
56 | props,
|
57 | extractText(
|
58 | {
|
59 | children,
|
60 | },
|
61 | true,
|
62 | ),
|
63 | {
|
64 | href: match,
|
65 | startOffset,
|
66 | method,
|
67 | spacing,
|
68 | side,
|
69 | alignmentBaseline,
|
70 | midLine,
|
71 | },
|
72 | );
|
73 | props.ref = this.refMethod as (instance: Component | null) => void;
|
74 | return <RNSVGTextPath {...props} />;
|
75 | }
|
76 |
|
77 | console.warn(
|
78 | 'Invalid `href` prop for `TextPath` element, expected a href like "#id", but got: "' +
|
79 | href +
|
80 | '"',
|
81 | );
|
82 | return (
|
83 | <TSpan ref={this.refMethod as (instance: Component | null) => void}>
|
84 | {children}
|
85 | </TSpan>
|
86 | );
|
87 | }
|
88 | }
|
89 |
|
90 | export const RNSVGTextPath = requireNativeComponent('RNSVGTextPath');
|