react-easy-sort/umd/react-easy-sort.min.js

A React component to sort items in lists or grids

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tslib"),require("react")):"function"==typeof define&&define.amd?define(["exports","tslib","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactEasySort={},e.tslib,e.React)}(this,(function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=r(n),o=function(e,t,n){for(var r=e.x,u=e.y,o=(void 0===n?{}:n).fallbackToClosest,c=void 0!==o&&o,i=1e4,l=-1,a=0;a<t.length;a+=1){var f=t[a];if(r>=f.left&&r<f.right&&u>=f.top&&u<f.bottom)return a;if(c){var s=(f.left+f.right)/2,d=(f.top+f.bottom)/2,v=Math.sqrt(Math.pow(r-s,2)+Math.pow(u-d,2));v<i&&(i=v,l=a)}}return l};var c=function(e){return{x:Number(e.clientX),y:Number(e.clientY)}},i=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}},a=function(e){e.preventDefault()},f=function(){window.removeEventListener("contextmenu",a)},s=function(e){var t=e.onStart,n=e.onMove,r=e.onEnd,o=e.allowDrag,s=void 0===o||o,d=e.containerRef,v=e.knobs,m=u.default.useRef({x:0,y:0}),p=u.default.useRef(void 0),y=u.default.useRef(!1),h=u.default.useRef({onStart:t,onMove:n,onEnd:r}),b=u.default.useState(!1),x=b[0],g=b[1];u.default.useEffect((function(){h.current={onStart:t,onMove:n,onEnd:r}}),[t,n,r]);var E=function(){p.current&&window.clearTimeout(p.current)},w=u.default.useCallback((function(){if(d.current){var e=d.current.getBoundingClientRect();m.current={x:e.left,y:e.top}}}),[d]),L=u.default.useCallback((function(e){var t=l(e,m.current);h.current.onMove&&h.current.onMove({pointInWindow:e,point:t})}),[]),C=u.default.useCallback((function(e){if(y.current){y.current=!1;var t=c(e),n=l(t,m.current);h.current.onStart&&h.current.onStart({point:n,pointInWindow:t})}else L(c(e))}),[L]),R=u.default.useCallback((function(e){e.cancelable?(e.preventDefault(),L(i(e.touches[0]))):(document.removeEventListener("touchmove",R),h.current.onEnd&&h.current.onEnd())}),[L]),S=u.default.useCallback((function(){y.current=!1,document.removeEventListener("mousemove",C),document.removeEventListener("mouseup",S),h.current.onEnd&&h.current.onEnd()}),[C]),k=u.default.useCallback((function(){document.removeEventListener("touchmove",R),document.removeEventListener("touchend",k),f(),h.current.onEnd&&h.current.onEnd()}),[R]),M=u.default.useCallback((function(e){0===e.button&&((null==v?void 0:v.length)&&!v.find((function(t){return t.contains(e.target)}))||(document.addEventListener("mousemove",C),document.addEventListener("mouseup",S),w(),y.current=!0))}),[C,S,w,v]),I=u.default.useCallback((function(e,t){document.addEventListener("touchmove",R,{capture:!1,passive:!1}),document.addEventListener("touchend",k),window.addEventListener("contextmenu",a,{capture:!0,passive:!1}),h.current.onStart&&h.current.onStart({point:e,pointInWindow:t})}),[k,R]),T=u.default.useCallback((function(e){if(!(null==v?void 0:v.length)||v.find((function(t){return t.contains(e.target)}))){w();var t=i(e.touches[0]),n=l(t,m.current);p.current=window.setTimeout((function(){return I(n,t)}),120)}}),[I,w,v]),_=u.default.useCallback((function(){g(!0),document.removeEventListener("touchstart",_)}),[]),W=u.default.useCallback((function(){E()}),[]);return u.default.useLayoutEffect((function(){if(x){var e=d.current;return s&&(null==e||e.addEventListener("touchstart",T,{capture:!0,passive:!1}),document.addEventListener("touchmove",W,{capture:!1,passive:!1}),document.addEventListener("touchend",W,{capture:!1,passive:!1})),function(){null==e||e.removeEventListener("touchstart",T,{capture:!0}),document.removeEventListener("touchmove",W,{capture:!1}),document.removeEventListener("touchend",W,{capture:!1}),document.removeEventListener("touchmove",R),document.removeEventListener("touchend",k),f(),E()}}return document.addEventListener("touchstart",_),function(){document.removeEventListener("touchstart",_),document.removeEventListener("mousemove",C),document.removeEventListener("mouseup",S)}}),[x,s,_,C,R,W,k,S,d,T]),x?{}:{onMouseDown:M}},d=u.default.createContext(void 0);e.SortableItem=function(e){var t=e.children,n=u.default.useContext(d);if(!n)throw new Error("SortableItem must be a child of SortableList");var r=n.registerItem,o=n.removeItem,c=u.default.useRef(null);return u.default.useEffect((function(){var e=c.current;return e&&r(e),function(){e&&o(e)}}),[r,o,t]),u.default.cloneElement(t,{ref:c})},e.SortableKnob=function(e){var t=e.children,n=u.default.useContext(d);if(!n)throw new Error("SortableKnob must be a child of SortableList");var r=n.registerKnob,o=n.removeKnob,c=u.default.useRef(null);return u.default.useEffect((function(){var e=c.current;return e&&r(e),function(){e&&o(e)}}),[r,o,t]),u.default.cloneElement(t,{ref:c})},e.default=function(e){var n,r=e.children,c=e.allowDrag,i=void 0===c||c,l=e.onSortStart,a=e.onSortMove,f=e.onSortEnd,v=e.draggedItemClassName,m=e.as,p=e.lockAxis,y=e.customHolderRef,h=e.dropTarget,b=e.autoScroll,x=void 0!==b&&b,g=t.__rest(e,["children","allowDrag","onSortStart","onSortMove","onSortEnd","draggedItemClassName","as","lockAxis","customHolderRef","dropTarget","autoScroll"]),E=u.default.useRef([]),w=u.default.useRef([]),L=u.default.useRef([]),C=u.default.useRef(null),R=u.default.useRef(null),S=u.default.useRef(void 0),k=u.default.useRef(void 0),M=u.default.useRef({x:0,y:0}),I=function(e){var t=u.default.useRef(null);if(!e)return{};return{show:function(e){t.current&&(t.current.style.width="".concat(e.width,"px"),t.current.style.height="".concat(e.height,"px"),t.current.style.opacity="1",t.current.style.visibility="visible")},hide:function(){t.current&&(t.current.style.opacity="0",t.current.style.visibility="hidden")},setPosition:function(e,n,r){if(t.current){var u=n[e],o="y"===r?u.left:n[e].left,c="x"===r?u.top:n[e].top;t.current.style.transform="translate3d(".concat(o,"px, ").concat(c,"px, 0px)")}},render:function(){return u.default.createElement("div",{ref:t,"aria-hidden":!0,style:{opacity:0,visibility:"hidden",position:"fixed",top:0,left:0,pointerEvents:"none"}},e)}}}(h),T=u.default.useRef("1"),_=u.default.useRef({x:0,y:0}),W=u.default.useRef(null),A=u.default.useRef(null),D=u.default.useRef({x:0,y:0}),H=u.default.useCallback((function(){var e=A.current,t=_.current;0===t.x&&0===t.y||!e?W.current&&(cancelAnimationFrame(W.current),W.current=null):(e instanceof Window?e.scrollBy(t.x,t.y):e instanceof HTMLElement&&(e.scrollTop+=t.y,e.scrollLeft+=t.x),W.current=requestAnimationFrame(H))}),[]);u.default.useEffect((function(){var e=(null==y?void 0:y.current)||document.body;return function(){R.current&&e.removeChild(R.current)}}),[y]);var q=function(e){if(R.current&&void 0!==S.current){var t=M.current,n=w.current[S.current],r="y"===p?n.left:e.x-t.x,u="x"===p?n.top:e.y-t.y;R.current.style.transform="translate3d(".concat(r,"px, ").concat(u,"px, 0px)")}},N=u.default.useCallback((function(e){if(C.current){var t=E.current[e],n=w.current[e],r=t.cloneNode(!0);v&&v.split(" ").forEach((function(e){return r.classList.add(e)})),r.style.width="".concat(n.width,"px"),r.style.height="".concat(n.height,"px"),r.style.position="fixed",r.style.margin="0",r.style.top="0",r.style.left="0";var u=t.querySelectorAll("canvas");r.querySelectorAll("canvas").forEach((function(e,t){var n;null===(n=e.getContext("2d"))||void 0===n||n.drawImage(u[t],0,0)})),((null==y?void 0:y.current)||document.body).appendChild(r),R.current=r}}),[y,v]),K=s({allowDrag:i,containerRef:C,knobs:L.current,onStart:function(e){var t,n,r=e.pointInWindow;if(C.current){if(x){var u=function(e){if(!e)return window;for(var t=e;t;){var n=window.getComputedStyle(t),r=n.overflowX,u=n.overflowY,o=("auto"===r||"scroll"===r)&&t.scrollWidth>t.clientWidth,c=("auto"===u||"scroll"===u)&&t.scrollHeight>t.clientHeight;if(o||c)return t;t=t.parentElement}return window}(C.current);A.current=u,u instanceof HTMLElement?D.current={y:u.scrollTop,x:u.scrollLeft}:D.current={y:u.scrollY,x:u.scrollX}}w.current=E.current.map((function(e){return e.getBoundingClientRect()}));var c=o(r,w.current);if(-1!==c){S.current=c,l&&l(),N(c);var i=E.current[c];T.current=null!==(t=i.style.opacity)&&void 0!==t?t:"1",i.style.opacity="0",i.style.visibility="hidden";var a=i.getBoundingClientRect();M.current={x:r.x-a.left,y:r.y-a.top},q(r),null===(n=I.show)||void 0===n||n.call(I,a),window.navigator.vibrate&&window.navigator.vibrate(100)}}},onMove:function(e){var t,n=e.pointInWindow;if(C.current){q(n);var r=S.current;if(void 0!==r){if(x)if(f=A.current){var u=n.x,c=n.y;_.current={x:0,y:0};var i=void 0;if(i=f instanceof Window?{top:0,bottom:f.innerHeight,left:0,right:f.innerWidth}:f.getBoundingClientRect(),"x"!==p)if(c<i.top+60&&c>=i.top){var l=i.top+60-c;_.current.y=l/60*-15}else if(c>i.bottom-60&&c<=i.bottom){l=c-(i.bottom-60);_.current.y=l/60*15}if("y"!==p)if(u<i.left+60&&u>=i.left){l=i.left+60-u;_.current.x=l/60*-15}else if(u>i.right-60&&u<=i.right){l=u-(i.right-60);_.current.x=l/60*15}0===_.current.x&&0===_.current.y||W.current||(W.current=requestAnimationFrame(H))}var f,s={x:0,y:0};if(x&&A.current)(f=A.current)instanceof HTMLElement?s={y:f.scrollTop-D.current.y,x:f.scrollLeft-D.current.x}:f instanceof Window&&(s={y:f.scrollY-D.current.y,x:f.scrollX-D.current.x});var d=w.current[r],v={x:("y"===p?d.left:n.x)+s.x,y:("x"===p?d.top:n.y)+s.y},m=o(v,w.current,{fallbackToClosest:!0});if(-1!==m){a&&void 0!==k.current&&k.current!==m&&a(m),k.current=m;for(var y=r<m,h=0;h<E.current.length;h+=1){var b=E.current[h],g=w.current[h];if(y&&h>=r&&h<=m||!y&&h>=m&&h<=r){var L=w.current[y?h-1:h+1];if(L){var R=L.left-g.left,M=L.top-g.top;b.style.transform="translate3d(".concat(R,"px, ").concat(M,"px, 0px)")}}else b.style.transform="translate3d(0,0,0)";b.style.transitionDuration="300ms"}null===(t=I.setPosition)||void 0===t||t.call(I,k.current,w.current,p)}}}},onEnd:function(){var e;x&&(A.current=null,_.current={x:0,y:0},W.current&&(cancelAnimationFrame(W.current),W.current=null));for(var n=0;n<E.current.length;n+=1){var r=E.current[n];r.style.transform="",r.style.transitionDuration=""}var u,o,c,i,l=S.current;if(void 0!==l){var a=E.current[l];a&&(a.style.opacity=T.current,a.style.visibility="");var s=k.current;void 0!==s&&l!==s&&(E.current=(u=E.current,o=l,c=s,function(e,t,n){var r=t<0?e.length+t:t;if(r>=0&&r<e.length){var u=n<0?e.length+n:n,o=e.splice(t,1)[0];e.splice(u,0,o)}}(i=t.__spreadArray([],u,!0),o,c),i),f(l,s))}(S.current=void 0,k.current=void 0,null===(e=I.hide)||void 0===e||e.call(I),R.current)&&(((null==y?void 0:y.current)||document.body).removeChild(R.current),R.current=null)}}),B=u.default.useCallback((function(e){E.current.push(e)}),[]),X=u.default.useCallback((function(e){var t=E.current.indexOf(e);-1!==t&&E.current.splice(t,1)}),[]),Y=u.default.useCallback((function(e){L.current.push(e)}),[]),F=u.default.useCallback((function(e){var t=L.current.indexOf(e);-1!==t&&L.current.splice(t,1)}),[]),P=u.default.useMemo((function(){return{registerItem:B,removeItem:X,registerKnob:Y,removeKnob:F}}),[B,X,Y,F]);return u.default.createElement(m||"div",t.__assign(t.__assign(t.__assign({},i?K:{}),g),{ref:C}),u.default.createElement(d.Provider,{value:P},r,null===(n=I.render)||void 0===n?void 0:n.call(I)))},Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=react-easy-sort.min.js.map