remove transform parsing

lib/components/victory-clip-container.js

@@ -7,12 +7,11 @@ export default class extends VictoryClipContainer {
 
   // Overrides method in victory-core
   renderClippedGroup(props, clipId) {
-    const { style, events, children, className } = props;
+    const { style, events, children, className, transform } = props;
     const nativeStyle = NativeHelpers.getStyle(style);
-    const transform = NativeHelpers.getTransform(props.transform);
     const clipComponent = this.renderClipComponent(props, clipId);
     return (
-      <G {...nativeStyle} {...events} {...transform} className={className}>
+      <G {...nativeStyle} {...events} transform={transform} className={className}>
         {clipComponent}
         <G clipPath={`url(#${clipId})`}>
           {children}
@@ -38,11 +37,10 @@ export default class extends VictoryClipContainer {
 
   // Overrides method in victory-core
   renderGroup(props) {
-    const { style, events, children, className } = props;
+    const { style, events, children, className, transform } = props;
     const nativeStyle = NativeHelpers.getStyle(style);
-    const transform = NativeHelpers.getTransform(props.transform);
     return (
-      <G {...nativeStyle} {...events} {...transform} className={className}>
+      <G {...nativeStyle} {...events} transform={transform} className={className}>
         {children}
       </G>
     );

lib/components/victory-label.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Text, TSpan } from "react-native-svg";
-import { VictoryLabel, LabelHelpers } from "victory-core/src";
+import { VictoryLabel } from "victory-core/src";
 
 import { NativeHelpers } from "../index";
 
@@ -11,23 +11,6 @@ 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 { className, events } = props;

lib/components/victory-polar-axis.js

@@ -2,7 +2,6 @@ import React from "react";
 import { Dimensions } from "react-native";
 import { G } from "react-native-svg";
 import { VictoryPolarAxis } from "victory-chart/src";
-import { Helpers } from "victory-core";
 import VictoryLabel from "./victory-label";
 import VictoryContainer from "./victory-container";
 import { Line, Arc } from "../index";
@@ -21,11 +20,4 @@ export default class extends VictoryPolarAxis {
     groupComponent: <G/>,
     width: Dimensions.get("window").width
   };
-
-  // Overridden in victory-native
-  renderGroup(props, children) {
-    const origin = Helpers.getPolarOrigin(props);
-    const transform = { translateX: origin.x, translateY: origin.y };
-    return React.cloneElement(props.groupComponent, transform, children);
-  }
 }

lib/components/victory-primitives/area.js

@@ -14,16 +14,15 @@ export default class extends Area {
     const areaStroke = style.stroke ? "none" : style.fill;
     const areaStyle = NativeHelpers.getStyle(Object.assign({}, style, { stroke: areaStroke }));
     const { role, shapeRendering, className, polar, origin } = this.props;
-    const baseTransform = polar && origin ? `translate(${origin.x} ${origin.y})` : undefined;
-    const transform = NativeHelpers.getTransform(baseTransform);
+    const transform = polar && origin ? `translate(${origin.x} ${origin.y})` : undefined;
     return (
       <Path
         key={"area"}
         shapeRendering={shapeRendering || "auto"}
         role={role || "presentation"}
         d={path}
         className={className}
-        {...transform}
+        transform={transform}
         {...areaStyle}
         {...events}
       />
@@ -37,16 +36,15 @@ export default class extends Area {
     }
     const { role, shapeRendering, className, polar, origin } = this.props;
     const lineStyle = NativeHelpers.getStyle(Object.assign({}, style, { fill: "none" }));
-    const baseTransform = polar && origin ? `translate(${origin.x} ${origin.y})` : undefined;
-    const transform = NativeHelpers.getTransform(baseTransform);
+    const transform = polar && origin ? `translate(${origin.x} ${origin.y})` : undefined;
     return (
       <Path
         key={"area-stroke"}
         shapeRendering={shapeRendering || "auto"}
         role={role || "presentation"}
         d={path}
         className={className}
-        {...transform}
+        transform={transform}
         {...lineStyle}
         {...events}
       />

lib/components/victory-primitives/bar.js

@@ -8,15 +8,14 @@ export default class extends Bar {
   renderBar(path, style, events) {
     const nativeStyle = NativeHelpers.getStyle(style);
     const { role, shapeRendering, className, polar, origin } = this.props;
-    const baseTransform = polar && origin ? `translate(${origin.x} ${origin.y})` : undefined;
-    const transform = NativeHelpers.getTransform(baseTransform);
+    const transform = polar && origin ? `translate(${origin.x} ${origin.y})` : undefined;
     return (
       <Path
         className={className}
         role={role || "presentation"}
         shapeRendering={shapeRendering || "auto"}
         d={path}
-        {...transform}
+        transform={transform}
         {...nativeStyle}
         {...events}
       />

lib/components/victory-primitives/curve.js

@@ -12,16 +12,15 @@ export default class extends Curve {
   renderLine(path, style, events) {
     const { role, shapeRendering, className, polar, origin } = this.props;
     const nativeStyle = NativeHelpers.getStyle(style);
-    const baseTransform = polar && origin ? `translate(${origin.x} ${origin.y})` : undefined;
-    const transform = NativeHelpers.getTransform(baseTransform);
+    const transform = polar && origin ? `translate(${origin.x} ${origin.y})` : undefined;
     return (
       <Path
         key={"curve"}
         shapeRendering={shapeRendering || "auto"}
         role={role || "presentation"}
         d={path}
         className={className}
-        {...transform}
+        transform={transform}
         {...nativeStyle}
         {...events}
       />

lib/components/victory-primitives/slice.js

@@ -8,15 +8,14 @@ export default class extends Slice {
   renderSlice(path, style, events) {
     const { role, shapeRendering, className, origin } = this.props;
     const nativeStyle = NativeHelpers.getStyle(style);
-    const baseTransform = origin ? `translate(${origin.x} ${origin.y})` : undefined;
-    const transform = NativeHelpers.getTransform(baseTransform);
+    const transform = origin ? `translate(${origin.x} ${origin.y})` : undefined;
     return (
       <Path
         className={className}
         role={role || "presentation"}
         shapeRendering={shapeRendering || "auto"}
         d={path}
-        {...transform}
+        transform={transform}
         {...nativeStyle}
         {...events}
       />

lib/helpers/native-helpers.js

@@ -12,33 +12,5 @@ export default {
     ];
     return style.stroke === "none" || style.stroke === "transparent" ?
       omit(style, [...unsupportedProps, ...strokeProperties]) : omit(style, unsupportedProps);
-  },
-
-  parseTransformString(baseString) {
-    if (typeof baseString !== "string") {
-      return undefined;
-    }
-    const str = baseString.replace(",", "");
-    const translate = str.match(/translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/);
-    const scale = str.match(/scale\(\s*([^\s,)]+)[ ,]([^\s,)]+)/);
-    const rotate = str.match(/rotate\(\s*([^\s,)]+)/); // eslint-disable-line no-unused-vars
-
-    // TODO: Currently rotations are causing an unwanted translation.
-    // See https://github.com/react-native-community/react-native-svg/issues/242
-    const rotation = undefined;
-    // const rotation = Array.isArray(rotate) ? rotate[1] : undefined;
-
-    return {
-      translateX: Array.isArray(translate) ? translate[1] : undefined,
-      translateY: Array.isArray(translate) ? translate[2] : undefined,
-      scaleX: Array.isArray(scale) ? scale[1] : undefined,
-      scaleY: Array.isArray(scale) ? scale[2] : undefined,
-      rotate: rotation
-    };
-  },
-
-  getTransform(baseTransform) {
-    return typeof baseTransform !== "string" ?
-      baseTransform : this.parseTransformString(baseTransform);
   }
 };