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 PolylineExample extends React.Component {
8  static title =
9    'The <Polyline> element is used to create any shape that consists of only straight lines';
10  render() {
11    return (
12      <Svg.Svg height="100" width="100">
13        <Svg.Polyline
14          points="10 10 20 12 30 20 40 60 60 70 95 90"
15          fill="none"
16          stroke="black"
17          strokeWidth="3"
18        />
19      </Svg.Svg>
20    );
21  }
22}
23
24class StraightLines extends React.Component {
25  static title = 'Another example with only straight lines';
26  render() {
27    return (
28      <Svg.Svg height="100" width="100">
29        <Svg.Polyline
30          points="0,20 20,20 20,40 40,40 40,60 60,60 60,80"
31          fill="none"
32          stroke="red"
33          strokeWidth="2"
34        />
35      </Svg.Svg>
36    );
37  }
38}
39
40class PolylineFill extends React.Component {
41  static title = 'Fill Polyline';
42  render() {
43    return (
44      <Svg.Svg height="100" width="100">
45        <Svg.Polyline
46          points="10,10 20,12 30,20 40,60 60,70 95,90"
47          fill="red"
48          stroke="black"
49          strokeWidth="3"
50        />
51      </Svg.Svg>
52    );
53  }
54}
55
56class PolylineFillStroke extends React.Component {
57  static title = 'Stroke Polyline with strokeLinecap and strokeLinejoin';
58  render() {
59    return (
60      <Svg.Svg height="100" width="100">
61        <Svg.Polyline
62          points="10,10 30,10 30,60 60,70 95,90"
63          fill="none"
64          stroke="blue"
65          strokeWidth="5"
66          strokeLinecap="round"
67          strokeLinejoin="round"
68        />
69      </Svg.Svg>
70    );
71  }
72}
73
74const icon = (
75  <Svg.Svg height="20" width="20">
76    <Svg.Polyline
77      points="2,2 4,2.5 6,4 8,12 12,14 20,18"
78      fill="none"
79      stroke="black"
80      strokeWidth="1"
81    />
82  </Svg.Svg>
83);
84
85const Polyline: Example = {
86  icon,
87  samples: [PolylineExample, StraightLines, PolylineFill, PolylineFillStroke],
88};
89
90export default Polyline;
91