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 { Path, Rect, G, Defs, Stop, RadialGradient, Polyline, ClipPath, Circle, Text } = Svg;
8
9class StrokeExample extends React.Component {
10  static title = 'The stroke property defines the color of a line, text or outline of an element';
11  render() {
12    return (
13      <Svg.Svg height="80" width="225">
14        <G strokeWidth="1">
15          <Path stroke="red" d="M5 20 l215 0" />
16          <Path stroke="black" d="M5 40 l215 0" />
17          <Path stroke="blue" d="M5 60 l215 0" />
18        </G>
19      </Svg.Svg>
20    );
21  }
22}
23
24class StrokeLinecap extends React.Component {
25  static title = 'The strokeLinecap property defines different types of endings to an open path';
26  render() {
27    return (
28      <Svg.Svg height="80" width="225">
29        <G stroke="red">
30          <G strokeWidth="8">
31            <Path strokeLinecap="butt" d="M5 20 l215 0" />
32            <Path strokeLinecap="round" d="M5 40 l215 0" />
33            <Path strokeLinecap="square" d="M5 60 l215 0" />
34          </G>
35        </G>
36      </Svg.Svg>
37    );
38  }
39}
40
41class StrokeDasharray extends React.Component {
42  static title = 'strokeDasharray';
43  render() {
44    return (
45      <Svg.Svg height="80" width="225">
46        <G fill="none" stroke="black" strokeWidth="4">
47          <Path strokeDasharray="5,5" d="M5 20 l215 0" />
48          <Path strokeDasharray="10,10" d="M5 40 l215 0" />
49          <Path strokeDasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
50        </G>
51      </Svg.Svg>
52    );
53  }
54}
55
56class StrokeDashoffset extends React.Component {
57  static title =
58    'the strokeDashoffset attribute specifies the distance into the dash pattern to start the dash.';
59  render() {
60    return (
61      <Svg.Svg height="80" width="200">
62        <Circle
63          cx="100"
64          cy="40"
65          r="35"
66          strokeWidth="5"
67          stroke="red"
68          fill="none"
69          strokeDasharray="100"
70          strokeDashoffset="100"
71        />
72        <Text
73          stroke="blue"
74          strokeWidth="1"
75          fill="none"
76          fontSize="20"
77          fontWeight="bold"
78          x="100"
79          y="40"
80          textAnchor="middle"
81          strokeDasharray="100"
82          strokeDashoffset="60">
83          STROKE
84        </Text>
85      </Svg.Svg>
86    );
87  }
88}
89
90class StrokePattern extends React.Component {
91  static title = 'Advanced stroke example.';
92  render() {
93    return (
94      <Svg.Svg height="80" width="200">
95        <Defs>
96          <RadialGradient id="grad" cx="50%" cy="50%" rx="80%" ry="80%" fx="50%" fy="50%">
97            <Stop offset="50%" stopColor="#fff" stopOpacity="0.5" />
98            <Stop offset="100%" stopColor="#f00" stopOpacity="1" />
99          </RadialGradient>
100          <ClipPath id="clip">
101            <Circle r="96" cx="100" cy="40" />
102          </ClipPath>
103        </Defs>
104        <Rect
105          x="5"
106          y="5"
107          height="70"
108          width="190"
109          fill="blue"
110          stroke="url(#grad)"
111          strokeWidth="5"
112          strokeDasharray="10"
113          clipPath="url(#clip)"
114        />
115
116        <Polyline
117          strokeDasharray="20,10,5,5,5,10"
118          points="10,10 20,12 30,20 40,60 60,70 90,55"
119          fill="none"
120          stroke="url(#grad)"
121          strokeLinecap="round"
122          strokeWidth="5"
123        />
124      </Svg.Svg>
125    );
126  }
127}
128
129const icon = (
130  <Svg.Svg height="20" width="20">
131    <G fill="none" stroke="black" strokeWidth="2">
132      <Path strokeDasharray="2,2" d="M0 4 h20" />
133      <Path strokeDasharray="4,4" d="M0 10 h20" />
134      <Path strokeDasharray="4,2,1,1,1,6" d="M0 19 h20" />
135    </G>
136  </Svg.Svg>
137);
138
139const Stroking: Example = {
140  icon,
141  samples: [StrokeExample, StrokeLinecap, StrokeDasharray, StrokeDashoffset, StrokePattern],
142};
143
144export default Stroking;
145