react-easy-sort - npm Package Compare versions

Comparing version 0.2.1 to 1.0.0

index.js

@@ -309,3 +309,8 @@ 'use strict';
 
-  var lastTargetIndexRef = React__default['default'].useRef(undefined);
+  var lastTargetIndexRef = React__default['default'].useRef(undefined); // contains the offset point where the initial drag occured to be used when dragging the item
+
+  var offsetPointRef = React__default['default'].useRef({
+    x: 0,
+    y: 0
+  });
   React__default['default'].useEffect(function () {
@@ -322,4 +327,5 @@ return function () {
     if (targetRef.current) {
-      // we use `translate3d` to force using the GPU if available
-      targetRef.current.style.transform = "translate(-50%, -50%) translate3d(" + position.x + "px, " + position.y + "px, 0px)";
+      var offset = offsetPointRef.current; // we use `translate3d` to force using the GPU if available
+
+      targetRef.current.style.transform = "translate3d(" + (position.x - offset.x) + "px, " + (position.y - offset.y) + "px, 0px)";
     }
@@ -377,9 +383,14 @@ };
 
-      copyItem(sourceIndex);
-      updateTargetPosition(point); // hide source during the drag gesture
+      copyItem(sourceIndex); // hide source during the drag gesture
 
       var source = itemsRef.current[sourceIndex];
       source.style.opacity = '0';
-      source.style.visibility = 'hidden'; // Adds a nice little physical feedback
+      source.style.visibility = 'hidden'; // get the offset between the source item and the point in window
 
+      offsetPointRef.current = {
+        x: pointInWindow.x - source.offsetLeft,
+        y: pointInWindow.y - source.offsetTop
+      };
+      updateTargetPosition(point); // Adds a nice little physical feedback
+
       if (window.navigator.vibrate) {
@@ -386,0 +397,0 @@ window.navigator.vibrate(100);

index.module.js

@@ -300,3 +300,8 @@ import { __rest, __assign } from 'tslib';
 
-  var lastTargetIndexRef = React.useRef(undefined);
+  var lastTargetIndexRef = React.useRef(undefined); // contains the offset point where the initial drag occured to be used when dragging the item
+
+  var offsetPointRef = React.useRef({
+    x: 0,
+    y: 0
+  });
   React.useEffect(function () {
@@ -313,4 +318,5 @@ return function () {
     if (targetRef.current) {
-      // we use `translate3d` to force using the GPU if available
-      targetRef.current.style.transform = "translate(-50%, -50%) translate3d(" + position.x + "px, " + position.y + "px, 0px)";
+      var offset = offsetPointRef.current; // we use `translate3d` to force using the GPU if available
+
+      targetRef.current.style.transform = "translate3d(" + (position.x - offset.x) + "px, " + (position.y - offset.y) + "px, 0px)";
     }
@@ -368,9 +374,14 @@ };
 
-      copyItem(sourceIndex);
-      updateTargetPosition(point); // hide source during the drag gesture
+      copyItem(sourceIndex); // hide source during the drag gesture
 
       var source = itemsRef.current[sourceIndex];
       source.style.opacity = '0';
-      source.style.visibility = 'hidden'; // Adds a nice little physical feedback
+      source.style.visibility = 'hidden'; // get the offset between the source item and the point in window
 
+      offsetPointRef.current = {
+        x: pointInWindow.x - source.offsetLeft,
+        y: pointInWindow.y - source.offsetTop
+      };
+      updateTargetPosition(point); // Adds a nice little physical feedback
+
       if (window.navigator.vibrate) {
@@ -377,0 +388,0 @@ window.navigator.vibrate(100);

package.json

 {
   "name": "react-easy-sort",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "description": "A React component to sort items in lists or grids",
@@ -5,0 +5,0 @@ "homepage": "https://ricardo-ch.github.io/react-easy-sort/",

README.md

@@ -83,2 +83,8 @@ # react-easy-sort
 
+## Recommended CSS rules
+
+To disable browser default behaviors than can interfer with the dragging experience, we recommend adding the following declarations on the "items":
+- `user-select: none;`: disable the selection of content inside the item (the blue box)
+- `pointer-events: none;`: required for some browsers if your items contain images (see the [Interactive avatars demo](https://codesandbox.io/s/react-easy-sort-images-demo-486qk))
+
 ## Development
@@ -107,3 +113,3 @@
 [downloads-badge]: https://img.shields.io/npm/dm/react-easy-sort.svg?style=flat-square
-[npmstats]: http://npm-stat.com/charts.html?package=react-easy-sort&from=2018-06-18
+[npmstats]: https://npm-stat.com/charts.html?package=react-easy-sort&from=2021-02-01
 [npmstats-badge]: https://img.shields.io/npm/dm/react-easy-sort.svg?style=flat-square
@@ -110,0 +116,0 @@ [gzip-badge]: http://img.badgesize.io/https://unpkg.com/react-easy-sort/umd/react-easy-sort.min.js?compression=gzip&style=flat-square&1

umd/react-easy-sort.js

@@ -307,3 +307,8 @@ (function (global, factory) {
 
-    var lastTargetIndexRef = React__default['default'].useRef(undefined);
+    var lastTargetIndexRef = React__default['default'].useRef(undefined); // contains the offset point where the initial drag occured to be used when dragging the item
+
+    var offsetPointRef = React__default['default'].useRef({
+      x: 0,
+      y: 0
+    });
     React__default['default'].useEffect(function () {
@@ -320,4 +325,5 @@ return function () {
       if (targetRef.current) {
-        // we use `translate3d` to force using the GPU if available
-        targetRef.current.style.transform = "translate(-50%, -50%) translate3d(" + position.x + "px, " + position.y + "px, 0px)";
+        var offset = offsetPointRef.current; // we use `translate3d` to force using the GPU if available
+
+        targetRef.current.style.transform = "translate3d(" + (position.x - offset.x) + "px, " + (position.y - offset.y) + "px, 0px)";
       }
@@ -375,9 +381,14 @@ };
 
-        copyItem(sourceIndex);
-        updateTargetPosition(point); // hide source during the drag gesture
+        copyItem(sourceIndex); // hide source during the drag gesture
 
         var source = itemsRef.current[sourceIndex];
         source.style.opacity = '0';
-        source.style.visibility = 'hidden'; // Adds a nice little physical feedback
+        source.style.visibility = 'hidden'; // get the offset between the source item and the point in window
 
+        offsetPointRef.current = {
+          x: pointInWindow.x - source.offsetLeft,
+          y: pointInWindow.y - source.offsetTop
+        };
+        updateTargetPosition(point); // Adds a nice little physical feedback
+
         if (window.navigator.vibrate) {
@@ -384,0 +395,0 @@ window.navigator.vibrate(100);

umd/react-easy-sort.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tslib"),require("array-move"),require("react")):"function"==typeof define&&define.amd?define(["exports","tslib","array-move","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactEasySort={},e.tslib,e.arrayMove,e.React)}(this,(function(e,t,n,r){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=u(n),c=u(r),a=function(e,t,n){for(var r=e.x,u=e.y,o=(void 0===n?{}:n).fallbackToClosest,c=void 0!==o&&o,a=1e4,i=-1,d=0;d<t.length;d+=1){var l=t[d];if(r>=l.left&&r<l.right&&u>=l.top&&u<l.bottom)return d;if(c){var f=(l.left+l.right)/2,s=(l.top+l.bottom)/2,v=Math.sqrt(Math.pow(r-f,2)+Math.pow(u-s,2));v<a&&(a=v,i=d)}}return i},i=function(e){return{x:Number(e.clientX),y:Number(e.clientY)}},d=function(e){return{x:Number(e.clientX),y:Number(e.clientY)}},l=function(e,t){return{x:e.x-t.x,y:e.y-t.y}},f=function(e){e.preventDefault()},s=function(){window.removeEventListener("contextmenu",f)},v=function(e){var t=e.onStart,n=e.onMove,r=e.onEnd,u=e.containerRef,o=c.default.useRef({x:0,y:0}),a=c.default.useRef(void 0),v=c.default.useRef(!1),m=c.default.useRef({onStart:t,onMove:n,onEnd:r}),p=c.default.useState(!1),h=p[0],E=p[1];c.default.useEffect((function(){m.current={onStart:t,onMove:n,onEnd:r}}),[t,n,r]);var b=function(){a.current&&window.clearTimeout(a.current)},y=c.default.useCallback((function(){if(u.current){var e=u.current.getBoundingClientRect();o.current={x:e.left,y:e.top}}}),[u]),x=c.default.useCallback((function(e){var t=l(e,o.current);m.current.onMove&&m.current.onMove({pointInWindow:e,point:t})}),[]),L=c.default.useCallback((function(e){if(v.current){v.current=!1;var t=i(e),n=l(t,o.current);m.current.onStart&&m.current.onStart({point:n,pointInWindow:t})}else x(i(e))}),[x]),C=c.default.useCallback((function(e){e.cancelable?(e.preventDefault(),x(d(e.touches[0]))):(document.removeEventListener("touchmove",C),m.current.onEnd&&m.current.onEnd())}),[x]),g=c.default.useCallback((function(){v.current=!1,document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",g),m.current.onEnd&&m.current.onEnd()}),[L]),w=c.default.useCallback((function(){document.removeEventListener("touchmove",C),document.removeEventListener("touchend",w),s(),m.current.onEnd&&m.current.onEnd()}),[C]),R=c.default.useCallback((function(e){0===e.button&&(document.addEventListener("mousemove",L),document.addEventListener("mouseup",g),y(),v.current=!0)}),[L,g,y]),k=c.default.useCallback((function(e,t){document.addEventListener("touchmove",C,{capture:!1,passive:!1}),document.addEventListener("touchend",w),window.addEventListener("contextmenu",f,{capture:!0,passive:!1}),m.current.onStart&&m.current.onStart({point:e,pointInWindow:t})}),[w,C]),S=c.default.useCallback((function(e){y();var t=d(e.touches[0]),n=l(t,o.current);a.current=window.setTimeout((function(){return k(n,t)}),120)}),[k,y]),I=c.default.useCallback((function(){E(!0),document.removeEventListener("touchstart",I)}),[]),M=c.default.useCallback((function(){b()}),[]);return c.default.useLayoutEffect((function(){if(h){var e=u.current;return null==e||e.addEventListener("touchstart",S,{capture:!0,passive:!1}),document.addEventListener("touchmove",M,{capture:!1,passive:!1}),document.addEventListener("touchend",M,{capture:!1,passive:!1}),function(){null==e||e.removeEventListener("touchstart",S),document.removeEventListener("touchmove",M),document.removeEventListener("touchend",M),document.removeEventListener("touchmove",C),document.removeEventListener("touchend",w),s(),b()}}return document.addEventListener("touchstart",I),function(){document.removeEventListener("touchstart",I),document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",g)}}),[h,I,L,C,M,w,g,u,S]),h?{}:{onMouseDown:R}},m=c.default.createContext(void 0);e.SortableItem=function(e){var t=e.children,n=c.default.useContext(m);if(!n)throw new Error("SortableItem must be a child of SortableList");var r=n.registerItem,u=n.removeItem,o=c.default.useRef(null);return c.default.useEffect((function(){var e=o.current;return e&&r(e),function(){e&&u(e)}}),[r,u,t]),c.default.cloneElement(t,{ref:o})},e.default=function(e){var n=e.children,r=e.onSortEnd,u=e.draggedItemClassName,i=t.__rest(e,["children","onSortEnd","draggedItemClassName"]),d=c.default.useRef([]),l=c.default.useRef([]),f=c.default.useRef(null),s=c.default.useRef(null),p=c.default.useRef(void 0),h=c.default.useRef(void 0);c.default.useEffect((function(){return function(){s.current&&document.body.removeChild(s.current)}}),[]);var E=function(e){s.current&&(s.current.style.transform="translate(-50%, -50%) translate3d("+e.x+"px, "+e.y+"px, 0px)")},b=c.default.useCallback((function(e){if(f.current){var t=d.current[e],n=l.current[e],r=t.cloneNode(!0);u&&u.split(" ").forEach((function(e){return r.classList.add(e)})),r.style.width=n.width+"px",r.style.height=n.height+"px";var o=f.current.getBoundingClientRect();r.style.position="fixed",r.style.top=o.top+"px",r.style.left=o.left+"px",document.body.appendChild(r),s.current=r}}),[u]),y=v({containerRef:f,onStart:function(e){var t=e.point,n=e.pointInWindow;if(f.current){l.current=d.current.map((function(e){return e.getBoundingClientRect()}));var r=a(n,l.current);if(-1!==r){p.current=r,b(r),E(t);var u=d.current[r];u.style.opacity="0",u.style.visibility="hidden",window.navigator.vibrate&&window.navigator.vibrate(100)}}},onMove:function(e){var t=e.point,n=e.pointInWindow;E(t);var r=p.current;if(void 0!==r){var u=a(n,l.current,{fallbackToClosest:!0});if(-1!==u){h.current=u;for(var o=r<u,c=0;c<d.current.length;c+=1){var i=d.current[c],f=l.current[c];if(o&&c>=r&&c<=u||!o&&c>=u&&c<=r){var s=l.current[o?c-1:c+1];if(s){var v=s.left-f.left,m=s.top-f.top;i.style.transform="translate3d("+v+"px, "+m+"px, 0px)"}}else i.style.transform="translate3d(0,0,0)";i.style.transitionDuration="300ms"}}}},onEnd:function(){for(var e=0;e<d.current.length;e+=1){var t=d.current[e];t.style.transform="",t.style.transitionDuration=""}var n=p.current;if(void 0!==n){var u=d.current[n];u&&(u.style.opacity="1",u.style.visibility="");var c=h.current;void 0!==c&&n!==c&&(d.current=o.default(d.current,n,c),r(n,c))}p.current=void 0,h.current=void 0,s.current&&(document.body.removeChild(s.current),s.current=null)}}),x=c.default.useCallback((function(e){d.current.push(e)}),[]),L=c.default.useCallback((function(e){var t=d.current.indexOf(e);-1!==t&&d.current.splice(t,1)}),[]),C=c.default.useMemo((function(){return{registerItem:x,removeItem:L}}),[x,L]);return c.default.createElement("div",t.__assign({},y,i,{ref:f}),c.default.createElement(m.Provider,{value:C},n))},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tslib"),require("array-move"),require("react")):"function"==typeof define&&define.amd?define(["exports","tslib","array-move","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactEasySort={},e.tslib,e.arrayMove,e.React)}(this,(function(e,t,n,r){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=u(n),c=u(r),a=function(e,t,n){for(var r=e.x,u=e.y,o=(void 0===n?{}:n).fallbackToClosest,c=void 0!==o&&o,a=1e4,i=-1,d=0;d<t.length;d+=1){var f=t[d];if(r>=f.left&&r<f.right&&u>=f.top&&u<f.bottom)return d;if(c){var l=(f.left+f.right)/2,s=(f.top+f.bottom)/2,v=Math.sqrt(Math.pow(r-l,2)+Math.pow(u-s,2));v<a&&(a=v,i=d)}}return i},i=function(e){return{x:Number(e.clientX),y:Number(e.clientY)}},d=function(e){return{x:Number(e.clientX),y:Number(e.clientY)}},f=function(e,t){return{x:e.x-t.x,y:e.y-t.y}},l=function(e){e.preventDefault()},s=function(){window.removeEventListener("contextmenu",l)},v=function(e){var t=e.onStart,n=e.onMove,r=e.onEnd,u=e.containerRef,o=c.default.useRef({x:0,y:0}),a=c.default.useRef(void 0),v=c.default.useRef(!1),m=c.default.useRef({onStart:t,onMove:n,onEnd:r}),p=c.default.useState(!1),h=p[0],y=p[1];c.default.useEffect((function(){m.current={onStart:t,onMove:n,onEnd:r}}),[t,n,r]);var E=function(){a.current&&window.clearTimeout(a.current)},b=c.default.useCallback((function(){if(u.current){var e=u.current.getBoundingClientRect();o.current={x:e.left,y:e.top}}}),[u]),x=c.default.useCallback((function(e){var t=f(e,o.current);m.current.onMove&&m.current.onMove({pointInWindow:e,point:t})}),[]),L=c.default.useCallback((function(e){if(v.current){v.current=!1;var t=i(e),n=f(t,o.current);m.current.onStart&&m.current.onStart({point:n,pointInWindow:t})}else x(i(e))}),[x]),C=c.default.useCallback((function(e){e.cancelable?(e.preventDefault(),x(d(e.touches[0]))):(document.removeEventListener("touchmove",C),m.current.onEnd&&m.current.onEnd())}),[x]),g=c.default.useCallback((function(){v.current=!1,document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",g),m.current.onEnd&&m.current.onEnd()}),[L]),w=c.default.useCallback((function(){document.removeEventListener("touchmove",C),document.removeEventListener("touchend",w),s(),m.current.onEnd&&m.current.onEnd()}),[C]),R=c.default.useCallback((function(e){0===e.button&&(document.addEventListener("mousemove",L),document.addEventListener("mouseup",g),b(),v.current=!0)}),[L,g,b]),k=c.default.useCallback((function(e,t){document.addEventListener("touchmove",C,{capture:!1,passive:!1}),document.addEventListener("touchend",w),window.addEventListener("contextmenu",l,{capture:!0,passive:!1}),m.current.onStart&&m.current.onStart({point:e,pointInWindow:t})}),[w,C]),S=c.default.useCallback((function(e){b();var t=d(e.touches[0]),n=f(t,o.current);a.current=window.setTimeout((function(){return k(n,t)}),120)}),[k,b]),I=c.default.useCallback((function(){y(!0),document.removeEventListener("touchstart",I)}),[]),M=c.default.useCallback((function(){E()}),[]);return c.default.useLayoutEffect((function(){if(h){var e=u.current;return null==e||e.addEventListener("touchstart",S,{capture:!0,passive:!1}),document.addEventListener("touchmove",M,{capture:!1,passive:!1}),document.addEventListener("touchend",M,{capture:!1,passive:!1}),function(){null==e||e.removeEventListener("touchstart",S),document.removeEventListener("touchmove",M),document.removeEventListener("touchend",M),document.removeEventListener("touchmove",C),document.removeEventListener("touchend",w),s(),E()}}return document.addEventListener("touchstart",I),function(){document.removeEventListener("touchstart",I),document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",g)}}),[h,I,L,C,M,w,g,u,S]),h?{}:{onMouseDown:R}},m=c.default.createContext(void 0);e.SortableItem=function(e){var t=e.children,n=c.default.useContext(m);if(!n)throw new Error("SortableItem must be a child of SortableList");var r=n.registerItem,u=n.removeItem,o=c.default.useRef(null);return c.default.useEffect((function(){var e=o.current;return e&&r(e),function(){e&&u(e)}}),[r,u,t]),c.default.cloneElement(t,{ref:o})},e.default=function(e){var n=e.children,r=e.onSortEnd,u=e.draggedItemClassName,i=t.__rest(e,["children","onSortEnd","draggedItemClassName"]),d=c.default.useRef([]),f=c.default.useRef([]),l=c.default.useRef(null),s=c.default.useRef(null),p=c.default.useRef(void 0),h=c.default.useRef(void 0),y=c.default.useRef({x:0,y:0});c.default.useEffect((function(){return function(){s.current&&document.body.removeChild(s.current)}}),[]);var E=function(e){if(s.current){var t=y.current;s.current.style.transform="translate3d("+(e.x-t.x)+"px, "+(e.y-t.y)+"px, 0px)"}},b=c.default.useCallback((function(e){if(l.current){var t=d.current[e],n=f.current[e],r=t.cloneNode(!0);u&&u.split(" ").forEach((function(e){return r.classList.add(e)})),r.style.width=n.width+"px",r.style.height=n.height+"px";var o=l.current.getBoundingClientRect();r.style.position="fixed",r.style.top=o.top+"px",r.style.left=o.left+"px",document.body.appendChild(r),s.current=r}}),[u]),x=v({containerRef:l,onStart:function(e){var t=e.point,n=e.pointInWindow;if(l.current){f.current=d.current.map((function(e){return e.getBoundingClientRect()}));var r=a(n,f.current);if(-1!==r){p.current=r,b(r);var u=d.current[r];u.style.opacity="0",u.style.visibility="hidden",y.current={x:n.x-u.offsetLeft,y:n.y-u.offsetTop},E(t),window.navigator.vibrate&&window.navigator.vibrate(100)}}},onMove:function(e){var t=e.point,n=e.pointInWindow;E(t);var r=p.current;if(void 0!==r){var u=a(n,f.current,{fallbackToClosest:!0});if(-1!==u){h.current=u;for(var o=r<u,c=0;c<d.current.length;c+=1){var i=d.current[c],l=f.current[c];if(o&&c>=r&&c<=u||!o&&c>=u&&c<=r){var s=f.current[o?c-1:c+1];if(s){var v=s.left-l.left,m=s.top-l.top;i.style.transform="translate3d("+v+"px, "+m+"px, 0px)"}}else i.style.transform="translate3d(0,0,0)";i.style.transitionDuration="300ms"}}}},onEnd:function(){for(var e=0;e<d.current.length;e+=1){var t=d.current[e];t.style.transform="",t.style.transitionDuration=""}var n=p.current;if(void 0!==n){var u=d.current[n];u&&(u.style.opacity="1",u.style.visibility="");var c=h.current;void 0!==c&&n!==c&&(d.current=o.default(d.current,n,c),r(n,c))}p.current=void 0,h.current=void 0,s.current&&(document.body.removeChild(s.current),s.current=null)}}),L=c.default.useCallback((function(e){d.current.push(e)}),[]),C=c.default.useCallback((function(e){var t=d.current.indexOf(e);-1!==t&&d.current.splice(t,1)}),[]),g=c.default.useMemo((function(){return{registerItem:L,removeItem:C}}),[L,C]);return c.default.createElement("div",t.__assign({},x,i,{ref:l}),c.default.createElement(m.Provider,{value:g},n))},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-easy-sort.min.js.map

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

223049

increased by2.35%

Lines of code

1470

increased by1.73%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

119

increased by5.31%

No dependency changes