@react-querybuilder/dnd
Version:
Drag-and-drop-enabled version of react-querybuilder (DnD-library-agnostic)
2 lines • 8.16 kB
JavaScript
import{a as e,i as t,n,o as r,r as i,s as a,t as o}from"./dndLogic-DR8uS_bm.mjs";import{n as s,r as c}from"./shadowQuery-Z2qhxCGM.mjs";import*as l from"react";import{createContext as u,useCallback as d,useContext as f,useEffect as p,useMemo as m,useRef as h,useState as g}from"react";const _=(e,t)=>{let n=e.getBoundingClientRect(),r=n.height/4;return t<n.top+r?`upper`:t>n.bottom-r?`lower`:null},v=u({activeDragItem:null,timerCopyMode:!1,timerGroupMode:!1}),y=(e,t,n)=>`drag-${e}-${n}-${t.join(`_`)}`,b=(e,t,n)=>`drop-${e}-${n}-${t.join(`_`)}`,x=u=>{let{draggable:x,dropTargetForElements:S,monitorForElements:C,combine:w}=u;return{DndProvider:({children:t,updateWhileDragging:n,copyModeAfterHoverMs:i,groupModeAfterHoverMs:o})=>{let[u,f]=g(null),y=h(null),b=h(null),[x,S]=g(!1),[w,T]=g(!1),E=h(!1),D=h(!1),O=h(null),k=h(null),A=h(null),j=d(()=>{O.current!==null&&(clearTimeout(O.current),O.current=null),k.current!==null&&(clearTimeout(k.current),k.current=null),E.current=!1,D.current=!1,S(!1),T(!1),A.current=null},[]),M=d(e=>{A.current!==e&&(j(),A.current=e,i&&i>0&&(O.current=setTimeout(()=>{E.current=!0,S(!0),O.current=null},i)),o&&o>0&&(k.current=setTimeout(()=>{D.current=!0,T(!0),k.current=null},o)))},[j,i,o]),[N,P]=g(null),F=h(null),I=h(void 0),L=h(null),R=d((e,t,r)=>{let i=F.current;if(!i||!n)return;let o=L.current;if(o&&o.quadrant===r&&o.targetType===t&&o.targetPath.length===e.length&&o.targetPath.every((t,n)=>t===e[n]))return;L.current={targetPath:e,targetType:t,quadrant:r};let c=E.current||a(i.dropEffect===`copy`?`alt`:``)?`copy`:`move`,l=D.current||a(`ctrl`),u=s({originalQuery:i.originalQuery,draggedItem:y.current,draggedPath:i.draggedPath,targetPath:e,targetType:t,quadrant:r,dropEffect:c,groupItems:l});if(u){let e={...i,shadowQuery:u.shadowQuery,previewPath:u.previewPath,dropEffect:c,groupItems:l};F.current=e,P(e),I.current?.({draggedItem:y.current,shadowQuery:u.shadowQuery,originalQuery:i.originalQuery,previewPath:u.previewPath})}},[n]),z=d(()=>{let e=F.current;if(!e)return;let t=b.current;t&&e.shadowQuery!==e.originalQuery&&t.dispatchQuery(e.shadowQuery),b.current=null,F.current=null,L.current=null,P(null)},[]),B=d(()=>{b.current=null,F.current=null,L.current=null,P(null)},[]);p(()=>{let t=C({onDragStart({source:t}){let r=t.data;if(r.__rqbPath&&r.__rqbSchema){let t=e(r.__rqbPath,r.__rqbSchema);if(y.current=t,f(t),n){let e=r.__rqbSchema;b.current=e;let t=e.getQuery(),n={shadowQuery:t,originalQuery:t,draggedPath:r.__rqbPath,previewPath:r.__rqbPath,dropEffect:`move`,groupItems:!1,qbId:e.qbId};F.current=n,P(n)}}},onDrag({location:e}){let t=e.current.dropTargets;if(t.length>0){let e=t[0],n=e.data.__rqbType,r=e.data.__rqbPath;n&&r&&M(`${n}-${r.join(`_`)}`)}else j();if(!n||!F.current||t.length===0)return;let r=t[0],i=r.data.__rqbType,a=r.data.__rqbPath;if(!i||!a)return;let o=i===`ruleGroup`?`upper`:_(r.element,e.current.input.clientY);if(!o)return;let s=y.current;if(!s)return;let c=r.data.__rqbValidate;c&&!c(s)||R(a,i,o)},onDrop({source:e,location:t}){let i=y.current,a=e.data,o=t.current.dropTargets,s=E.current,c=D.current;if(j(),n&&F.current)o.length>0?z():B();else if(i&&o.length>0){let e=o[0].data,t=e.__rqbValidate;if(t?.(i)){let t=e.__rqbGetDropResult,n=t?.();r({item:i,dropResult:n,schema:a.__rqbSchema,actions:a.__rqbActions,copyModeModifierKey:a.__rqbCopyModeModifierKey,groupModeModifierKey:a.__rqbGroupModeModifierKey,copyModeOverride:s,groupModeOverride:c,onRuleDrop:a.__rqbOnRuleDrop})}}y.current=null,f(null)}});return()=>{t(),j()}},[n,z,B,R,M,j]);let V=m(()=>({activeDragItem:u,timerCopyMode:x,timerGroupMode:w}),[u,x,w]),H=m(()=>({dragPreviewState:N,updatePreviewPosition:R,commitDrag:z,cancelDrag:B}),[N,R,z,B]);return l.createElement(v.Provider,{value:V},l.createElement(c.Provider,{value:H},t))},useRuleDnD:e=>{let{activeDragItem:t,timerCopyMode:n,timerGroupMode:r}=f(v),s=h(null),c=h(null),[l,u]=g(!1),[m,_]=g(!1),C=y(`rule`,e.path,e.schema.qbId),T=b(`rule`,e.path,e.schema.qbId),E=h(e);E.current=e,p(()=>{let e=s.current,t=c.current;if(!(!e||!t))return w(x({element:e,dragHandle:t,canDrag:()=>!E.current.disabled,getInitialData:()=>({__rqbPath:E.current.path,__rqbSchema:E.current.schema,__rqbActions:E.current.actions,__rqbCopyModeModifierKey:E.current.copyModeModifierKey,__rqbGroupModeModifierKey:E.current.groupModeModifierKey,__rqbOnRuleDrop:E.current.onRuleDrop}),onDragStart:()=>u(!0),onDrop:()=>u(!1)}),S({element:e,getData:()=>({__rqbType:`rule`,__rqbPath:E.current.path,__rqbValidate:e=>{let t=E.current;return i({dragging:e,path:t.path,schema:t.schema,canDrop:t.canDrop,groupModeModifierKey:t.groupModeModifierKey,disabled:t.disabled,rule:t.rule})},__rqbGetDropResult:()=>{let e=E.current;return o({type:`rule`,path:e.path,schema:e.schema,copyModeModifierKey:e.copyModeModifierKey,groupModeModifierKey:e.groupModeModifierKey})}}),onDragEnter:()=>_(!0),onDragLeave:()=>_(!1),onDrop:()=>_(!1)}))},[e.path,e.schema.qbId,e.disabled]);let D=m&&!!t&&i({dragging:t,path:e.path,schema:e.schema,canDrop:e.canDrop,groupModeModifierKey:e.groupModeModifierKey,disabled:e.disabled,rule:e.rule}),O=m&&D,k=m&&!D;return{isDragging:l,dragMonitorId:C,isOver:O,dropMonitorId:T,dndRef:d(e=>{s.current=e},[]),dragRef:d(e=>{c.current=e},[]),dropEffect:n||a(e.copyModeModifierKey)?`copy`:`move`,groupItems:r||a(e.groupModeModifierKey),dropNotAllowed:k}},useRuleGroupDnD:e=>{let{activeDragItem:n,timerCopyMode:r,timerGroupMode:i}=f(v),s=h(null),c=h(null),l=h(null),[u,m]=g(!1),[_,C]=g(!1),w=e.disabled||e.path.length===0,T=y(`ruleGroup`,e.path,e.schema.qbId),E=b(`ruleGroup`,e.path,e.schema.qbId),D=h(e);D.current=e,p(()=>{let e=s.current,t=c.current;if(!(!e||!t||w))return x({element:e,dragHandle:t,canDrag:()=>!D.current.disabled&&D.current.path.length>0,getInitialData:()=>({__rqbPath:D.current.path,__rqbSchema:D.current.schema,__rqbActions:D.current.actions,__rqbCopyModeModifierKey:D.current.copyModeModifierKey,__rqbGroupModeModifierKey:D.current.groupModeModifierKey,__rqbOnRuleDrop:D.current.onRuleDrop}),onDragStart:()=>m(!0),onDrop:()=>m(!1)})},[w,e.path,e.schema.qbId]),p(()=>{let e=l.current;if(e)return S({element:e,getData:()=>({__rqbType:`ruleGroup`,__rqbPath:D.current.path,__rqbValidate:e=>{let n=D.current;return t({dragging:e,path:n.path,schema:n.schema,canDrop:n.canDrop,disabled:n.disabled,ruleGroup:n.ruleGroup})},__rqbGetDropResult:()=>{let e=D.current;return o({type:`ruleGroup`,path:e.path,schema:e.schema,copyModeModifierKey:e.copyModeModifierKey,groupModeModifierKey:e.groupModeModifierKey})}}),onDragEnter:()=>C(!0),onDragLeave:()=>C(!1),onDrop:()=>C(!1)})},[e.path,e.schema.qbId,e.disabled]);let O=_&&!!n&&t({dragging:n,path:e.path,schema:e.schema,canDrop:e.canDrop,disabled:e.disabled,ruleGroup:e.ruleGroup}),k=_&&O,A=_&&!O,j=d(e=>{s.current=e},[]),M=d(e=>{l.current=e},[]);return{isDragging:u,dragMonitorId:T,isOver:k,dropMonitorId:E,previewRef:j,dragRef:d(e=>{c.current=e},[]),dropRef:M,dropEffect:r||a(e.copyModeModifierKey)?`copy`:`move`,groupItems:i||a(e.groupModeModifierKey),dropNotAllowed:A}},useInlineCombinatorDnD:e=>{let{activeDragItem:t,timerCopyMode:r}=f(v),{dragPreviewState:i}=f(c),s=h(null),[l,u]=g(!1),m=b(`inlineCombinator`,e.path,e.schema.qbId),_=i!==null,y=(e.rules??[])[e.path.at(-1)-1],x=h(e);x.current=e,p(()=>{let e=s.current;if(!(!e||_))return S({element:e,getData:()=>({__rqbType:`inlineCombinator`,__rqbValidate:e=>{let t=x.current,r=(t.rules??[])[t.path.at(-1)-1];return n({dragging:e,path:t.path,schema:t.schema,canDrop:t.canDrop,groupModeModifierKey:t.groupModeModifierKey,hoveringItem:r})},__rqbGetDropResult:()=>{let e=x.current;return o({type:`inlineCombinator`,path:e.path,schema:e.schema,copyModeModifierKey:e.copyModeModifierKey,groupModeModifierKey:e.groupModeModifierKey})}}),onDragEnter:()=>u(!0),onDragLeave:()=>u(!1),onDrop:()=>u(!1)})},[e.path,e.schema.qbId,_]);let C=!_&&l&&!!t&&n({dragging:t,path:e.path,schema:e.schema,canDrop:e.canDrop,groupModeModifierKey:e.groupModeModifierKey,hoveringItem:y}),w=l&&C,T=!_&&l&&!C;return{dropRef:d(e=>{s.current=e},[]),dropMonitorId:m,isOver:w,dropEffect:r||a(e.copyModeModifierKey)?`copy`:`move`,dropNotAllowed:T}}}};export{_ as n,x as t};
//# sourceMappingURL=pragmatic-dnd-Bp-MQRoE.mjs.map