react-wonderful-tree/dist/cjs/index.js

React component for expandable, sortable, and droppable file trees

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("react-transition-group");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function o(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t}function i(e,r,t,n){return new(t||(t=Promise))((function(o,i){function c(e){try{u(n.next(e))}catch(e){i(e)}}function d(e){try{u(n.throw(e))}catch(e){i(e)}}function u(e){var r;e.done?o(e.value):(r=e.value,r instanceof t?r:new t((function(e){e(r)}))).then(c,d)}u((n=n.apply(e,r||[])).next())}))}const c=({height:e,isSmooth:t,isExpanded:o,children:i})=>{const c=t?300:0,d={maxHeight:0,overflow:"hidden"},u={entering:{maxHeight:e,overflow:"hidden",transition:`max-height ${c}ms ease-out`},entered:{maxHeight:e,overflow:"visible"},exiting:{maxHeight:0,overflow:"hidden",transition:`max-height ${c}ms ease-out`},exited:{maxHeight:0,overflow:"hidden"}};return n.default.createElement(r.Transition,{in:o,timeout:c,unmountOnExit:!0},(e=>n.default.createElement("div",{style:Object.assign(Object.assign({},d),u[e])},i)))},d=r=>{var{flatTree:t,item:i,id:c,pid:d,index:u,order:l,level:s,itemHeight:a,itemOffset:p,onCollapse:f,onExpand:m,isExpanded:h,droppableRef:g,rect:v,items:x,source:E,target:y,currentOrderState:b,setCurrentOrderState:w,dropOrderState:O,isDragInProgress:I,isDragInProgressState:D,setDragInProgressState:T,handleMove:H,handleEnd:S,disableItemDrop:P}=r,L=o(r,["flatTree","item","id","pid","index","order","level","itemHeight","itemOffset","onCollapse","onExpand","isExpanded","droppableRef","rect","items","source","target","currentOrderState","setCurrentOrderState","dropOrderState","isDragInProgress","isDragInProgressState","setDragInProgressState","handleMove","handleEnd","disableItemDrop"]);const Y=e.useRef(null),R=!(!D||!E.current||E.current.order!==l),j=O===l,F={transform:function(){const e=b.indexOf(l);if(!E.current)return;return E.current.order===l?null:e>l?"translateY(100%)":e<l?"translateY(-100%)":null}(),transition:E.current?E.current.order===l?null:"transform 0.2s ease-in-out":null,pointerEvents:D&&!R?"none":"auto",paddingLeft:s*p+"px",position:R?"sticky":j?"relative":null,zIndex:R?999999:j?1:null,outline:"none"},X={style:{cursor:R?"grabbing":"grab",touchAction:"none"},onMouseDown:N,onTouchStart:N},C={onClick:function(e){"click"===e.type&&e.preventDefault();i.isExpanded?f(c):m(c)},isExpanded:h},$={isDragging:R,isDropping:j};function N(e){if("mousedown"===e.type&&e.preventDefault(),P)return;if("mousedown"===e.type&&0!==e.button)return;const r=g.current.getBoundingClientRect();v.current=Object.assign(Object.assign({},r),{top:r.top+window.scrollY,left:r.left+window.scrollX});const t=void 0!==e.clientX?e.clientX:e.touches[0].clientX,n=void 0!==e.clientY?e.clientY:e.touches[0].clientY,o={x:t+window.scrollX,y:n+window.scrollY};E.current={order:l,mouse:o},y.current={order:l},I.current=!0,T(!0),f(c,!1),"mousedown"===e.type&&(document.addEventListener("mousemove",H),document.addEventListener("mouseup",S)),"touchstart"===e.type&&(document.addEventListener("touchmove",H),document.addEventListener("touchend",S))}return e.useEffect((()=>{const e=x.current,r={top:Y.current.offsetTop,right:Y.current.offsetLeft+Y.current.offsetWidth,bottom:Y.current.offsetTop+Y.current.offsetHeight,left:Y.current.offsetLeft,width:Y.current.offsetWidth,height:Y.current.offsetHeight};return e[l]={ref:Y,id:c,pid:d,index:u,order:l,level:s,children:i.children,isExpanded:i.isExpanded,rect:r},()=>{e.splice(l)}}),[t]),n.default.createElement("div",Object.assign({ref:Y,style:F},L),L.children({provided:{dragHandleProps:X,collapseProps:C},snapshot:$}))};function u(e,r){return r.flatMap((r=>e.items[r].children&&e.items[r].isExpanded?[r,...u(e,e.items[r].children)]:r))}function l(e,r,t=0){const n=e.items[r];return n.children&&n.children.length>0&&!0===n.isExpanded&&(t+=n.children.length,n.children.forEach((r=>{t+=l(e,r)}))),t}const s=r=>{var t,{tree:i,flatTree:u,id:a,pid:p,index:f,level:m,itemHeight:h,itemOffset:g,renderItem:v,onCollapse:x,onExpand:E,draggableProps:y}=r,b=o(r,["tree","flatTree","id","pid","index","level","itemHeight","itemOffset","renderItem","onCollapse","onExpand","draggableProps"]);const w=i.items[a],O=u.indexOf(a),I=e.useRef(null),[D,T]=e.useState(w.isExpanded);return-1===O?null:n.default.createElement("div",Object.assign({},b),n.default.createElement(d,Object.assign({flatTree:u,item:w,id:a,pid:p,index:f,order:O,level:m,itemHeight:h,itemOffset:g,onCollapse:function(e,r=!0){I.current=r,T(!1),setTimeout((()=>x(e)),r?300:0)},onExpand:function(e,r=!0){I.current=r,T(!0),E(e),setTimeout((()=>E(e)),r?300:0)},isExpanded:D,tabIndex:O+1},y),(({provided:e,snapshot:r})=>v({item:w,level:m,order:O,provided:e,snapshot:r}))),(null===(t=w.children)||void 0===t?void 0:t.length)>0&&n.default.createElement(c,{height:l(i,w.id)*h,isSmooth:I.current,isExpanded:D},w.children.map(((e,r)=>n.default.createElement(s,{tree:i,flatTree:u,id:e,pid:a,index:r,level:m+1,itemHeight:h,itemOffset:g,renderItem:v,onCollapse:x,onExpand:E,draggableProps:y,key:e})))))},a=r=>{var{tree:t,flatTree:c,itemHeight:d,itemOffset:u,nestFiles:l,replaceFiles:s,disableItemDrop:a,disableFileDrop:p,onItemDrop:f,onFileDrop:m,onNestError:h}=r,g=o(r,["tree","flatTree","itemHeight","itemOffset","nestFiles","replaceFiles","disableItemDrop","disableFileDrop","onItemDrop","onFileDrop","onNestError"]);const v=e.useRef(null),x=e.useRef(null),E=e.useRef([]),y=e.useRef(null),b=e.useRef(null),w=e.useRef([]),O=e.useRef([]),I=e.useRef(null),D=e.useRef(null),T=e.useRef(!1),H=e.useRef(0),S=e.useRef(null),P=e.useRef(0),[L,Y]=e.useState([]),[R,j]=e.useState(null),[F,X]=e.useState(!1),C=200,$={droppableRef:v,rect:x,items:E,source:y,target:b,currentOrderState:L,setCurrentOrderState:Y,dropOrderState:R,isDragInProgress:T,isDragInProgressState:F,setDragInProgressState:X,handleMove:B,handleEnd:J,disableItemDrop:a},N={placeholder:D};function k(e,r=!0){if("mousemove"!==e.type&&"dragover"!==e.type||e.preventDefault(),!y.current||!T.current)return;if(r&&S.current)return;const t=E.current[y.current.order];if(t){const r=void 0!==e.clientX?e.clientX:e.touches[0].clientX,n=void 0!==e.clientY?e.clientY:e.touches[0].clientY,o=r+window.scrollX-y.current.mouse.x,i=n+window.scrollY-y.current.mouse.y;t.ref.current.style.transform=`translate(${o}px, ${i}px)`}const{order:n,hover:o}=function(e,r,t){const n=t.current[r.current.order],o=void 0!==e.clientX?e.clientX:e.touches[0].clientX,i=void 0!==e.clientY?e.clientY:e.touches[0].clientY;let c=window.scrollX-x.current.left+o,d=window.scrollY-x.current.top+i;n&&(c+=x.current.left+n.rect.left+n.rect.width/2-r.current.mouse.x,d+=x.current.top+n.rect.top+n.rect.height/2-r.current.mouse.y);let u=null,l=null;const s=t.current.filter((e=>e.rect.top<=d&&e.rect.bottom>=d&&e.rect.left<=c&&e.rect.right>=c))[0];s&&(u=s.order,l=d<s.rect.top+s.rect.height/2?"top":"bottom");"dragover"===e.type&&D.current.rect.top<=d&&D.current.rect.bottom>=d&&D.current.rect.left<=c&&D.current.rect.right>=c&&(u=D.current.order,l=d<D.current.rect.top+D.current.rect.height/2?"top":"bottom");return{order:u,hover:l}}(e,y,E);n===b.current.order&&o===b.current.hover||(b.current={order:n,hover:o},void 0!==b.current&&(O.current=function(e){var r,t,n,o;const i=E.current[O.current[b.current.order]];if(i&&i.order!==y.current.order&&y.current.order<=b.current.order&&b.current.order>=O.current[b.current.order]&&"top"===b.current.hover&&(i.children&&!i.isExpanded||0===(null===(r=i.children)||void 0===r?void 0:r.length)||s&&"dragover"===e.type&&!0!==i.isExpanded))return I.current=i.order,j(I.current),O.current;if(i&&i.order!==y.current.order&&y.current.order<=b.current.order&&b.current.order<O.current[b.current.order]&&"bottom"===b.current.hover&&(i.children&&!i.isExpanded||0===(null===(t=i.children)||void 0===t?void 0:t.length)||s&&"dragover"===e.type&&!0!==i.isExpanded))return I.current=i.order,j(I.current),O.current;if(i&&i.order!==y.current.order&&y.current.order>=b.current.order&&b.current.order<=O.current[b.current.order]&&"bottom"===b.current.hover&&(i.children&&!i.isExpanded||0===(null===(n=i.children)||void 0===n?void 0:n.length)||s&&"dragover"===e.type&&!0!==i.isExpanded))return I.current=i.order,j(I.current),O.current;if(i&&i.order!==y.current.order&&y.current.order>=b.current.order&&b.current.order>O.current[b.current.order]&&"top"===b.current.hover&&(i.children&&!i.isExpanded||0===(null===(o=i.children)||void 0===o?void 0:o.length)||s&&"dragover"===e.type&&!0!==i.isExpanded))return I.current=i.order,j(I.current),O.current;I.current=null,j(I.current);const c=[...w.current],d=c.indexOf(y.current.order),u=null===b.current.order?c.length:c.indexOf(b.current.order);return c.splice(u,0,c.splice(d,1)[0]),c}(e),Y(O.current)))}function M(e){if(e.preventDefault(),p)return;if(y.current)return;const r=v.current.getBoundingClientRect();x.current=Object.assign(Object.assign({},r),{top:r.top+window.scrollY,left:r.left+window.scrollX}),y.current={order:D.current.order},b.current={order:D.current.order},T.current=!0,X(!0),document.addEventListener("dragenter",W),document.addEventListener("dragleave",q),document.addEventListener("dragover",B),document.addEventListener("drop",J)}function B(e){x.current&&(!function(e){if("mousemove"!==e.type&&"dragover"!==e.type||e.preventDefault(),!y.current||!T.current)return;const r=void 0!==e.clientY?e.clientY:e.touches[0].clientY;if(H.current===r)return;const t=H.current-r>0?"top":"bottom";if("top"===t&&window.scrollY<=0)return void A();if("bottom"===t&&window.scrollY+window.innerHeight>=document.body.offsetHeight)return void A();const n=Math.max(.1*window.innerHeight,d),o=r<n,i=window.innerHeight-r<n;S.current&&A(),"top"===t&&o&&(S.current=setInterval((()=>z(e,1,t)),4)),"bottom"===t&&i&&(S.current=setInterval((()=>z(e,1,t)),4)),H.current=r}(e),k(e))}function J(e){return i(this,void 0,void 0,(function*(){if("mouseup"!==e.type&&"drop"!==e.type&&"dragleave"!==e.type||e.preventDefault(),!x.current)return;if(!y.current||!b.current)return;if(S.current&&(clearInterval(S.current),S.current=null),T.current=!1,null===b.current.order)return void G(e);const r=void 0!==e.clientX?e.clientX:e.changedTouches[0].clientX,n="drop"===e.type?D.current:E.current[y.current.order],o="drop"===e.type&&b.current.order===D.current.order&&null===I.current?D.current:null!==I.current?E.current[I.current]:E.current[b.current.order],i=o.pid?E.current.filter((e=>e.id===o.pid))[0]:null,c=E.current[O.current.indexOf(y.current.order)-1],a=i?x.current.left+i.rect.left+i.level*u:null,p=c?x.current.left+c.rect.left+c.level*u:null,g="drop"===e.type?r:r-(y.current.mouse.x-x.current.left-n.rect.left-n.level*u),v=n.pid,w=n.index;let H=o.pid,P=o.index;if(null===I.current||!o.children||o.isExpanded&&0!==o.children.length||(H=o.id,P=0),n.order<o.order&&n.pid!==o.pid&&null===I.current&&(P=o.index+1),n.order<o.order&&o.children&&o.isExpanded&&(H=o.id,P=0),i&&n.order<=o.order&&o.index===i.children.length-1&&n.pid!==i.pid&&a>g&&(H=i.pid,P=i.index+1),i&&n.order<=o.order&&o.index===i.children.length-1&&n.pid===i.pid&&a>g&&(H=i.pid,P=i.index),c&&c.id!==o.pid&&n.order>=o.order&&c.level!==o.level&&g>p&&(H=c.pid,P=c.index+1),l&&H===t.rootId&&!n.children)return h(),void G(e);if("drop"!==e.type){const e=n.level,r=((E.current.filter((e=>e.id===H))[0]?E.current.filter((e=>e.id===H))[0].level+1:0)-e)*u,t=E.current[b.current.order].rect.top-n.rect.top,o=null!==I.current||(r+t)/2>(d+u)/2?C:100;n.ref.current.style.transition=`transform ${o}ms ease-out, opacity ${o}ms ease-out`,null===I.current&&(n.ref.current.style.transform=`translate(${r}px, ${t}px)`),null!==I.current&&(n.ref.current.style.transform=`translate(${r}px, ${t}px) scale(0.5)`,n.ref.current.style.opacity="0"),yield new Promise((e=>setTimeout(e,o))),n.ref.current.style.transition=null,n.ref.current.style.transform=null}"drop"!==e.type&&f({pid:v,index:w},{pid:H,index:P}),"drop"===e.type&&m(e.dataTransfer,{pid:H,index:P,replace:s&&o.order===I.current}),_(),K(e)}))}function W(){P.current+=1}function q(e){P.current-=1,P.current<0&&(b.current.order=null,J(e))}function _(){y.current=null,b.current=null,x.current=null,I.current=null,j(I.current),T.current=!1,X(!1),P.current=0}function z(e,r,t){"top"===t&&window.scrollY<=0||"bottom"===t&&window.scrollY+window.innerHeight>=document.body.offsetHeight?A():(window.scrollBy(0,r*("top"===t?-1:1)),k(e,!1))}function A(){S.current&&(clearInterval(S.current),S.current=null)}function G(e){return i(this,void 0,void 0,(function*(){const r=E.current[y.current.order];r&&(r.ref.current.style.transition="transform 200ms ease-out",r.ref.current.style.transform="translate(0, 0)"),O.current=w.current,Y(O.current),yield new Promise((e=>setTimeout(e,C))),r&&(r.ref.current.style.transition=null,r.ref.current.style.transform=null),_(),K(e)}))}function K(e){"mouseup"===e.type&&(document.removeEventListener("mousemove",B),document.removeEventListener("mouseup",J)),"touchend"===e.type&&(document.removeEventListener("touchmove",B),document.removeEventListener("touchend",J)),"drop"!==e.type&&"dragleave"!==e.type||(document.removeEventListener("dragenter",W),document.removeEventListener("dragleave",q),document.removeEventListener("dragover",B),document.removeEventListener("drop",J))}return e.useEffect((()=>{w.current=Object.keys(c).map((e=>parseInt(e))),w.current.push(w.current.length),O.current=w.current,Y(w.current)}),[c]),e.useEffect((()=>(document.addEventListener("dragenter",M),()=>{document.removeEventListener("dragenter",M)})),[c]),n.default.createElement("div",{ref:v,style:{position:"relative"}},g.children({provided:{draggableProps:$,placeholderProps:N}}))},p=({tree:r,flatTree:t,itemHeight:o,placeholder:i})=>{const c=e.useRef(null),d={height:o};return e.useEffect((()=>{const e={top:c.current.offsetTop,right:c.current.offsetLeft+c.current.offsetWidth,bottom:c.current.offsetTop+c.current.offsetHeight,left:c.current.offsetLeft,width:c.current.offsetWidth,height:c.current.offsetHeight};return i.current={ref:c,pid:r.rootId,index:r.items[r.rootId].children.length,order:t.length,level:0,rect:e},()=>i.current=null}),[t]),n.default.createElement("div",{ref:c,style:d})};exports.Tree=({tree:e,itemHeight:r,itemOffset:t=16,renderItem:o,nestFiles:i=!1,replaceFiles:c=!1,disableItemDrop:d=!1,disableFileDrop:l=!1,onItemDrop:f,onFileDrop:m=(()=>{}),onCollapse:h=(()=>{}),onExpand:g=(()=>{}),onNestError:v=(()=>{})})=>{const x=e.items[e.rootId],E=u(e,x.children);return n.default.createElement(a,{tree:e,flatTree:E,itemHeight:r,itemOffset:t,nestFiles:i,replaceFiles:c,disableItemDrop:d,disableFileDrop:l,onItemDrop:f,onFileDrop:m,onNestError:v},(({provided:i})=>n.default.createElement(n.default.Fragment,null,x.children.map(((c,d)=>n.default.createElement(s,{tree:e,flatTree:E,id:c,pid:e.rootId,index:d,level:0,itemHeight:r,itemOffset:t,renderItem:o,onCollapse:h,onExpand:g,draggableProps:i.draggableProps,key:c}))),n.default.createElement(p,Object.assign({tree:e,flatTree:E,itemHeight:r},i.placeholderProps)))))},exports.TreeBlock=s,exports.TreeDraggable=d,exports.TreeDroppable=a,exports.TreePlaceholder=p,exports.collapseTreeItem=function(e,r){const t=Object.assign({},e);return t.items[r].isExpanded=!1,t},exports.expandTreeItem=function(e,r){const t=Object.assign({},e);return t.items[r].isExpanded=!0,t},exports.flattenTree=u,exports.getChildrenCount=l,exports.updateTreeFiles=function(e,r,t){if(!0===t.replace&&r.length>1)return e;const n=JSON.parse(JSON.stringify(e)),o=t.pid?n.items[t.pid].children:n.children;return r.forEach((e=>n.items[e.id]=e)),r.reverse().forEach((e=>t.replace?o.splice(t.index,1,e.id):o.splice(t.index,0,e.id))),n},exports.updateTreeItems=function(e,r,t){const n=JSON.parse(JSON.stringify(e)),o=r.pid?n.items[r.pid].children:n.children;return(t.pid?n.items[t.pid].children:n.children).splice(t.index,0,o.splice(r.index,1)[0]),n};
//# sourceMappingURL=index.js.map