react-calendar-timeline - npm Package Compare versions

Comparing version 0.14.8 to 0.14.9

lib/lib/Timeline.js

@@ -458,2 +458,7 @@ 'use strict';
   }, {
+    key: '__zoomWithWheel__REACT_HOT_LOADER__',
+    value: function __zoomWithWheel__REACT_HOT_LOADER__(speed, xPosition, deltaY) {
+      this.changeZoom(1.0 + speed * deltaY / 500, xPosition / this.state.width);
+    }
+  }, {
     key: '__onWheel__REACT_HOT_LOADER__',
@@ -463,30 +468,35 @@ value: function __onWheel__REACT_HOT_LOADER__(e) {
 
-      if (e.ctrlKey) {
+      // prevent default scrolling if a modifier is pressed or the header is fixed
+
+      if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || this.props.fixedHeader === 'fixed') {
         e.preventDefault();
+      }
+
+      // zoom in the time dimension
+      if (e.ctrlKey || e.metaKey || e.altKey) {
         var parentPosition = (0, _utils.getParentPosition)(e.currentTarget);
         var xPosition = e.clientX - parentPosition.x;
-        this.changeZoom(1.0 + e.deltaY / 50, xPosition / this.state.width);
+
+        this.zoomWithWheel(e.ctrlKey ? 10 : 1, xPosition, e.deltaY);
+
+        // convert vertical zoom to horiziontal
       } else if (e.shiftKey) {
-        e.preventDefault();
         var scrollComponent = this.refs.scrollComponent;
         scrollComponent.scrollLeft += e.deltaY;
-      } else if (e.altKey) {
-        var _parentPosition = (0, _utils.getParentPosition)(e.currentTarget);
-        var _xPosition = e.clientX - _parentPosition.x;
-        this.changeZoom(1.0 + e.deltaY / 500, _xPosition / this.state.width);
-      } else {
-        if (this.props.fixedHeader === 'fixed') {
-          e.preventDefault();
-          if (e.deltaX !== 0) {
-            if (!traditionalZoom) {
-              this.refs.scrollComponent.scrollLeft += e.deltaX;
-            }
+
+        // no modifier pressed? we prevented the default in the case of a fixed header,
+        // so adjust as needed and scroll or zoom the canvas
+      } else if (this.props.fixedHeader === 'fixed') {
+        if (e.deltaX !== 0) {
+          if (!traditionalZoom) {
+            this.refs.scrollComponent.scrollLeft += e.deltaX;
           }
-          if (e.deltaY !== 0) {
-            window.scrollTo(window.pageXOffset, window.pageYOffset + e.deltaY);
-            if (traditionalZoom) {
-              var _parentPosition2 = (0, _utils.getParentPosition)(e.currentTarget);
-              var _xPosition2 = e.clientX - _parentPosition2.x;
-              this.changeZoom(1.0 + e.deltaY / 50, _xPosition2 / this.state.width);
-            }
+        }
+        if (e.deltaY !== 0) {
+          window.scrollTo(window.pageXOffset, window.pageYOffset + e.deltaY);
+          if (traditionalZoom) {
+            var _parentPosition = (0, _utils.getParentPosition)(e.currentTarget);
+            var _xPosition = e.clientX - _parentPosition.x;
+
+            this.zoomWithWheel(10, _xPosition, e.deltaY);
           }
@@ -1445,2 +1455,6 @@ }
 
+  this.zoomWithWheel = function () {
+    return _this2.__zoomWithWheel__REACT_HOT_LOADER__.apply(_this2, arguments);
+  };
+
   this.onWheel = function () {
@@ -1447,0 +1461,0 @@ return _this2.__onWheel__REACT_HOT_LOADER__.apply(_this2, arguments);

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.14.8",
+  "version": "0.14.9",
   "description": "react calendar timeline",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/lib/Timeline.js

@@ -557,32 +557,41 @@ import PropTypes from 'prop-types'
 
+  zoomWithWheel = (speed, xPosition, deltaY) => {
+    this.changeZoom(1.0 + speed * deltaY / 500, xPosition / this.state.width)
+  }
+
   onWheel = (e) => {
     const { traditionalZoom } = this.props
-    if (e.ctrlKey) {
+
+    // prevent default scrolling if a modifier is pressed or the header is fixed
+    if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || this.props.fixedHeader === 'fixed') {
       e.preventDefault()
+    }
+
+    // zoom in the time dimension
+    if (e.ctrlKey || e.metaKey || e.altKey) {
       const parentPosition = getParentPosition(e.currentTarget)
       const xPosition = e.clientX - parentPosition.x
-      this.changeZoom(1.0 + e.deltaY / 50, xPosition / this.state.width)
+
+      this.zoomWithWheel(e.ctrlKey ? 10 : 1, xPosition, e.deltaY)
+
+    // convert vertical zoom to horiziontal
     } else if (e.shiftKey) {
-      e.preventDefault()
       const scrollComponent = this.refs.scrollComponent
       scrollComponent.scrollLeft += e.deltaY
-    } else if (e.altKey) {
-      const parentPosition = getParentPosition(e.currentTarget)
-      const xPosition = e.clientX - parentPosition.x
-      this.changeZoom(1.0 + e.deltaY / 500, xPosition / this.state.width)
-    } else {
-      if (this.props.fixedHeader === 'fixed') {
-        e.preventDefault()
-        if (e.deltaX !== 0) {
-          if (!traditionalZoom) {
-            this.refs.scrollComponent.scrollLeft += e.deltaX
-          }
+
+    // no modifier pressed? we prevented the default in the case of a fixed header,
+    // so adjust as needed and scroll or zoom the canvas
+    } else if (this.props.fixedHeader === 'fixed') {
+      if (e.deltaX !== 0) {
+        if (!traditionalZoom) {
+          this.refs.scrollComponent.scrollLeft += e.deltaX
         }
-        if (e.deltaY !== 0) {
-          window.scrollTo(window.pageXOffset, window.pageYOffset + e.deltaY)
-          if (traditionalZoom) {
-            const parentPosition = getParentPosition(e.currentTarget)
-            const xPosition = e.clientX - parentPosition.x
-            this.changeZoom(1.0 + e.deltaY / 50, xPosition / this.state.width)
-          }
+      }
+      if (e.deltaY !== 0) {
+        window.scrollTo(window.pageXOffset, window.pageYOffset + e.deltaY)
+        if (traditionalZoom) {
+          const parentPosition = getParentPosition(e.currentTarget)
+          const xPosition = e.clientX - parentPosition.x
+
+          this.zoomWithWheel(10, xPosition, e.deltaY)
         }
@@ -589,0 +598,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

295795

increased by0.22%

Lines of code

6454

increased by0.14%

No dependency changes