From 6c7c2fdf3f0d7c6d51f396b8230ed79e285578ba Mon Sep 17 00:00:00 2001
From: Horcrux <master@horcrux.cn>
Date: Sun, 31 Jul 2016 22:01:14 +0800
Subject: [PATCH] Add touch events support for G elements

---
 Example/examples/TouchEvents.js | 19 +++++++++++++++++--
 README.md                       |  4 ++--
 elements/G.js                   | 15 +++++----------
 elements/Shape.js               |  2 +-
 elements/Use.js                 |  7 +------
 ios/Elements/RNSVGGroup.m       |  2 +-
 6 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/Example/examples/TouchEvents.js b/Example/examples/TouchEvents.js
index cc20b935..8963bcf2 100644
--- a/Example/examples/TouchEvents.js
+++ b/Example/examples/TouchEvents.js
@@ -5,7 +5,8 @@ import React, {
 import Svg, {
     Circle,
     Path,
-    Rect
+    Rect,
+    G
 } from 'react-native-svg';
 
 class PressExample extends Component {
@@ -65,6 +66,19 @@ class HoverExample extends Component {
             />
         </Svg>;
     }
+}
+
+class GroupExample extends Component {
+    static title = 'Bind touch events callback on Group element';
+
+    render () {
+        return <Svg height="120" width="120">
+            <G onPress={() => alert('Pressed')}>
+                <Rect x="20" y="20" width="40" height="40" fill="yellow" />
+                <Circle cx="80" cy="80" r="30" fill="green" />
+            </G>
+        </Svg>;
+    }
 
 }
 
@@ -83,7 +97,8 @@ const icon = <Svg
 
 const samples = [
     PressExample,
-    HoverExample
+    HoverExample,
+    GroupExample
 ];
 
 export {
diff --git a/README.md b/README.md
index 0e6e4cc8..3fd74445 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,7 @@
 
 [![Version](https://img.shields.io/npm/v/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg)
 [![Build Status](https://travis-ci.org/magicismight/react-native-svg.svg?branch=master)](https://travis-ci.org/magicismight/react-native-svg)
+[![Known Vulnerabilities](https://snyk.io/test/npm/react-native-svg/badge.svg)](https://snyk.io/test/npm/react-native-svg)
 
 `react-native-svg` is built to provide a SVG interface to react native on both iOS and Android
 
@@ -575,10 +576,9 @@ npm install
 
 #### TODO:
 1. add native method for elements
-2. more Text features support
+2. more Text features support (textPath, tref, tspan)
 3. Pattern element
 4. implement Animated elements
-5. refactor defs element (cannot use id prop for shape elements)
 
 #### Thanks:
 
diff --git a/elements/G.js b/elements/G.js
index c27ad5b8..d81530ae 100644
--- a/elements/G.js
+++ b/elements/G.js
@@ -1,10 +1,11 @@
-import React, {Component} from 'react';
+import React from 'react';
 import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';
+import Shape from './Shape';
 import {transformProps} from '../lib/props';
 import {GroupAttributes} from '../lib/attributes';
 import extractProps from '../lib/extract/extractProps';
 
-class G extends Component{
+class G extends Shape{
     static displayName = 'G';
 
     static propTypes = transformProps;
@@ -16,17 +17,11 @@ class G extends Component{
     render() {
         let {props} = this;
 
-        let extractedProps = extractProps(props, {
-            stroke: true,
-            fill: true,
-            transform: true
-        });
-
         return <RNSVGGroup
-            {...extractedProps}
+            {...this.extractProps(props)}
             ref={ele => {this.root = ele;}}
         >
-            {this.props.children}
+            {props.children}
         </RNSVGGroup>;
     }
 }
diff --git a/elements/Shape.js b/elements/Shape.js
index 911f5a94..25d13461 100644
--- a/elements/Shape.js
+++ b/elements/Shape.js
@@ -12,7 +12,7 @@ class Shape extends Component {
         this.state = this.touchableGetInitialState();
     }
 
-    extractProps = (props, options = {stroke: true, transform: true, fill: true, responder: true}) => {
+    extractProps = (props, options) => {
         let extractedProps = extractProps(props, options);
         if (extractedProps.touchable && !extractedProps.disabled) {
             _.assign(extractedProps, {
diff --git a/elements/Use.js b/elements/Use.js
index 6e52a944..f02645f4 100644
--- a/elements/Use.js
+++ b/elements/Use.js
@@ -34,12 +34,7 @@ class Use extends Shape {
             console.warn('Invalid `href` prop for `Use` element, expected a href like `"#id"`, but got: "' + props.href + '"');
         }
 
-        let extractedProps = this.extractProps(props, {
-            stroke: true,
-            fill: true,
-            responder: true,
-            transform: true
-        });
+        let extractedProps = this.extractProps(props);
 
         return <RNSVGUse
             ref={ele => {this.root = ele;}}
diff --git a/ios/Elements/RNSVGGroup.m b/ios/Elements/RNSVGGroup.m
index f9b4b14b..18a0896e 100644
--- a/ios/Elements/RNSVGGroup.m
+++ b/ios/Elements/RNSVGGroup.m
@@ -46,7 +46,7 @@
         if ([node isKindOfClass:[RNSVGNode class]]) {
             UIView *view = [node hitTest: point withEvent:event];
             if (view) {
-                return view;
+                return self;
             }
         }
     }