refactor Components props extracting

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:
-        this.a = _.isNil(a) ? 1 : a;
+        /*eslint eqeqeq:0*/
+        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
-}, RenderableAttributes);
+    height: true,
+    ...RenderableAttributes
+};
 
-const SymbolAttributes = merge({
-    name: true
-}, ViewBoxAttributes);
+const SymbolAttributes = {
+    name: true,
+    ...ViewBoxAttributes
+};
 
-const PathAttributes = merge({
-    d: true
-}, RenderableAttributes);
+const PathAttributes = {
+    d: true,
+    ...RenderableAttributes
+};
 
-const TextAttributes = merge({
+const TextAttributes = {
     font: {
         diff: fontDiffer
     },
@@ -96,88 +101,99 @@ const TextAttributes = merge({
     deltaX: arrayDiffer,
     deltaY: arrayDiffer,
     positionX: true,
-    positionY: true
-}, RenderableAttributes);
+    positionY: true,
+    ...RenderableAttributes
+};
 
-const TextPathAttributes = merge({
+const TextPathAttributes = {
     href: true,
-    startOffset: true
-}, RenderableAttributes);
+    startOffset: true,
+    ...RenderableAttributes
+};
 
-const TSpanAttibutes = merge({
-    content: true
-}, TextAttributes);
+const TSpanAttibutes = {
+    content: true,
+    ...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
-}, GradientAttributes);
+    y2: true,
+    ...GradientAttributes
+};
 
-const RadialGradientAttributes = merge({
+const RadialGradientAttributes = {
     fx: true,
     fy: true,
     rx: true,
     ry: true,
     cx: true,
     cy: true,
-    r: true
-}, GradientAttributes);
+    r: true,
+    ...GradientAttributes
+};
 
 
-const CircleAttributes = merge({
+const CircleAttributes = {
     cx: true,
     cy: true,
-    r: true
-}, RenderableAttributes);
+    r: true,
+    ...RenderableAttributes
+};
 
-const EllipseAttributes = merge({
+const EllipseAttributes = {
     cx: true,
     cy: true,
     rx: true,
-    ry: true
-}, RenderableAttributes);
+    ry: true,
+    ...RenderableAttributes
+};
 
-const ImageAttributes = merge({
+const ImageAttributes = {
     x: true,
     y: true,
     width: true,
     height: true,
     src: true,
     align: true,
-    meetOrSlice: true
-}, RenderableAttributes);
+    meetOrSlice: true,
+    ...RenderableAttributes
+};
 
-const LineAttributes = merge({
+const LineAttributes = {
     x1: true,
     y1: true,
     x2: true,
-    y2: true
-}, RenderableAttributes);
+    y2: true,
+    ...RenderableAttributes
+};
 
-const RectAttributes = merge({
+const RectAttributes = {
     x: true,
     y: true,
     width: true,
     height: true,
     rx: true,
-    ry: true
-}, RenderableAttributes);
+    ry: true,
+    ...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}) {
-    let propList = [];
-    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);
-            }
-        }
-    });
+export default function(props, ref) {
+    const styleProperties = [];
 
-    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) {
-        _.assign(extractedProps, extractStroke(props));
-    }
+    Object.assign(extractedProps, extractStroke(props, styleProperties));
+    Object.assign(extractedProps, extractFill(props, styleProperties));
 
-    if (options.fill) {
-        _.assign(extractedProps, extractFill(props));
-    }
-
-    if (options.transform) {
-        extractedProps.matrix = extractTransform(props);
-    } else if (props.transform) {
+    if (props.transform) {
         extractedProps.matrix = extractTransform(props.transform);
+    } else {
+        extractedProps.matrix = extractTransform(props);
     }
 
-    if (options.responder) {
-        _.assign(extractedProps, extractResponder(props));
-    }
+    Object.assign(extractedProps, extractResponder(props, ref));
 
     return extractedProps;
 }

lib/extract/extractResponder.js

@@ -1,26 +1,37 @@
 import {responderProps, touchableProps} from '../props';
 import _ from 'lodash';
 
-export default function (props) {
-    let responsible;
-    let touchable;
+export default function (props, ref) {
+    const extractedProps = {};
 
-    return _.reduce(props, (prev, value, key) => {
-        if (value && (responderProps[key] || touchableProps[key])) {
-            prev[key] = value;
-            if (!responsible) {
-                responsible = true;
-                prev.responsible = true;
-            }
-            if (!touchable && touchableProps[key]) {
-                touchable = true;
-                prev.touchable = true;
+    _.forEach(responderProps, (v, key) => {
+        const value = props[key];
+        if (props[key]) {
+            if (!extractedProps.responsible && key !== 'pointerEvents') {
+                extractedProps.responsible = true;
             }
+
+            extractedProps[key] = value;
+        }
+    });
+
+    _.every(touchableProps, (v, key) => {
+        if (!props[key]) {
+            return true;
         }
 
-        return prev;
-    }, {
-        responsible: false,
-        touchable: false
+        extractedProps.responsible = true;
+        Object.assign(extractedProps, {
+            onStartShouldSetResponder: ref.touchableHandleStartShouldSetResponder,
+            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';
-let separator = /\s*,\s*/;
+import {strokeProps} from '../props'
+
+const separator = /\s*,\s*/;
 
 const caps = {
     butt: 0,
@@ -15,11 +16,17 @@ const joins = {
     round: 1
 };
 
-export default function(props) {
-    let {stroke} = props;
+const strokeKeys = Object.keys(strokeProps);
 
-    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 responderPropsKeys = [
+const responderProps =  [
     ...Object.keys(PanResponder.create({}).panHandlers),
     'pointerEvents'
-];
-
-const responderProps = responderPropsKeys.reduce((props, name) => {
+].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,
-    touchablePropsKeys
+    touchableProps
 };