refactor: cleanup extraction logic

lib/extract/extractClipPath.js

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

lib/extract/extractFill.js

@@ -12,17 +12,18 @@ const black = colorNames.black;
 const defaultFill = [0, integerColor(black)];
 
 export default function extractFill(props, styleProperties) {
-  if (props.fill != null) {
+  const { fill, fillRule, fillOpacity } = props;
+
+  if (fill != null) {
     styleProperties.push('fill');
   }
-  if (props.fillOpacity != null) {
+  if (fillOpacity != null) {
     styleProperties.push('fillOpacity');
   }
-  if (props.fillRule != null) {
+  if (fillRule != null) {
     styleProperties.push('fillRule');
   }
 
-  const { fill, fillRule, fillOpacity } = props;
   return {
     fill: !fill && typeof fill !== 'number' ? defaultFill : extractBrush(fill),
     fillRule: fillRules[fillRule] === 0 ? 0 : 1,

lib/extract/extractProps.js

@@ -7,7 +7,7 @@ import extractOpacity from './extractOpacity';
 import { idPattern } from '../util';
 
 export function propsAndStyles(props) {
-  const style = props.style;
+  const { style } = props;
   return {
     ...(style && style.length ? Object.assign({}, ...style) : style),
     ...props,
@@ -15,11 +15,11 @@ export function propsAndStyles(props) {
 }
 
 export default function extractProps(props, ref) {
-  const { opacity, onLayout, id, clipPath, mask } = props;
+  const { opacity, onLayout, id, clipPath, mask, transform } = props;
   const styleProperties = [];
   const transformProps = props2transform(props);
-  const matrix = transformToMatrix(transformProps, props.transform);
-  const extractedProps = {
+  const matrix = transformToMatrix(transformProps, transform);
+  const extracted = {
     matrix,
     onLayout,
     ...transformProps,
@@ -31,18 +31,18 @@ export default function extractProps(props, ref) {
   };
 
   if (id) {
-    extractedProps.name = id;
+    extracted.name = id;
   }
 
   if (clipPath) {
-    Object.assign(extractedProps, extractClipPath(props));
+    Object.assign(extracted, extractClipPath(props));
   }
 
   if (mask) {
     const matched = mask.match(idPattern);
 
     if (matched) {
-      extractedProps.mask = matched[1];
+      extracted.mask = matched[1];
     } else {
       console.warn(
         'Invalid `mask` prop, expected a mask like "#id", but got: "' +
@@ -52,5 +52,5 @@ export default function extractProps(props, ref) {
     }
   }
 
-  return extractedProps;
+  return extracted;
 }

lib/extract/extractResponder.js

@@ -1,27 +1,25 @@
 import { PanResponder } from 'react-native';
 
-const responderProps = Object.keys(PanResponder.create({}).panHandlers);
-const numResponderProps = responderProps.length;
-
-function hasTouchableProperty(props) {
-  return (
-    props.disabled != null ||
-    props.onPress ||
-    props.onPressIn ||
-    props.onPressOut ||
-    props.onLongPress ||
-    props.delayPressIn ||
-    props.delayPressOut ||
-    props.delayLongPress
-  );
-}
+const responderKeys = Object.keys(PanResponder.create({}).panHandlers);
+const numResponderKeys = responderKeys.length;
 
 export default function extractResponder(props, ref) {
+  const {
+    onPress,
+    disabled,
+    onPressIn,
+    onPressOut,
+    onLongPress,
+    delayPressIn,
+    delayPressOut,
+    delayLongPress,
+    pointerEvents,
+  } = props;
   const o = {};
 
   let responsible = false;
-  for (let i = 0; i < numResponderProps; i++) {
-    const key = responderProps[i];
+  for (let i = 0; i < numResponderKeys; i++) {
+    const key = responderKeys[i];
     const value = props[key];
     if (value) {
       responsible = true;
@@ -29,12 +27,21 @@ export default function extractResponder(props, ref) {
     }
   }
 
-  const pointerEvents = props.pointerEvents;
   if (pointerEvents) {
     o.pointerEvents = pointerEvents;
   }
 
-  if (hasTouchableProperty(props)) {
+  const hasTouchableProperty =
+    disabled != null ||
+    onPress ||
+    onPressIn ||
+    onPressOut ||
+    onLongPress ||
+    delayPressIn ||
+    delayPressOut ||
+    delayLongPress;
+
+  if (hasTouchableProperty) {
     responsible = true;
     o.onResponderMove = ref.touchableHandleResponderMove;
     o.onResponderGrant = ref.touchableHandleResponderGrant;

lib/extract/extractStroke.js

@@ -24,32 +24,43 @@ const vectorEffects = {
 };
 
 export default function extractStroke(props, styleProperties) {
-  if (props.stroke != null) {
+  const {
+    stroke,
+    strokeOpacity,
+    strokeLinecap,
+    strokeLinejoin,
+    strokeDasharray,
+    strokeWidth,
+    strokeDashoffset,
+    strokeMiterlimit,
+    vectorEffect,
+  } = props;
+
+  if (stroke != null) {
     styleProperties.push('stroke');
   }
-  if (props.strokeWidth != null) {
+  if (strokeWidth != null) {
     styleProperties.push('strokeWidth');
   }
-  if (props.strokeOpacity != null) {
+  if (strokeOpacity != null) {
     styleProperties.push('strokeOpacity');
   }
-  if (props.strokeDasharray != null) {
+  if (strokeDasharray != null) {
     styleProperties.push('strokeDasharray');
   }
-  if (props.strokeDashoffset != null) {
+  if (strokeDashoffset != null) {
     styleProperties.push('strokeDashoffset');
   }
-  if (props.strokeLinecap != null) {
+  if (strokeLinecap != null) {
     styleProperties.push('strokeLinecap');
   }
-  if (props.strokeLinejoin != null) {
+  if (strokeLinejoin != null) {
     styleProperties.push('strokeLinejoin');
   }
-  if (props.strokeMiterlimit != null) {
+  if (strokeMiterlimit != null) {
     styleProperties.push('strokeMiterlimit');
   }
 
-  const { stroke, strokeWidth = 1, strokeDasharray } = props;
   const strokeDash =
     !strokeDasharray || strokeDasharray === 'none'
       ? null
@@ -57,16 +68,16 @@ export default function extractStroke(props, styleProperties) {
 
   return {
     stroke: extractBrush(stroke),
-    strokeOpacity: extractOpacity(props.strokeOpacity),
-    strokeLinecap: caps[props.strokeLinecap] || 0,
-    strokeLinejoin: joins[props.strokeLinejoin] || 0,
+    strokeOpacity: extractOpacity(strokeOpacity),
+    strokeLinecap: caps[strokeLinecap] || 0,
+    strokeLinejoin: joins[strokeLinejoin] || 0,
     strokeDasharray:
       strokeDash && strokeDash.length % 2 === 1
         ? strokeDash.concat(strokeDash)
         : strokeDash,
-    strokeWidth,
-    strokeDashoffset: strokeDasharray ? +props.strokeDashoffset || 0 : null,
-    strokeMiterlimit: parseFloat(props.strokeMiterlimit) || 4,
-    vectorEffect: vectorEffects[props.vectorEffect] || 0,
+    strokeWidth: strokeWidth != null ? strokeWidth : 1,
+    strokeDashoffset: strokeDasharray ? +strokeDashoffset || 0 : null,
+    strokeMiterlimit: parseFloat(strokeMiterlimit) || 4,
+    vectorEffect: vectorEffects[vectorEffect] || 0,
   };
 }

lib/extract/extractTransform.js

@@ -2,16 +2,19 @@ import { identity, reset, toArray, append, appendTransform } from '../Matrix2D';
 import { parse } from './transform';
 
 function appendTransformProps(props) {
+  const {
+    x, y, originX, originY, scaleX, scaleY, rotation, skewX, skewY,
+  } = props;
   appendTransform(
-    props.x + props.originX,
-    props.y + props.originY,
-    props.scaleX,
-    props.scaleY,
-    props.rotation,
-    props.skewX,
-    props.skewY,
-    props.originX,
-    props.originY,
+    x + originX,
+    y + originY,
+    scaleX,
+    scaleY,
+    rotation,
+    skewX,
+    skewY,
+    originX,
+    originY,
   );
 }
 
@@ -51,25 +54,30 @@ function universal2axis(universal, axisX, axisY, defaultValue) {
 }
 
 export function props2transform(props) {
-  const origin = universal2axis(props.origin, props.originX, props.originY);
-  const scale = universal2axis(props.scale, props.scaleX, props.scaleY, 1);
-  const skew = universal2axis(props.skew, props.skewX, props.skewY);
-  const translate = universal2axis(
-    props.translate,
-    props.translateX || props.x,
-    props.translateY || props.y,
-  );
+  const {
+    translate, translateX, translateY,
+    origin, originX, originY,
+    scale, scaleX, scaleY,
+    skew, skewX, skewY,
+    rotation,
+    x, y,
+  } = props;
+
+  const tr = universal2axis(translate, translateX || x, translateY || y);
+  const or = universal2axis(origin, originX, originY);
+  const sc = universal2axis(scale, scaleX, scaleY, 1);
+  const sk = universal2axis(skew, skewX, skewY);
 
   return {
-    rotation: +props.rotation || 0,
-    scaleX: scale[0],
-    scaleY: scale[1],
-    originX: origin[0],
-    originY: origin[1],
-    skewX: skew[0],
-    skewY: skew[1],
-    x: translate[0],
-    y: translate[1],
+    rotation: +rotation || 0,
+    originX: or[0],
+    originY: or[1],
+    scaleX: sc[0],
+    scaleY: sc[1],
+    skewX: sk[0],
+    skewY: sk[1],
+    x: tr[0],
+    y: tr[1],
   };
 }