react-easy-sort - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

index.d.ts

 import React, { HTMLAttributes } from 'react';
 declare type Props = HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
+    /** Determines whether drag functionality is enabled, defaults to true */
+    allowDrag?: boolean;
     /** Called when the user finishes a sorting gesture. */
@@ -9,3 +11,3 @@ onSortEnd: (oldIndex: number, newIndex: number) => void;
 };
-declare const SortableList: ({ children, onSortEnd, draggedItemClassName, ...rest }: Props) => JSX.Element;
+declare const SortableList: ({ children, allowDrag, onSortEnd, draggedItemClassName, ...rest }: Props) => JSX.Element;
 export default SortableList;
@@ -12,0 +14,0 @@ declare type ItemProps = {

index.js

@@ -294,5 +294,7 @@ 'use strict';
   var children = _a.children,
+      _b = _a.allowDrag,
+      allowDrag = _b === void 0 ? true : _b,
       onSortEnd = _a.onSortEnd,
       draggedItemClassName = _a.draggedItemClassName,
-      rest = tslib.__rest(_a, ["children", "onSortEnd", "draggedItemClassName"]); // this array contains the elements than can be sorted (wrapped inside SortableItem)
+      rest = tslib.__rest(_a, ["children", "allowDrag", "onSortEnd", "draggedItemClassName"]); // this array contains the elements than can be sorted (wrapped inside SortableItem)
 
@@ -500,3 +502,3 @@
   }, [registerItem, removeItem]);
