Add disableMouseWheelZoom prop to ZoomContainer (spotify#67)

* Add disable mousewheel prop to reactochart

* Update docs

docs/build/bundle.20490f618aca8f8ca24a.js → docs/build/bundle.4bf76ceec6eac992d822.js

@@ -48907,13 +48907,13 @@ var RangeRect = function (_React$Component) {
           style = _props.style,
           onMouseEnter = _props.onMouseEnter,
           onMouseMove = _props.onMouseMove,
-          onMouseLeave = _props.onMouseLeave;
+          onMouseLeave = _props.onMouseLeave,
+          className = _props.className;
 
 
       (0, _invariant2.default)((0, _Scale.isValidScale)(xScale), "RangeRect.props.xScale is not a valid d3 scale");
       (0, _invariant2.default)((0, _Scale.isValidScale)(yScale), "RangeRect.props.yScale is not a valid d3 scale");
 
-      var className = "" + (this.props.className || "");
       var x0 = xScale(x);
       var x1 = xScale(xEnd);
       var y0 = yScale(y);
@@ -191602,12 +191602,11 @@ var ZoomContainer = function (_React$Component) {
           translateExtent = _props.translateExtent,
           clickDistance = _props.clickDistance,
           duration = _props.duration,
-          interpolate = _props.interpolate;
-      var _props2 = props,
-          constrain = _props2.constrain,
-          filter = _props2.filter,
-          touchable = _props2.touchable,
-          wheelDelta = _props2.wheelDelta;
+          interpolate = _props.interpolate,
+          constrain = _props.constrain,
+          filter = _props.filter,
+          touchable = _props.touchable,
+          wheelDelta = _props.wheelDelta;
 
 
       if (_lodash2.default.isArray(extent)) this.zoom.extent(extent);
@@ -191629,6 +191628,13 @@ var ZoomContainer = function (_React$Component) {
 
       this.zoom = d3.zoom();
       selection.call(this.zoom);
+
+      if (this.props.disableMouseWheelZoom) {
+        selection.call(this.zoom).on("wheel.zoom", null);
+      } else {
+        selection.call(this.zoom);
+      }
+
       this.zoom.transform(selection, initialZoomTransform);
       this._updateZoomProps();
       this.zoom.on("zoom", this.handleZoom);
@@ -191708,6 +191714,10 @@ ZoomContainer.propTypes = {
    * specify only the initial X, Y and scale transformation of the component.
    */
   controlled: _propTypes2.default.bool,
+  /**
+   * Disables wheel-driven zooming (say to not interfere with native scrolling)
+   */
+  disableMouseWheelZoom: _propTypes2.default.bool,
   /**
    * The X-coordinate of the zoom transformation (or initial X-coordinate, if `controlled` is false)
    */
@@ -191781,6 +191791,7 @@ ZoomContainer.defaultProps = {
   width: 800,
   height: 600,
   controlled: false,
+  disableMouseWheelZoom: false,
   zoomX: 0,
   zoomY: 0,
   zoomScale: 1
@@ -191795,7 +191806,7 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.handleZoom = function () {
-    var _props3;
+    var _props2;
 
     for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
@@ -191821,7 +191832,7 @@ var _initialiseProps = function _initialiseProps() {
       _this2.setState({ zoomKey: Math.random() });
     }
 
-    if (_this2.props.onZoom) (_props3 = _this2.props).onZoom.apply(_props3, [nextZoomTransform].concat(args));
+    if (_this2.props.onZoom) (_props2 = _this2.props).onZoom.apply(_props2, [nextZoomTransform].concat(args));
   };
 };
 
@@ -194817,7 +194828,7 @@ exports.default = ZoomContainerExamples;
 /* 1528 */
 /***/ (function(module, exports) {
 
-module.exports = {"description":"","methods":[{"name":"_updateZoomProps","docblock":null,"modifiers":[],"params":[{"name":"props","type":null}],"returns":null},{"name":"handleZoom","docblock":null,"modifiers":[],"params":[{"name":"...args","type":null}],"returns":null}],"props":{"width":{"type":{"name":"number"},"required":false,"description":"(outer) width of the chart (SVG element).","defaultValue":{"value":"800","computed":false}},"height":{"type":{"name":"number"},"required":false,"description":"(outer) width of the chart (SVG element).","defaultValue":{"value":"600","computed":false}},"onZoom":{"type":{"name":"func"},"required":false,"description":"Zoom callback function, called when zoom changes.\nFor controlled version of this component, you should update zoomX, zoomY and zoomScale props in this callback."},"controlled":{"type":{"name":"bool"},"required":false,"description":"Boolean which determines whether the component is \"controlled\" (true) or \"stateful\" (false).\nWhen true, zoom transformation is controlled entirely by the `zoomX`, `zoomY` and `zoomScale` props, which\nyou are responsible for updating in the `onZoom` callback function.\nWhen false, zoom transformation is handled by internal state, and the `zoomX`, `zoomY` and `zoomScale` props\nspecify only the initial X, Y and scale transformation of the component.","defaultValue":{"value":"false","computed":false}},"zoomX":{"type":{"name":"number"},"required":false,"description":"The X-coordinate of the zoom transformation (or initial X-coordinate, if `controlled` is false)","defaultValue":{"value":"0","computed":false}},"zoomY":{"type":{"name":"number"},"required":false,"description":"The Y-coordinate of the zoom transformation (or initial Y-coordinate, if `controlled` is false)","defaultValue":{"value":"0","computed":false}},"zoomScale":{"type":{"name":"number"},"required":false,"description":"The scaling factor of the zoom transformation (or initial scaling, if `controlled` is false).\n1.0 is normal size, 2.0 is double size, 0.5 is half size.","defaultValue":{"value":"1","computed":false}},"extent":{"type":{"name":"array"},"required":false,"description":"Sets the viewport extent to the specified array of points [[x0, y0], [x1, y1]],\nwhere [x0, y0] is the top-left corner of the viewport and [x1, y1] is the bottom-right corner of the viewport.\nSee d3-zoom docs for more information."},"scaleExtent":{"type":{"name":"array"},"required":false,"description":"Sets the scale extent to the specified array of numbers [k0, k1]\nwhere k0 is the minimum allowed scale factor and k1 is the maximum allowed scale factor.\nSee d3-zoom docs for more information."},"translateExtent":{"type":{"name":"array"},"required":false,"description":"Sets the translate extent to the specified array of points [[x0, y0], [x1, y1]],\nwhere [x0, y0] is the top-left corner of the world and [x1, y1] is the bottom-right corner of the world.\nSee d3-zoom docs for more information."},"clickDistance":{"type":{"name":"number"},"required":false,"description":"Sets the maximum distance that the mouse can move between mousedown and mouseup that will trigger\na subsequent click event.\nSee d3-zoom docs for more information."},"duration":{"type":{"name":"number"},"required":false,"description":"Sets the duration for zoom transitions on double-click and double-tap to the specified number of milliseconds.\nSee d3-zoom docs for more information."},"interpolate":{"type":{"name":"func"},"required":false,"description":"Sets the interpolation factory for zoom transitions to the specified function.\nSee d3-zoom docs for more information."},"constrain":{"type":{"name":"func"},"required":false,"description":"Sets the transform constraint function to the specified function.\nSee d3-zoom docs for more information."},"filter":{"type":{"name":"func"},"required":false,"description":"Sets the zoom event filter to the specified function.\nSee d3-zoom docs for more information."},"touchable":{"type":{"name":"func"},"required":false,"description":"Sets the touch support detector to the specified function.\nSee d3-zoom docs for more information."},"wheelDelta":{"type":{"name":"func"},"required":false,"description":"Sets the wheel delta function to the specified function.\nSee d3-zoom docs for more information."}}}
+module.exports = {"description":"","methods":[{"name":"_updateZoomProps","docblock":null,"modifiers":[],"params":[{"name":"props","type":null}],"returns":null},{"name":"handleZoom","docblock":null,"modifiers":[],"params":[{"name":"...args","type":null}],"returns":null}],"props":{"width":{"type":{"name":"number"},"required":false,"description":"(outer) width of the chart (SVG element).","defaultValue":{"value":"800","computed":false}},"height":{"type":{"name":"number"},"required":false,"description":"(outer) width of the chart (SVG element).","defaultValue":{"value":"600","computed":false}},"onZoom":{"type":{"name":"func"},"required":false,"description":"Zoom callback function, called when zoom changes.\nFor controlled version of this component, you should update zoomX, zoomY and zoomScale props in this callback."},"controlled":{"type":{"name":"bool"},"required":false,"description":"Boolean which determines whether the component is \"controlled\" (true) or \"stateful\" (false).\nWhen true, zoom transformation is controlled entirely by the `zoomX`, `zoomY` and `zoomScale` props, which\nyou are responsible for updating in the `onZoom` callback function.\nWhen false, zoom transformation is handled by internal state, and the `zoomX`, `zoomY` and `zoomScale` props\nspecify only the initial X, Y and scale transformation of the component.","defaultValue":{"value":"false","computed":false}},"disableMouseWheelZoom":{"type":{"name":"bool"},"required":false,"description":"Disables wheel-driven zooming (say to not interfere with native scrolling)","defaultValue":{"value":"false","computed":false}},"zoomX":{"type":{"name":"number"},"required":false,"description":"The X-coordinate of the zoom transformation (or initial X-coordinate, if `controlled` is false)","defaultValue":{"value":"0","computed":false}},"zoomY":{"type":{"name":"number"},"required":false,"description":"The Y-coordinate of the zoom transformation (or initial Y-coordinate, if `controlled` is false)","defaultValue":{"value":"0","computed":false}},"zoomScale":{"type":{"name":"number"},"required":false,"description":"The scaling factor of the zoom transformation (or initial scaling, if `controlled` is false).\n1.0 is normal size, 2.0 is double size, 0.5 is half size.","defaultValue":{"value":"1","computed":false}},"extent":{"type":{"name":"array"},"required":false,"description":"Sets the viewport extent to the specified array of points [[x0, y0], [x1, y1]],\nwhere [x0, y0] is the top-left corner of the viewport and [x1, y1] is the bottom-right corner of the viewport.\nSee d3-zoom docs for more information."},"scaleExtent":{"type":{"name":"array"},"required":false,"description":"Sets the scale extent to the specified array of numbers [k0, k1]\nwhere k0 is the minimum allowed scale factor and k1 is the maximum allowed scale factor.\nSee d3-zoom docs for more information."},"translateExtent":{"type":{"name":"array"},"required":false,"description":"Sets the translate extent to the specified array of points [[x0, y0], [x1, y1]],\nwhere [x0, y0] is the top-left corner of the world and [x1, y1] is the bottom-right corner of the world.\nSee d3-zoom docs for more information."},"clickDistance":{"type":{"name":"number"},"required":false,"description":"Sets the maximum distance that the mouse can move between mousedown and mouseup that will trigger\na subsequent click event.\nSee d3-zoom docs for more information."},"duration":{"type":{"name":"number"},"required":false,"description":"Sets the duration for zoom transitions on double-click and double-tap to the specified number of milliseconds.\nSee d3-zoom docs for more information."},"interpolate":{"type":{"name":"func"},"required":false,"description":"Sets the interpolation factory for zoom transitions to the specified function.\nSee d3-zoom docs for more information."},"constrain":{"type":{"name":"func"},"required":false,"description":"Sets the transform constraint function to the specified function.\nSee d3-zoom docs for more information."},"filter":{"type":{"name":"func"},"required":false,"description":"Sets the zoom event filter to the specified function.\nSee d3-zoom docs for more information."},"touchable":{"type":{"name":"func"},"required":false,"description":"Sets the touch support detector to the specified function.\nSee d3-zoom docs for more information."},"wheelDelta":{"type":{"name":"func"},"required":false,"description":"Sets the wheel delta function to the specified function.\nSee d3-zoom docs for more information."}}}
 
 /***/ }),
 /* 1529 */
@@ -195917,4 +195928,4 @@ exports.default = Playground;
 
 /***/ })
 /******/ ]);
-//# sourceMappingURL=bundle.20490f618aca8f8ca24a.js.map
+//# sourceMappingURL=bundle.4bf76ceec6eac992d822.js.map

docs/build/index.html

@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.20490f618aca8f8ca24a.js"></script></body>
+<script type="text/javascript" src="bundle.4bf76ceec6eac992d822.js"></script></body>
 </html>

docs/src/docs/ZoomContainer/propDocs.json

@@ -67,6 +67,17 @@
         "computed": false
       }
     },
