From ca611a441664ad3335b23596b9a362f80fa8e349 Mon Sep 17 00:00:00 2001 From: Mikael Sand Date: Wed, 9 Jan 2019 01:02:22 +0200 Subject: [PATCH] Lift default setNativeProps and refMethod implementation to Shape class --- elements/Circle.js | 8 +------- elements/ClipPath.js | 8 +------- elements/Ellipse.js | 8 +------- elements/G.js | 4 +--- elements/Image.js | 10 ++-------- elements/Line.js | 8 +------- elements/LinearGradient.js | 8 +------- elements/Mask.js | 8 +------- elements/Path.js | 8 +------- elements/Pattern.js | 8 +------- elements/Polygon.js | 6 ++---- elements/Polyline.js | 6 ++---- elements/RadialGradient.js | 8 +------- elements/Rect.js | 8 +------- elements/Shape.js | 6 ++++++ elements/Svg.js | 4 +--- elements/TSpan.js | 4 +--- elements/Text.js | 4 +--- elements/TextPath.js | 26 +++++++++++--------------- elements/Use.js | 10 ++-------- lib/util.js | 2 +- 21 files changed, 40 insertions(+), 122 deletions(-) diff --git a/elements/Circle.js b/elements/Circle.js index 7ba82ca0..db233401 100644 --- a/elements/Circle.js +++ b/elements/Circle.js @@ -12,18 +12,12 @@ export default class Circle extends Shape { r: 0, }; - setNativeProps = (...args) => { - this.root.setNativeProps(...args); - }; - render() { const { props } = this; const { cx, cy, r } = props; return ( { - this.root = ele; - }} + ref={this.refMethod} {...extractProps(props, this)} cx={cx} cy={cy} diff --git a/elements/ClipPath.js b/elements/ClipPath.js index 320170ff..f0b8d053 100644 --- a/elements/ClipPath.js +++ b/elements/ClipPath.js @@ -5,17 +5,11 @@ import extractClipPath from "../lib/extract/extractClipPath"; export default class ClipPath extends Component { static displayName = "ClipPath"; - setNativeProps = (...args) => { - this.root.setNativeProps(...args); - }; - render() { const { id, children } = this.props; return ( { - this.root = ele; - }} + ref={this.refMethod} name={id} {...extractClipPath(this.props)} > diff --git a/elements/Ellipse.js b/elements/Ellipse.js index cc21d097..53ab6bd0 100644 --- a/elements/Ellipse.js +++ b/elements/Ellipse.js @@ -13,18 +13,12 @@ export default class Ellipse extends Shape { ry: 0, }; - setNativeProps = (...args) => { - this.root.setNativeProps(...args); - }; - render() { const { props } = this; const { cx, cy, rx, ry } = props; return ( { - this.root = ele; - }} + ref={this.refMethod} {...extractProps(props, this)} cx={cx} cy={cy} diff --git a/elements/G.js b/elements/G.js index e5e0591a..e23df097 100644 --- a/elements/G.js +++ b/elements/G.js @@ -20,11 +20,9 @@ export default class G extends Shape { const { props } = this; return ( { - this.root = ele; - }} > {props.children} diff --git a/elements/Image.js b/elements/Image.js index 700952ff..a90aa958 100644 --- a/elements/Image.js +++ b/elements/Image.js @@ -6,7 +6,7 @@ import Shape from "./Shape"; const spacesRegExp = /\s+/; -export default class Image extends Shape { +export default class SvgImage extends Shape { static displayName = "Image"; static defaultProps = { @@ -17,19 +17,13 @@ export default class Image extends Shape { preserveAspectRatio: "xMidYMid meet", }; - setNativeProps = props => { - this.root.setNativeProps(props); - }; - render() { const { props } = this; const { preserveAspectRatio, x, y, width, height, href } = props; const modes = preserveAspectRatio.trim().split(spacesRegExp); return ( { - this.root = ele; - }} + ref={this.refMethod} {...extractProps({ ...props, x: null, y: null }, this)} x={x} y={y} diff --git a/elements/Line.js b/elements/Line.js index d61ff408..f86af864 100644 --- a/elements/Line.js +++ b/elements/Line.js @@ -13,18 +13,12 @@ export default class Line extends Shape { y2: 0, }; - setNativeProps = (...args) => { - this.root.setNativeProps(...args); - }; - render() { const { props } = this; const { x1, y1, x2, y2 } = props; return ( { - this.root = ele; - }} + ref={this.refMethod} {...extractProps(props, this)} x1={x1} y1={y1} diff --git a/elements/LinearGradient.js b/elements/LinearGradient.js index 94d0c860..71e3e171 100644 --- a/elements/LinearGradient.js +++ b/elements/LinearGradient.js @@ -12,18 +12,12 @@ export default class LinearGradient extends Component { y2: "0%", }; - setNativeProps = (...args) => { - this.root.setNativeProps(...args); - }; - render() { const { props } = this; const { x1, y1, x2, y2 } = props; return ( { - this.root = ele; - }} + ref={this.refMethod} x1={x1} y1={y1} x2={x2} diff --git a/elements/Mask.js b/elements/Mask.js index b8737401..ed957ddf 100644 --- a/elements/Mask.js +++ b/elements/Mask.js @@ -6,10 +6,6 @@ import units from "../lib/units"; export default class Mask extends Component { static displayName = "Mask"; - setNativeProps = props => { - this.root.setNativeProps(props); - }; - render() { const { props } = this; const { @@ -26,9 +22,7 @@ export default class Mask extends Component { } = props; return ( { - this.root = ele; - }} + ref={this.refMethod} name={id} x={x} y={y} diff --git a/elements/Path.js b/elements/Path.js index 3ad55404..89efe502 100644 --- a/elements/Path.js +++ b/elements/Path.js @@ -6,17 +6,11 @@ import Shape from "./Shape"; export default class Path extends Shape { static displayName = "Path"; - setNativeProps = (...args) => { - this.root.setNativeProps(...args); - }; - render() { const { props } = this; return ( { - this.root = ele; - }} + ref={this.refMethod} {...extractProps(props, this)} d={props.d} /> diff --git a/elements/Pattern.js b/elements/Pattern.js index 3c2d0d74..108e6304 100644 --- a/elements/Pattern.js +++ b/elements/Pattern.js @@ -7,10 +7,6 @@ import units from "../lib/units"; export default class Pattern extends Component { static displayName = "Pattern"; - setNativeProps = props => { - this.root.setNativeProps(props); - }; - render() { const { props } = this; const { @@ -29,9 +25,7 @@ export default class Pattern extends Component { } = props; return ( { - this.root = ele; - }} + ref={this.refMethod} name={id} x={x} y={y} diff --git a/elements/Polygon.js b/elements/Polygon.js index 78ec9e9b..2e189a31 100644 --- a/elements/Polygon.js +++ b/elements/Polygon.js @@ -23,11 +23,9 @@ export default class Polygon extends Shape { const { points } = props; return ( { - this.root = ele; - }} - {...props} + ref={this.refMethod} d={`M${extractPolyPoints(points)}z`} + {...props} /> ); } diff --git a/elements/Polyline.js b/elements/Polyline.js index 400522d0..300e1aef 100644 --- a/elements/Polyline.js +++ b/elements/Polyline.js @@ -23,11 +23,9 @@ export default class Polyline extends Shape { const { points } = props; return ( { - this.root = ele; - }} - {...this.props} + ref={this.refMethod} d={`M${extractPolyPoints(points)}`} + {...props} /> ); } diff --git a/elements/RadialGradient.js b/elements/RadialGradient.js index 5b07ee47..6fdf14a2 100644 --- a/elements/RadialGradient.js +++ b/elements/RadialGradient.js @@ -13,18 +13,12 @@ export default class RadialGradient extends Component { r: "50%", }; - setNativeProps = (...args) => { - this.root.setNativeProps(...args); - }; - render() { const { props } = this; const { fx, fy, rx, ry, r, cx, cy } = props; return ( { - this.root = ele; - }} + ref={this.refMethod} fx={fx} fy={fy} rx={rx || r} diff --git a/elements/Rect.js b/elements/Rect.js index 4a0208e2..5371f392 100644 --- a/elements/Rect.js +++ b/elements/Rect.js @@ -15,18 +15,12 @@ export default class Rect extends Shape { ry: 0, }; - setNativeProps = props => { - this.root.setNativeProps(props); - }; - render() { const { props } = this; const { x, y, width, height, rx, ry } = props; return ( { - this.root = ele; - }} + ref={this.refMethod} {...extractProps( { ...props, diff --git a/elements/Shape.js b/elements/Shape.js index 293dc1b9..b72972e8 100644 --- a/elements/Shape.js +++ b/elements/Shape.js @@ -15,4 +15,10 @@ export default class Shape extends Component { } this.state = this.touchableGetInitialState(); } + refMethod = ref => { + this.root = ref; + }; + setNativeProps = props => { + this.root.setNativeProps(props); + }; } diff --git a/elements/Svg.js b/elements/Svg.js index 6ce16e54..8cc6dd9e 100644 --- a/elements/Svg.js +++ b/elements/Svg.js @@ -104,9 +104,7 @@ export default class Svg extends Shape { bbHeight={String(height)} {...extractResponder(props, this)} {...extractViewBox({ viewBox, preserveAspectRatio })} - ref={ele => { - this.root = ele; - }} + ref={this.refMethod} style={[ styles.svg, style, diff --git a/elements/TSpan.js b/elements/TSpan.js index 05822982..9e3bda44 100644 --- a/elements/TSpan.js +++ b/elements/TSpan.js @@ -25,9 +25,7 @@ export default class TSpan extends Shape { const props = this.props; return ( { - this.root = ele; - }} + ref={this.refMethod} {...extractProps( { ...props, diff --git a/elements/Text.js b/elements/Text.js index 183d8c27..c7ebead7 100644 --- a/elements/Text.js +++ b/elements/Text.js @@ -26,9 +26,7 @@ export default class Text extends Shape { const props = this.props; return ( { - this.root = ele; - }} + ref={this.refMethod} {...extractProps( { ...props, diff --git a/elements/TextPath.js b/elements/TextPath.js index 7fb46a1a..e4fa8f1b 100644 --- a/elements/TextPath.js +++ b/elements/TextPath.js @@ -39,18 +39,7 @@ export default class TextPath extends Shape { if (match) { return ( { - this.root = ele; - }} - {...{ - href: match, - startOffset: startOffset || 0, - method, - spacing, - side, - alignmentBaseline, - midLine, - }} + ref={this.refMethod} {...extractProps( { ...props, @@ -65,6 +54,15 @@ export default class TextPath extends Shape { }, true, )} + {...{ + href: match, + startOffset: startOffset || 0, + method, + spacing, + side, + alignmentBaseline, + midLine, + }} /> ); } @@ -76,9 +74,7 @@ export default class TextPath extends Shape { ); return ( { - this.root = ele; - }} + ref={this.refMethod} > {children} diff --git a/elements/Use.js b/elements/Use.js index e777678d..4eeb89e2 100644 --- a/elements/Use.js +++ b/elements/Use.js @@ -1,5 +1,5 @@ import React from "react"; -import {requireNativeComponent} from "react-native"; +import { requireNativeComponent } from "react-native"; import extractProps from "../lib/extract/extractProps"; import { idPattern } from "../lib/util"; import Shape from "./Shape"; @@ -12,10 +12,6 @@ export default class Use extends Shape { height: 0, }; - setNativeProps = props => { - this.root.setNativeProps(props); - }; - render() { const { props } = this; const { children, width, height, href } = props; @@ -34,9 +30,7 @@ export default class Use extends Shape { return ( { - this.root = ele; - }} + ref={this.refMethod} {...extractProps(props, this)} href={match} width={width} diff --git a/lib/util.js b/lib/util.js index 32dd5947..727f923c 100644 --- a/lib/util.js +++ b/lib/util.js @@ -9,4 +9,4 @@ export function pickNotNil(object) { return result; } -export const idPattern = /^#(.+)$/; +export const idPattern = /#([^\)]+)\)?$/;