Merge pull request #176 from FormidableLabs/update-for-rnsvg-6

Update for rnsvg 6

lib/components/victory-brush-container.js

@@ -26,7 +26,7 @@ export const brushContainerMixin = (base) => class VictoryNativeSelectionContain
       fill: "transparent"
     },
     handleWidth: 8,
-    selectionComponent: <RectWithStyle/>,
+    brushComponent: <RectWithStyle/>,
     handleComponent: <RectWithStyle/>
   };
 

lib/components/victory-container.js

@@ -1,6 +1,6 @@
 import React from "react";
-import Svg, { G } from "react-native-svg";
-import { get } from "lodash";
+import Svg from "react-native-svg";
+import { assign, get } from "lodash";
 import { View, PanResponder } from "react-native";
 import { VictoryContainer } from "victory-core/src";
 
@@ -71,21 +71,33 @@ export default class extends VictoryContainer {
 
   // Overrides method in victory-core
   renderContainer(props, svgProps, style) {
-    const { className, title, desc, standalone } = props;
-    const nativeStyle = NativeHelpers.getStyle(style);
+    const { title, desc, className, width, height, portalZIndex, responsive } = props;
+    // const nativeStyle = NativeHelpers.getStyle(style);
     const children = this.getChildren(props);
-    const groupComponent = props.groupComponent || <G/>;
-    const parentProps = Object.assign({ className }, nativeStyle, svgProps);
-    return standalone !== false ?
-      (
-        <View {...this.panResponder.panHandlers}>
-          <Svg {...parentProps}>
-            {title ? <title id="title">{title}</title> : null}
-            {desc ? <desc id="desc">{desc}</desc> : null}
-            {children}
-            <Portal ref={this.savePortalRef}/>
-          </Svg>
+    // const parentProps = Object.assign({ className }, nativeStyle, svgProps);
+    const dimensions = responsive ? { width: "100%", height: "100%" } : { width, height };
+    const divStyle = NativeHelpers.getStyle(style);
+    const portalDivStyle = NativeHelpers.getStyle(assign(
+      { zIndex: portalZIndex, position: "absolute", top: 0, left: 0 }, dimensions
+    ));
+    const svgStyle = NativeHelpers.getStyle(assign({ pointerEvents: "all" }, dimensions));
+    const portalSvgStyle = NativeHelpers.getStyle(assign({ overflow: "visible" }, dimensions));
+    const portalProps = {
+      width, height, viewBox: svgProps.viewBox, style: portalSvgStyle
+    };
+    return (
+      <View {...this.panResponder.panHandlers} style={divStyle}
+        className={className} ref={props.containerRef}
+      >
+        <Svg {...svgProps} style={svgStyle}>
+          {title ? <title id="title">{title}</title> : null}
+          {desc ? <desc id="desc">{desc}</desc> : null}
+          {children}
+        </Svg>
+        <View style={portalDivStyle}>
+          <Portal {...portalProps} ref={this.savePortalRef}/>
         </View>
-      ) : React.cloneElement(groupComponent, parentProps, children);
+      </View>
+    );
   }
 }

lib/components/victory-label.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Text, TSpan } from "react-native-svg";
-import { VictoryLabel } from "victory-core/src";
+import { VictoryLabel, LabelHelpers } from "victory-core/src";
 
 import { NativeHelpers } from "../index";
 
@@ -11,28 +11,39 @@ export default class extends VictoryLabel {
     lineHeight: 1
   };
 
+  // temporarily override methd in victory-core. Remove once once issue in rnsvg is fixed
+  // https://github.com/react-native-community/react-native-svg/issues/242
+  // Note: this change will temporarily ignore all transformations other than rotations.
+  getTransform(props, style) {
+    const { x, y, polar } = props;
+    const defaultAngle = polar ? LabelHelpers.getPolarAngle(props) : 0;
+    const angle = style.angle || props.angle || defaultAngle;
+    const r = angle ? angle * (Math.PI / 180) : 0;
+    const a = Math.cos(r);
+    const b = Math.sin(r);
+    const c = -1 * Math.sin(r);
+    const d = Math.cos(r);
+    const e = (-1 * x * Math.cos(r)) + (y * Math.sin(r)) + x;
+    const f = (-1 * x * Math.sin(r)) - (y * Math.cos(r)) + y;
+    return `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`;
+  }
+
   // Overrides method in victory-core
   renderElements(props) {
-    const { x, y, className, events } = props;
+    const { className, events } = props;
     const textProps = {
-      dx: this.dx, dy: this.dy, x, y, className,
-      textAnchor: this.textAnchor
+      dx: this.dx, dy: this.dy, x: this.x, y: this.y, className, transform: this.transform
     };
-
-    const transform = NativeHelpers.getTransform(this.transform);
     return (
-      <Text {...transform} {...textProps}
-        {...events}
-      >
+      <Text {...textProps} {...events}>
         {this.content.map((line, i) => {
           const style = NativeHelpers.getStyle(this.style[i] || this.style[0]);
           const lastStyle = NativeHelpers.getStyle(this.style[i - 1] || this.style[0]);
           const fontSize = (style.fontSize + lastStyle.fontSize) / 2;
           const textAnchor = style.textAnchor || this.textAnchor;
-          const lineOffset = i ? fontSize : 0;
-          const dy = this.dy - fontSize + lineOffset;
+          const dy = i ? (this.lineHeight * fontSize) : undefined;
           return (
-            <TSpan key={i} x={x} dy={dy} dx={this.dx} {...style} textAnchor={textAnchor}>
+            <TSpan key={i} x={this.x} dy={dy} dx={this.dx} {...style} textAnchor={textAnchor}>
               {line}
             </TSpan>
           );

lib/components/victory-portal/portal.js

@@ -1,21 +1,10 @@
 import React from "react";
-import { G } from "react-native-svg";
+import Svg from "react-native-svg";
 import { Portal } from "victory-core/src";
 
 export default class extends Portal {
-  static defaultProps = {
-    ...Portal.defaultProps,
-    groupComponent: <G/>
-  };
 
   render() {
-    return React.cloneElement(
-      this.props.groupComponent,
-      {},
-      Object.keys(this.map).map((key) => {
-        const el = this.map[key];
-        return el ? React.cloneElement(el, { key }) : <G/>;
-      })
-    );
+    return <Svg {...this.props}>{this.getChildren()}</Svg>;
   }
 }