diff --git a/.editorconfig b/.editorconfig index 7d81490b0..58a3a2fa9 100644 --- a/.editorconfig +++ b/.editorconfig @@ -8,6 +8,6 @@ root = true charset = utf-8 end_of_line = lf indent_style = space -indent_size = 4 +indent_size = 2 trim_trailing_whitespace = true insert_final_newline = true diff --git a/.prettierrc b/.prettierrc index d9f46a9ed..12730ee98 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,4 @@ { "trailingComma": "all", - "tabWidth": 4 + "tabWidth": 2 } diff --git a/elements/Circle.js b/elements/Circle.js index fcacd8975..8d6b43cb1 100644 --- a/elements/Circle.js +++ b/elements/Circle.js @@ -4,27 +4,27 @@ import extractProps, { propsAndStyles } from "../lib/extract/extractProps"; import Shape from "./Shape"; export default class Circle extends Shape { - static displayName = "Circle"; + static displayName = "Circle"; - static defaultProps = { - cx: 0, - cy: 0, - r: 0, - }; + static defaultProps = { + cx: 0, + cy: 0, + r: 0, + }; - render() { - const { props } = this; - const { cx, cy, r } = props; - return ( - - ); - } + render() { + const { props } = this; + const { cx, cy, r } = props; + return ( + + ); + } } const RNSVGCircle = requireNativeComponent("RNSVGCircle"); diff --git a/elements/ClipPath.js b/elements/ClipPath.js index 1f0d4220e..8d76d5a79 100644 --- a/elements/ClipPath.js +++ b/elements/ClipPath.js @@ -4,20 +4,20 @@ import extractClipPath from "../lib/extract/extractClipPath"; import Shape from "./Shape"; export default class ClipPath extends Shape { - static displayName = "ClipPath"; + static displayName = "ClipPath"; - render() { - const { id, children } = this.props; - return ( - - {children} - - ); - } + render() { + const { id, children } = this.props; + return ( + + {children} + + ); + } } const RNSVGClipPath = requireNativeComponent("RNSVGClipPath"); diff --git a/elements/Defs.js b/elements/Defs.js index bfccf3e4b..40c4db5b5 100644 --- a/elements/Defs.js +++ b/elements/Defs.js @@ -2,11 +2,11 @@ import React, { Component } from "react"; import { requireNativeComponent } from "react-native"; export default class Defs extends Component { - static displayName = "Defs"; + static displayName = "Defs"; - render() { - return {this.props.children}; - } + render() { + return {this.props.children}; + } } const RNSVGDefs = requireNativeComponent("RNSVGDefs"); diff --git a/elements/Ellipse.js b/elements/Ellipse.js index 8da2af85a..5c05b0a83 100644 --- a/elements/Ellipse.js +++ b/elements/Ellipse.js @@ -4,29 +4,29 @@ import extractProps, { propsAndStyles } from "../lib/extract/extractProps"; import Shape from "./Shape"; export default class Ellipse extends Shape { - static displayName = "Ellipse"; + static displayName = "Ellipse"; - static defaultProps = { - cx: 0, - cy: 0, - rx: 0, - ry: 0, - }; + static defaultProps = { + cx: 0, + cy: 0, + rx: 0, + ry: 0, + }; - render() { - const { props } = this; - const { cx, cy, rx, ry } = props; - return ( - - ); - } + render() { + const { props } = this; + const { cx, cy, rx, ry } = props; + return ( + + ); + } } const RNSVGEllipse = requireNativeComponent("RNSVGEllipse"); diff --git a/elements/G.js b/elements/G.js index db2fd6047..9abaf8e56 100644 --- a/elements/G.js +++ b/elements/G.js @@ -6,29 +6,29 @@ import extractTransform from "../lib/extract/extractTransform"; import Shape from "./Shape"; export default class G extends Shape { - static displayName = "G"; + static displayName = "G"; - setNativeProps = props => { - const matrix = !props.matrix && extractTransform(props); - if (matrix) { - props.matrix = matrix; - } - this.root.setNativeProps(props); - }; - - render() { - const { props } = this; - const prop = propsAndStyles(props); - return ( - - {props.children} - - ); + setNativeProps = props => { + const matrix = !props.matrix && extractTransform(props); + if (matrix) { + props.matrix = matrix; } + this.root.setNativeProps(props); + }; + + render() { + const { props } = this; + const prop = propsAndStyles(props); + return ( + + {props.children} + + ); + } } const RNSVGGroup = requireNativeComponent("RNSVGGroup"); diff --git a/elements/Image.js b/elements/Image.js index 5432a3876..ab1346b0b 100644 --- a/elements/Image.js +++ b/elements/Image.js @@ -7,45 +7,42 @@ import Shape from "./Shape"; const spacesRegExp = /\s+/; export default class SvgImage extends Shape { - static displayName = "Image"; + static displayName = "Image"; - static defaultProps = { - x: 0, - y: 0, - width: 0, - height: 0, - preserveAspectRatio: "xMidYMid meet", - }; + static defaultProps = { + x: 0, + y: 0, + width: 0, + height: 0, + preserveAspectRatio: "xMidYMid meet", + }; - render() { - const { props } = this; - const { - preserveAspectRatio, - x, - y, - width, - height, - xlinkHref, - href = xlinkHref, - } = props; - const modes = preserveAspectRatio.trim().split(spacesRegExp); - return ( - - ); - } + render() { + const { props } = this; + const { + preserveAspectRatio, + x, + y, + width, + height, + xlinkHref, + href = xlinkHref, + } = props; + const modes = preserveAspectRatio.trim().split(spacesRegExp); + return ( + + ); + } } const RNSVGImage = requireNativeComponent("RNSVGImage"); diff --git a/elements/Line.js b/elements/Line.js index 3f9a6378b..cfdcc4480 100644 --- a/elements/Line.js +++ b/elements/Line.js @@ -4,29 +4,29 @@ import extractProps, { propsAndStyles } from "../lib/extract/extractProps"; import Shape from "./Shape"; export default class Line extends Shape { - static displayName = "Line"; + static displayName = "Line"; - static defaultProps = { - x1: 0, - y1: 0, - x2: 0, - y2: 0, - }; + static defaultProps = { + x1: 0, + y1: 0, + x2: 0, + y2: 0, + }; - render() { - const { props } = this; - const { x1, y1, x2, y2 } = props; - return ( - - ); - } + render() { + const { props } = this; + const { x1, y1, x2, y2 } = props; + return ( + + ); + } } const RNSVGLine = requireNativeComponent("RNSVGLine"); diff --git a/elements/LinearGradient.js b/elements/LinearGradient.js index cb09c727e..e4b4972aa 100644 --- a/elements/LinearGradient.js +++ b/elements/LinearGradient.js @@ -4,29 +4,29 @@ import extractGradient from "../lib/extract/extractGradient"; import Shape from "./Shape"; export default class LinearGradient extends Shape { - static displayName = "LinearGradient"; + static displayName = "LinearGradient"; - static defaultProps = { - x1: "0%", - y1: "0%", - x2: "100%", - y2: "0%", - }; + static defaultProps = { + x1: "0%", + y1: "0%", + x2: "100%", + y2: "0%", + }; - render() { - const { props } = this; - const { x1, y1, x2, y2 } = props; - return ( - - ); - } + render() { + const { props } = this; + const { x1, y1, x2, y2 } = props; + return ( + + ); + } } const RNSVGLinearGradient = requireNativeComponent("RNSVGLinearGradient"); diff --git a/elements/Mask.js b/elements/Mask.js index 947912891..b2ca2e843 100644 --- a/elements/Mask.js +++ b/elements/Mask.js @@ -6,51 +6,46 @@ import units from "../lib/units"; import Shape from "./Shape"; export default class Mask extends Shape { - static displayName = "Mask"; + static displayName = "Mask"; - static defaultProps = { - x: "0%", - y: "0%", - width: "100%", - height: "100%", - }; + static defaultProps = { + x: "0%", + y: "0%", + width: "100%", + height: "100%", + }; - render() { - const { props } = this; - const { - maskTransform, - transform, - x, - y, - width, - height, - maskUnits, - maskContentUnits, - children, - } = props; - return ( - - {children} - - ); - } + render() { + const { props } = this; + const { + maskTransform, + transform, + x, + y, + width, + height, + maskUnits, + maskContentUnits, + children, + } = props; + return ( + + {children} + + ); + } } const RNSVGMask = requireNativeComponent("RNSVGMask"); diff --git a/elements/Path.js b/elements/Path.js index 3c17d3775..ee37758e5 100644 --- a/elements/Path.js +++ b/elements/Path.js @@ -4,18 +4,18 @@ import extractProps, { propsAndStyles } from "../lib/extract/extractProps"; import Shape from "./Shape"; export default class Path extends Shape { - static displayName = "Path"; + static displayName = "Path"; - render() { - const { props } = this; - return ( - - ); - } + render() { + const { props } = this; + return ( + + ); + } } const RNSVGPath = requireNativeComponent("RNSVGPath"); diff --git a/elements/Pattern.js b/elements/Pattern.js index 2f2d61999..c43b10ea3 100644 --- a/elements/Pattern.js +++ b/elements/Pattern.js @@ -6,52 +6,52 @@ import units from "../lib/units"; import Shape from "./Shape"; export default class Pattern extends Shape { - static displayName = "Pattern"; + static displayName = "Pattern"; - static defaultProps = { - x: "0%", - y: "0%", - width: "100%", - height: "100%", - }; + static defaultProps = { + x: "0%", + y: "0%", + width: "100%", + height: "100%", + }; - render() { - const { props } = this; - const { - patternTransform, - transform, - id, - x, - y, - width, - height, - patternUnits, - patternContentUnits, - children, - viewBox, - preserveAspectRatio, - } = props; - const matrix = extractTransform(patternTransform || transform || props); - return ( - - {children} - - ); - } + render() { + const { props } = this; + const { + patternTransform, + transform, + id, + x, + y, + width, + height, + patternUnits, + patternContentUnits, + children, + viewBox, + preserveAspectRatio, + } = props; + const matrix = extractTransform(patternTransform || transform || props); + return ( + + {children} + + ); + } } const RNSVGPattern = requireNativeComponent("RNSVGPattern"); diff --git a/elements/Polygon.js b/elements/Polygon.js index 2e189a313..af2a3d615 100644 --- a/elements/Polygon.js +++ b/elements/Polygon.js @@ -4,29 +4,29 @@ import Shape from "./Shape"; import extractPolyPoints from "../lib/extract/extractPolyPoints"; export default class Polygon extends Shape { - static displayName = "Polygon"; + static displayName = "Polygon"; - static defaultProps = { - points: "", - }; + static defaultProps = { + points: "", + }; - setNativeProps = props => { - const { points } = props; - if (points) { - props.d = `M${extractPolyPoints(points)}z`; - } - this.root.setNativeProps(props); - }; - - render() { - const { props } = this; - const { points } = props; - return ( - - ); + setNativeProps = props => { + const { points } = props; + if (points) { + props.d = `M${extractPolyPoints(points)}z`; } + this.root.setNativeProps(props); + }; + + render() { + const { props } = this; + const { points } = props; + return ( + + ); + } } diff --git a/elements/Polyline.js b/elements/Polyline.js index 300e1aef2..b7dd5e7d3 100644 --- a/elements/Polyline.js +++ b/elements/Polyline.js @@ -4,29 +4,29 @@ import Shape from "./Shape"; import extractPolyPoints from "../lib/extract/extractPolyPoints"; export default class Polyline extends Shape { - static displayName = "Polyline"; + static displayName = "Polyline"; - static defaultProps = { - points: "", - }; + static defaultProps = { + points: "", + }; - setNativeProps = props => { - const { points } = props; - if (points) { - props.d = `M${extractPolyPoints(points)}`; - } - this.root.setNativeProps(props); - }; - - render() { - const { props } = this; - const { points } = props; - return ( - - ); + setNativeProps = props => { + const { points } = props; + if (points) { + props.d = `M${extractPolyPoints(points)}`; } + this.root.setNativeProps(props); + }; + + render() { + const { props } = this; + const { points } = props; + return ( + + ); + } } diff --git a/elements/RadialGradient.js b/elements/RadialGradient.js index 0e73ea48d..367aa220a 100644 --- a/elements/RadialGradient.js +++ b/elements/RadialGradient.js @@ -4,32 +4,32 @@ import extractGradient from "../lib/extract/extractGradient"; import Shape from "./Shape"; export default class RadialGradient extends Shape { - static displayName = "RadialGradient"; + static displayName = "RadialGradient"; - static defaultProps = { - fx: "50%", - fy: "50%", - cx: "50%", - cy: "50%", - r: "50%", - }; + static defaultProps = { + fx: "50%", + fy: "50%", + cx: "50%", + cy: "50%", + r: "50%", + }; - render() { - const { props } = this; - const { fx, fy, rx, ry, r, cx, cy } = props; - return ( - - ); - } + render() { + const { props } = this; + const { fx, fy, rx, ry, r, cx, cy } = props; + return ( + + ); + } } const RNSVGRadialGradient = requireNativeComponent("RNSVGRadialGradient"); diff --git a/elements/Rect.js b/elements/Rect.js index 7378f6cc9..7e2ef9301 100644 --- a/elements/Rect.js +++ b/elements/Rect.js @@ -4,40 +4,40 @@ import extractProps, { propsAndStyles } from "../lib/extract/extractProps"; import Shape from "./Shape"; export default class Rect extends Shape { - static displayName = "Rect"; + static displayName = "Rect"; - static defaultProps = { - x: 0, - y: 0, - width: 0, - height: 0, - rx: 0, - ry: 0, - }; + static defaultProps = { + x: 0, + y: 0, + width: 0, + height: 0, + rx: 0, + ry: 0, + }; - render() { - const { props } = this; - const { x, y, width, height, rx, ry } = props; - return ( - - ); - } + render() { + const { props } = this; + const { x, y, width, height, rx, ry } = props; + return ( + + ); + } } const RNSVGRect = requireNativeComponent("RNSVGRect"); diff --git a/elements/Shape.js b/elements/Shape.js index 0cff5d005..aef893bfe 100644 --- a/elements/Shape.js +++ b/elements/Shape.js @@ -6,23 +6,23 @@ const touchVals = touchKeys.map(key => SvgTouchableMixin[key]); const numTouchKeys = touchKeys.length; export default class Shape extends Component { - constructor() { - super(...arguments); - for (let i = 0; i < numTouchKeys; i++) { - const key = touchKeys[i]; - const val = touchVals[i]; - if (typeof val === "function") { - this[key] = val.bind(this); - } else { - this[key] = val; - } - } - this.state = this.touchableGetInitialState(); + constructor() { + super(...arguments); + for (let i = 0; i < numTouchKeys; i++) { + const key = touchKeys[i]; + const val = touchVals[i]; + if (typeof val === "function") { + this[key] = val.bind(this); + } else { + this[key] = val; + } } - refMethod = ref => { - this.root = ref; - }; - setNativeProps = props => { - this.root.setNativeProps(props); - }; + this.state = this.touchableGetInitialState(); + } + refMethod = ref => { + this.root = ref; + }; + setNativeProps = props => { + this.root.setNativeProps(props); + }; } diff --git a/elements/Stop.js b/elements/Stop.js index c1c9b3526..5280296ee 100644 --- a/elements/Stop.js +++ b/elements/Stop.js @@ -1,20 +1,20 @@ import { Component } from "react"; export default class Stop extends Component { - static displayName = "Stop"; + static displayName = "Stop"; - static defaultProps = { - stopColor: "#000", - stopOpacity: 1, - }; - setNativeProps = () => { - const { parent } = this.props; - if (parent) { - parent.forceUpdate(); - } - }; - - render() { - return null; + static defaultProps = { + stopColor: "#000", + stopOpacity: 1, + }; + setNativeProps = () => { + const { parent } = this.props; + if (parent) { + parent.forceUpdate(); } + }; + + render() { + return null; + } } diff --git a/elements/Svg.js b/elements/Svg.js index dec5b6de7..32b0a1897 100644 --- a/elements/Svg.js +++ b/elements/Svg.js @@ -1,9 +1,9 @@ import React from "react"; import { - requireNativeComponent, - StyleSheet, - findNodeHandle, - NativeModules, + requireNativeComponent, + StyleSheet, + findNodeHandle, + NativeModules, } from "react-native"; import extractResponder from "../lib/extract/extractResponder"; import extractViewBox from "../lib/extract/extractViewBox"; @@ -13,67 +13,118 @@ import G from "./G"; const RNSVGSvgViewManager = NativeModules.RNSVGSvgViewManager; const styles = StyleSheet.create({ - svg: { - backgroundColor: "transparent", - borderWidth: 0, - }, + svg: { + backgroundColor: "transparent", + borderWidth: 0, + }, }); export default class Svg extends Shape { - static displayName = "Svg"; + static displayName = "Svg"; - static defaultProps = { - preserveAspectRatio: "xMidYMid meet", - }; + static defaultProps = { + preserveAspectRatio: "xMidYMid meet", + }; - measureInWindow = (...args) => { - this.root.measureInWindow(...args); - }; + measureInWindow = (...args) => { + this.root.measureInWindow(...args); + }; - measure = (...args) => { - this.root.measure(...args); - }; + measure = (...args) => { + this.root.measure(...args); + }; - measureLayout = (...args) => { - this.root.measureLayout(...args); - }; + measureLayout = (...args) => { + this.root.measureLayout(...args); + }; - setNativeProps = props => { - const { width, height } = props; - if (width) { - props.bbWidth = width; - } - if (height) { - props.bbHeight = height; - } - this.root.setNativeProps(props); - }; + setNativeProps = props => { + const { width, height } = props; + if (width) { + props.bbWidth = width; + } + if (height) { + props.bbHeight = height; + } + this.root.setNativeProps(props); + }; - toDataURL = callback => { - callback && - RNSVGSvgViewManager.toDataURL(findNodeHandle(this.root), callback); + toDataURL = callback => { + callback && + RNSVGSvgViewManager.toDataURL(findNodeHandle(this.root), callback); + }; + + render() { + const { + opacity, + viewBox, + preserveAspectRatio, + style, + children, + onLayout, + ...props + } = this.props; + const stylesAndProps = { + ...(style && style.length ? Object.assign({}, ...style) : style), + ...props, }; + const { + color, + width, + height, - render() { - const { - opacity, - viewBox, - preserveAspectRatio, - style, - children, - onLayout, - ...props - } = this.props; - const stylesAndProps = { - ...(style && style.length ? Object.assign({}, ...style) : style), - ...props, - }; - const { - color, - width, - height, + // Inherited G properties + font, + transform, + fill, + fillOpacity, + fillRule, + stroke, + strokeWidth, + strokeOpacity, + strokeDasharray, + strokeDashoffset, + strokeLinecap, + strokeLinejoin, + strokeMiterlimit, + } = stylesAndProps; + + const w = parseInt(width, 10); + const h = parseInt(height, 10); + const doNotParseWidth = isNaN(w) || width[width.length - 1] === "%"; + const doNotParseHeight = isNaN(h) || height[height.length - 1] === "%"; + const dimensions = + width && height + ? { + width: doNotParseWidth ? width : w, + height: doNotParseHeight ? height : h, + flex: 0, + } + : null; - // Inherited G properties + const o = +opacity; + const opacityStyle = !isNaN(o) + ? { + opacity: o, + } + : null; + + return ( + + - - - ); - } + }} + /> + + ); + } } const NativeSvgView = requireNativeComponent("RNSVGSvgView"); diff --git a/elements/Symbol.js b/elements/Symbol.js index 3def1b46c..c87c2b0df 100644 --- a/elements/Symbol.js +++ b/elements/Symbol.js @@ -4,17 +4,17 @@ import extractViewBox from "../lib/extract/extractViewBox"; import Shape from "./Shape"; export default class Symbol extends Shape { - static displayName = "Symbol"; + static displayName = "Symbol"; - render() { - const { props } = this; - const { id, children } = props; - return ( - - {children} - - ); - } + render() { + const { props } = this; + const { id, children } = props; + return ( + + {children} + + ); + } } const RNSVGSymbol = requireNativeComponent("RNSVGSymbol"); diff --git a/elements/TSpan.js b/elements/TSpan.js index d3a8ec4cc..dde99eb3e 100644 --- a/elements/TSpan.js +++ b/elements/TSpan.js @@ -7,38 +7,38 @@ import { pickNotNil } from "../lib/util"; import Shape from "./Shape"; export default class TSpan extends Shape { - static displayName = "TSpan"; + static displayName = "TSpan"; - setNativeProps = props => { - const matrix = !props.matrix && extractTransform(props); - if (matrix) { - props.matrix = matrix; - } - const text = pickNotNil(extractText(props, false)); - this.root.setNativeProps({ - ...props, - ...text, - }); - }; - - render() { - const props = this.props; - const prop = propsAndStyles(props); - return ( - - ); + setNativeProps = props => { + const matrix = !props.matrix && extractTransform(props); + if (matrix) { + props.matrix = matrix; } + const text = pickNotNil(extractText(props, false)); + this.root.setNativeProps({ + ...props, + ...text, + }); + }; + + render() { + const props = this.props; + const prop = propsAndStyles(props); + return ( + + ); + } } setTSpan(TSpan); diff --git a/elements/Text.js b/elements/Text.js index e0207fdd3..d4414cf68 100644 --- a/elements/Text.js +++ b/elements/Text.js @@ -8,38 +8,38 @@ import Shape from "./Shape"; import "./TSpan"; export default class Text extends Shape { - static displayName = "Text"; + static displayName = "Text"; - setNativeProps = props => { - const matrix = !props.matrix && extractTransform(props); - if (matrix) { - props.matrix = matrix; - } - const text = pickNotNil(extractText(props, true)); - this.root.setNativeProps({ - ...props, - ...text, - }); - }; - - render() { - const props = this.props; - const prop = propsAndStyles(props); - return ( - - ); + setNativeProps = props => { + const matrix = !props.matrix && extractTransform(props); + if (matrix) { + props.matrix = matrix; } + const text = pickNotNil(extractText(props, true)); + this.root.setNativeProps({ + ...props, + ...text, + }); + }; + + render() { + const props = this.props; + const prop = propsAndStyles(props); + return ( + + ); + } } const RNSVGText = requireNativeComponent("RNSVGText"); diff --git a/elements/TextPath.js b/elements/TextPath.js index 61cdd0ceb..b083be68d 100644 --- a/elements/TextPath.js +++ b/elements/TextPath.js @@ -8,73 +8,73 @@ import Shape from "./Shape"; import TSpan from "./TSpan"; export default class TextPath extends Shape { - static displayName = "TextPath"; + static displayName = "TextPath"; - setNativeProps = props => { - const matrix = !props.matrix && extractTransform(props); - if (matrix) { - props.matrix = matrix; - } - const text = pickNotNil(extractText(props, true)); - this.root.setNativeProps({ - ...props, - ...text, - }); - }; + setNativeProps = props => { + const matrix = !props.matrix && extractTransform(props); + if (matrix) { + props.matrix = matrix; + } + const text = pickNotNil(extractText(props, true)); + this.root.setNativeProps({ + ...props, + ...text, + }); + }; - render() { - const { - children, - xlinkHref, - href = xlinkHref, - startOffset, + render() { + const { + children, + xlinkHref, + href = xlinkHref, + startOffset, + method, + spacing, + side, + alignmentBaseline, + midLine, + ...props + } = this.props; + const matched = href && href.match(idPattern); + const match = matched && matched[1]; + if (match) { + return ( + - ); - } - - console.warn( - 'Invalid `href` prop for `TextPath` element, expected a href like `"#id"`, but got: "' + - href + - '"', - ); - return {children}; + }} + /> + ); } + + console.warn( + 'Invalid `href` prop for `TextPath` element, expected a href like `"#id"`, but got: "' + + href + + '"', + ); + return {children}; + } } const RNSVGTextPath = requireNativeComponent("RNSVGTextPath"); diff --git a/elements/Use.js b/elements/Use.js index 58c7737f1..ba352bec5 100644 --- a/elements/Use.js +++ b/elements/Use.js @@ -5,56 +5,53 @@ import { idPattern } from "../lib/util"; import Shape from "./Shape"; export default class Use extends Shape { - static displayName = "Use"; + static displayName = "Use"; - static defaultProps = { - x: 0, - y: 0, - width: 0, - height: 0, - }; + static defaultProps = { + x: 0, + y: 0, + width: 0, + height: 0, + }; - render() { - const { props } = this; - const { - children, - x, - y, - width, - height, - xlinkHref, - href = xlinkHref, - } = props; + render() { + const { props } = this; + const { + children, + x, + y, + width, + height, + xlinkHref, + href = xlinkHref, + } = props; - // match "url(#pattern)" - const matched = href.match(idPattern); - const match = matched && matched[1]; + // match "url(#pattern)" + const matched = href.match(idPattern); + const match = matched && matched[1]; - if (!match) { - console.warn( - 'Invalid `href` prop for `Use` element, expected a href like `"#id"`, but got: "' + - href + - '"', - ); - } - - return ( - - {children} - - ); + if (!match) { + console.warn( + 'Invalid `href` prop for `Use` element, expected a href like `"#id"`, but got: "' + + href + + '"', + ); } + + return ( + + {children} + + ); + } } const RNSVGUse = requireNativeComponent("RNSVGUse"); diff --git a/lib/Matrix2D.js b/lib/Matrix2D.js index 3124e6bb4..a61effa18 100644 --- a/lib/Matrix2D.js +++ b/lib/Matrix2D.js @@ -25,163 +25,163 @@ const DEG_TO_RAD = Math.PI / 180; * @constructor **/ export default class Matrix2D { - constructor() { - this.reset(); + constructor() { + this.reset(); - // public properties: - /** - * Position (0, 0) in a 3x3 affine transformation matrix. - * @property a - * @type Number - **/ - - /** - * Position (0, 1) in a 3x3 affine transformation matrix. - * @property b - * @type Number - **/ - - /** - * Position (1, 0) in a 3x3 affine transformation matrix. - * @property c - * @type Number - **/ - - /** - * Position (1, 1) in a 3x3 affine transformation matrix. - * @property d - * @type Number - **/ - - /** - * Position (2, 0) in a 3x3 affine transformation matrix. - * @property tx - * @type Number - **/ + // public properties: + /** + * Position (0, 0) in a 3x3 affine transformation matrix. + * @property a + * @type Number + **/ - /** - * Position (2, 1) in a 3x3 affine transformation matrix. - * @property ty - * @type Number - **/ - } + /** + * Position (0, 1) in a 3x3 affine transformation matrix. + * @property b + * @type Number + **/ /** - * Reset current matrix to an identity matrix. - * @method reset - * @return {Matrix2D} This matrix. Useful for chaining method calls. + * Position (1, 0) in a 3x3 affine transformation matrix. + * @property c + * @type Number **/ - reset = function() { - this.a = this.d = 1; - this.b = this.c = this.tx = this.ty = 0; - this.hasInitialState = true; - return this; - }; /** - * Returns an array with current matrix values. - * @method toArray - * @return {Array} an array with current matrix values. + * Position (1, 1) in a 3x3 affine transformation matrix. + * @property d + * @type Number **/ - toArray = function() { - return [this.a, this.b, this.c, this.d, this.tx, this.ty]; - }; /** - * Appends the specified matrix properties to this matrix. All parameters are required. - * This is the equivalent of multiplying `(this matrix) * (specified matrix)`. - * @method append - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} tx - * @param {Number} ty - * @return {Matrix2D} This matrix. Useful for chaining method calls. + * Position (2, 0) in a 3x3 affine transformation matrix. + * @property tx + * @type Number **/ - append = function(a, b, c, d, tx, ty) { - if (this.hasInitialState) { - this.hasInitialState = false; - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; - return this; - } - const a1 = this.a; - const b1 = this.b; - const c1 = this.c; - const d1 = this.d; - if (a !== 1 || b !== 0 || c !== 0 || d !== 1) { - this.a = a1 * a + c1 * b; - this.b = b1 * a + d1 * b; - this.c = a1 * c + c1 * d; - this.d = b1 * c + d1 * d; - } - this.tx = a1 * tx + c1 * ty + this.tx; - this.ty = b1 * tx + d1 * ty + this.ty; - return this; - }; /** - * Generates matrix properties from the specified display object transform properties, and appends them to this matrix. - * For example, you can use this to generate a matrix representing the transformations of a display object: - * - * var mtx = new createjs.Matrix2D(); - * mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation); - * @method appendTransform - * @param {Number} x - * @param {Number} y - * @param {Number} scaleX - * @param {Number} scaleY - * @param {Number} rotation - * @param {Number} skewX - * @param {Number} skewY - * @param {Number} regX Optional. - * @param {Number} regY Optional. - * @return {Matrix2D} This matrix. Useful for chaining method calls. + * Position (2, 1) in a 3x3 affine transformation matrix. + * @property ty + * @type Number **/ - appendTransform = function( - x, - y, - scaleX, - scaleY, - rotation, - skewX, - skewY, - regX, - regY, - ) { - let cos, sin; - if (rotation % 360) { - const r = rotation * DEG_TO_RAD; - cos = Math.cos(r); - sin = Math.sin(r); - } else { - cos = 1; - sin = 0; - } + } - const a = cos * scaleX; - const b = sin * scaleX; - const c = -sin * scaleY; - const d = cos * scaleY; + /** + * Reset current matrix to an identity matrix. + * @method reset + * @return {Matrix2D} This matrix. Useful for chaining method calls. + **/ + reset = function() { + this.a = this.d = 1; + this.b = this.c = this.tx = this.ty = 0; + this.hasInitialState = true; + return this; + }; - if (skewX || skewY) { - const b1 = Math.tan(skewY * DEG_TO_RAD); - const c1 = Math.tan(skewX * DEG_TO_RAD); - this.append(a + c1 * b, b1 * a + b, c + c1 * d, b1 * c + d, x, y); - } else { - this.append(a, b, c, d, x, y); - } + /** + * Returns an array with current matrix values. + * @method toArray + * @return {Array} an array with current matrix values. + **/ + toArray = function() { + return [this.a, this.b, this.c, this.d, this.tx, this.ty]; + }; - if (regX || regY) { - // append the registration offset: - this.tx -= regX * this.a + regY * this.c; - this.ty -= regX * this.b + regY * this.d; - } - return this; - }; + /** + * Appends the specified matrix properties to this matrix. All parameters are required. + * This is the equivalent of multiplying `(this matrix) * (specified matrix)`. + * @method append + * @param {Number} a + * @param {Number} b + * @param {Number} c + * @param {Number} d + * @param {Number} tx + * @param {Number} ty + * @return {Matrix2D} This matrix. Useful for chaining method calls. + **/ + append = function(a, b, c, d, tx, ty) { + if (this.hasInitialState) { + this.hasInitialState = false; + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; + return this; + } + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + if (a !== 1 || b !== 0 || c !== 0 || d !== 1) { + this.a = a1 * a + c1 * b; + this.b = b1 * a + d1 * b; + this.c = a1 * c + c1 * d; + this.d = b1 * c + d1 * d; + } + this.tx = a1 * tx + c1 * ty + this.tx; + this.ty = b1 * tx + d1 * ty + this.ty; + return this; + }; + + /** + * Generates matrix properties from the specified display object transform properties, and appends them to this matrix. + * For example, you can use this to generate a matrix representing the transformations of a display object: + * + * var mtx = new createjs.Matrix2D(); + * mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation); + * @method appendTransform + * @param {Number} x + * @param {Number} y + * @param {Number} scaleX + * @param {Number} scaleY + * @param {Number} rotation + * @param {Number} skewX + * @param {Number} skewY + * @param {Number} regX Optional. + * @param {Number} regY Optional. + * @return {Matrix2D} This matrix. Useful for chaining method calls. + **/ + appendTransform = function( + x, + y, + scaleX, + scaleY, + rotation, + skewX, + skewY, + regX, + regY, + ) { + let cos, sin; + if (rotation % 360) { + const r = rotation * DEG_TO_RAD; + cos = Math.cos(r); + sin = Math.sin(r); + } else { + cos = 1; + sin = 0; + } + + const a = cos * scaleX; + const b = sin * scaleX; + const c = -sin * scaleY; + const d = cos * scaleY; + + if (skewX || skewY) { + const b1 = Math.tan(skewY * DEG_TO_RAD); + const c1 = Math.tan(skewX * DEG_TO_RAD); + this.append(a + c1 * b, b1 * a + b, c + c1 * d, b1 * c + d, x, y); + } else { + this.append(a, b, c, d, x, y); + } + + if (regX || regY) { + // append the registration offset: + this.tx -= regX * this.a + regY * this.c; + this.ty -= regX * this.b + regY * this.d; + } + return this; + }; } diff --git a/lib/SvgTouchableMixin.js b/lib/SvgTouchableMixin.js index 49ba33b65..acc8ccd65 100644 --- a/lib/SvgTouchableMixin.js +++ b/lib/SvgTouchableMixin.js @@ -2,103 +2,97 @@ import { Touchable } from "react-native"; const PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 }; export default { - ...Touchable.Mixin, - - touchableHandleStartShouldSetResponder: function(e) { - if (this.props.onStartShouldSetResponder) { - return this.props.onStartShouldSetResponder(e); - } else { - return Touchable.Mixin.touchableHandleStartShouldSetResponder.call( - this, - e, - ); - } - }, - - touchableHandleResponderTerminationRequest: function(e) { - if (this.props.onResponderTerminationRequest) { - return this.props.onResponderTerminationRequest(e); - } else { - return Touchable.Mixin.touchableHandleResponderTerminationRequest.call( - this, - e, - ); - } - }, - - touchableHandleResponderGrant: function(e) { - if (this.props.onResponderGrant) { - return this.props.onResponderGrant(e); - } else { - return Touchable.Mixin.touchableHandleResponderGrant.call(this, e); - } - }, - - touchableHandleResponderMove: function(e) { - if (this.props.onResponderMove) { - return this.props.onResponderMove(e); - } else { - return Touchable.Mixin.touchableHandleResponderMove.call(this, e); - } - }, - - touchableHandleResponderRelease: function(e) { - if (this.props.onResponderRelease) { - return this.props.onResponderRelease(e); - } else { - return Touchable.Mixin.touchableHandleResponderRelease.call( - this, - e, - ); - } - }, - - touchableHandleResponderTerminate: function(e) { - if (this.props.onResponderTerminate) { - return this.props.onResponderTerminate(e); - } else { - return Touchable.Mixin.touchableHandleResponderTerminate.call( - this, - e, - ); - } - }, - - touchableHandlePress: function(e) { - this.props.onPress && this.props.onPress(e); - }, - - touchableHandleActivePressIn: function(e) { - this.props.onPressIn && this.props.onPressIn(e); - }, - - touchableHandleActivePressOut: function(e) { - this.props.onPressOut && this.props.onPressOut(e); - }, - - touchableHandleLongPress: function(e) { - this.props.onLongPress && this.props.onLongPress(e); - }, - - touchableGetPressRectOffset: function() { - return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET; - }, - - touchableGetHitSlop: function() { - return this.props.hitSlop; - }, - - touchableGetHighlightDelayMS: function() { - return this.props.delayPressIn || 0; - }, - - touchableGetLongPressDelayMS: function() { - return this.props.delayLongPress === 0 - ? 0 - : this.props.delayLongPress || 500; - }, - - touchableGetPressOutDelayMS: function() { - return this.props.delayPressOut || 0; - }, + ...Touchable.Mixin, + + touchableHandleStartShouldSetResponder: function(e) { + if (this.props.onStartShouldSetResponder) { + return this.props.onStartShouldSetResponder(e); + } else { + return Touchable.Mixin.touchableHandleStartShouldSetResponder.call( + this, + e, + ); + } + }, + + touchableHandleResponderTerminationRequest: function(e) { + if (this.props.onResponderTerminationRequest) { + return this.props.onResponderTerminationRequest(e); + } else { + return Touchable.Mixin.touchableHandleResponderTerminationRequest.call( + this, + e, + ); + } + }, + + touchableHandleResponderGrant: function(e) { + if (this.props.onResponderGrant) { + return this.props.onResponderGrant(e); + } else { + return Touchable.Mixin.touchableHandleResponderGrant.call(this, e); + } + }, + + touchableHandleResponderMove: function(e) { + if (this.props.onResponderMove) { + return this.props.onResponderMove(e); + } else { + return Touchable.Mixin.touchableHandleResponderMove.call(this, e); + } + }, + + touchableHandleResponderRelease: function(e) { + if (this.props.onResponderRelease) { + return this.props.onResponderRelease(e); + } else { + return Touchable.Mixin.touchableHandleResponderRelease.call(this, e); + } + }, + + touchableHandleResponderTerminate: function(e) { + if (this.props.onResponderTerminate) { + return this.props.onResponderTerminate(e); + } else { + return Touchable.Mixin.touchableHandleResponderTerminate.call(this, e); + } + }, + + touchableHandlePress: function(e) { + this.props.onPress && this.props.onPress(e); + }, + + touchableHandleActivePressIn: function(e) { + this.props.onPressIn && this.props.onPressIn(e); + }, + + touchableHandleActivePressOut: function(e) { + this.props.onPressOut && this.props.onPressOut(e); + }, + + touchableHandleLongPress: function(e) { + this.props.onLongPress && this.props.onLongPress(e); + }, + + touchableGetPressRectOffset: function() { + return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET; + }, + + touchableGetHitSlop: function() { + return this.props.hitSlop; + }, + + touchableGetHighlightDelayMS: function() { + return this.props.delayPressIn || 0; + }, + + touchableGetLongPressDelayMS: function() { + return this.props.delayLongPress === 0 + ? 0 + : this.props.delayLongPress || 500; + }, + + touchableGetPressOutDelayMS: function() { + return this.props.delayPressOut || 0; + }, }; diff --git a/lib/extract/extractBrush.js b/lib/extract/extractBrush.js index 237dc9643..fbaf5207c 100644 --- a/lib/extract/extractBrush.js +++ b/lib/extract/extractBrush.js @@ -3,31 +3,31 @@ import Color from "color"; const urlIdPattern = /^url\(#(.+?)\)$/; export default function extractBrush(colorOrBrush) { - if (colorOrBrush === "none" || !colorOrBrush) { - return null; - } + if (colorOrBrush === "none" || !colorOrBrush) { + return null; + } - if (colorOrBrush === "currentColor") { - return [2]; - } - try { - const matched = colorOrBrush.match(urlIdPattern); - // brush - if (matched) { - return [1, matched[1]]; - } else { - // solid color - const color = Color(colorOrBrush) - .rgb() - .array(); - const r = color[0] / 255; - const g = color[1] / 255; - const b = color[2] / 255; - const a = color[3]; - return [0, r, g, b, a === undefined ? 1 : a]; - } - } catch (err) { - console.warn(`"${colorOrBrush}" is not a valid color or brush`); - return null; + if (colorOrBrush === "currentColor") { + return [2]; + } + try { + const matched = colorOrBrush.match(urlIdPattern); + // brush + if (matched) { + return [1, matched[1]]; + } else { + // solid color + const color = Color(colorOrBrush) + .rgb() + .array(); + const r = color[0] / 255; + const g = color[1] / 255; + const b = color[2] / 255; + const a = color[3]; + return [0, r, g, b, a === undefined ? 1 : a]; } + } catch (err) { + console.warn(`"${colorOrBrush}" is not a valid color or brush`); + return null; + } } diff --git a/lib/extract/extractClipPath.js b/lib/extract/extractClipPath.js index 2361d17c0..0861736f0 100644 --- a/lib/extract/extractClipPath.js +++ b/lib/extract/extractClipPath.js @@ -1,31 +1,31 @@ import { idPattern } from "../util"; const clipRules = { - evenodd: 0, - nonzero: 1, + evenodd: 0, + nonzero: 1, }; export default function extractClipPath(props) { - const { clipPath, clipRule } = props; - const clipPathProps = {}; + const { clipPath, clipRule } = props; + const clipPathProps = {}; - if (clipRule) { - clipPathProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1; - } + if (clipRule) { + clipPathProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1; + } - if (clipPath) { - const matched = clipPath.match(idPattern); + if (clipPath) { + const matched = clipPath.match(idPattern); - if (matched) { - clipPathProps.clipPath = matched[1]; - } else { - console.warn( - 'Invalid `clipPath` prop, expected a clipPath like `"#id"`, but got: "' + - clipPath + - '"', - ); - } + if (matched) { + clipPathProps.clipPath = matched[1]; + } else { + console.warn( + 'Invalid `clipPath` prop, expected a clipPath like `"#id"`, but got: "' + + clipPath + + '"', + ); } + } - return clipPathProps; + return clipPathProps; } diff --git a/lib/extract/extractFill.js b/lib/extract/extractFill.js index 2f3bf311a..59e4f0c9e 100644 --- a/lib/extract/extractFill.js +++ b/lib/extract/extractFill.js @@ -2,25 +2,25 @@ import extractBrush from "./extractBrush"; import extractOpacity from "./extractOpacity"; const fillRules = { - evenodd: 0, - nonzero: 1, + evenodd: 0, + nonzero: 1, }; const fillProps = ["fill", "fillOpacity", "fillRule"]; const numFillProps = fillProps.length; export default function extractFill(props, styleProperties) { - for (let i = 0; i < numFillProps; i++) { - const name = fillProps[i]; - if (props.hasOwnProperty(name)) { - styleProperties.push(name); - } + for (let i = 0; i < numFillProps; i++) { + const name = fillProps[i]; + if (props.hasOwnProperty(name)) { + styleProperties.push(name); } + } - return { - // default fill is black - fill: extractBrush(props.fill || "#000"), - fillOpacity: extractOpacity(props.fillOpacity), - fillRule: fillRules[props.fillRule] === 0 ? 0 : 1, - }; + return { + // default fill is black + fill: extractBrush(props.fill || "#000"), + fillOpacity: extractOpacity(props.fillOpacity), + fillRule: fillRules[props.fillRule] === 0 ? 0 : 1, + }; } diff --git a/lib/extract/extractGradient.js b/lib/extract/extractGradient.js index 7e38257fd..d89cd5e09 100644 --- a/lib/extract/extractGradient.js +++ b/lib/extract/extractGradient.js @@ -8,76 +8,74 @@ import units from "../units"; const percentReg = /^([+\-]?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?)(%?)$/; function percentToFloat(percent) { - if (typeof percent === "number") { - return percent; - } - if ( - typeof percent === "object" && - typeof percent.__getAnimatedValue === "function" - ) { - return percent.__getAnimatedValue(); - } - const matched = percent.match(percentReg); - if (!matched) { - console.warn( - `"${percent}" is not a valid number or percentage string.`, - ); - return 0; - } + if (typeof percent === "number") { + return percent; + } + if ( + typeof percent === "object" && + typeof percent.__getAnimatedValue === "function" + ) { + return percent.__getAnimatedValue(); + } + const matched = percent.match(percentReg); + if (!matched) { + console.warn(`"${percent}" is not a valid number or percentage string.`); + return 0; + } - return matched[2] ? matched[1] / 100 : +matched[1]; + return matched[2] ? matched[1] / 100 : +matched[1]; } const offsetComparator = (object, other) => object[0] - other[0]; export default function extractGradient(props, parent) { - const { id, children, gradientTransform, transform, gradientUnits } = props; - if (!id) { - return null; - } + const { id, children, gradientTransform, transform, gradientUnits } = props; + if (!id) { + return null; + } - const stops = []; - const childArray = Children.map(children, child => - React.cloneElement(child, { - parent, - }), - ); - const l = childArray.length; - for (let i = 0; i < l; i++) { - const { - props: { offset, stopColor, stopOpacity }, - } = childArray[i]; - const offsetNumber = percentToFloat(offset); - if (stopColor && !isNaN(offsetNumber)) { - const color = Color(stopColor) - .alpha(extractOpacity(stopOpacity)) - .rgb() - .array(); - const r = color[0] / 255; - const g = color[1] / 255; - const b = color[2] / 255; - const a = color[3]; - stops.push([offsetNumber, r, g, b, a === undefined ? 1 : a]); - } + const stops = []; + const childArray = Children.map(children, child => + React.cloneElement(child, { + parent, + }), + ); + const l = childArray.length; + for (let i = 0; i < l; i++) { + const { + props: { offset, stopColor, stopOpacity }, + } = childArray[i]; + const offsetNumber = percentToFloat(offset); + if (stopColor && !isNaN(offsetNumber)) { + const color = Color(stopColor) + .alpha(extractOpacity(stopOpacity)) + .rgb() + .array(); + const r = color[0] / 255; + const g = color[1] / 255; + const b = color[2] / 255; + const a = color[3]; + stops.push([offsetNumber, r, g, b, a === undefined ? 1 : a]); } - stops.sort(offsetComparator); + } + stops.sort(offsetComparator); - const colors = []; - const offsets = []; - const k = stops.length; - for (let j = 0; j < k; j++) { - const s = stops[j]; - offsets.push(s[0]); - colors.push(s[1], s[2], s[3], s[4]); - } + const colors = []; + const offsets = []; + const k = stops.length; + for (let j = 0; j < k; j++) { + const s = stops[j]; + offsets.push(s[0]); + colors.push(s[1], s[2], s[3], s[4]); + } - return { - name: id, - children: childArray, - gradient: colors.concat(offsets), - gradientUnits: units[gradientUnits] || 0, - gradientTransform: extractTransform( - gradientTransform || transform || props, - ), - }; + return { + name: id, + children: childArray, + gradient: colors.concat(offsets), + gradientUnits: units[gradientUnits] || 0, + gradientTransform: extractTransform( + gradientTransform || transform || props, + ), + }; } diff --git a/lib/extract/extractLengthList.js b/lib/extract/extractLengthList.js index 071098c64..6d2a87a73 100644 --- a/lib/extract/extractLengthList.js +++ b/lib/extract/extractLengthList.js @@ -2,16 +2,16 @@ const spaceReg = /\s+/; const commaReg = /,/g; export default function extractLengthList(lengthList) { - if (Array.isArray(lengthList)) { - return lengthList; - } else if (typeof lengthList === "number") { - return [lengthList]; - } else if (typeof lengthList === "string") { - return lengthList - .trim() - .replace(commaReg, " ") - .split(spaceReg); - } else { - return []; - } + if (Array.isArray(lengthList)) { + return lengthList; + } else if (typeof lengthList === "number") { + return [lengthList]; + } else if (typeof lengthList === "string") { + return lengthList + .trim() + .replace(commaReg, " ") + .split(spaceReg); + } else { + return []; + } } diff --git a/lib/extract/extractOpacity.js b/lib/extract/extractOpacity.js index 55605646a..5e8809ec8 100644 --- a/lib/extract/extractOpacity.js +++ b/lib/extract/extractOpacity.js @@ -1,4 +1,4 @@ export default function extractOpacity(opacity) { - const value = +opacity; - return typeof value !== "number" || isNaN(value) ? 1 : value; + const value = +opacity; + return typeof value !== "number" || isNaN(value) ? 1 : value; } diff --git a/lib/extract/extractPolyPoints.js b/lib/extract/extractPolyPoints.js index df03f895a..92f2c9223 100644 --- a/lib/extract/extractPolyPoints.js +++ b/lib/extract/extractPolyPoints.js @@ -1,7 +1,7 @@ export default function extractPolyPoints(points) { - const polyPoints = Array.isArray(points) ? points.join(",") : points; - return polyPoints - .replace(/[^e]-/, " -") - .split(/(?:\s+|\s*,\s*)/g) - .join(" "); + const polyPoints = Array.isArray(points) ? points.join(",") : points; + return polyPoints + .replace(/[^e]-/, " -") + .split(/(?:\s+|\s*,\s*)/g) + .join(" "); } diff --git a/lib/extract/extractProps.js b/lib/extract/extractProps.js index 7b9e0481d..83a4461c5 100644 --- a/lib/extract/extractProps.js +++ b/lib/extract/extractProps.js @@ -7,49 +7,49 @@ import extractOpacity from "./extractOpacity"; import { idPattern } from "../util"; export function propsAndStyles(props) { - const style = props.style; - return { - ...(style && style.length ? Object.assign({}, ...style) : style), - ...props, - }; + const style = props.style; + return { + ...(style && style.length ? Object.assign({}, ...style) : style), + ...props, + }; } export default function extractProps(props, ref) { - const { opacity, onLayout, id, clipPath, mask } = props; - const styleProperties = []; - - const extractedProps = { - onLayout, - propList: styleProperties, - opacity: extractOpacity(opacity), - matrix: extractTransform(props), - ...props2transform(props), - ...extractResponder(props, ref), - ...extractFill(props, styleProperties), - ...extractStroke(props, styleProperties), - }; - - if (id) { - extractedProps.name = id; + const { opacity, onLayout, id, clipPath, mask } = props; + const styleProperties = []; + + const extractedProps = { + onLayout, + propList: styleProperties, + opacity: extractOpacity(opacity), + matrix: extractTransform(props), + ...props2transform(props), + ...extractResponder(props, ref), + ...extractFill(props, styleProperties), + ...extractStroke(props, styleProperties), + }; + + if (id) { + extractedProps.name = id; + } + + if (clipPath) { + Object.assign(extractedProps, extractClipPath(props)); + } + + if (mask) { + const matched = mask.match(idPattern); + + if (matched) { + extractedProps.mask = matched[1]; + } else { + console.warn( + 'Invalid `mask` prop, expected a mask like `"#id"`, but got: "' + + mask + + '"', + ); } + } - if (clipPath) { - Object.assign(extractedProps, extractClipPath(props)); - } - - if (mask) { - const matched = mask.match(idPattern); - - if (matched) { - extractedProps.mask = matched[1]; - } else { - console.warn( - 'Invalid `mask` prop, expected a mask like `"#id"`, but got: "' + - mask + - '"', - ); - } - } - - return extractedProps; + return extractedProps; } diff --git a/lib/extract/extractResponder.js b/lib/extract/extractResponder.js index 50c9b55af..881590b26 100644 --- a/lib/extract/extractResponder.js +++ b/lib/extract/extractResponder.js @@ -4,61 +4,60 @@ const responderProps = Object.keys(PanResponder.create({}).panHandlers); const numResponderProps = responderProps.length; const touchableProps = [ - "disabled", - "onPress", - "onPressIn", - "onPressOut", - "onLongPress", - "delayPressIn", - "delayPressOut", - "delayLongPress", + "disabled", + "onPress", + "onPressIn", + "onPressOut", + "onLongPress", + "delayPressIn", + "delayPressOut", + "delayLongPress", ]; const numTouchableProps = touchableProps.length; function hasTouchableProperty(props) { - for (let i = 0; i < numTouchableProps; i++) { - if (props.hasOwnProperty(touchableProps[i])) { - return true; - } + for (let i = 0; i < numTouchableProps; i++) { + if (props.hasOwnProperty(touchableProps[i])) { + return true; } - return false; + } + return false; } export default function extractResponder(props, ref) { - const extractedProps = {}; - - let responsible = false; - for (let i = 0; i < numResponderProps; i++) { - const key = responderProps[i]; - const value = props[key]; - if (value) { - responsible = true; - extractedProps[key] = value; - } - } - - const pointerEvents = props.pointerEvents; - if (pointerEvents) { - extractedProps.pointerEvents = pointerEvents; - } - - if (hasTouchableProperty(props)) { - responsible = true; - Object.assign(extractedProps, { - onStartShouldSetResponder: - ref.touchableHandleStartShouldSetResponder, - onResponderTerminationRequest: - ref.touchableHandleResponderTerminationRequest, - onResponderGrant: ref.touchableHandleResponderGrant, - onResponderMove: ref.touchableHandleResponderMove, - onResponderRelease: ref.touchableHandleResponderRelease, - onResponderTerminate: ref.touchableHandleResponderTerminate, - }); - } - - if (responsible) { - extractedProps.responsible = true; + const extractedProps = {}; + + let responsible = false; + for (let i = 0; i < numResponderProps; i++) { + const key = responderProps[i]; + const value = props[key]; + if (value) { + responsible = true; + extractedProps[key] = value; } - - return extractedProps; + } + + const pointerEvents = props.pointerEvents; + if (pointerEvents) { + extractedProps.pointerEvents = pointerEvents; + } + + if (hasTouchableProperty(props)) { + responsible = true; + Object.assign(extractedProps, { + onStartShouldSetResponder: ref.touchableHandleStartShouldSetResponder, + onResponderTerminationRequest: + ref.touchableHandleResponderTerminationRequest, + onResponderGrant: ref.touchableHandleResponderGrant, + onResponderMove: ref.touchableHandleResponderMove, + onResponderRelease: ref.touchableHandleResponderRelease, + onResponderTerminate: ref.touchableHandleResponderTerminate, + }); + } + + if (responsible) { + extractedProps.responsible = true; + } + + return extractedProps; } diff --git a/lib/extract/extractStroke.js b/lib/extract/extractStroke.js index a3802d522..7b6c3be18 100644 --- a/lib/extract/extractStroke.js +++ b/lib/extract/extractStroke.js @@ -3,54 +3,54 @@ import extractOpacity from "./extractOpacity"; import extractLengthList from "./extractLengthList"; const caps = { - butt: 0, - square: 2, - round: 1, + butt: 0, + square: 2, + round: 1, }; const joins = { - miter: 0, - bevel: 2, - round: 1, + miter: 0, + bevel: 2, + round: 1, }; const strokeProps = [ - "stroke", - "strokeWidth", - "strokeOpacity", - "strokeDasharray", - "strokeDashoffset", - "strokeLinecap", - "strokeLinejoin", - "strokeMiterlimit", + "stroke", + "strokeWidth", + "strokeOpacity", + "strokeDasharray", + "strokeDashoffset", + "strokeLinecap", + "strokeLinejoin", + "strokeMiterlimit", ]; const numStrokeProps = strokeProps.length; export default function extractStroke(props, styleProperties) { - for (let i = 0; i < numStrokeProps; i++) { - const name = strokeProps[i]; - if (props.hasOwnProperty(name)) { - styleProperties.push(name); - } + for (let i = 0; i < numStrokeProps; i++) { + const name = strokeProps[i]; + if (props.hasOwnProperty(name)) { + styleProperties.push(name); } + } - const { stroke, strokeWidth = 1, strokeDasharray } = props; - const strokeDash = - !strokeDasharray || strokeDasharray === "none" - ? null - : extractLengthList(strokeDasharray); + const { stroke, strokeWidth = 1, strokeDasharray } = props; + const strokeDash = + !strokeDasharray || strokeDasharray === "none" + ? null + : extractLengthList(strokeDasharray); - return { - stroke: extractBrush(stroke), - strokeOpacity: extractOpacity(props.strokeOpacity), - strokeLinecap: caps[props.strokeLinecap] || 0, - strokeLinejoin: joins[props.strokeLinejoin] || 0, - strokeDasharray: - strokeDash && strokeDash.length % 2 === 1 - ? strokeDash.concat(strokeDash) - : strokeDash, - strokeWidth, - strokeDashoffset: strokeDasharray ? +props.strokeDashoffset || 0 : null, - strokeMiterlimit: parseFloat(props.strokeMiterlimit) || 4, - }; + return { + stroke: extractBrush(stroke), + strokeOpacity: extractOpacity(props.strokeOpacity), + strokeLinecap: caps[props.strokeLinecap] || 0, + strokeLinejoin: joins[props.strokeLinejoin] || 0, + strokeDasharray: + strokeDash && strokeDash.length % 2 === 1 + ? strokeDash.concat(strokeDash) + : strokeDash, + strokeWidth, + strokeDashoffset: strokeDasharray ? +props.strokeDashoffset || 0 : null, + strokeMiterlimit: parseFloat(props.strokeMiterlimit) || 4, + }; } diff --git a/lib/extract/extractText.js b/lib/extract/extractText.js index 4ba19db20..4435a42d6 100644 --- a/lib/extract/extractText.js +++ b/lib/extract/extractText.js @@ -10,127 +10,127 @@ const commaReg = /\s*,\s*/g; const cachedFontObjectsFromString = {}; function extractSingleFontFamily(fontFamilyString) { - // SVG on the web allows for multiple font-families to be specified. - // For compatibility, we extract the first font-family, hoping - // we'll get a match. - return fontFamilyString - ? fontFamilyString - .split(commaReg)[0] - .replace(fontFamilyPrefix, "") - .replace(fontFamilySuffix, "") - : null; + // SVG on the web allows for multiple font-families to be specified. + // For compatibility, we extract the first font-family, hoping + // we'll get a match. + return fontFamilyString + ? fontFamilyString + .split(commaReg)[0] + .replace(fontFamilyPrefix, "") + .replace(fontFamilySuffix, "") + : null; } function parseFontString(font) { - if (cachedFontObjectsFromString.hasOwnProperty(font)) { - return cachedFontObjectsFromString[font]; - } - const match = fontRegExp.exec(font); - if (!match) { - cachedFontObjectsFromString[font] = null; - return null; - } - const isBold = /bold/.exec(match[1]); - const isItalic = /italic/.exec(match[1]); - cachedFontObjectsFromString[font] = { - fontSize: match[2] || "12", - fontWeight: isBold ? "bold" : "normal", - fontStyle: isItalic ? "italic" : "normal", - fontFamily: extractSingleFontFamily(match[3]), - }; + if (cachedFontObjectsFromString.hasOwnProperty(font)) { return cachedFontObjectsFromString[font]; + } + const match = fontRegExp.exec(font); + if (!match) { + cachedFontObjectsFromString[font] = null; + return null; + } + const isBold = /bold/.exec(match[1]); + const isItalic = /italic/.exec(match[1]); + cachedFontObjectsFromString[font] = { + fontSize: match[2] || "12", + fontWeight: isBold ? "bold" : "normal", + fontStyle: isItalic ? "italic" : "normal", + fontFamily: extractSingleFontFamily(match[3]), + }; + return cachedFontObjectsFromString[font]; } export function extractFont(props) { - const { - fontData, - fontStyle, - fontVariant, - fontWeight, - fontStretch, - fontSize, - fontFamily, - textAnchor, - textDecoration, - letterSpacing, - wordSpacing, - kerning, - fontVariantLigatures, - fontFeatureSettings, - font, - } = props; + const { + fontData, + fontStyle, + fontVariant, + fontWeight, + fontStretch, + fontSize, + fontFamily, + textAnchor, + textDecoration, + letterSpacing, + wordSpacing, + kerning, + fontVariantLigatures, + fontFeatureSettings, + font, + } = props; - const ownedFont = pickNotNil({ - fontData, - fontStyle, - fontVariant, - fontWeight, - fontStretch, - fontSize, - fontFamily: extractSingleFontFamily(fontFamily), - textAnchor, - textDecoration, - letterSpacing, - wordSpacing, - kerning, - fontVariantLigatures, - fontFeatureSettings, - }); + const ownedFont = pickNotNil({ + fontData, + fontStyle, + fontVariant, + fontWeight, + fontStretch, + fontSize, + fontFamily: extractSingleFontFamily(fontFamily), + textAnchor, + textDecoration, + letterSpacing, + wordSpacing, + kerning, + fontVariantLigatures, + fontFeatureSettings, + }); - const baseFont = typeof font === "string" ? parseFontString(font) : font; + const baseFont = typeof font === "string" ? parseFontString(font) : font; - return { ...baseFont, ...ownedFont }; + return { ...baseFont, ...ownedFont }; } let TSpan; export function setTSpan(TSpanImplementation) { - TSpan = TSpanImplementation; + TSpan = TSpanImplementation; } function getChild(child) { - if (typeof child === "string" || typeof child === "number") { - return {String(child)}; - } else { - return child; - } + if (typeof child === "string" || typeof child === "number") { + return {String(child)}; + } else { + return child; + } } export default function extractText(props, container) { - const { - x, - y, - dx, - dy, - rotate, - children, - baselineShift, - verticalAlign, - alignmentBaseline, - } = props; + const { + x, + y, + dx, + dy, + rotate, + children, + baselineShift, + verticalAlign, + alignmentBaseline, + } = props; - const textChildren = - typeof children === "string" || typeof children === "number" ? ( - container ? ( - {String(children)} - ) : null - ) : Children.count(children) > 1 || Array.isArray(children) ? ( - Children.map(children, getChild) - ) : ( - children - ); + const textChildren = + typeof children === "string" || typeof children === "number" ? ( + container ? ( + {String(children)} + ) : null + ) : Children.count(children) > 1 || Array.isArray(children) ? ( + Children.map(children, getChild) + ) : ( + children + ); - return { - content: textChildren === null ? String(children) : null, - children: textChildren, - baselineShift, - verticalAlign, - alignmentBaseline, - font: extractFont(props), - x: extractLengthList(x), - y: extractLengthList(y), - dx: extractLengthList(dx), - dy: extractLengthList(dy), - rotate: extractLengthList(rotate), - }; + return { + content: textChildren === null ? String(children) : null, + children: textChildren, + baselineShift, + verticalAlign, + alignmentBaseline, + font: extractFont(props), + x: extractLengthList(x), + y: extractLengthList(y), + dx: extractLengthList(dx), + dy: extractLengthList(dy), + rotate: extractLengthList(rotate), + }; } diff --git a/lib/extract/extractTransform.js b/lib/extract/extractTransform.js index d3bd4f8bf..8fe2d25d4 100644 --- a/lib/extract/extractTransform.js +++ b/lib/extract/extractTransform.js @@ -4,100 +4,100 @@ import transformParser from "./transform"; const pooledMatrix = new Matrix2D(); function transformToMatrix(props, transform) { - pooledMatrix.reset(); - appendTransform(props); + pooledMatrix.reset(); + appendTransform(props); - if (transform) { - appendTransform(transform); - } + if (transform) { + appendTransform(transform); + } - return pooledMatrix.toArray(); + return pooledMatrix.toArray(); } function appendTransform(transform) { - if (transform) { - if (typeof transform === "string") { - try { - const t = transformParser.parse(transform); - pooledMatrix.append(t[0], t[3], t[1], t[4], t[2], t[5]); - } catch (e) { - console.error(e); - } - } else { - pooledMatrix.appendTransform( - transform.x + transform.originX, - transform.y + transform.originY, - transform.scaleX, - transform.scaleY, - transform.rotation, - transform.skewX, - transform.skewY, - transform.originX, - transform.originY, - ); - } + if (transform) { + if (typeof transform === "string") { + try { + const t = transformParser.parse(transform); + pooledMatrix.append(t[0], t[3], t[1], t[4], t[2], t[5]); + } catch (e) { + console.error(e); + } + } else { + pooledMatrix.appendTransform( + transform.x + transform.originX, + transform.y + transform.originY, + transform.scaleX, + transform.scaleY, + transform.rotation, + transform.skewX, + transform.skewY, + transform.originX, + transform.originY, + ); } + } } function universal2axis(universal, axisX, axisY, defaultValue) { - let x; - let y; - if (typeof universal === "string") { - const coords = universal.split(/\s*,\s*/); - if (coords.length === 2) { - x = +coords[0]; - y = +coords[1]; - } else if (coords.length === 1) { - x = y = +coords[0]; - } - } else if (typeof universal === "number") { - x = y = universal; + let x; + let y; + if (typeof universal === "string") { + const coords = universal.split(/\s*,\s*/); + if (coords.length === 2) { + x = +coords[0]; + y = +coords[1]; + } else if (coords.length === 1) { + x = y = +coords[0]; } + } else if (typeof universal === "number") { + x = y = universal; + } - axisX = +axisX; - if (!isNaN(axisX)) { - x = axisX; - } + axisX = +axisX; + if (!isNaN(axisX)) { + x = axisX; + } - axisY = +axisY; - if (!isNaN(axisY)) { - y = axisY; - } + axisY = +axisY; + if (!isNaN(axisY)) { + y = axisY; + } - return [x || defaultValue || 0, y || defaultValue || 0]; + return [x || defaultValue || 0, y || defaultValue || 0]; } export function props2transform(props) { - if (props && typeof props === "string") { - return 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, - // eslint-disable-next-line eqeqeq - props.translateX == null ? props.x || 0 : props.translateX, - // eslint-disable-next-line eqeqeq - props.translateY == null ? props.y || 0 : props.translateY, - ); + if (props && typeof props === "string") { + return 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, + // eslint-disable-next-line eqeqeq + props.translateX == null ? props.x || 0 : props.translateX, + // eslint-disable-next-line eqeqeq + props.translateY == null ? props.y || 0 : props.translateY, + ); - 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], - }; + 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], + }; } export default function extractTransform(props) { - return transformToMatrix( - props2transform(props), - props.transform ? props2transform(props.transform) : null, - ); + return transformToMatrix( + props2transform(props), + props.transform ? props2transform(props.transform) : null, + ); } diff --git a/lib/extract/extractViewBox.js b/lib/extract/extractViewBox.js index b4f43a527..d64ef497b 100644 --- a/lib/extract/extractViewBox.js +++ b/lib/extract/extractViewBox.js @@ -1,54 +1,54 @@ export const meetOrSliceTypes = { - meet: 0, - slice: 1, - none: 2, + meet: 0, + slice: 1, + none: 2, }; export const alignEnum = [ - "xMinYMin", - "xMidYMin", - "xMaxYMin", - "xMinYMid", - "xMidYMid", - "xMaxYMid", - "xMinYMax", - "xMidYMax", - "xMaxYMax", - "none", + "xMinYMin", + "xMidYMin", + "xMaxYMin", + "xMinYMid", + "xMidYMid", + "xMaxYMid", + "xMinYMax", + "xMidYMax", + "xMaxYMax", + "none", ].reduce((prev, name) => { - prev[name] = name; - return prev; + prev[name] = name; + return prev; }, {}); const spacesRegExp = /\s+/; export default function extractViewBox(props) { - const { viewBox, preserveAspectRatio } = props; - - if (!viewBox) { - return null; - } - - const params = viewBox - .trim() - .split(spacesRegExp) - .map(Number); - - if (params.length !== 4 || params.some(isNaN)) { - console.warn("Invalid `viewBox` prop:" + viewBox); - return null; - } - - const modes = preserveAspectRatio - ? preserveAspectRatio.trim().split(spacesRegExp) - : []; - - return { - minX: params[0], - minY: params[1], - vbWidth: params[2], - vbHeight: params[3], - align: alignEnum[modes[0]] || "xMidYMid", - meetOrSlice: meetOrSliceTypes[modes[1]] || 0, - }; + const { viewBox, preserveAspectRatio } = props; + + if (!viewBox) { + return null; + } + + const params = viewBox + .trim() + .split(spacesRegExp) + .map(Number); + + if (params.length !== 4 || params.some(isNaN)) { + console.warn("Invalid `viewBox` prop:" + viewBox); + return null; + } + + const modes = preserveAspectRatio + ? preserveAspectRatio.trim().split(spacesRegExp) + : []; + + return { + minX: params[0], + minY: params[1], + vbWidth: params[2], + vbHeight: params[3], + align: alignEnum[modes[0]] || "xMidYMid", + meetOrSlice: meetOrSliceTypes[modes[1]] || 0, + }; } diff --git a/lib/units.js b/lib/units.js index 035a1598c..b4af27abf 100644 --- a/lib/units.js +++ b/lib/units.js @@ -1,4 +1,4 @@ export default { - objectBoundingBox: 0, - userSpaceOnUse: 1, + objectBoundingBox: 0, + userSpaceOnUse: 1, }; diff --git a/lib/util.js b/lib/util.js index 901c758fa..6e60043f1 100644 --- a/lib/util.js +++ b/lib/util.js @@ -1,14 +1,14 @@ export function pickNotNil(object) { - const result = {}; - for (const key in object) { - if (object.hasOwnProperty(key)) { - const value = object[key]; - if (value !== undefined && value !== null) { - result[key] = value; - } - } + const result = {}; + for (const key in object) { + if (object.hasOwnProperty(key)) { + const value = object[key]; + if (value !== undefined && value !== null) { + result[key] = value; + } } - return result; + } + return result; } export const idPattern = /#([^)]+)\)?$/;