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.
-5. Transform prop support.
+4. Marker element.
+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,23 +2,18 @@ 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
-            name={this.props.id}
-        >{this.props.children}</RNSVGClipPath>;
+        return <RNSVGClipPath name={this.props.id}>{this.props.children}</RNSVGClipPath>;
     }
 }
 
 const RNSVGClipPath = createReactNativeComponentClass({
     validAttributes: ClipPathAttributes,
     uiViewClassName: 'RNSVGClipPath'
 });
-
-export default ClipPath;
-

elements/Defs.js

@@ -1,9 +1,7 @@
-import React, {
-    Component,
-} from 'react';
+import 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]);
-
-class Pattern extends Component{
+export default class extends Component{
     static displayName = 'Pattern';
     static propTypes = {
-        x1: propType,
-        x2: propType,
-        y1: propType,
-        y2: propType,
+        x1: numberProp,
+        x2: numberProp,
+        y1: numberProp,
+        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;