Merge pull request #207 from FormidableLabs/support-x-y-zoom

Support x y zoom
FormidableLabs · Feb 27, 2017 · f783e23 · f783e23
2 parents 368ce15 + 7d676eb
commit f783e23
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/src/victory-clip-container/victory-clip-container.js b/src/victory-clip-container/victory-clip-container.js
@@ -25,6 +25,7 @@ export default class VictoryClipContainer extends React.Component {
     ]),
     clipPathComponent: PropTypes.element,
     translateX: PropTypes.number,
+    translateY: PropTypes.number,
     transform: PropTypes.string
   }
 
@@ -73,10 +74,10 @@ export default class VictoryClipContainer extends React.Component {
 
   // Overridden in victory-core-native
   renderClipComponent(props, clipId) {
-    const { padding, translateX, clipHeight, clipWidth, clipPathComponent } = props;
+    const { padding, translateX, translateY, clipHeight, clipWidth, clipPathComponent } = props;
     return React.cloneElement(
       clipPathComponent,
-      { padding, clipId, translateX, clipWidth, clipHeight }
+      { padding, clipId, translateX, translateY, clipWidth, clipHeight }
     );
   }
 

diff --git a/src/victory-primitives/clip-path.js b/src/victory-primitives/clip-path.js
@@ -24,14 +24,16 @@ export default class ClipPath extends React.Component {
         right: PropTypes.number
       })
     ]),
-    translateX: PropTypes.number
+    translateX: PropTypes.number,
+    translateY: PropTypes.number
   };
 
   static defaultProps = {
     translateX: 0,
+    translateY: 0,
     clipPadding: {
-      top: 5,
-      bottom: 5,
+      top: 0,
+      bottom: 0,
       left: 0,
       right: 0
     }
@@ -65,23 +67,16 @@ export default class ClipPath extends React.Component {
   }
 
   calculateAttributes(props) {
-    const {
-      clipWidth,
-      clipHeight,
-      translateX,
-      clipPadding
-    } = props;
-
+    const { clipWidth, clipHeight, translateX, translateY, clipPadding } = props;
     const padding = Helpers.getPadding(props);
 
     const totalPadding = (side) => {
       const total = +padding[side] - (clipPadding[side] || 0);
       return typeof total === "number" ? total : 0;
     };
-
     return {
       x: totalPadding("left") + translateX,
-      y: totalPadding("top"),
+      y: totalPadding("top") + translateY,
       width: Math.max(+clipWidth - totalPadding("left") - totalPadding("right"), 0),
       height: Math.max(+clipHeight - totalPadding("top") - totalPadding("bottom"), 0)
     };

diff --git a/src/victory-transition/victory-transition.js b/src/victory-transition/victory-transition.js
@@ -152,16 +152,17 @@ export default class VictoryTransition extends React.Component {
     );
     const animationWhitelist = props.animationWhitelist || [];
     const whitelist = this.continuous ?
-      animationWhitelist.concat(["clipWidth", "clipHeight", "translateX"]) : animationWhitelist;
+      animationWhitelist.concat(["clipWidth", "clipHeight", "translateX", "translateY"]) :
+      animationWhitelist;
     const propsToAnimate = whitelist.length ? pick(combinedProps, whitelist) : combinedProps;
     return (
       <VictoryAnimation {...combinedProps.animate} data={propsToAnimate}>
         {(newProps) => {
           if (this.continuous) {
-            const { clipWidth, clipHeight, translateX, padding } = newProps;
+            const { clipWidth, clipHeight, translateX, translateY, padding } = newProps;
             const groupComponent = React.cloneElement(
               child.props.groupComponent,
-              { clipWidth, clipHeight, translateX, padding }
+              { clipWidth, clipHeight, translateX, translateY, padding }
             );
             return React.cloneElement(
               child, defaults({animate: null, groupComponent}, newProps, combinedProps)