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