1// tslint:disable max-classes-per-file
2import React from 'react';
3import * as Svg from 'react-native-svg';
4
5import Example from './Example';
6
7const {
8  Defs,
9  G,
10  Path,
11  Use,
12  Symbol,
13  Circle,
14  ClipPath,
15  LinearGradient,
16  RadialGradient,
17  Stop,
18  Rect,
19} = Svg;
20
21class UseExample extends React.Component {
22  static title = 'Reuse svg code';
23  render() {
24    return (
25      <Svg.Svg height="100" width="300">
26        <Defs>
27          <G id="shape">
28            <G>
29              <Circle cx="50" cy="50" r="50" />
30              <Rect x="50" y="50" width="50" height="50" />
31              <Circle cx="50" cy="50" r="5" fill="blue" />
32            </G>
33          </G>
34        </Defs>
35        <Use href="#shape" x="20" y="0" />
36        <Use href="#shape" x="170" y="0" />
37      </Svg.Svg>
38    );
39  }
40}
41
42class UseShapes extends React.Component {
43  static title = 'Using Shapes Outside of a Defs Element';
44  render() {
45    return (
46      <Svg.Svg height="110" width="200">
47        <G id="shape">
48          <Rect x="0" y="0" width="50" height="50" />
49        </G>
50        <Use href="#shape" x="75" y="50" fill="#0f0" />
51        <Use href="#shape" x="110" y="0" stroke="#0ff" fill="#8a3" rotation="45" origin="25, 25" />
52        <Use href="#shape" x="150" y="50" stroke="#0f0" strokeWidth="1" fill="none" />
53      </Svg.Svg>
54    );
55  }
56}
57
58class DefsExample extends React.Component {
59  static title = 'Basic Defs usage';
60
61  render() {
62    return (
63      <Svg.Svg height="100" width="100">
64        <Defs>
65          <G id="path" x="5" y="2" opacity="0.9">
66            <Path
67              id="test"
68              // tslint:disable-next-line: max-line-length
69              d="M38.459,1.66A0.884,0.884,0,0,1,39,2.5a0.7,0.7,0,0,1-.3.575L23.235,16.092,27.58,26.1a1.4,1.4,0,0,1,.148.3,1.3,1.3,0,0,1,0,.377,1.266,1.266,0,0,1-2.078.991L15.526,20.6l-7.58,4.35a1.255,1.255,0,0,1-.485,0,1.267,1.267,0,0,1-1.277-1.258q0-.01,0-0.02a1.429,1.429,0,0,1,0-.446C7.243,20.253,8.6,16.369,8.6,16.29L3.433,13.545A0.743,0.743,0,0,1,2.9,12.822a0.822,0.822,0,0,1,.623-0.773l8.164-2.972,3.018-8.5A0.822,0.822,0,0,1,15.427,0a0.752,0.752,0,0,1,.752.555l2.563,6.936S37.65,1.727,37.792,1.685A1.15,1.15,0,0,1,38.459,1.66Z"
70            />
71          </G>
72          <ClipPath id="clip">
73            <Circle r="25%" cx="0%" cy="0%" />
74          </ClipPath>
75          <LinearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
76            <Stop offset="0%" stopColor="yellow" />
77            <Stop offset="50%" stopColor="red" />
78            <Stop offset="100%" stopColor="blue" />
79          </LinearGradient>
80          <RadialGradient id="radial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
81            <Stop offset="0%" stopColor="yellow" />
82            <Stop offset="50%" stopColor="red" />
83            <Stop offset="100%" stopColor="blue" />
84          </RadialGradient>
85        </Defs>
86        <Use href="#path" x="0" fill="blue" opacity="0.6" />
87        <Use href="#path" x="20" y="5" fill="url(#linear)" />
88        <Use href="#path" clipPath="url(#clip)" fillOpacity="0.6" stroke="#000" strokeWidth="1" />
89        <Use href="#path" x="-10" y="20" fill="url(#radial)" />
90      </Svg.Svg>
91    );
92  }
93}
94
95class SymbolExample extends React.Component {
96  static title = 'Symbol example, reuse elements with viewBox prop';
97  render() {
98    return (
99      <Svg.Svg height="150" width="110">
100        <Symbol id="symbol" viewBox="0 0 150 110">
101          <Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red" />
102          <Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white" />
103        </Symbol>
104
105        <Use href="#symbol" x="0" y="0" width="100" height="50" />
106        <Use href="#symbol" x="10" y="50" width="75" height="38" />
107        <Use href="#symbol" x="20" y="100" width="50" height="25" />
108      </Svg.Svg>
109    );
110  }
111}
112
113const icon = (
114  <Svg.Svg height="20" width="20">
115    <Defs>
116      <G id="path" scale="0.5">
117        {/* tslint:disable-next-line: max-line-length */}
118        <Path d="M38.459,1.66A0.884,0.884,0,0,1,39,2.5a0.7,0.7,0,0,1-.3.575L23.235,16.092,27.58,26.1a1.4,1.4,0,0,1,.148.3,1.3,1.3,0,0,1,0,.377,1.266,1.266,0,0,1-2.078.991L15.526,20.6l-7.58,4.35a1.255,1.255,0,0,1-.485,0,1.267,1.267,0,0,1-1.277-1.258q0-.01,0-0.02a1.429,1.429,0,0,1,0-.446C7.243,20.253,8.6,16.369,8.6,16.29L3.433,13.545A0.743,0.743,0,0,1,2.9,12.822a0.822,0.822,0,0,1,.623-0.773l8.164-2.972,3.018-8.5A0.822,0.822,0,0,1,15.427,0a0.752,0.752,0,0,1,.752.555l2.563,6.936S37.65,1.727,37.792,1.685A1.15,1.15,0,0,1,38.459,1.66Z" />
119      </G>
120      <ClipPath id="clip">
121        <Circle r="50%" cx="0%" cy="0%" />
122      </ClipPath>
123    </Defs>
124    <Use href="#path" fill="#3a8" />
125    <Use
126      href="#path"
127      fill="red"
128      clipPath="url(#clip)"
129      fillOpacity="0.6"
130      stroke="#000"
131      strokeWidth="1"
132    />
133  </Svg.Svg>
134);
135
136const Reusable: Example = {
137  icon,
138  samples: [UseExample, UseShapes, DefsExample, SymbolExample],
139};
140
141export default Reusable;
142