react-scroll-ondrag - npm Package Compare versions

Comparing version 0.1.2 to 1.0.0

dist/react-scroll-ondrag.cjs.js

@@ -14,26 +14,42 @@ 'use strict';
 
+var maxVerticalScroll = function maxVerticalScroll(dom) {
+  return dom.scrollHeight - dom.clientHeight;
+};
+
 var index = (function (domRef) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$runScroll = _ref.runScroll,
-      runScroll = _ref$runScroll === void 0 ? function (offset) {
-    domRef.current.scrollLeft = offset;
-  } : _ref$runScroll,
       _ref$onDragStart = _ref.onDragStart,
       onDragStart = _ref$onDragStart === void 0 ? function () {} : _ref$onDragStart,
       _ref$onDragEnd = _ref.onDragEnd,
-      onDragEnd = _ref$onDragEnd === void 0 ? function () {} : _ref$onDragEnd;
+      onDragEnd = _ref$onDragEnd === void 0 ? function () {} : _ref$onDragEnd,
+      _ref$runScroll = _ref.runScroll,
+      runScroll = _ref$runScroll === void 0 ? function (_ref2) {
+    var dx = _ref2.dx,
+        dy = _ref2.dy;
+    var offsetX = Math.min(maxHorizontalScroll(domRef.current), domRef.current.scrollLeft + dx);
+    domRef.current.scrollLeft = offsetX; // eslint-disable-line no-param-reassign
 
+    var offsetY = Math.min(maxVerticalScroll(domRef.current), domRef.current.scrollTop + dy);
+    domRef.current.scrollTop = offsetY; // eslint-disable-line no-param-reassign
+  } : _ref$runScroll;
+
   var internalState = react.useRef({
-    lastMousePosition: null,
+    lastMouseX: null,
+    lastMouseY: null,
     isMouseDown: false,
     isScrolling: false
   });
-  var scroll = react.useCallback(function (position) {
+  var scroll = react.useCallback(function (_ref3) {
+    var dx = _ref3.dx,
+        dy = _ref3.dy;
     !(domRef.current !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, "Trying to scroll to the bottom, but no element was found.\n      Did you call this scrollBottom before the component with this hook finished mounting?") : invariant(false) : void 0;
-    var offset = Math.min(maxHorizontalScroll(domRef.current), position);
-    runScroll(offset);
+    runScroll({
+      dx: dx,
+      dy: dy
+    });
   }, [runScroll]);
   var onMouseDown = react.useCallback(function (e) {
     internalState.current.isMouseDown = true;
-    internalState.current.lastMousePosition = e.clientX;
+    internalState.current.lastMouseX = e.clientX;
+    internalState.current.lastMouseY = e.clientY;
   }, []);
@@ -43,3 +59,4 @@
     internalState.current.isMouseDown = false;
-    internalState.current.lastMousePosition = null;
+    internalState.current.lastMouseX = null;
+    internalState.current.lastMouseY = null;
 
@@ -63,5 +80,10 @@ if (internalState.current.isScrolling) {
 
-    var diff = -(e.clientX - internalState.current.lastMousePosition);
-    internalState.current.lastMousePosition = e.clientX;
-    scroll(domRef.current.scrollLeft + diff);
+    var dx = -(e.clientX - internalState.current.lastMouseX);
+    var dy = -(e.clientY - internalState.current.lastMouseY);
+    internalState.current.lastMouseX = e.clientX;
+    internalState.current.lastMouseY = e.clientY;
+    scroll({
+      dx: dx,
+      dy: dy
+    });
   };
@@ -68,0 +90,0 @@

dist/react-scroll-ondrag.esm.js

@@ -8,26 +8,42 @@ import { useRef, useCallback, useEffect } from 'react';
 
+var maxVerticalScroll = function maxVerticalScroll(dom) {
+  return dom.scrollHeight - dom.clientHeight;
+};
+
 var index = (function (domRef) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$runScroll = _ref.runScroll,
-      runScroll = _ref$runScroll === void 0 ? function (offset) {
-    domRef.current.scrollLeft = offset;
-  } : _ref$runScroll,
       _ref$onDragStart = _ref.onDragStart,
       onDragStart = _ref$onDragStart === void 0 ? function () {} : _ref$onDragStart,
       _ref$onDragEnd = _ref.onDragEnd,
-      onDragEnd = _ref$onDragEnd === void 0 ? function () {} : _ref$onDragEnd;
+      onDragEnd = _ref$onDragEnd === void 0 ? function () {} : _ref$onDragEnd,
+      _ref$runScroll = _ref.runScroll,
+      runScroll = _ref$runScroll === void 0 ? function (_ref2) {
+    var dx = _ref2.dx,
+        dy = _ref2.dy;
+    var offsetX = Math.min(maxHorizontalScroll(domRef.current), domRef.current.scrollLeft + dx);
+    domRef.current.scrollLeft = offsetX; // eslint-disable-line no-param-reassign
 
+    var offsetY = Math.min(maxVerticalScroll(domRef.current), domRef.current.scrollTop + dy);
+    domRef.current.scrollTop = offsetY; // eslint-disable-line no-param-reassign
+  } : _ref$runScroll;
+
   var internalState = useRef({
-    lastMousePosition: null,
+    lastMouseX: null,
+    lastMouseY: null,
     isMouseDown: false,
     isScrolling: false
   });
-  var scroll = useCallback(function (position) {
+  var scroll = useCallback(function (_ref3) {
+    var dx = _ref3.dx,
+        dy = _ref3.dy;
     !(domRef.current !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, "Trying to scroll to the bottom, but no element was found.\n      Did you call this scrollBottom before the component with this hook finished mounting?") : invariant(false) : void 0;
-    var offset = Math.min(maxHorizontalScroll(domRef.current), position);
-    runScroll(offset);
+    runScroll({
+      dx: dx,
+      dy: dy
+    });
   }, [runScroll]);
   var onMouseDown = useCallback(function (e) {
     internalState.current.isMouseDown = true;
-    internalState.current.lastMousePosition = e.clientX;
+    internalState.current.lastMouseX = e.clientX;
+    internalState.current.lastMouseY = e.clientY;
   }, []);
@@ -37,3 +53,4 @@
     internalState.current.isMouseDown = false;
-    internalState.current.lastMousePosition = null;
+    internalState.current.lastMouseX = null;
+    internalState.current.lastMouseY = null;
 
@@ -57,5 +74,10 @@ if (internalState.current.isScrolling) {
 
-    var diff = -(e.clientX - internalState.current.lastMousePosition);
-    internalState.current.lastMousePosition = e.clientX;
-    scroll(domRef.current.scrollLeft + diff);
+    var dx = -(e.clientX - internalState.current.lastMouseX);
+    var dy = -(e.clientY - internalState.current.lastMouseY);
+    internalState.current.lastMouseX = e.clientX;
+    internalState.current.lastMouseY = e.clientY;
+    scroll({
+      dx: dx,
+      dy: dy
+    });
   };
@@ -62,0 +84,0 @@

dist/react-scroll-ondrag.umd.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e=e||self).ReactDragOnScroll={},e.React)}(this,function(e,n){"use strict";var o="production"===process.env.NODE_ENV,t="Invariant failed";function r(e,n){if(!e)throw o?new Error(t):new Error(t+": "+(n||""))}e.default=function(e){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=o.runScroll,i=void 0===t?function(n){e.current.scrollLeft=n}:t,u=o.onDragStart,s=void 0===u?function(){}:u,c=o.onDragEnd,l=void 0===c?function(){}:c,f=n.useRef({lastMousePosition:null,isMouseDown:!1,isScrolling:!1}),a=n.useCallback(function(n){null===e.current&&("production"!==process.env.NODE_ENV?r(!1,"Trying to scroll to the bottom, but no element was found.\n      Did you call this scrollBottom before the component with this hook finished mounting?"):r(!1));var o,t=Math.min((o=e.current).scrollWidth-o.clientWidth,n);i(t)},[i]),d=n.useCallback(function(e){f.current.isMouseDown=!0,f.current.lastMousePosition=e.clientX},[]),v=function(){f.current.isMouseDown=!1,f.current.lastMousePosition=null,f.current.isScrolling&&(f.current.isScrolling=!1,l())},w=function(n){if(f.current.isMouseDown){f.current.isScrolling||(f.current.isScrolling=!0,s());var o=-(n.clientX-f.current.lastMousePosition);f.current.lastMousePosition=n.clientX,a(e.current.scrollLeft+o)}};return n.useEffect(function(){return window.addEventListener("mouseup",v),window.addEventListener("mousemove",w),function(){window.removeEventListener("mouseup",v),window.removeEventListener("mousemove",w)}},[]),{events:{onMouseDown:d}}},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e=e||self).ReactDragOnScroll={},e.React)}(this,function(e,n){"use strict";var t="production"===process.env.NODE_ENV,r="Invariant failed";function o(e,n){if(!e)throw t?new Error(r):new Error(r+": "+(n||""))}var u=function(e){return e.scrollWidth-e.clientWidth},i=function(e){return e.scrollHeight-e.clientHeight};e.default=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.onDragStart,c=void 0===r?function(){}:r,l=t.onDragEnd,s=void 0===l?function(){}:l,a=t.runScroll,d=void 0===a?function(n){var t=n.dx,r=n.dy,o=Math.min(u(e.current),e.current.scrollLeft+t);e.current.scrollLeft=o;var c=Math.min(i(e.current),e.current.scrollTop+r);e.current.scrollTop=c}:a,f=n.useRef({lastMouseX:null,lastMouseY:null,isMouseDown:!1,isScrolling:!1}),v=n.useCallback(function(n){var t=n.dx,r=n.dy;null===e.current&&("production"!==process.env.NODE_ENV?o(!1,"Trying to scroll to the bottom, but no element was found.\n      Did you call this scrollBottom before the component with this hook finished mounting?"):o(!1)),d({dx:t,dy:r})},[d]),w=n.useCallback(function(e){f.current.isMouseDown=!0,f.current.lastMouseX=e.clientX,f.current.lastMouseY=e.clientY},[]),M=function(){f.current.isMouseDown=!1,f.current.lastMouseX=null,f.current.lastMouseY=null,f.current.isScrolling&&(f.current.isScrolling=!1,s())},m=function(e){if(f.current.isMouseDown){f.current.isScrolling||(f.current.isScrolling=!0,c());var n=-(e.clientX-f.current.lastMouseX),t=-(e.clientY-f.current.lastMouseY);f.current.lastMouseX=e.clientX,f.current.lastMouseY=e.clientY,v({dx:n,dy:t})}};return n.useEffect(function(){return window.addEventListener("mouseup",M),window.addEventListener("mousemove",m),function(){window.removeEventListener("mouseup",M),window.removeEventListener("mousemove",m)}},[]),{events:{onMouseDown:w}}},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "react-scroll-ondrag",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "description": "React library for scrolling elements by dragging the mouse",
@@ -36,39 +36,41 @@ "main": "dist/react-scroll-ondrag.cjs.js",
   "peerDependencies": {
-    "react": ">=16.8.4"
+    "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.5",
+    "@babel/core": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
-    "babel-plugin-dev-expression": "^0.2.1",
-    "babel-plugin-istanbul": "^5.1.4",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-dev-expression": "^0.2.2",
+    "babel-plugin-istanbul": "^5.2.0",
     "chai": "^4.2.0",
-    "coveralls": "^3.0.4",
+    "coveralls": "^3.0.6",
     "dirty-chai": "^2.0.1",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.13.0",
-    "karma": "^4.1.0",
-    "karma-chrome-launcher": "^3.0.0",
-    "karma-coverage": "^1.1.2",
+    "eslint": "^6.3.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "karma": "^4.3.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-coverage": "^2.0.1",
     "karma-coveralls": "^2.1.0",
-    "karma-firefox-launcher": "^1.1.0",
+    "karma-firefox-launcher": "^1.2.0",
     "karma-mocha": "^1.3.0",
-    "karma-rollup-preprocessor": "^7.0.0",
+    "karma-rollup-preprocessor": "^7.0.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.32",
-    "mocha": "^6.1.4",
+    "mocha": "^6.2.0",
     "nyc": "^14.1.1",
-    "puppeteer": "^1.18.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "rollup": "^1.16.2",
+    "puppeteer": "^1.19.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "rollup": "^1.20.3",
     "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-node-resolve": "^5.0.4",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^5.0.0",
-    "sinon": "^7.3.2",
+    "rollup-plugin-terser": "^5.1.1",
+    "sinon": "^7.4.2",
     "sinon-chai": "^3.3.0",
@@ -78,4 +80,4 @@ "styled-components": "^4.3.2"
   "dependencies": {
-    "tiny-invariant": "^1.0.4"
+    "tiny-invariant": "^1.0.6"
   }
 }

README.md

@@ -57,2 +57,23 @@ # react-scroll-ondrag
 
+#### options.runScroll
+
+Type: `function: ({ dx: Integer, dy: Integer }) => void`
+Default:
+
+```javascript
+// ref is the first argument to the hook, documented above
+({ dx, dy }) => {
+  const maxHorizontalScroll = dom => dom.scrollWidth - dom.clientWidth;
+  const maxVerticalScroll = dom => dom.scrollHeight - dom.clientHeight;
+
+  const offsetX = Math.min(maxHorizontalScroll(ref.current), ref.current.scrollLeft + dx);
+  ref.current.scrollLeft = offsetX; // eslint-disable-line no-param-reassign
+
+  const offsetY = Math.min(maxVerticalScroll(ref.current), ref.current.scrollTop + dy);
+  ref.current.scrollTop = offsetY; // eslint-disable-line no-param-reassign
+}
+```
+
+Used to customize scroll, i.e., scroll only in horizontal direction, change scroll speed, etc
+
 #### options.onDragStart
@@ -59,0 +80,0 @@

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15267

increased by19.21%

Lines of code

179

increased by29.71%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

114

increased by22.58%

Worsened metrics

Dev dependency count

38

increased by5.56%

Number of low supply chain risk alerts

6

increased by20%

Dependency changes

• Updatedtiny-invariant@^1.0.6