+    "disableMouseWheelZoom": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Disables wheel-driven zooming (say to not interfere with native scrolling)",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
     "zoomX": {
       "type": {
         "name": "number"

src/ZoomContainer.js

@@ -35,6 +35,10 @@ export default class ZoomContainer extends React.Component {
      * specify only the initial X, Y and scale transformation of the component.
      */
     controlled: PropTypes.bool,
+    /**
+     * Disables wheel-driven zooming (say to not interfere with native scrolling)
+     */
+    disableMouseWheelZoom: PropTypes.bool,
     /**
      * The X-coordinate of the zoom transformation (or initial X-coordinate, if `controlled` is false)
      */
@@ -108,6 +112,7 @@ export default class ZoomContainer extends React.Component {
     width: 800,
     height: 600,
     controlled: false,
+    disableMouseWheelZoom: false,
     zoomX: 0,
     zoomY: 0,
     zoomScale: 1
@@ -126,9 +131,12 @@ export default class ZoomContainer extends React.Component {
       translateExtent,
       clickDistance,
       duration,
-      interpolate
+      interpolate,
+      constrain,
+      filter,
+      touchable,
+      wheelDelta
     } = props;
-    const { constrain, filter, touchable, wheelDelta } = props;
 
     if (_.isArray(extent)) this.zoom.extent(extent);
     if (_.isArray(scaleExtent)) this.zoom.scaleExtent(scaleExtent);
@@ -148,6 +156,13 @@ export default class ZoomContainer extends React.Component {
 
     this.zoom = d3.zoom();
     selection.call(this.zoom);
+
+    if (this.props.disableMouseWheelZoom) {
+      selection.call(this.zoom).on("wheel.zoom", null);
+    } else {
+      selection.call(this.zoom);
+    }
+
     this.zoom.transform(selection, initialZoomTransform);
     this._updateZoomProps();
     this.zoom.on("zoom", this.handleZoom);