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 { G } = Svg;
8
9class PolygonExample extends React.Component {
10  static title = 'The following example creates a polygon with three sides';
11
12  render() {
13    return (
14      <Svg.Svg height="100" width="100">
15        <Svg.Polygon points="40,5 70,80 25,95" fill="lime" stroke="purple" strokeWidth="1" />
16      </Svg.Svg>
17    );
18  }
19}
20
21class FourSidePolygon extends React.Component {
22  static title = 'The following example creates a polygon with four sides';
23  render() {
24    return (
25      <Svg.Svg height="100" width="100">
26        <Svg.Polygon points="70 5 90  75 45 90 25 80" fill="lime" stroke="purple" strokeWidth="1" />
27      </Svg.Svg>
28    );
29  }
30}
31
32class StarPolygon extends React.Component {
33  static title = 'Use the <Polygon /> element to create a star';
34  render() {
35    return (
36      <Svg.Svg height="105" width="105">
37        <G scale="0.5">
38          <Svg.Polygon
39            points="100,10 40,198 190,78 10,78 160,198"
40            fill="lime"
41            stroke="purple"
42            strokeWidth="5"
43          />
44        </G>
45      </Svg.Svg>
46    );
47  }
48}
49
50class EvenOddPolygon extends React.Component {
51  static title = 'Change the fill-rule property to "evenodd"';
52  render() {
53    return (
54      <Svg.Svg height="105" width="105">
55        <G scale="0.5" fillRule="evenodd">
56          <Svg.Polygon
57            points="100,10 40,198 190,78 10,78 160,198"
58            fill="lime"
59            stroke="purple"
60            strokeWidth="5"
61          />
62        </G>
63      </Svg.Svg>
64    );
65  }
66}
67
68const icon = (
69  <Svg.Svg height="20" width="20">
70    <G scale="0.1">
71      <Svg.Polygon
72        points="100,10 40,198 190,78 10,78 160,198"
73        fill="lime"
74        stroke="purple"
75        strokeWidth="10"
76      />
77    </G>
78  </Svg.Svg>
79);
80
81const Polygon: Example = {
82  icon,
83  samples: [PolygonExample, FourSidePolygon, StarPolygon, EvenOddPolygon],
84};
85
86export default Polygon;
87