1/* eslint-disable */
2// tslint:disable max-classes-per-file
3import React from 'react';
4import * as Svg from 'react-native-svg';
5
6import Example from './Example';
7
8const { LinearGradient, Stop, Defs, Path, G, TSpan, TextPath } = Svg;
9
10class TextExample extends React.Component {
11  static title = 'Text';
12
13  render() {
14    return (
15      <Svg.Svg height="30" width="100">
16        <Svg.Text x="50" y="9" fill="red" textAnchor="middle">
17          I love SVG!
18        </Svg.Text>
19      </Svg.Svg>
20    );
21  }
22}
23
24class TextRotate extends React.Component {
25  static title = 'Transform the text';
26
27  render() {
28    return (
29      <Svg.Svg height="60" width="200">
30        <Svg.Text x="0" y="15" fill="red" rotate="30" origin="20,40">
31          I love SVG
32        </Svg.Text>
33        <Svg.Text x="95" y="47" fill="blue" rotate="-25" origin="95, 20">
34          I love SVG
35        </Svg.Text>
36        <Svg.Text x="126" y="5" fill="#f60" rotate="106" scale="1.36" origin="140, 0">
37          I love SVG
38        </Svg.Text>
39      </Svg.Svg>
40    );
41  }
42}
43
44class TextStroke extends React.Component {
45  static title = 'Stroke the text';
46  render() {
47    return (
48      <Svg.Svg height="60" width="200">
49        <Defs>
50          <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
51            <Stop offset="100%" stopColor="red" stopOpacity="0" />
52            <Stop offset="0%" stopColor="blue" stopOpacity="0.5" />
53          </LinearGradient>
54        </Defs>
55        <Svg.Text
56          stroke="url(#grad)"
57          strokeWidth="2"
58          fill="none"
59          fontSize="30"
60          fontWeight="bold"
61          x="100"
62          y="40">
63          <TSpan textAnchor="middle">{['STROKE TEXT']}</TSpan>
64        </Svg.Text>
65      </Svg.Svg>
66    );
67  }
68}
69
70class TextFill extends React.Component {
71  static title = 'Fill the text with LinearGradient';
72  render() {
73    return (
74      <Svg.Svg height="60" width="200">
75        <Defs>
76          <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
77            <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0.5" />
78            <Stop offset="100%" stopColor="red" stopOpacity="1" />
79          </LinearGradient>
80        </Defs>
81
82        <Svg.Text
83          fill="url(#grad)"
84          stroke="purple"
85          strokeWidth="1"
86          fontSize="30"
87          fontWeight="bold"
88          fontStyle="italic"
89          x="100"
90          y="40"
91          textAnchor="middle">
92          FILL TEXT
93        </Svg.Text>
94      </Svg.Svg>
95    );
96  }
97}
98
99class TextPathExample extends React.Component {
100  static title = 'Draw text along path';
101
102  render() {
103    const path = `
104M 10 20
105C 40 10 60  0 80 10
106C 100 20 120 30 140 20
107C 160 10 180 10 180 10
108`;
109
110    return (
111      <Svg.Svg height="100" width="200">
112        <Defs>
113          <Path id="path" d={path} />
114        </Defs>
115        <G y="20">
116          <Svg.Text fill="blue">
117            <Svg.TextPath href="#path" startOffset="-10%" midLine="sharp">
118              We go up and down,
119              <TSpan fill="red" dy="5,5,5">
120                then up again
121              </TSpan>
122            </Svg.TextPath>
123          </Svg.Text>
124          <Path d={path} fill="none" stroke="red" strokeWidth="1" />
125        </G>
126      </Svg.Svg>
127    );
128  }
129}
130
131class TSpanExample extends React.Component {
132  static title = 'TSpan nest';
133
134  render() {
135    return (
136      <Svg.Svg height="160" width="200">
137        <Svg.Text y="20" dx="5 5">
138          <TSpan x="10">tspan line 1</TSpan>
139          <TSpan x="10" dy="15">
140            tspan line 2
141          </TSpan>
142          <TSpan x="10" dx="10" dy="15">
143            tspan line 3
144          </TSpan>
145        </Svg.Text>
146        <Svg.Text x="10" y="60" fill="red" fontSize="14">
147          <TSpan dy="5 10 20">12345</TSpan>
148          <TSpan fill="blue" dy="15" dx="0 5 5">
149            <TSpan>6</TSpan>
150            <TSpan>7</TSpan>
151          </TSpan>
152          <TSpan dx="0 10 20" dy="0 20" fontWeight="bold" fontSize="12">
153            89a
154          </TSpan>
155        </Svg.Text>
156        <Svg.Text y="140" dx="0 5 5" dy="0 -5 -5">
157          delta on text
158        </Svg.Text>
159      </Svg.Svg>
160    );
161  }
162}
163
164const icon = (
165  <Svg.Svg height="20" width="20">
166    <Svg.Text
167      x="10"
168      y="15"
169      fontSize="14"
170      fontWeight="bold"
171      fontFamily="PingFang HK"
172      textAnchor="middle"
173      fill="none"
174      stroke="blue"
175      strokeWidth="1">
176      字
177    </Svg.Text>
178  </Svg.Svg>
179);
180
181const Text: Example = {
182  icon,
183  samples: [TextExample, TextRotate, TextStroke, TextFill, TextPathExample, TSpanExample],
184};
185
186export default Text;
187