-  return /*#__PURE__*/React__default['default'].createElement("div", tslib.__assign({}, listeners, rest, {
+  return /*#__PURE__*/React__default['default'].createElement("div", tslib.__assign({}, allowDrag ? listeners : {}, rest, {
     ref: containerRef
@@ -503,0 +505,0 @@ }), /*#__PURE__*/React__default['default'].createElement(SortableListContext.Provider, {

index.module.js

@@ -285,5 +285,7 @@ import { __rest, __assign } from 'tslib';
   var children = _a.children,
+      _b = _a.allowDrag,
+      allowDrag = _b === void 0 ? true : _b,
       onSortEnd = _a.onSortEnd,
       draggedItemClassName = _a.draggedItemClassName,
-      rest = __rest(_a, ["children", "onSortEnd", "draggedItemClassName"]); // this array contains the elements than can be sorted (wrapped inside SortableItem)
+      rest = __rest(_a, ["children", "allowDrag", "onSortEnd", "draggedItemClassName"]); // this array contains the elements than can be sorted (wrapped inside SortableItem)
 
@@ -491,3 +493,3 @@
   }, [registerItem, removeItem]);
-  return /*#__PURE__*/React.createElement("div", __assign({}, listeners, rest, {
+  return /*#__PURE__*/React.createElement("div", __assign({}, allowDrag ? listeners : {}, rest, {
     ref: containerRef
@@ -494,0 +496,0 @@ }), /*#__PURE__*/React.createElement(SortableListContext.Provider, {

package.json

 {
   "name": "react-easy-sort",
-  "version": "1.0.2",
+  "version": "1.1.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,3 +78,5 @@ # react-easy-sort
 | **draggedItemClassName** |     Class applied to the item being dragged      |                    `string`                    |       - |
+| **allowDrag**            |     Determines whether items can be dragged      |                    `boolean`                   |   `true`|
 
+
 ### SortableItem
@@ -81,0 +83,0 @@

stories/interactive-avatars/index.stories.d.ts

 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ children, onSortEnd, draggedItemClassName, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+    component: ({ children, allowDrag, onSortEnd, draggedItemClassName, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
         children: React.ReactNode;
+        allowDrag?: boolean | undefined;
         onSortEnd: (oldIndex: number, newIndex: number) => void;
@@ -7,0 +8,0 @@ draggedItemClassName?: string | undefined;

stories/simple-grid/index.stories.d.ts

 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ children, onSortEnd, draggedItemClassName, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+    component: ({ children, allowDrag, onSortEnd, draggedItemClassName, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
         children: React.ReactNode;
+        allowDrag?: boolean | undefined;
         onSortEnd: (oldIndex: number, newIndex: number) => void;
@@ -7,0 +8,0 @@ draggedItemClassName?: string | undefined;

stories/simple-horizontal-list/index.stories.d.ts

 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ children, onSortEnd, draggedItemClassName, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+    component: ({ children, allowDrag, onSortEnd, draggedItemClassName, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
         children: React.ReactNode;
+        allowDrag?: boolean | undefined;
         onSortEnd: (oldIndex: number, newIndex: number) => void;
@@ -7,0 +8,0 @@ draggedItemClassName?: string | undefined;

stories/simple-vertical-list/index.stories.d.ts

 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ children, onSortEnd, draggedItemClassName, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+    component: ({ children, allowDrag, onSortEnd, draggedItemClassName, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
         children: React.ReactNode;
+        allowDrag?: boolean | undefined;
         onSortEnd: (oldIndex: number, newIndex: number) => void;
@@ -7,0 +8,0 @@ draggedItemClassName?: string | undefined;

umd/react-easy-sort.js

@@ -292,5 +292,7 @@ (function (global, factory) {
     var children = _a.children,
+        _b = _a.allowDrag,
+        allowDrag = _b === void 0 ? true : _b,
         onSortEnd = _a.onSortEnd,
         draggedItemClassName = _a.draggedItemClassName,
-        rest = tslib.__rest(_a, ["children", "onSortEnd", "draggedItemClassName"]); // this array contains the elements than can be sorted (wrapped inside SortableItem)
+        rest = tslib.__rest(_a, ["children", "allowDrag", "onSortEnd", "draggedItemClassName"]); // this array contains the elements than can be sorted (wrapped inside SortableItem)
 
@@ -498,3 +500,3 @@
     }, [registerItem, removeItem]);
-    return /*#__PURE__*/React__default['default'].createElement("div", tslib.__assign({}, listeners, rest, {
+    return /*#__PURE__*/React__default['default'].createElement("div", tslib.__assign({}, allowDrag ? listeners : {}, rest, {
       ref: containerRef
@@ -501,0 +503,0 @@ }), /*#__PURE__*/React__default['default'].createElement(SortableListContext.Provider, {

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),y=p[0],h=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=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),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",f,{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=l(t,o.current);a.current=window.setTimeout((function(){return k(n,t)}),120)}),[k,b]),I=c.default.useCallback((function(){h(!0),document.removeEventListener("touchstart",I)}),[]),M=c.default.useCallback((function(){E()}),[]);return c.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",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)}}),[y,I,L,C,M,w,g,u,S]),y?{}:{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),y=c.default.useRef(void 0),h=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=h.current;s.current.style.transform="translate3d("+(e.x-t.x)+"px, "+(e.y-t.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",r.style.position="fixed",r.style.margin="0",r.style.top="0",r.style.left="0",document.body.appendChild(r),s.current=r}}),[u]),x=v({containerRef:f,onStart:function(e){var t=e.pointInWindow;if(f.current){l.current=d.current.map((function(e){return e.getBoundingClientRect()}));var n=a(t,l.current);if(-1!==n){p.current=n,b(n);var r=d.current[n];r.style.opacity="0",r.style.visibility="hidden";var u=r.getBoundingClientRect();h.current={x:t.x-u.left,y:t.y-u.top},E(t),window.navigator.vibrate&&window.navigator.vibrate(100)}}},onMove:function(e){var t=e.pointInWindow;E(t);var n=p.current;if(void 0!==n){var r=a(t,l.current,{fallbackToClosest:!0});if(-1!==r){y.current=r;for(var u=n<r,o=0;o<d.current.length;o+=1){var c=d.current[o],i=l.current[o];if(u&&o>=n&&o<=r||!u&&o>=r&&o<=n){var f=l.current[u?o-1:o+1];if(f){var s=f.left-i.left,v=f.top-i.top;c.style.transform="translate3d("+s+"px, "+v+"px, 0px)"}}else c.style.transform="translate3d(0,0,0)";c.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=y.current;void 0!==c&&n!==c&&(d.current=o.default(d.current,n,c),r(n,c))}p.current=void 0,y.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:f}),c.default.createElement(m.Provider,{value:g},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 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})}));
 //# sourceMappingURL=react-easy-sort.min.js.map

No alert changes

Improved metrics

Total package byte prevSize

224266

increased by0.77%

Lines of code

1479

increased by0.82%

Number of lines in readme file

121

increased by1.68%

No dependency changes