refactor: inline extractClipPath as it's only used in one place now

software-mansion · Oct 19, 2019 · c3e5dca · c3e5dca
1 parent 189df82
commit c3e5dca
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 58 deletions.
diff --git a/src/lib/SvgTouchableMixin.ts b/src/lib/SvgTouchableMixin.ts
@@ -15,7 +15,7 @@ const {
 export default {
   ...Mixin,
 
-  touchableHandleStartShouldSetResponder: function(e: GestureResponderEvent) {
+  touchableHandleStartShouldSetResponder(e: GestureResponderEvent) {
     const { onStartShouldSetResponder } = this.props;
     if (onStartShouldSetResponder) {
       return onStartShouldSetResponder(e);
@@ -24,9 +24,7 @@ export default {
     }
   },
 
-  touchableHandleResponderTerminationRequest: function(
-    e: GestureResponderEvent,
-  ) {
+  touchableHandleResponderTerminationRequest(e: GestureResponderEvent) {
     const { onResponderTerminationRequest } = this.props;
     if (onResponderTerminationRequest) {
       return onResponderTerminationRequest(e);
@@ -35,7 +33,7 @@ export default {
     }
   },
 
-  touchableHandleResponderGrant: function(e: GestureResponderEvent) {
+  touchableHandleResponderGrant(e: GestureResponderEvent) {
     const { onResponderGrant } = this.props;
     if (onResponderGrant) {
       return onResponderGrant(e);
@@ -44,7 +42,7 @@ export default {
     }
   },
 
-  touchableHandleResponderMove: function(e: GestureResponderEvent) {
+  touchableHandleResponderMove(e: GestureResponderEvent) {
     const { onResponderMove } = this.props;
     if (onResponderMove) {
       return onResponderMove(e);
@@ -53,7 +51,7 @@ export default {
     }
   },
 
-  touchableHandleResponderRelease: function(e: GestureResponderEvent) {
+  touchableHandleResponderRelease(e: GestureResponderEvent) {
     const { onResponderRelease } = this.props;
     if (onResponderRelease) {
       return onResponderRelease(e);
@@ -62,7 +60,7 @@ export default {
     }
   },
 
-  touchableHandleResponderTerminate: function(e: GestureResponderEvent) {
+  touchableHandleResponderTerminate(e: GestureResponderEvent) {
     const { onResponderTerminate } = this.props;
     if (onResponderTerminate) {
       return onResponderTerminate(e);
@@ -71,47 +69,47 @@ export default {
     }
   },
 
-  touchableHandlePress: function(e: GestureResponderEvent) {
+  touchableHandlePress(e: GestureResponderEvent) {
     const { onPress } = this.props;
     onPress && onPress(e);
   },
 
-  touchableHandleActivePressIn: function(e: GestureResponderEvent) {
+  touchableHandleActivePressIn(e: GestureResponderEvent) {
     const { onPressIn } = this.props;
     onPressIn && onPressIn(e);
   },
 
-  touchableHandleActivePressOut: function(e: GestureResponderEvent) {
+  touchableHandleActivePressOut(e: GestureResponderEvent) {
     const { onPressOut } = this.props;
     onPressOut && onPressOut(e);
   },
 
-  touchableHandleLongPress: function(e: GestureResponderEvent) {
+  touchableHandleLongPress(e: GestureResponderEvent) {
     const { onLongPress } = this.props;
     onLongPress && onLongPress(e);
   },
 
-  touchableGetPressRectOffset: function() {
+  touchableGetPressRectOffset() {
     const { pressRetentionOffset } = this.props;
     return pressRetentionOffset || PRESS_RETENTION_OFFSET;
   },
 
-  touchableGetHitSlop: function() {
+  touchableGetHitSlop() {
     const { hitSlop } = this.props;
     return hitSlop;
   },
 
-  touchableGetHighlightDelayMS: function() {
+  touchableGetHighlightDelayMS() {
     const { delayPressIn } = this.props;
     return delayPressIn || 0;
   },
 
-  touchableGetLongPressDelayMS: function() {
+  touchableGetLongPressDelayMS() {
     const { delayLongPress } = this.props;
     return delayLongPress === 0 ? 0 : delayLongPress || 500;
   },
 
-  touchableGetPressOutDelayMS: function() {
+  touchableGetPressOutDelayMS() {
     const { delayPressOut } = this.props;
     return delayPressOut || 0;
   },

diff --git a/src/lib/extract/extractClipPath.ts b/src/lib/extract/extractClipPath.ts
diff --git a/src/lib/extract/extractProps.ts b/src/lib/extract/extractProps.ts
@@ -1,7 +1,6 @@
 import extractFill from './extractFill';
 import extractStroke from './extractStroke';
 import { transformToMatrix, props2transform } from './extractTransform';
-import extractClipPath from './extractClipPath';
 import extractResponder from './extractResponder';
 import extractOpacity from './extractOpacity';
 import { idPattern } from '../util';
@@ -15,6 +14,11 @@ import {
 } from './types';
 import { Component } from 'react';
 
+const clipRules: { evenodd: number; nonzero: number } = {
+  evenodd: 0,
+  nonzero: 1,
+};
+
 export function propsAndStyles(props: Object & { style?: [] | {} }) {
   const { style } = props;
   return !style
@@ -57,6 +61,7 @@ export default function extractProps(
     onLayout,
     id,
     clipPath,
+    clipRule,
     mask,
     marker,
     markerStart = marker,
@@ -78,12 +83,10 @@ export default function extractProps(
     markerStart?: string;
     markerMid?: string;
     markerEnd?: string;
+    clipPath?: string;
+    clipRule?: number;
   } = {
     matrix,
-    markerStart: getMarker(markerStart),
-    markerMid: getMarker(markerMid),
-    markerEnd: getMarker(markerEnd),
-    onLayout,
     ...transformProps,
     propList: styleProperties,
     opacity: extractOpacity(opacity),
@@ -92,12 +95,42 @@ export default function extractProps(
     ...extractStroke(props, styleProperties),
   };
 
+  if (onLayout) {
+    extracted.onLayout = onLayout;
+  }
+
+  if (markerStart) {
+    extracted.markerStart = getMarker(markerStart);
+  }
+  if (markerMid) {
+    extracted.markerMid = getMarker(markerMid);
+  }
+  if (markerEnd) {
+    extracted.markerEnd = getMarker(markerEnd);
+  }
+
   if (id) {
     extracted.name = String(id);
   }
 
   if (clipPath) {
-    Object.assign(extracted, extractClipPath(props));
+    if (clipRule) {
+      extracted.clipRule = clipRules[clipRule] === 0 ? 0 : 1;
+    }
+
+    if (clipPath) {
+      const matched = clipPath.match(idPattern);
+
+      if (matched) {
+        extracted.clipPath = matched[1];
+      } else {
+        console.warn(
+          'Invalid `clipPath` prop, expected a clipPath like "#id", but got: "' +
+            clipPath +
+            '"',
+        );
+      }
+    }
   }
 
   if (mask) {