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 { Circle, Line, Rect, Text, Use } = Svg;
8
9interface State {
10  fill: string;
11}
12
13// See: https://github.com/expo/expo/pull/10229#discussion_r490961694
14// eslint-disable-next-line @typescript-eslint/ban-types
15class GExample extends React.Component<{}, State> {
16  static title = 'G children props inherit';
17
18  readonly state: State = {
19    fill: 'purple',
20  };
21
22  _unmounted?: boolean;
23
24  componentDidMount = () => {
25    setTimeout(() => {
26      if (!this._unmounted) {
27        this.setState({
28          fill: '#856',
29        });
30      }
31    }, 2000);
32  };
33
34  componentWillUnmount = () => {
35    this._unmounted = true;
36  };
37
38  render() {
39    return (
40      <Svg.Svg height="100" width="100">
41        <Svg.G fill={this.state.fill} stroke="pink" strokeWidth="3">
42          <Svg.G>
43            <Circle cx="25" cy="25" r="11" />
44          </Svg.G>
45          <Circle cx="25" cy="75" r="11" stroke="red" />
46          <Circle cx="50" cy="50" r="11" fill="green" />
47          <Circle cx="75" cy="25" r="11" stroke="red" />
48          <Circle cx="75" cy="75" r="11" />
49        </Svg.G>
50      </Svg.Svg>
51    );
52  }
53}
54
55class GTransform extends React.Component {
56  static title = 'G transform';
57  render() {
58    return (
59      <Svg.Svg height="100" width="200">
60        <Svg.G rotation="50" origin="40, 30" id="group">
61          <Line x1="60" y1="10" x2="140" y2="10" stroke="#060" strokeWidth="1" />
62
63          <Rect x="60" y="20" height="50" width="80" stroke="#060" strokeWidth="1" fill="#060" />
64
65          <Text x="100" y="75" stroke="#600" strokeWidth="1" fill="#600" textAnchor="middle">
66            Text grouped with shapes
67          </Text>
68        </Svg.G>
69        <Use
70          href="#group"
71          x="5"
72          y="40"
73          transform="rotate(-50)"
74          scale="0.75"
75          stroke="red"
76          opacity="0.5"
77        />
78      </Svg.Svg>
79    );
80  }
81}
82
83const icon = (
84  <Svg.Svg height="20" width="20">
85    <Svg.G fill="purple" stroke="pink" strokeWidth="1">
86      <Circle cx="5" cy="5" r="3" />
87      <Circle cx="5" cy="15" r="3" />
88      <Circle cx="10" cy="10" fill="green" r="3" />
89      <Circle cx="15" cy="5" r="3" />
90      <Circle cx="15" cy="15" r="3" />
91    </Svg.G>
92  </Svg.Svg>
93);
94
95const G: Example = {
96  icon,
97  samples: [GExample, GTransform],
98};
99
100export default G;
101