From 319256bdc86e59876e6a71ab4159fcf396ce374f Mon Sep 17 00:00:00 2001 From: Mikael Sand Date: Fri, 2 Aug 2019 04:13:01 +0300 Subject: [PATCH] refactor: cleanup extraction logic --- lib/extract/extractClipPath.js | 8 ++--- lib/extract/extractFill.js | 9 ++--- lib/extract/extractProps.js | 16 ++++----- lib/extract/extractResponder.js | 45 ++++++++++++++----------- lib/extract/extractStroke.js | 43 ++++++++++++++--------- lib/extract/extractTransform.js | 60 +++++++++++++++++++-------------- 6 files changed, 104 insertions(+), 77 deletions(-) diff --git a/lib/extract/extractClipPath.js b/lib/extract/extractClipPath.js index 465f78db..bab75b85 100644 --- a/lib/extract/extractClipPath.js +++ b/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; } diff --git a/lib/extract/extractFill.js b/lib/extract/extractFill.js index 18ec9e40..ff3c51e8 100644 --- a/lib/extract/extractFill.js +++ b/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, diff --git a/lib/extract/extractProps.js b/lib/extract/extractProps.js index 33cfa006..acb00489 100644 --- a/lib/extract/extractProps.js +++ b/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; } diff --git a/lib/extract/extractResponder.js b/lib/extract/extractResponder.js index d8b697cf..c60d4529 100644 --- a/lib/extract/extractResponder.js +++ b/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; diff --git a/lib/extract/extractStroke.js b/lib/extract/extractStroke.js index 116bdf0e..e0185835 100644 --- a/lib/extract/extractStroke.js +++ b/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, }; } diff --git a/lib/extract/extractTransform.js b/lib/extract/extractTransform.js index 384798c1..17dd0c44 100644 --- a/lib/extract/extractTransform.js +++ b/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], }; }