1/* eslint-disable */
2// tslint:disable max-classes-per-file
3import React from 'react';
4import * as Svg from 'react-native-svg';
5
6import Example from './Example';
7
8const { Circle, Path, Rect, G, Text, ClipPath, Defs } = Svg;
9
10class PressExample extends React.Component {
11  static title =
12    'Press on the red circle or long press on the blue rectangle to trigger the events';
13
14  render() {
15    return (
16      <Svg.Svg height="100" width="100">
17        <Circle cx="50%" cy="50%" r="38%" fill="red" onPress={() => alert('Press on Circle')} />
18        <Rect
19          x="20%"
20          y="20%"
21          width="60%"
22          height="60%"
23          fill="blue"
24          onLongPress={() => alert('Long press on Rect')}
25        />
26        <Path d="M50,5L20,99L95,39L5,39L80,99z" fill="pink" />
27      </Svg.Svg>
28    );
29  }
30}
31
32class HoverExample extends React.Component {
33  static title = 'Hover the svg path';
34
35  state: { hover: boolean } = {
36    hover: false,
37  };
38
39  toggle = () => {
40    this.setState({ hover: !this.state.hover });
41  };
42
43  render() {
44    return (
45      <Svg.Svg height="120" width="120">
46        <Defs>
47          <ClipPath id="clip">
48            <Circle r="30" cx="50%" cy="50%" />
49          </ClipPath>
50        </Defs>
51        <G>
52          <G>
53            <Path
54              d="M50,5L20,99L95,39L5,39L80,99z"
55              clipPath="url(#clip)"
56              stroke={this.state.hover ? 'rgba(10, 10, 10, 0.5)' : 'black'}
57              fill={this.state.hover ? 'pink' : 'red'}
58              strokeWidth="6"
59              delayPressIn={0}
60              onPressIn={this.toggle}
61              onPressOut={this.toggle}
62              x="0"
63              y="0"
64              scale="1.2"
65            />
66          </G>
67        </G>
68      </Svg.Svg>
69    );
70  }
71}
72
73class GroupExample extends React.Component {
74  static title = 'Bind touch events callback on Group element with viewBox';
75
76  render() {
77    return (
78      <Svg.Svg height="120" width="120" viewBox="0 0 240 240">
79        <G onPress={() => alert('Pressed on G')}>
80          <G scale="1.4">
81            <G>
82              <Circle cx="80" cy="80" r="30" fill="green" x="20" scale="1.2" />
83              <Text
84                fontWeight="bold"
85                fontSize="40"
86                x="50"
87                y="10"
88                scale="2"
89                onPress={() => alert('Pressed on Text')}>
90                H
91              </Text>
92              <Rect x="20" y="20" width="40" height="40" fill="yellow" />
93            </G>
94          </G>
95        </G>
96      </Svg.Svg>
97    );
98  }
99}
100
101const icon = (
102  <Svg.Svg height="20" width="20">
103    <Circle fill="#ccc" stroke="#000" cx="11.1" cy="4.4" r="2.6" />
104    <Path
105      fill="#fff"
106      stroke="#000"
107      strokeWidth="1"
108      strokeLinecap="round"
109      strokeLinejoin="round"
110      // tslint:disable max-line-length
111      d={`
112M6.2,9.4
113c0,0,0-0.1,0-0.2c0-0.2,0.1-0.3,0.1-0.4c0.2-0.4,0.5-0.7,1-0.7c0.3,0,0.5,0,0.6,0h0.1v0.7V10 M8.1,8.8c0,0,0-0.1,0-0.2
114c0-0.2,0.1-0.3,0.1-0.4c0.2-0.4,0.5-0.7,1-0.7c0.3,0,0.5,0,0.6,0h0.1v1.9 M10.1,7.5v-2c0,0,0-0.1,0-0.2c0-0.2,0.1-0.3,0.1-0.4
115c0.2-0.4,0.5-0.6,0.9-0.7c0.4,0,0.7,0.2,0.9,0.7C12,5,12,5.2,12,5.4c0,0.1,0,0.1,0,0.2v6c1.4-1.8,2.4-1.8,2.8,0.1
116c-1.7,1.5-2.9,3.7-3.4,6.4l-5.8,0c-0.2-0.6-0.5-1.4-0.7-2.5c-0.3-1-0.5-2.5-0.6-4.5l0-0.8c0-0.1,0-0.1,0-0.2c0-0.2,0.1-0.3,0.1-0.4
117c0.2-0.4,0.5-0.7,1-0.7c0.3,0,0.5,0,0.6,0l0.1,0v0.5c0,0,0,0,0,0l0,1.1l0,0.2 M6.2,10.9l0-0.4
118      `}
119      // tslint:enable max-line-length
120    />
121  </Svg.Svg>
122);
123
124const TouchEvents: Example = {
125  icon,
126  samples: [PressExample, HoverExample, GroupExample],
127};
128
129export default TouchEvents;
130