Merge pull request #278 from FormidableLabs/experiment/touch-events

Experiment/touch events

src/victory-container/victory-container.js

@@ -114,6 +114,7 @@ export default class VictoryContainer extends React.Component {
   render() {
     const { width, height, responsive, events } = this.props;
     const style = responsive ? this.props.style : omit(this.props.style, ["height", "width"]);
+    const touchStyle = assign({}, style, { touchAction: "none" });
     const svgProps = assign(
       {
         width, height, role: "img",
@@ -122,6 +123,6 @@ export default class VictoryContainer extends React.Component {
       },
       events
     );
-    return this.renderContainer(this.props, svgProps, style);
+    return this.renderContainer(this.props, svgProps, touchStyle);
   }
 }

src/victory-tooltip/victory-tooltip.js

@@ -108,6 +108,17 @@ export default class VictoryTooltip extends React.Component {
           }
         ];
       },
+      onTouchStart: (targetProps) => {
+        return [
+          {
+            target: "labels",
+            mutation: () => ({ active: true })
+          }, {
+            target: "data",
+            mutation: () => targetProps.activateData ? ({ active: true }) : ({ active: undefined })
+          }
+        ];
+      },
       onMouseOut: () => {
         return [
           {
@@ -118,6 +129,17 @@ export default class VictoryTooltip extends React.Component {
             mutation: () => ({ active: undefined })
           }
         ];
+      },
+      onTouchEnd: () => {
+        return [
+          {
+            target: "labels",
+            mutation: () => ({ active: undefined })
+          }, {
+            target: "data",
+            mutation: () => ({ active: undefined })
+          }
+        ];
       }
     }
   }];

src/victory-util/selection.js

@@ -25,6 +25,7 @@ export default {
         y: evt.nativeEvent.locationY
       };
     }
+    evt = evt.changedTouches && evt.changedTouches.length ? evt.changedTouches[0] : evt;
     const svg = this.getParentSVG(evt.target);
     const matrix = this.getTransformationMatrix(svg);
     return {