@snapdrag/react/dist/index.js

React hooks for Snapdrag drag and drop library

import {createDraggable,DRAGGABLE_ATTRIBUTE,createDroppable,DROPPABLE_FORCE_ATTRIBUTE}from'@snapdrag/core';import R,{useRef,useEffect,useState,useMemo,useCallback}from'react';import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {createPortal}from'react-dom';var T=()=>{},v=T,D=T,y="$snapdrag-overlay";function k({style:r={},className:f=""}){let l=useRef(null),s=useRef(null);useEffect(()=>(v=u=>{let i=l.current;if(!i)return;i.style.display=u?"block":"none";let m=s.current;m&&(u?m.setAttribute(DROPPABLE_FORCE_ATTRIBUTE,"false"):m.removeAttribute(DROPPABLE_FORCE_ATTRIBUTE));},D=u=>{let{current:i}=s;i&&(i.style.transform=`translateX(${u.left}px) translateY(${u.top}px)`);},()=>{D=T,v=T;}),[]);let p={position:"relative",transform:"translateX(0px) translateY(0px)",willChange:"transform"},a={position:"fixed",top:0,bottom:0,left:0,right:0,display:"none",...r};return jsx("div",{ref:l,style:a,className:f,children:jsx("div",{id:y,ref:s,style:p})})}function E(r){let f=[];return r.forEach((l,s)=>{f.push({data:l.data,element:s});}),f}var X=R.forwardRef(({dragComponent:r,placeholderComponent:f},l)=>{let s=R.cloneElement(r,{ref:l});return jsxs(Fragment,{children:[f,createPortal(s,document.getElementById(y))]})});function w(r){let[f,l]=useState(false),[s,p]=useState(null),a=useRef({dragElementSnapshot:null,dragElement:null,element:null,elementOffset:{top:0,left:0},originalRef:null,isDragging:false,config:r,data:null,draggableByDefault:true});a.current.config=r;let u=e=>!!r.shouldDrag?.({event:e.event,dragStartEvent:e.dragStartEvent,element:e.dragElement,data:e.data}),i={disabled:r.disabled,kind:r.kind,data:r.data,shouldDrag:r.shouldDrag&&u,onDragStart(e){let n=a.current,{top:o,left:g}=n.element.getBoundingClientRect(),d;n.config.offset?typeof n.config.offset=="function"?d=n.config.offset({element:n.element,dragStartEvent:e.dragStartEvent,data:e.data}):d=n.config.offset:d={top:o-e.dragStartEvent.clientY,left:g-e.dragStartEvent.clientX},n.elementOffset=d,n.isDragging=true,n.data=e.data,v(true),D({top:o,left:g}),l(true),p(e.data),r.onDragStart?.({element:e.dragElement,event:e.dragStartEvent,dragStartEvent:e.dragStartEvent,data:e.data});},onDragMove(e){let{elementOffset:n}=a.current,o=n.top+e.event.clientY,g=n.left+e.event.clientX;if(r.mapCoords){let S=r.mapCoords({top:o,left:g,event:e.event,dragStartEvent:e.dragStartEvent,element:a.current.dragElement,data:e.data});o=S.top,g=S.left;}D({top:o,left:g});let d=E(e.dropTargets);r.onDragMove?.({event:e.event,dragStartEvent:e.dragStartEvent,element:a.current.dragElement,top:o,left:g,dropTargets:d,data:e.data});},onDragEnd(e){let n=a.current,o=n.elementOffset.top+e.event.clientY,g=n.elementOffset.left+e.event.clientX;n.dragElementSnapshot=null,n.isDragging=false,n.elementOffset={top:0,left:0},v(false),l(false),p(null),D({top:0,left:0});let d=E(e.dropTargets);r.onDragEnd?.({top:o,left:g,event:e.event,dragStartEvent:e.dragStartEvent,element:a.current.dragElement,data:e.data,dropTargets:d});},pointerConfig:r.pointerConfig,plugins:r.plugins},m=useMemo(()=>createDraggable(i),[]);m.setConfig(i);let t=useCallback(e=>{let n=a.current;e&&(n.element=e,m.listen(e),a.current.draggableByDefault||e.setAttribute(DRAGGABLE_ATTRIBUTE,"false"));let o=n.originalRef;typeof o=="function"?o(e):o&&o.hasOwnProperty("current")&&(o.current=e);},[m]),c=useCallback(e=>{e&&(m.listen(e),a.current.draggableByDefault||e.setAttribute(DRAGGABLE_ATTRIBUTE,"false")),a.current.dragElement=e;},[m]),L=useCallback(e=>{if(!e)return null;let n=a.current;n.originalRef=e.props?.ref??e.ref;let o=R.cloneElement(e,{ref:t});if(n.dragElementSnapshot||(n.dragElementSnapshot=o),n.isDragging){let g=n.config.component?.({data:n.data,props:e.props})??e;g=R.cloneElement(g,{ref:c});let d=n.dragElementSnapshot;return n.config.placeholder&&(d=n.config.placeholder?.({data:n.data,props:e.props})??null),n.config.move&&(d=null),jsx(X,{dragComponent:g,placeholderComponent:d})}return o},[t,c]),P=useCallback(e=>{e&&e.setAttribute(DRAGGABLE_ATTRIBUTE,"true");},[]),x=useCallback(e=>e?(a.current.draggableByDefault=false,R.cloneElement(e,{ref:P})):null,[]);return {draggable:L,dragHandle:x,isDragging:f,data:s}}function z(r){let[f,l]=useState(null),{accepts:s}=r,p={disabled:r.disabled,accepts:s,data:r.data,onDragIn(t){l({kind:t.sourceType,data:t.sourceData,element:t.dragElement,dropElement:t.dropElement}),r.onDragIn?.({kind:t.sourceType,data:t.sourceData,event:t.event,element:t.dragElement,dropElement:t.dropElement,dropTargets:E(t.dropTargets)});},onDragOut(t){l(null),r.onDragOut?.({kind:t.sourceType,data:t.sourceData,event:t.event,element:t.dragElement,dropElement:t.dropElement,dropTargets:E(t.dropTargets)});},onDragMove(t){r.onDragMove?.({kind:t.sourceType,data:t.sourceData,event:t.event,element:t.dragElement,dropElement:t.dropElement,dropTargets:E(t.dropTargets)});},onDrop(t){l(null),r.onDrop?.({kind:t.sourceType,data:t.sourceData,event:t.event,element:t.dragElement,dropElement:t.dropElement,dropTargets:E(t.dropTargets)});}},a=useMemo(()=>createDroppable(p),[]);a.setConfig(p);let u=useRef(null),i=useCallback(t=>{t&&a.listen(t);let c=u.current;typeof c=="function"?c(t):c&&c.hasOwnProperty("current")&&(c.current=t);},[]);return {droppable:useCallback(t=>t?(u.current=t.props?.ref??t.ref,R.cloneElement(t,{ref:i})):null,[]),hovered:f}}export{k as Overlay,w as useDraggable,z as useDroppable};//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map