1// tslint:disable max-classes-per-file
2import React from 'react';
3import * as Svg from 'react-native-svg';
4
5import Example from './Example';
6
7class CircleExample extends React.Component {
8  static title = 'Circle';
9  render() {
10    return (
11      <Svg.Svg height="100" width="140">
12        <Svg.Circle cx="50%" cy="50%" r="40%" fill="pink" />
13      </Svg.Svg>
14    );
15  }
16}
17
18class StrokeCircle extends React.Component {
19  static title = 'Stroke Circle';
20  render() {
21    return (
22      <Svg.Svg height="100" width="100">
23        <Svg.Circle cx="50" cy="50" r="45" stroke="purple" strokeWidth="2.5" fill="none" />
24      </Svg.Svg>
25    );
26  }
27}
28
29class StrokeOpacityCircle extends React.Component {
30  static title = 'Circle with strokeOpacity';
31  render() {
32    return (
33      <Svg.Svg height="100" width="100">
34        <Svg.Circle
35          cx="50"
36          cy="50"
37          r="40"
38          stroke="purple"
39          strokeOpacity="0.5"
40          strokeWidth="10"
41          fill="pink"
42        />
43      </Svg.Svg>
44    );
45  }
46}
47
48class PieCircle extends React.Component {
49  static title = 'Draw a Pie shape with circle';
50  render() {
51    return (
52      <Svg.Svg height="100" width="100">
53        <Svg.Circle cx="50" cy="50" r="40" fill="#ddd" />
54        <Svg.Circle
55          origin="50, 50"
56          rotation="-90"
57          cx="50"
58          cy="50"
59          r="20"
60          stroke="#0074d9"
61          strokeWidth="40"
62          fill="none"
63          strokeDasharray="80, 160"
64        />
65      </Svg.Svg>
66    );
67  }
68}
69
70const icon = (
71  <Svg.Svg height="20" width="20">
72    <Svg.Circle cx="10" cy="10" r="8" stroke="purple" strokeWidth="1" fill="pink" />
73  </Svg.Svg>
74);
75
76const Circle: Example = {
77  icon,
78  samples: [CircleExample, StrokeCircle, StrokeOpacityCircle, PieCircle],
79};
80
81export default Circle;
82