1// tslint:disable max-classes-per-file
2import React from 'react';
3import { View } from 'react-native';
4import * as Svg from 'react-native-svg';
5import Example from './Example';
6
7const { Defs, LinearGradient, RadialGradient, Stop, Ellipse, Circle, Text, Rect, G } = Svg;
8
9class LinearGradientHorizontal extends React.Component {
10  static title = 'Define an ellipse with a horizontal linear gradient from yellow to red';
11  render() {
12    return (
13      <Svg.Svg height="150" width="300">
14        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
15        <Defs>
16          <LinearGradient id="grad" x1="65" y1="0" x2="235" y2="0" gradientUnits="userSpaceOnUse">
17            <Stop offset="0" stopColor="rgb(255,255,0)" stopOpacity="0" />
18            <Stop offset="1" stopColor="red" />
19          </LinearGradient>
20        </Defs>
21      </Svg.Svg>
22    );
23  }
24}
25
26class LinearGradientRotated extends React.Component {
27  static title = 'Define an ellipse with a rotated linear gradient from yellow to red';
28  render() {
29    return (
30      <Svg.Svg height="150" width="300">
31        <Defs>
32          <LinearGradient id="grad" x1={0} y1={0} x2="0%" y2="100%">
33            <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
34            <Stop offset="100%" stopColor="red" stopOpacity="1" />
35          </LinearGradient>
36        </Defs>
37        <G>
38          <G>
39            <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
40          </G>
41        </G>
42      </Svg.Svg>
43    );
44  }
45}
46
47class GradientUnits extends React.Component {
48  static title = 'Compare gradientUnits="userSpaceOnUse" width default';
49  render() {
50    return (
51      <View style={{ width: 300, height: 150, flexDirection: 'row', justifyContent: 'space-around' }}>
52        <Svg.Svg height="150" width="90">
53          <Defs>
54            <LinearGradient id="defaultUnits" x1="0%" y1="0%" x2="0%" y2="100%">
55              <Stop offset="0%" stopColor="#000" stopOpacity="1" />
56              <Stop offset="100%" stopColor="#ff0" stopOpacity="1" />
57            </LinearGradient>
58          </Defs>
59          <Rect fill="url(#defaultUnits)" x="10" y="10" width="70" height="70" rx="10" ry="10" />
60        </Svg.Svg>
61        <Svg.Svg height="150" width="90">
62          <Defs>
63            <LinearGradient
64              id="userSpaceOnUse"
65              x1="0%"
66              y1="0%"
67              x2="0%"
68              y2="100%"
69              gradientUnits="userSpaceOnUse"
70            >
71              <Stop offset="0%" stopColor="#000" stopOpacity="1" />
72              <Stop offset="100%" stopColor="#ff0" stopOpacity="1" />
73            </LinearGradient>
74          </Defs>
75          <Rect fill="url(#userSpaceOnUse)" x="10" y="10" width="70" height="70" rx="10" ry="10" />
76        </Svg.Svg>
77      </View>
78    );
79  }
80}
81
82class LinearGradientPercent extends React.Component {
83  static title = 'Define a linear gradient in percent unit';
84  render() {
85    return (
86      <Svg.Svg height="150" width="300">
87        <Defs>
88          <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
89            <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
90            <Stop offset="100%" stopColor="red" stopOpacity="1" />
91          </LinearGradient>
92        </Defs>
93        <Text x="25" y="70" fill="#333">
94          x1=0%
95        </Text>
96        <Text x="235" y="70" fill="#333">
97          x2=100%
98        </Text>
99        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
100      </Svg.Svg>
101    );
102  }
103}
104
105class RadialGradientExample extends React.Component {
106  static title = 'Define an ellipse with a radial gradient from yellow to purple';
107  render() {
108    return (
109      <Svg.Svg height="150" width="300">
110        <Defs>
111          <RadialGradient
112            id="grad"
113            cx="150"
114            cy="75"
115            r="85"
116            fx="150"
117            fy="75"
118            gradientUnits="userSpaceOnUse"
119          >
120            <Stop offset="0" stopColor="#ff0" stopOpacity="1" />
121            <Stop offset="0.3" stopColor="#000" stopOpacity="1" />
122            <Stop offset="0.7" stopColor="#0f0" stopOpacity="1" />
123            <Stop offset="1" stopColor="#83a" stopOpacity="1" />
124          </RadialGradient>
125        </Defs>
126        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
127      </Svg.Svg>
128    );
129  }
130}
131
132class RadialGradientPercent extends React.Component {
133  static title = 'Define a radial gradient in percent unit';
134  render() {
135    return (
136      <Svg.Svg height="150" width="300">
137        <Defs>
138          <RadialGradient id="grad" cx="50%" cy="50%" rx="50%" ry="50%" fx="50%" fy="50%">
139            <Stop offset="0%" stopColor="#fff" stopOpacity="1" />
140            <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
141          </RadialGradient>
142        </Defs>
143        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
144      </Svg.Svg>
145    );
146  }
147}
148
149class RadialGradientPart extends React.Component {
150  static title = 'Define another ellipse with a radial gradient from white to blue';
151  render() {
152    return (
153      <Svg.Svg height="150" width="300">
154        <Defs>
155          <RadialGradient id="grad" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
156            <Stop offset="0%" stopColor="#fff" stopOpacity="0" />
157            <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
158          </RadialGradient>
159        </Defs>
160        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
161      </Svg.Svg>
162    );
163  }
164}
165
166class FillGradientWithOpacity extends React.Component {
167  static title = 'Fill a radial gradient with fillOpacity prop';
168  render() {
169    return (
170      <Svg.Svg height="150" width="300">
171        <Defs>
172          <RadialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
173            <Stop offset="0%" stopColor="#fff" stopOpacity="1" />
174            <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
175          </RadialGradient>
176        </Defs>
177        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" fillOpacity="0.2" />
178      </Svg.Svg>
179    );
180  }
181}
182
183class FillGradientInRect extends React.Component {
184  static title = 'Fill a radial gradient inside a rect and stroke it';
185  render() {
186    return (
187      <Svg.Svg height="150" width="300">
188        <Defs>
189          <RadialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
190            <Stop offset="0%" stopColor="#fff" stopOpacity="1" />
191            <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
192          </RadialGradient>
193        </Defs>
194        <Rect
195          x="5"
196          y="5"
197          width="290"
198          height="130"
199          fill="url(#grad)"
200          stroke="pink"
201          strokeWidth="5"
202        />
203      </Svg.Svg>
204    );
205  }
206}
207
208const icon = (
209  <Svg.Svg height="20" width="20">
210    <Defs>
211      <LinearGradient id="grad" x1="0" y1="0" x2="0" y2="20">
212        <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
213        <Stop offset="100%" stopColor="red" stopOpacity="1" />
214      </LinearGradient>
215    </Defs>
216    <Circle cx="10" cy="10" r="10" fill="url(#grad)" />
217  </Svg.Svg>
218);
219
220const Gradients: Example = {
221  icon,
222  samples: [
223    LinearGradientHorizontal,
224    LinearGradientRotated,
225    GradientUnits,
226    LinearGradientPercent,
227    RadialGradientExample,
228    RadialGradientPercent,
229    RadialGradientPart,
230    FillGradientWithOpacity,
231    FillGradientInRect,
232  ],
233};
234
235export default Gradients;
236