1// tslint:disable max-classes-per-file
2import React from 'react';
3import { View } from 'react-native';
4import * as Svg from 'react-native-svg';
5
6import Example from './Example';
7
8const { Defs, LinearGradient, RadialGradient, Stop, Ellipse, Circle, Text, Rect, G } = Svg;
9
10class LinearGradientHorizontal extends React.Component {
11  static title = 'Define an ellipse with a horizontal linear gradient from yellow to red';
12  render() {
13    return (
14      <Svg.Svg height="150" width="300">
15        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
16        <Defs>
17          <LinearGradient id="grad" x1="65" y1="0" x2="235" y2="0" gradientUnits="userSpaceOnUse">
18            <Stop offset="0" stopColor="rgb(255,255,0)" stopOpacity="0" />
19            <Stop offset="1" stopColor="red" />
20          </LinearGradient>
21        </Defs>
22      </Svg.Svg>
23    );
24  }
25}
26
27class LinearGradientRotated extends React.Component {
28  static title = 'Define an ellipse with a rotated linear gradient from yellow to red';
29  render() {
30    return (
31      <Svg.Svg height="150" width="300">
32        <Defs>
33          <LinearGradient id="grad" x1={0} y1={0} x2="0%" y2="100%">
34            <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
35            <Stop offset="100%" stopColor="red" stopOpacity="1" />
36          </LinearGradient>
37        </Defs>
38        <G>
39          <G>
40            <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
41          </G>
42        </G>
43      </Svg.Svg>
44    );
45  }
46}
47
48class GradientUnits extends React.Component {
49  static title = 'Compare gradientUnits="userSpaceOnUse" width default';
50  render() {
51    return (
52      <View
53        style={{ width: 300, height: 150, flexDirection: 'row', justifyContent: 'space-around' }}>
54        <Svg.Svg height="150" width="90">
55          <Defs>
56            <LinearGradient id="defaultUnits" x1="0%" y1="0%" x2="0%" y2="100%">
57              <Stop offset="0%" stopColor="#000" stopOpacity="1" />
58              <Stop offset="100%" stopColor="#ff0" stopOpacity="1" />
59            </LinearGradient>
60          </Defs>
61          <Rect fill="url(#defaultUnits)" x="10" y="10" width="70" height="70" rx="10" ry="10" />
62        </Svg.Svg>
63        <Svg.Svg height="150" width="90">
64          <Defs>
65            <LinearGradient
66              id="userSpaceOnUse"
67              x1="0%"
68              y1="0%"
69              x2="0%"
70              y2="100%"
71              gradientUnits="userSpaceOnUse">
72              <Stop offset="0%" stopColor="#000" stopOpacity="1" />
73              <Stop offset="100%" stopColor="#ff0" stopOpacity="1" />
74            </LinearGradient>
75          </Defs>
76          <Rect fill="url(#userSpaceOnUse)" x="10" y="10" width="70" height="70" rx="10" ry="10" />
77        </Svg.Svg>
78      </View>
79    );
80  }
81}
82
83class LinearGradientPercent extends React.Component {
84  static title = 'Define a linear gradient in percent unit';
85  render() {
86    return (
87      <Svg.Svg height="150" width="300">
88        <Defs>
89          <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
90            <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
91            <Stop offset="100%" stopColor="red" stopOpacity="1" />
92          </LinearGradient>
93        </Defs>
94        <Text x="25" y="70" fill="#333">
95          x1=0%
96        </Text>
97        <Text x="235" y="70" fill="#333">
98          x2=100%
99        </Text>
100        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
101      </Svg.Svg>
102    );
103  }
104}
105
106class RadialGradientExample extends React.Component {
107  static title = 'Define an ellipse with a radial gradient from yellow to purple';
108  render() {
109    return (
110      <Svg.Svg height="150" width="300">
111        <Defs>
112          <RadialGradient
113            id="grad"
114            cx="150"
115            cy="75"
116            r="85"
117            fx="150"
118            fy="75"
119            gradientUnits="userSpaceOnUse">
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