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