refactor Components props extracting

README.md

@@ -605,8 +605,9 @@ npm i
 1. Add Native method for elements.
 2. Pattern element.
 3. Mask element.
-4. Load Image from URL.
+4. Marker element.
-5. Transform prop support.
+5. Load Image from URL.
+6. Transform prop support.
 
 ### Known issues:
 1. Unable to apply focus point of RadialGradient on Android.

elements/Circle.js

@@ -3,8 +3,9 @@ import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src
 import Shape from './Shape';
 import {CircleAttributes} from '../lib/attributes';
 import {pathProps, numberProp} from '../lib/props';
+import extractProps from '../lib/extract/extractProps';
 
-class Circle extends Shape {
+export default class extends Shape {
     static displayName = 'Circle';
 
     static propTypes = {
@@ -28,7 +29,7 @@ class Circle extends Shape {
         let props = this.props;
         return <RNSVGCircle
             ref={ele => {this.root = ele;}}
-            {...this.extractProps(props)}
+            {...extractProps(props, this)}
             cx={props.cx.toString()}
             cy={props.cy.toString()}
             r={props.r.toString()}
@@ -42,5 +43,3 @@ const RNSVGCircle = createReactNativeComponentClass({
     validAttributes: CircleAttributes,
     uiViewClassName: 'RNSVGCircle'
 });
-
-export default Circle;

elements/ClipPath.js

@@ -2,16 +2,14 @@ import React, {Component, PropTypes} from 'react';
 import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
 import {ClipPathAttributes} from '../lib/attributes';
 
-class ClipPath extends Component{
+export default class extends Component{
     static displayName = 'ClipPath';
     static propTypes = {
         id: PropTypes.string.isRequired
     };
 
     render() {
-        return <RNSVGClipPath
+        return <RNSVGClipPath name={this.props.id}>{this.props.children}</RNSVGClipPath>;
-            name={this.props.id}
-        >{this.props.children}</RNSVGClipPath>;
     }
 }
 
@@ -19,6 +17,3 @@ const RNSVGClipPath = createReactNativeComponentClass({
     validAttributes: ClipPathAttributes,
     uiViewClassName: 'RNSVGClipPath'
 });
-
-export default ClipPath;
-

elements/Defs.js

@@ -1,9 +1,7 @@
-import React, {
+import React, { Component } from 'react';
-    Component,
-} from 'react';
 import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
 
-class Defs extends Component {
+export default class extends Component {
     static displayName = 'Defs';
 
     render() {
@@ -15,5 +13,3 @@ const RNSVGDefs = createReactNativeComponentClass({
     validAttributes: {},
     uiViewClassName: 'RNSVGDefs'
 });
-
-export default Defs;

elements/Ellipse.js

@@ -3,8 +3,9 @@ import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src
 import Shape from './Shape';
 import {pathProps, numberProp} from '../lib/props';
 import {EllipseAttributes} from '../lib/attributes';
+import extractProps from '../lib/extract/extractProps';
 
-class Ellipse extends Shape{
+export default class extends Shape{
     static displayName = 'Ellipse';
 
     static propTypes = {
@@ -31,7 +32,7 @@ class Ellipse extends Shape{
 
         return <RNSVGEllipse
             ref={ele => {this.root = ele;}}
-            {...this.extractProps(props)}
+            {...extractProps(props, this)}
             cx={props.cx.toString()}
             cy={props.cy.toString()}
             rx={props.rx.toString()}
@@ -44,5 +45,3 @@ const RNSVGEllipse = createReactNativeComponentClass({
     validAttributes: EllipseAttributes,
     uiViewClassName: 'RNSVGEllipse'
 });
-
-export default Ellipse;

elements/G.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
 import Shape from './Shape';
-import {transformProps} from '../lib/props';
+import {pathProps} from '../lib/props';
 import {GroupAttributes} from '../lib/attributes';
+import extractProps from '../lib/extract/extractProps';
 
-class G extends Shape{
+export default class extends Shape{
     static displayName = 'G';
 
-    static propTypes = transformProps;
+    static propTypes = pathProps;
 
     setNativeProps = (...args) => {
         this.root.setNativeProps(...args);
@@ -17,7 +18,7 @@ class G extends Shape{
         let {props} = this;
 
         return <RNSVGGroup
-            {...this.extractProps(props)}
+            {...extractProps(props, this)}
             ref={ele => {this.root = ele;}}
         >
             {props.children}
@@ -29,8 +30,3 @@ const RNSVGGroup = createReactNativeComponentClass({
     validAttributes: GroupAttributes,
     uiViewClassName: 'RNSVGGroup'
 });
-
-export default G;
-export {
-    RNSVGGroup as NativeGroup
-};

elements/Image.js

@@ -5,9 +5,11 @@ import {numberProp, touchableProps, responderProps} from '../lib/props';
 import Shape from './Shape';
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 import {meetOrSliceTypes, alignEnum} from '../lib/extract/extractViewBox';
+import extractProps from '../lib/extract/extractProps';
+
 const spacesRegExp = /\s+/;
 
-class Image extends Shape {
+export default class extends Shape {
     static displayName = 'Image';
     static propTypes = {
         ...responderProps,
@@ -40,7 +42,7 @@ class Image extends Shape {
 
         return <RNSVGImage
             ref={ele => {this.root = ele;}}
-            {...this.extractProps({...props, x: null, y: null}, {responder: true, transform: true})}
+            {...extractProps({...props, x: null, y: null}, this)}
             x={props.x.toString()}
             y={props.y.toString()}
             width={props.width.toString()}
@@ -56,5 +58,3 @@ const RNSVGImage = createReactNativeComponentClass({
     validAttributes: ImageAttributes,
     uiViewClassName: 'RNSVGImage'
 });
-
-export default Image;

elements/Line.js

@@ -3,8 +3,9 @@ import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src
 import {LineAttributes} from '../lib/attributes';
 import Shape from './Shape';
 import {pathProps, numberProp} from '../lib/props';
+import extractProps from '../lib/extract/extractProps';
 
-class Line extends Shape {
+export default class extends Shape {
     static displayName = 'Line';
 
     static propTypes = {
@@ -30,7 +31,7 @@ class Line extends Shape {
         let props = this.props;
         return <RNSVGLine
             ref={ele => {this.root = ele;}}
-            {...this.extractProps(props)}
+            {...extractProps(props, this)}
             x1={props.x1.toString()}
             y1={props.y1.toString()}
             x2={props.x2.toString()}
@@ -43,5 +44,3 @@ const RNSVGLine = createReactNativeComponentClass({
     validAttributes: LineAttributes,
     uiViewClassName: 'RNSVGLine'
 });
-
-export default Line;

elements/LinearGradient.js

@@ -4,7 +4,7 @@ import extractGradient from '../lib/extract/extractGradient';
 import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
 import {LinearGradientAttributes} from '../lib/attributes';
 
-class LinearGradient extends Component{
+export default class extends Component{
     static displayName = 'LinearGradient';
     static propTypes = {
         x1: numberProp.isRequired,
@@ -38,6 +38,3 @@ const RNSVGLinearGradient = createReactNativeComponentClass({
     validAttributes: LinearGradientAttributes,
     uiViewClassName: 'RNSVGLinearGradient'
 });
-
-
-export default LinearGradient;

elements/Path.js

@@ -3,8 +3,9 @@ import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src
 import {PathAttributes} from '../lib/attributes';
 import Shape from './Shape';
 import {pathProps} from '../lib/props';
+import extractProps from '../lib/extract/extractProps';
 
-class Path extends Shape {
+export default class extends Shape {
     static displayName = 'Path';
 
     static propTypes = {
@@ -22,7 +23,7 @@ class Path extends Shape {
         return (
             <RNSVGPath
                 ref={ele => {this.root = ele;}}
-                {...this.extractProps(props)}
+                {...extractProps(props, this)}
                 d={props.d}
             />
         );
@@ -33,5 +34,3 @@ const RNSVGPath = createReactNativeComponentClass({
     validAttributes: PathAttributes,
     uiViewClassName: 'RNSVGPath'
 });
-
-export default Path;

elements/Pattern.js

@@ -1,14 +1,13 @@
 import {Component, PropTypes} from 'react';
+import {numberProp} from '../lib/props';
 
-let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+export default class extends Component{
-
-class Pattern extends Component{
     static displayName = 'Pattern';
     static propTypes = {
-        x1: propType,
+        x1: numberProp,
-        x2: propType,
+        x2: numberProp,
-        y1: propType,
+        y1: numberProp,
-        y2: propType,
+        y2: numberProp,
         patternTransform: PropTypes.string,
         patternUnits: PropTypes.oneOf(['userSpaceOnUse', 'objectBoundingBox']),
         patternContentUnits: PropTypes.oneOf(['userSpaceOnUse', 'objectBoundingBox'])
@@ -19,5 +18,3 @@ class Pattern extends Component{
         return null;
     }
 }
-
-export default Pattern;

elements/Polygon.js

@@ -1,9 +1,8 @@
 import React, {Component, PropTypes} from 'react';
 import Path from './Path';
 import {pathProps} from '../lib/props';
-import _ from 'lodash';
 
-class Polygon extends Component{
+export default class extends Component{
     static displayName = 'Polygon';
     static propTypes = {
         ...pathProps,
@@ -20,7 +19,7 @@ class Polygon extends Component{
 
     render() {
         let points = this.props.points;
-        if (_.isArray(points)) {
+        if (Array.isArray(points)) {
             points = points.join(',');
         }
 
@@ -31,4 +30,3 @@ class Polygon extends Component{
         />;
     }
 }
-export default Polygon;

elements/Polyline.js

@@ -1,9 +1,8 @@
 import React, {Component, PropTypes} from 'react';
 import Path from './Path';
 import {pathProps} from '../lib/props';
-import _ from 'lodash';
 
-class Polyline extends Component{
+export default class extends Component{
     static displayName = 'Polyline';
     static propTypes = {
         ...pathProps,
@@ -20,7 +19,7 @@ class Polyline extends Component{
 
     render() {
         let points = this.props.points;
-        if (_.isArray(points)) {
+        if (Array.isArray(points)) {
             points = points.join(',');
         }
 
@@ -31,4 +30,3 @@ class Polyline extends Component{
         />;
     }
 }
-export default Polyline;

elements/RadialGradient.js

@@ -4,7 +4,7 @@ import extractGradient from '../lib/extract/extractGradient';
 import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
 import {RadialGradientAttributes} from '../lib/attributes';
 
-class RadialGradient extends Component{
+export default class extends Component{
     static displayName = 'RadialGradient';
     static propTypes = {
         fx: numberProp.isRequired,
@@ -44,5 +44,3 @@ const RNSVGRadialGradient = createReactNativeComponentClass({
     validAttributes: RadialGradientAttributes,
     uiViewClassName: 'RNSVGRadialGradient'
 });
-
-export default RadialGradient;

elements/Rect.js

@@ -3,9 +3,10 @@ import './Path'; // must import Path first, don`t know why. without this will th
 import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
 import {pathProps, numberProp} from '../lib/props';
 import {RectAttributes} from '../lib/attributes';
+import extractProps from '../lib/extract/extractProps';
 import Shape from './Shape';
 
-class Rect extends Shape {
+export default class extends Shape {
     static displayName = 'Rect';
 
     static propTypes = {
@@ -36,11 +37,11 @@ class Rect extends Shape {
 
         return <RNSVGRect
             ref={ele => {this.root = ele;}}
-            {...this.extractProps({
+            {...extractProps({
                 ...props,
                 x: null,
                 y: null
-            })}
+            }, this)}
             x={props.x.toString()}
             y={props.y.toString()}
             width={props.width.toString()}
@@ -55,5 +56,3 @@ const RNSVGRect = createReactNativeComponentClass({
     validAttributes: RectAttributes,
     uiViewClassName: 'RNSVGRect'
 });
-
-export default Rect;

elements/Shape.js

@@ -1,5 +1,4 @@
 import {Component} from 'react';
-import extractProps from '../lib/extract/extractProps';
 import SvgTouchableMixin from '../lib/SvgTouchableMixin';
 import _ from 'lodash';
 
@@ -11,22 +10,6 @@ class Shape extends Component {
         });
         this.state = this.touchableGetInitialState();
     }
-
-    extractProps = (props = {}, options) => {
-        let extractedProps = extractProps(props, options);
-        if (extractedProps.touchable && !extractedProps.disabled) {
-            _.assign(extractedProps, {
-                onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
-                onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
-                onResponderGrant: this.touchableHandleResponderGrant,
-                onResponderMove: this.touchableHandleResponderMove,
-                onResponderRelease: this.touchableHandleResponderRelease,
-                onResponderTerminate: this.touchableHandleResponderTerminate
-            });
-        }
-
-        return extractedProps;
-    }
 }
 
 export default Shape;

elements/Stop.js

@@ -1,7 +1,7 @@
 import {Component, PropTypes} from 'react';
 import {numberProp} from '../lib/props';
 
-class Stop extends Component{
+export default class extends Component{
     static displayName = 'Stop';
     static propTypes = {
         stopColor: PropTypes.string,
@@ -17,6 +17,3 @@ class Stop extends Component{
         return null;
     }
 }
-
-export default Stop;
-

elements/Symbol.js

@@ -3,9 +3,9 @@ import extractViewBox from '../lib/extract/extractViewBox';
 import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
 import {SymbolAttributes} from '../lib/attributes';
 
-class SymbolElement extends Component{
+export default class extends Component{
     static displayName = 'Symbol';
-    static propType = {
+    static propTypes = {
         id: PropTypes.string.isRequired,
         viewBox: PropTypes.string,
         preserveAspectRatio: PropTypes.string
@@ -26,5 +26,3 @@ const RNSVGSymbol = createReactNativeComponentClass({
     validAttributes: SymbolAttributes,
     uiViewClassName: 'RNSVGSymbol'
 });
-
-export default SymbolElement;

elements/TSpan.js

@@ -1,12 +1,13 @@
-import React, { PropTypes, Component } from 'react';
+import React, { PropTypes } from 'react';
 import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
 import extractText from '../lib/extract/extractText';
 import {numberProp, pathProps, fontProps} from '../lib/props';
 import {TSpanAttibutes} from '../lib/attributes';
+import extractProps from '../lib/extract/extractProps';
 import Shape from './Shape';
 
 // TSpan elements are shadow components
-class TSpan extends Shape {
+export default class extends Shape {
     static displayName = 'TSpan';
 
     static propTypes = {
@@ -41,11 +42,11 @@ class TSpan extends Shape {
         let props = this.props;
         return <RNSVGTSpan
             ref={ele => {this.root = ele;}}
-            {...this.extractProps({
+            {...extractProps({
                 ...props,
                 x: null,
                 y: null
-            })}
+            }, this)}
             {...extractText(props)}
         />;
     }
@@ -55,5 +56,3 @@ const RNSVGTSpan = createReactNativeComponentClass({
     validAttributes: TSpanAttibutes,
     uiViewClassName: 'RNSVGTSpan'
 });
-
-export default TSpan;

elements/Text.js

@@ -3,10 +3,10 @@ import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src
 import extractText from '../lib/extract/extractText';
 import {numberProp, pathProps, fontProps} from '../lib/props';
 import {TextAttributes} from '../lib/attributes';
+import extractProps from '../lib/extract/extractProps';
 import Shape from './Shape';
-import TSpan from './TSpan';
 
-class Text extends Shape {
+export default class extends Shape {
     static displayName = 'Text';
 
     static propTypes = {
@@ -42,11 +42,11 @@ class Text extends Shape {
 
         return <RNSVGText
             ref={ele => {this.root = ele;}}
-            {...this.extractProps({
+            {...extractProps({
                 ...props,
                 x: null,
                 y: null
-            })}
+            }, this)}
             {...extractText(props, true)}
         />;
     }
@@ -56,5 +56,3 @@ const RNSVGText = createReactNativeComponentClass({
     validAttributes: TextAttributes,
     uiViewClassName: 'RNSVGText'
 });
-
-export default Text;

elements/TextPath.js

@@ -4,11 +4,12 @@ import {TextPathAttributes} from '../lib/attributes';
 import extractText from '../lib/extract/extractText';
 import Shape from './Shape';
 import {pathProps, fontProps, numberProp} from '../lib/props';
+import extractProps from '../lib/extract/extractProps';
 import TSpan from './TSpan';
 
 const idExpReg = /^#(.+)$/;
 
-class TextPath extends Shape {
+export default class extends Shape {
     static displayName = 'Span';
 
     static propTypes = {
@@ -28,11 +29,11 @@ class TextPath extends Shape {
 
                 return <RNSVGTextPath
                     href={href}
-                    {...this.extractProps({
+                    {...extractProps({
                         ...props,
                         x: null,
                         y: null
-                    })}
+                    }, this)}
                     {...extractText({
                         children,
                         startOffset
@@ -51,5 +52,3 @@ const RNSVGTextPath = createReactNativeComponentClass({
     validAttributes: TextPathAttributes,
     uiViewClassName: 'RNSVGTextPath'
 });
-
-export default TextPath;

elements/Use.js

@@ -1,12 +1,12 @@
-import {PropTypes} from 'react';
+import React, {PropTypes} from 'react';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import extractProps from '../lib/extract/extractProps';
 import {pathProps, numberProp} from '../lib/props';
 import {UseAttributes} from '../lib/attributes';
 import Shape from './Shape';
-import React from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
 
 const idExpReg = /^#(.+)$/;
-class Use extends Shape {
+export default class extends Shape {
     static displayName = 'Use';
 
     static propTypes = {
@@ -21,9 +21,9 @@ class Use extends Shape {
     };
 
     render() {
-        let {props} = this;
+        const {props} = this;
         // match "url(#pattern)"
-        let matched = props.href.match(idExpReg);
+        const matched = props.href.match(idExpReg);
         let href;
 
         if (matched) {
@@ -34,11 +34,9 @@ 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);
-
         return <RNSVGUse
             ref={ele => {this.root = ele;}}
-            {...extractedProps}
+            {...extractProps(props, this)}
             href={href}
             width={props.width}
             height={props.height}
@@ -51,5 +49,3 @@ const RNSVGUse = createReactNativeComponentClass({
     uiViewClassName: 'RNSVGUse'
 });
 
-export default Use;
-

lib/Matrix2D.js

@@ -2,7 +2,6 @@
  * based on
  * https://github.com/CreateJS/EaselJS/blob/631cdffb85eff9413dab43b4676f059b4232d291/src/easeljs/geom/Matrix2D.js
  */
-import _ from 'lodash';
 const DEG_TO_RAD = Math.PI / 180;
 
 /**
@@ -25,7 +24,7 @@ const DEG_TO_RAD = Math.PI / 180;
  * @param {Number} [ty=0] Specifies the ty property for the new matrix.
  * @constructor
  **/
-class Matrix2D {
+export default class Matrix2D {
     constructor(a, b, c, d, tx, ty) {
         this.setTransform(a, b, c, d, tx, ty);
 
@@ -80,11 +79,11 @@ class Matrix2D {
      * @return {Matrix2D} This instance. Useful for chaining method calls.
      */
     setTransform = function(a, b, c, d, tx, ty) {
-        // don't forget to update docs in the constructor if these change:
+        /*eslint eqeqeq:0*/
-        this.a = _.isNil(a) ? 1 : a;
+        this.a = a == null ? 1 : a;
         this.b = b || 0;
         this.c = c || 0;
-        this.d = _.isNil(d) ? 1 : d;
+        this.d = b == null ? 1 : d;
         this.tx = tx || 0;
         this.ty = ty || 0;
         return this;
@@ -281,5 +280,3 @@ class Matrix2D {
         return this;
     };
 }
-
-export default Matrix2D;

lib/attributes.js

@@ -1,4 +1,3 @@
-const merge = Object.assign;
 
 function arrayDiffer(a, b) {
     /*eslint eqeqeq:0*/
@@ -70,25 +69,31 @@ const FillAndStrokeAttributes = {
     strokeMiterlimit: true
 };
 
-const RenderableAttributes = merge({}, NodeAttributes, FillAndStrokeAttributes);
+const RenderableAttributes = {
+    ...NodeAttributes,
+    ...FillAndStrokeAttributes
+};
 
 const GroupAttributes = RenderableAttributes;
 
-const UseAttributes = merge({
+const UseAttributes = {
     href: true,
     width: true,
-    height: true
+    height: true,
-}, RenderableAttributes);
+    ...RenderableAttributes
+};
 
-const SymbolAttributes = merge({
+const SymbolAttributes = {
-    name: true
+    name: true,
-}, ViewBoxAttributes);
+    ...ViewBoxAttributes
+};
 
-const PathAttributes = merge({
+const PathAttributes = {
-    d: true
+    d: true,
-}, RenderableAttributes);
+    ...RenderableAttributes
+};
 
-const TextAttributes = merge({
+const TextAttributes = {
     font: {
         diff: fontDiffer
     },
@@ -96,88 +101,99 @@ const TextAttributes = merge({
     deltaX: arrayDiffer,
     deltaY: arrayDiffer,
     positionX: true,
-    positionY: true
+    positionY: true,
-}, RenderableAttributes);
+    ...RenderableAttributes
+};
 
-const TextPathAttributes = merge({
+const TextPathAttributes = {
     href: true,
-    startOffset: true
+    startOffset: true,
-}, RenderableAttributes);
+    ...RenderableAttributes
+};
 
-const TSpanAttibutes = merge({
+const TSpanAttibutes = {
-    content: true
+    content: true,
-}, TextAttributes);
+    ...TextAttributes
+};
 
 const ClipPathAttributes = {
     name: true
 };
 
-const GradientAttributes = merge({
+const GradientAttributes = {
     gradient: {
         diff: arrayDiffer
     },
     gradientUnits: true,
     gradientTransform: {
         diff: arrayDiffer
-    }
+    },
-}, ClipPathAttributes);
+    ...ClipPathAttributes
+};
 
-const LinearGradientAttributes = merge({
+const LinearGradientAttributes = {
     x1: true,
     y1: true,
     x2: true,
-    y2: true
+    y2: true,
-}, GradientAttributes);
+    ...GradientAttributes
+};
 
-const RadialGradientAttributes = merge({
+const RadialGradientAttributes = {
     fx: true,
     fy: true,
     rx: true,
     ry: true,
     cx: true,
     cy: true,
-    r: true
+    r: true,
-}, GradientAttributes);
+    ...GradientAttributes
+};
 
 
-const CircleAttributes = merge({
+const CircleAttributes = {
     cx: true,
     cy: true,
-    r: true
+    r: true,
-}, RenderableAttributes);
+    ...RenderableAttributes
+};
 
-const EllipseAttributes = merge({
+const EllipseAttributes = {
     cx: true,
     cy: true,
     rx: true,
-    ry: true
+    ry: true,
-}, RenderableAttributes);
+    ...RenderableAttributes
+};
 
-const ImageAttributes = merge({
+const ImageAttributes = {
     x: true,
     y: true,
     width: true,
     height: true,
     src: true,
     align: true,
-    meetOrSlice: true
+    meetOrSlice: true,
-}, RenderableAttributes);
+    ...RenderableAttributes
+};
 
-const LineAttributes = merge({
+const LineAttributes = {
     x1: true,
     y1: true,
     x2: true,
-    y2: true
+    y2: true,
-}, RenderableAttributes);
+    ...RenderableAttributes
+};
 
-const RectAttributes = merge({
+const RectAttributes = {
     x: true,
     y: true,
     width: true,
     height: true,
     rx: true,
-    ry: true
+    ry: true,
-}, RenderableAttributes);
+    ...RenderableAttributes
+};
 
 export {
     PathAttributes,

lib/extract/extractBrush.js

@@ -1,9 +1,9 @@
 import Color from 'color';
-import _ from 'lodash';
 import patternReg from './patternReg';
 
 export default function (colorOrBrush) {
-    if (colorOrBrush === 'none' || _.isNil(colorOrBrush)) {
+    /*eslint eqeqeq:0*/
+    if (colorOrBrush === 'none' || colorOrBrush == null) {
         return null;
     }
 

lib/extract/extractClipPath.js

@@ -7,19 +7,19 @@ const clipRules = {
 
 export default function (props) {
     let {clipPath, clipRule} = props;
-    let clippingProps = {};
+    let clipPathProps = {};
 
     if (clipPath) {
-        clippingProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1;
+        clipPathProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1;
 
         let matched = clipPath.match(clipReg);
 
         if (matched) {
-            clippingProps.clipPath = matched[1];
+            clipPathProps.clipPath = matched[1];
         } else {
             console.warn('Invalid `clipPath` prop, expected a clipPath like `"#id"`, but got: "' + clipPath + '"');
         }
     }
 
-    return clippingProps;
+    return clipPathProps;
 }

lib/extract/extractFill.js

@@ -1,16 +1,25 @@
 import extractBrush from './extractBrush';
 import extractOpacity from './extractOpacity';
-import _ from 'lodash';
+import {fillProps} from '../props';
 
 const fillRules = {
     evenodd: 0,
     nonzero: 1
 };
 
-export default function(props) {
+const fillKeys = Object.keys(fillProps);
+
+export default function(props, styleProperties) {
+    fillKeys.forEach((name) => {
+        if (props.hasOwnProperty(name)) {
+            styleProperties.push(name);
+        }
+    });
+
     return {
         // default fill is black
-        fill: extractBrush(_.isNil(props.fill) ? '#000' : props.fill),
+        /*eslint eqeqeq:0*/
+        fill: extractBrush(props.fill == null ? '#000' : props.fill),
         fillOpacity: extractOpacity(props.fillOpacity),
         fillRule: fillRules[props.fillRule] === 0 ? 0 : 1
     };

lib/extract/extractGradient.js

@@ -1,4 +1,4 @@
-import {Children, Component} from 'react';
+import {Children} from 'react';
 import _ from 'lodash';
 import Color from 'color';
 

lib/extract/extractProps.js

@@ -1,32 +1,16 @@
 import extractFill from './extractFill';
 import extractStroke from './extractStroke';
 import extractTransform from './extractTransform';
-import extractClipping from './extractClipping';
+import extractClipPath from './extractClipPath';
 import extractResponder from './extractResponder';
 import extractOpacity from './extractOpacity';
-import {fillAndStrokePropsKeys} from '../props';
-import _ from 'lodash';
 
-export default function(props, options = {stroke: true, transform: true, fill: true, responder: true}) {
+export default function(props, ref) {
-    let propList = [];
+    const styleProperties = [];
-    fillAndStrokePropsKeys.forEach(name => {
-        if (!_.isNil(props[name])) {
-            // clipPath prop may provide `clipPathRef` as native prop
-            if (name === 'clipPath') {
-                if (extractedProps[name]) {
-                    propList.push(name);
-                } else if (extractedProps.clipPathRef) {
-                    propList.push('clipPathRef');
-                }
-            } else {
-                propList.push(name);
-            }
-        }
-    });
 
-    let extractedProps = {
+    const extractedProps = {
         opacity: extractOpacity(props.opacity),
-        propList
+        propList: styleProperties
     };
 
     if (props.id) {
@@ -34,26 +18,19 @@ export default function(props, options = {stroke: true, transform: true, fill: t
     }
 
     if (props.clipPath) {
-        _.assign(extractedProps, extractClipping(props));
+        Object.assign(extractedProps, extractClipPath(props));
     }
 
-    if (options.stroke) {
+    Object.assign(extractedProps, extractStroke(props, styleProperties));
-        _.assign(extractedProps, extractStroke(props));
+    Object.assign(extractedProps, extractFill(props, styleProperties));
-    }
 
-    if (options.fill) {
+    if (props.transform) {
-        _.assign(extractedProps, extractFill(props));
-    }
-
-    if (options.transform) {
-        extractedProps.matrix = extractTransform(props);
-    } else if (props.transform) {
         extractedProps.matrix = extractTransform(props.transform);
+    } else {
+        extractedProps.matrix = extractTransform(props);
     }
 
-    if (options.responder) {
+    Object.assign(extractedProps, extractResponder(props, ref));
-        _.assign(extractedProps, extractResponder(props));
-    }
 
     return extractedProps;
 }

lib/extract/extractResponder.js

@@ -1,26 +1,37 @@
 import {responderProps, touchableProps} from '../props';
 import _ from 'lodash';
 
-export default function (props) {
+export default function (props, ref) {
-    let responsible;
+    const extractedProps = {};
-    let touchable;
 
-    return _.reduce(props, (prev, value, key) => {
+    _.forEach(responderProps, (v, key) => {
-        if (value && (responderProps[key] || touchableProps[key])) {
+        const value = props[key];
-            prev[key] = value;
+        if (props[key]) {
-            if (!responsible) {
+            if (!extractedProps.responsible && key !== 'pointerEvents') {
-                responsible = true;
+                extractedProps.responsible = true;
-                prev.responsible = true;
-            }
-            if (!touchable && touchableProps[key]) {
-                touchable = true;
-                prev.touchable = true;
             }
+
+            extractedProps[key] = value;
+        }
+    });
+
+    _.every(touchableProps, (v, key) => {
+        if (!props[key]) {
+            return true;
         }
 
-        return prev;
+        extractedProps.responsible = true;
-    }, {
+        Object.assign(extractedProps, {
-        responsible: false,
+            onStartShouldSetResponder: ref.touchableHandleStartShouldSetResponder,
-        touchable: false
+            onResponderTerminationRequest: ref.touchableHandleResponderTerminationRequest,
+            onResponderGrant: ref.touchableHandleResponderGrant,
+            onResponderMove: ref.touchableHandleResponderMove,
+            onResponderRelease: ref.touchableHandleResponderRelease,
+            onResponderTerminate: ref.touchableHandleResponderTerminate
+        });
+
+        return false;
     });
+
+    return extractedProps;
 }

lib/extract/extractStroke.js

@@ -1,7 +1,8 @@
 import extractBrush from './extractBrush';
 import extractOpacity from './extractOpacity';
-import _ from 'lodash';
+import {strokeProps} from '../props'
-let separator = /\s*,\s*/;
+
+const separator = /\s*,\s*/;
 
 const caps = {
     butt: 0,
@@ -15,11 +16,17 @@ const joins = {
     round: 1
 };
 
-export default function(props) {
+const strokeKeys = Object.keys(strokeProps);
-    let {stroke} = props;
 
-    let strokeWidth = +props.strokeWidth;
+export default function(props, styleProperties) {
+    strokeKeys.forEach((name) => {
+        if (props.hasOwnProperty(name)) {
+            styleProperties.push(name);
+        }
+    });
 
+    const {stroke} = props;
+    const strokeWidth = +props.strokeWidth;
     let strokeDasharray = props.strokeDasharray;
 
     if (typeof strokeDasharray === 'string') {

lib/extract/extractText.js

@@ -76,7 +76,7 @@ function parseDelta(delta) {
     } else if (typeof delta === 'number') {
         return [delta];
     } else {
-        [];
+        return [];
     }
 }
 
@@ -125,5 +125,5 @@ export default function(props, container) {
         startOffset: (startOffset || 0).toString(),
         positionX: _.isNil(x) ? null : x.toString(),
         positionY: _.isNil(y) ? null : y.toString()
-    }
+    };
 }

lib/extract/extractTransform.js

@@ -79,11 +79,6 @@ function props2transform(props) {
     };
 }
 
-/**
- *
- * @param props
- */
 export default function (props) {
-    // TODO: support Percentage for transform
     return transformToMatrix(props2transform(props), props.transform ? props2transform(props.transform) : null);
 }

lib/percentToFloat.js

@@ -1,4 +1,4 @@
-let percentReg = /^(\-?\d+(?:\.\d+)?)(%?)$/;
+let percentReg = /^(-?\d+(?:\.\d+)?)(%?)$/;
 export default function (percent) {
     let matched = percent.match(percentReg);
     if (!matched) {

lib/props.js

@@ -14,14 +14,10 @@ const touchableProps = {
     delayLongPress: PropTypes.number
 };
 
-const touchablePropsKeys = Object.keys(touchableProps);
+const responderProps =  [
-
-const responderPropsKeys = [
     ...Object.keys(PanResponder.create({}).panHandlers),
     'pointerEvents'
-];
+].reduce((props, name) => {
-
-const responderProps = responderPropsKeys.reduce((props, name) => {
     props[name] = PropTypes.func;
     return props;
 }, {});
@@ -32,8 +28,6 @@ const fillProps = {
     fillRule: PropTypes.oneOf(['evenodd', 'nonzero'])
 };
 
-const fillPropsKeys = Object.keys(fillProps);
-
 const clipProps = {
     clipRule: PropTypes.oneOf(['evenodd', 'nonzero']),
     clipPath: PropTypes.string
@@ -54,10 +48,6 @@ const strokeProps = {
     strokeMiterlimit: numberProp
 };
 
-const strokePropsKeys = Object.keys(strokeProps);
-
-const fillAndStrokePropsKeys = [...fillPropsKeys, ...strokePropsKeys];
-
 const fontProps = {
     fontFamily: PropTypes.string,
     fontSize: numberProp,
@@ -66,9 +56,6 @@ const fontProps = {
     font: PropTypes.object
 };
 
-const fontPropsKeys = Object.keys(fontProps);
-const fontAndRenderPropsKeys = [...fillAndStrokePropsKeys, ...fontPropsKeys];
-
 const transformProps = {
     scale: numberProp,
     scaleX: numberProp,
@@ -102,18 +89,10 @@ const pathProps = {
 export {
     numberProp,
     fillProps,
-    fillPropsKeys,
     strokeProps,
-    strokePropsKeys,
-    fillAndStrokePropsKeys,
     fontProps,
-    fontPropsKeys,
-    fontAndRenderPropsKeys,
     clipProps,
-    transformProps,
     pathProps,
     responderProps,
-    responderPropsKeys,
+    touchableProps
-    touchableProps,
-    touchablePropsKeys
 };