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