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 RectExample extends React.Component {
8  static title = 'Rect';
9  render() {
10    return (
11      <Svg.Svg width="200" height="60">
12        <Svg.Rect
13          x="5%"
14          y="5%"
15          width="90%"
16          height="90%"
17          fill="rgb(0,0,255)"
18          strokeWidth="3"
19          stroke="rgb(0,0,0)"
20          strokeDasharray="5,10"
21        />
22      </Svg.Svg>
23    );
24  }
25}
26
27class RectStrokeFill extends React.Component {
28  static title = '`stroke` and `fill` Rect';
29  render() {
30    return (
31      <Svg.Svg width="100" height="100">
32        <Svg.Rect
33          x="20"
34          y="20"
35          width="75"
36          height="75"
37          fill="blue"
38          fillOpacity="0.5"
39          stroke="red"
40          strokeWidth="5"
41          strokeOpacity="0.5"
42        />
43      </Svg.Svg>
44    );
45  }
46}
47
48class RoundedRect extends React.Component {
49  static title = 'A rectangle with rounded corners';
50  render() {
51    return (
52      <Svg.Svg width="100" height="100">
53        <Svg.Rect
54          x="20"
55          y="20"
56          rx="20"
57          ry="20"
58          width="75"
59          height="75"
60          fill="blue"
61          stroke="pink"
62          strokeWidth="5"
63        />
64      </Svg.Svg>
65    );
66  }
67}
68
69class EllipseRect extends React.Component {
70  static title = 'Rect with different `rx` and `ry`';
71  render() {
72    return (
73      <Svg.Svg width="100" height="100">
74        <Svg.Rect
75          x="20"
76          y="20"
77          rx="40"
78          ry="20"
79          width="75"
80          height="75"
81          fill="blue"
82          stroke="pink"
83          strokeWidth="5"
84        />
85      </Svg.Svg>
86    );
87  }
88}
89
90class RoundOverflowRect extends React.Component {
91  static title = 'Rect with `rx` or `ry` overflowed';
92  render() {
93    return (
94      <Svg.Svg width="100" height="100">
95        <Svg.Rect
96          x="20"
97          y="20"
98          ry="40"
99          width="75"
100          height="75"
101          fill="blue"
102          stroke="pink"
103          strokeWidth="5"
104        />
105      </Svg.Svg>
106    );
107  }
108}
109
110const icon = (
111  <Svg.Svg width="20" height="20">
112    <Svg.Rect
113      x="3"
114      y="5"
115      width="14"
116      height="10"
117      fill="rgb(0,0,255)"
118      strokeWidth="2"
119      stroke="rgb(255,0,0)"
120    />
121  </Svg.Svg>
122);
123
124const Rect: Example = {
125  icon,
126  samples: [RectExample, RectStrokeFill, RoundedRect, EllipseRect, RoundOverflowRect],
127};
128
129export default Rect;
130