react-easy-sort - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

hooks.d.ts

@@ -16,4 +16,5 @@ import React from 'react';
     containerRef: React.MutableRefObject<HTMLDivElement | null>;
+    knobs?: HTMLElement[];
 };
-export declare const useDrag: ({ onStart, onMove, onEnd, containerRef }: UseDragProps) => {
+export declare const useDrag: ({ onStart, onMove, onEnd, containerRef, knobs }: UseDragProps) => {
     onMouseDown?: undefined;
@@ -20,0 +21,0 @@ } | {

index.d.ts

@@ -20,2 +20,3 @@ import React, { HTMLAttributes } from 'react';
 export declare const SortableItem: ({ children }: ItemProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const SortableKnob: ({ children }: ItemProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
 //# sourceMappingURL=index.d.ts.map

index.js

@@ -89,3 +89,4 @@ 'use strict';
       onEnd = _a.onEnd,
-      containerRef = _a.containerRef; // contains the top-left coordinates of the container in the window. Set on drag start and used in drag move
+      containerRef = _a.containerRef,
+      knobs = _a.knobs; // contains the top-left coordinates of the container in the window. Set on drag start and used in drag move
 
@@ -206,2 +207,8 @@ var containerPositionRef = React__default['default'].useRef({
 
+    if ((knobs === null || knobs === void 0 ? void 0 : knobs.length) && !knobs.find(function (knob) {
+      return knob.contains(e.target);
+    })) {
+      return;
+    }
+
     document.addEventListener('mousemove', onMouseMove);
@@ -212,3 +219,3 @@ document.addEventListener('mouseup', onMouseUp);
     isFirstMoveRef.current = true;
-  }, [onMouseMove, onMouseUp, saveContainerPosition]);
+  }, [onMouseMove, onMouseUp, saveContainerPosition, knobs]);
   var handleTouchStart = React__default['default'].useCallback(function (point, pointInWindow) {
@@ -230,2 +237,8 @@ document.addEventListener('touchmove', onTouchMove, {
   var onTouchStart = React__default['default'].useCallback(function (e) {
+    if ((knobs === null || knobs === void 0 ? void 0 : knobs.length) && !knobs.find(function (knob) {
+      return knob.contains(e.target);
+    })) {
+      return;
+    }
+
     saveContainerPosition();
@@ -239,3 +252,3 @@ var pointInWindow = getTouchPoint(e.touches[0]);
     }, 120);
-  }, [handleTouchStart, saveContainerPosition]);
+  }, [handleTouchStart, saveContainerPosition, knobs]);
   var detectTouchDevice = React__default['default'].useCallback(function () {
@@ -308,4 +321,6 @@ setTouchDevice(true);
 
-  var itemsRect = React__default['default'].useRef([]); // contains the container element
+  var itemsRect = React__default['default'].useRef([]); // Hold all registered knobs
 
+  var knobs = React__default['default'].useRef([]); // contains the container element
+
   var containerRef = React__default['default'].useRef(null); // contains the target element (copy of the source element)
@@ -317,3 +332,3 @@
 
-  var lastTargetIndexRef = React__default['default'].useRef(undefined); // contains the offset point where the initial drag occured to be used when dragging the item
+  var lastTargetIndexRef = React__default['default'].useRef(undefined); // contains the offset point where the initial drag occurred to be used when dragging the item
 
@@ -370,2 +385,3 @@ var offsetPointRef = React__default['default'].useRef({
     containerRef: containerRef,
+    knobs: knobs.current,
     onStart: function onStart(_a) {
@@ -500,2 +516,12 @@ var pointInWindow = _a.pointInWindow;
     }
+  }, []);
+  var registerKnob = React__default['default'].useCallback(function (item) {
+    knobs.current.push(item);
+  }, []);
+  var removeKnob = React__default['default'].useCallback(function (item) {
+    var index = knobs.current.indexOf(item);
+
+    if (index !== -1) {
+      knobs.current.splice(index, 1);
+    }
   }, []); // we need to memoize the context to avoid re-rendering every children of the context provider
@@ -507,5 +533,7 @@ // when not needed
       registerItem: registerItem,
-      removeItem: removeItem
+      removeItem: removeItem,
+      registerKnob: registerKnob,
+      removeKnob: removeKnob
     };
-  }, [registerItem, removeItem]);
+  }, [registerItem, removeItem, registerKnob, removeKnob]);
   return /*#__PURE__*/React__default['default'].createElement("div", tslib.__assign({}, allowDrag ? listeners : {}, rest, {
@@ -549,5 +577,34 @@ ref: containerRef
 };
+var SortableKnob = function SortableKnob(_a) {
+  var children = _a.children;
+  var context = React__default['default'].useContext(SortableListContext);
 
+  if (!context) {
+    throw new Error('SortableKnob must be a child of SortableList');
+  }
+
+  var registerKnob = context.registerKnob,
+      removeKnob = context.removeKnob;
+  var elementRef = React__default['default'].useRef(null);
+  React__default['default'].useEffect(function () {
+    var currentItem = elementRef.current;
+
+    if (currentItem) {
+      registerKnob(currentItem);
+    }
+
+    return function () {
+      if (currentItem) {
+        removeKnob(currentItem);
+      }
+    }; // if the children changes, we want to re-register the DOM node
+  }, [registerKnob, removeKnob, children]);
+  return /*#__PURE__*/React__default['default'].cloneElement(children, {
+    ref: elementRef
+  });
+};
+
 exports.SortableItem = SortableItem;
+exports.SortableKnob = SortableKnob;
 exports.default = SortableList;
 //# sourceMappingURL=index.js.map

index.module.js

@@ -80,3 +80,4 @@ import { __rest, __assign } from 'tslib';
       onEnd = _a.onEnd,
-      containerRef = _a.containerRef; // contains the top-left coordinates of the container in the window. Set on drag start and used in drag move
+      containerRef = _a.containerRef,
+      knobs = _a.knobs; // contains the top-left coordinates of the container in the window. Set on drag start and used in drag move
 
@@ -197,2 +198,8 @@ var containerPositionRef = React.useRef({
 
+    if ((knobs === null || knobs === void 0 ? void 0 : knobs.length) && !knobs.find(function (knob) {
+      return knob.contains(e.target);
+    })) {
+      return;
+    }
+
     document.addEventListener('mousemove', onMouseMove);
@@ -203,3 +210,3 @@ document.addEventListener('mouseup', onMouseUp);
     isFirstMoveRef.current = true;
-  }, [onMouseMove, onMouseUp, saveContainerPosition]);
+  }, [onMouseMove, onMouseUp, saveContainerPosition, knobs]);
   var handleTouchStart = React.useCallback(function (point, pointInWindow) {
@@ -221,2 +228,8 @@ document.addEventListener('touchmove', onTouchMove, {
   var onTouchStart = React.useCallback(function (e) {
+    if ((knobs === null || knobs === void 0 ? void 0 : knobs.length) && !knobs.find(function (knob) {
+      return knob.contains(e.target);
+    })) {
+      return;
+    }
+
     saveContainerPosition();
@@ -230,3 +243,3 @@ var pointInWindow = getTouchPoint(e.touches[0]);
     }, 120);
-  }, [handleTouchStart, saveContainerPosition]);
+  }, [handleTouchStart, saveContainerPosition, knobs]);
   var detectTouchDevice = React.useCallback(function () {
@@ -299,4 +312,6 @@ setTouchDevice(true);
 
-  var itemsRect = React.useRef([]); // contains the container element
+  var itemsRect = React.useRef([]); // Hold all registered knobs
 
+  var knobs = React.useRef([]); // contains the container element
+
   var containerRef = React.useRef(null); // contains the target element (copy of the source element)
@@ -308,3 +323,3 @@
 
-  var lastTargetIndexRef = React.useRef(undefined); // contains the offset point where the initial drag occured to be used when dragging the item
+  var lastTargetIndexRef = React.useRef(undefined); // contains the offset point where the initial drag occurred to be used when dragging the item
 
@@ -361,2 +376,3 @@ var offsetPointRef = React.useRef({
     containerRef: containerRef,
+    knobs: knobs.current,
     onStart: function onStart(_a) {
@@ -491,2 +507,12 @@ var pointInWindow = _a.pointInWindow;
     }
+  }, []);
+  var registerKnob = React.useCallback(function (item) {
+    knobs.current.push(item);
+  }, []);
+  var removeKnob = React.useCallback(function (item) {
+    var index = knobs.current.indexOf(item);
+
+    if (index !== -1) {
+      knobs.current.splice(index, 1);
+    }
   }, []); // we need to memoize the context to avoid re-rendering every children of the context provider
@@ -498,5 +524,7 @@ // when not needed
       registerItem: registerItem,
-      removeItem: removeItem
+      removeItem: removeItem,
+      registerKnob: registerKnob,
+      removeKnob: removeKnob
     };
-  }, [registerItem, removeItem]);
+  }, [registerItem, removeItem, registerKnob, removeKnob]);
   return /*#__PURE__*/React.createElement("div", __assign({}, allowDrag ? listeners : {}, rest, {
@@ -540,5 +568,33 @@ ref: containerRef
 };
+var SortableKnob = function SortableKnob(_a) {
+  var children = _a.children;
+  var context = React.useContext(SortableListContext);
 
+  if (!context) {
+    throw new Error('SortableKnob must be a child of SortableList');
+  }
+
+  var registerKnob = context.registerKnob,
+      removeKnob = context.removeKnob;
+  var elementRef = React.useRef(null);
+  React.useEffect(function () {
+    var currentItem = elementRef.current;
+
+    if (currentItem) {
+      registerKnob(currentItem);
+    }
+
+    return function () {
+      if (currentItem) {
+        removeKnob(currentItem);
+      }
+    }; // if the children changes, we want to re-register the DOM node
+  }, [registerKnob, removeKnob, children]);
+  return /*#__PURE__*/React.cloneElement(children, {
+    ref: elementRef
+  });
+};
+
 export default SortableList;
-export { SortableItem };
+export { SortableItem, SortableKnob };
 //# sourceMappingURL=index.module.js.map

package.json

 {
   "name": "react-easy-sort",
-  "version": "1.1.0",
+  "version": "1.2.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

@@ -78,5 +78,4 @@ # react-easy-sort
 | **draggedItemClassName** |     Class applied to the item being dragged      |                    `string`                    |       - |
-| **allowDrag**            |     Determines whether items can be dragged      |                    `boolean`                   |   `true`|
+| **allowDrag**            |     Determines whether items can be dragged      |                   `boolean`                    |  `true` |
 
-
 ### SortableItem
@@ -86,5 +85,40 @@
 
+### SortableKnob
+
+You can use this component if you doesn't want to whole item to be draggable but only a specific area of it.
+
+```js
+import SortableList, { SortableItem, SortableKnob } from 'react-easy-sort'
+import arrayMove from 'array-move'
+
+const App = () => {
+  const [items, setItems] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'])
+
+  const onSortEnd = (oldIndex: number, newIndex: number) => {
+    setItems((array) => arrayMove(array, oldIndex, newIndex))
+  }
+
+  return (
+    <SortableList onSortEnd={onSortEnd} className="list" draggedItemClassName="dragged">
+      {items.map((item) => (
+        <SortableItem key={item}>
+          <div className="item">
+            <SortableKnob>
+              <div>Drag me</div>
+            </SortableKnob>
+            {item}
+          </div>
+        </SortableItem>
+      ))}
+    </SortableList>
+  )
+}
+```
+
+This component doesn't take any other props than its child. This child should be a single React element that can receives a ref. If you pass a component as a child, it needs to be wrapped with `React.forwardRef()`.
+
 ## 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)
@@ -91,0 +125,0 @@ - `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))

umd/react-easy-sort.js

@@ -87,3 +87,4 @@ (function (global, factory) {
         onEnd = _a.onEnd,
-        containerRef = _a.containerRef; // contains the top-left coordinates of the container in the window. Set on drag start and used in drag move
+        containerRef = _a.containerRef,
+        knobs = _a.knobs; // contains the top-left coordinates of the container in the window. Set on drag start and used in drag move
 
@@ -204,2 +205,8 @@ var containerPositionRef = React__default['default'].useRef({
 
+      if ((knobs === null || knobs === void 0 ? void 0 : knobs.length) && !knobs.find(function (knob) {
+        return knob.contains(e.target);
+      })) {
+        return;
+      }
+
       document.addEventListener('mousemove', onMouseMove);
@@ -210,3 +217,3 @@ document.addEventListener('mouseup', onMouseUp);
       isFirstMoveRef.current = true;
-    }, [onMouseMove, onMouseUp, saveContainerPosition]);
+    }, [onMouseMove, onMouseUp, saveContainerPosition, knobs]);
     var handleTouchStart = React__default['default'].useCallback(function (point, pointInWindow) {
@@ -228,2 +235,8 @@ document.addEventListener('touchmove', onTouchMove, {
     var onTouchStart = React__default['default'].useCallback(function (e) {
+      if ((knobs === null || knobs === void 0 ? void 0 : knobs.length) && !knobs.find(function (knob) {
+        return knob.contains(e.target);
+      })) {
+        return;
+      }
+
       saveContainerPosition();
@@ -237,3 +250,3 @@ var pointInWindow = getTouchPoint(e.touches[0]);
       }, 120);
-    }, [handleTouchStart, saveContainerPosition]);
+    }, [handleTouchStart, saveContainerPosition, knobs]);
     var detectTouchDevice = React__default['default'].useCallback(function () {
@@ -306,4 +319,6 @@ setTouchDevice(true);
 
-    var itemsRect = React__default['default'].useRef([]); // contains the container element
+    var itemsRect = React__default['default'].useRef([]); // Hold all registered knobs
 
+    var knobs = React__default['default'].useRef([]); // contains the container element
+
     var containerRef = React__default['default'].useRef(null); // contains the target element (copy of the source element)
@@ -315,3 +330,3 @@
 
-    var lastTargetIndexRef = React__default['default'].useRef(undefined); // contains the offset point where the initial drag occured to be used when dragging the item
+    var lastTargetIndexRef = React__default['default'].useRef(undefined); // contains the offset point where the initial drag occurred to be used when dragging the item
 
@@ -368,2 +383,3 @@ var offsetPointRef = React__default['default'].useRef({
       containerRef: containerRef,
+      knobs: knobs.current,
       onStart: function onStart(_a) {
@@ -498,2 +514,12 @@ var pointInWindow = _a.pointInWindow;
       }
+    }, []);
+    var registerKnob = React__default['default'].useCallback(function (item) {
+      knobs.current.push(item);
+    }, []);
+    var removeKnob = React__default['default'].useCallback(function (item) {
+      var index = knobs.current.indexOf(item);
+
+      if (index !== -1) {
+        knobs.current.splice(index, 1);
+      }
     }, []); // we need to memoize the context to avoid re-rendering every children of the context provider
@@ -505,5 +531,7 @@ // when not needed
         registerItem: registerItem,
-        removeItem: removeItem
+        removeItem: removeItem,
+        registerKnob: registerKnob,
+        removeKnob: removeKnob
       };
-    }, [registerItem, removeItem]);
+    }, [registerItem, removeItem, registerKnob, removeKnob]);
     return /*#__PURE__*/React__default['default'].createElement("div", tslib.__assign({}, allowDrag ? listeners : {}, rest, {
@@ -547,4 +575,33 @@ ref: containerRef
   };
+  var SortableKnob = function SortableKnob(_a) {
+    var children = _a.children;
+    var context = React__default['default'].useContext(SortableListContext);
 
+    if (!context) {
+      throw new Error('SortableKnob must be a child of SortableList');
+    }
+
+    var registerKnob = context.registerKnob,
+        removeKnob = context.removeKnob;
+    var elementRef = React__default['default'].useRef(null);
+    React__default['default'].useEffect(function () {
+      var currentItem = elementRef.current;
+
+      if (currentItem) {
+        registerKnob(currentItem);
+      }
+
+      return function () {
+        if (currentItem) {
+          removeKnob(currentItem);
+        }
+      }; // if the children changes, we want to re-register the DOM node
+    }, [registerKnob, removeKnob, children]);
+    return /*#__PURE__*/React__default['default'].cloneElement(children, {
+      ref: elementRef
+    });
+  };
+
   exports.SortableItem = SortableItem;
+  exports.SortableKnob = SortableKnob;
   exports.default = SortableList;
@@ -551,0 +608,0 @@

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

No alert changes

Improved metrics

Total package byte prevSize

245198

increased by9.33%

Number of package files

32

increased by6.67%

Lines of code

1643

increased by11.09%

Number of lines in readme file

155

increased by28.1%

No dependency changes