UNPKG

@react-querybuilder/dnd

Version:

Drag-and-drop-enabled version of react-querybuilder (DnD-library-agnostic)

2 lines 7.72 kB
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 _=u({activeDragItem:null,timerCopyMode:!1,timerGroupMode:!1}),v=(e,t,n)=>`drag-${e}-${n}-${t.join(`_`)}`,y=(e,t,n)=>`drop-${e}-${n}-${t.join(`_`)}`,b=(e,t)=>{p(()=>{let n=e.current;if(!n||!t)return;let r=[];for(let[e,i]of Object.entries(t)){let t=e.slice(2).toLowerCase(),a=e=>(e.nativeEvent=e,i(e));n.addEventListener(t,a),r.push([t,a])}return()=>{for(let[e,t]of r)n.removeEventListener(e,t)}},[e,t])},x=u=>{let{DndContext:x,useDraggable:S,useDroppable:C,PointerSensor:w,KeyboardSensor:T,useSensor:E,useSensors:D}=u;return{DndProvider:({children:t,updateWhileDragging:n,copyModeAfterHoverMs:i,groupModeAfterHoverMs:o})=>{let[u,f]=g(null),p=h(null),v=h(null),[y,b]=g(!1),[S,C]=g(!1),O=h(!1),k=h(!1),A=h(null),j=h(null),M=h(null),N=d(()=>{A.current!==null&&(clearTimeout(A.current),A.current=null),j.current!==null&&(clearTimeout(j.current),j.current=null),O.current=!1,k.current=!1,b(!1),C(!1),M.current=null},[]),P=d(e=>{M.current!==e&&(N(),M.current=e,i&&i>0&&(A.current=setTimeout(()=>{O.current=!0,b(!0),A.current=null},i)),o&&o>0&&(j.current=setTimeout(()=>{k.current=!0,C(!0),j.current=null},o)))},[N,i,o]),[F,I]=g(null),L=h(null),R=h(void 0),z=h(null),B=d((e,t,r)=>{let i=L.current;if(!i||!n)return;let o=z.current;if(o&&o.quadrant===r&&o.targetType===t&&o.targetPath.length===e.length&&o.targetPath.every((t,n)=>t===e[n]))return;z.current={targetPath:e,targetType:t,quadrant:r};let c=O.current||a(i.dropEffect===`copy`?`alt`:``)?`copy`:`move`,l=k.current||a(`ctrl`),u=s({originalQuery:i.originalQuery,draggedItem:p.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};L.current=e,I(e),R.current?.({draggedItem:p.current,shadowQuery:u.shadowQuery,originalQuery:i.originalQuery,previewPath:u.previewPath})}},[n]),V=d(()=>{let e=L.current;if(!e)return;let t=v.current;t&&e.shadowQuery!==e.originalQuery&&t.dispatchQuery(e.shadowQuery),v.current=null,L.current=null,z.current=null,I(null)},[]),H=d(()=>{v.current=null,L.current=null,z.current=null,I(null)},[]),U=D(E(w,{activationConstraint:{distance:5}}),E(T)),W=d(t=>{let r=t.active?.data?.current;if(r?.path&&r?.schema){let t=e(r.path,r.schema);if(p.current=t,f(t),n){v.current=r.schema;let e=r.schema.getQuery(),t={shadowQuery:e,originalQuery:e,draggedPath:r.path,previewPath:r.path,dropEffect:`move`,groupItems:!1,qbId:r.schema.qbId};L.current=t,I(t)}}},[n]),G=d(e=>{let{over:t}=e;if(t){let e=t.data?.current,n=e?.type,r=e?.path;n&&r&&P(`${n}-${r.join(`_`)}`)}else N();if(!n||!L.current||!t)return;let{activatorEvent:r,delta:i}=e,a=t.data?.current,o=a?.type,s=a?.path;if(!o||!s)return;let c=(r?.clientY??0)+(i?.y??0),l;if(o===`ruleGroup`)l=`upper`;else{let e=t.rect;if(e){let t=e.height??e.bottom-e.top,n=t/4,r=e.top??e.offsetTop??0,i=r+t;l=c<r+n?`upper`:c>i-n?`lower`:null}else l=null}if(!l)return;let u=p.current;if(!u)return;let d=a?.validate;d&&!d(u)||B(s,o,l)},[n,B,P,N]),K=d(e=>{let t=p.current,{over:i,active:a}=e,o=O.current,s=k.current;if(N(),n&&L.current)i?V():H();else if(i&&t){let e=a?.data?.current,n=i?.data?.current;e&&n?.validate?.(t)&&r({item:t,dropResult:n.getDropResult(),schema:e.schema,actions:e.actions,copyModeModifierKey:e.copyModeModifierKey,groupModeModifierKey:e.groupModeModifierKey,copyModeOverride:o,groupModeOverride:s,onRuleDrop:e.onRuleDrop})}p.current=null,f(null)},[n,V,H,N]),q=d(()=>{N(),n&&L.current&&H(),p.current=null,f(null)},[n,H,N]),J=m(()=>({activeDragItem:u,timerCopyMode:y,timerGroupMode:S}),[u,y,S]),Y=m(()=>({dragPreviewState:F,updatePreviewPosition:B,commitDrag:V,cancelDrag:H}),[F,B,V,H]);return l.createElement(x,{sensors:U,onDragStart:W,onDragEnd:K,onDragOver:G,onDragCancel:q},l.createElement(_.Provider,{value:J},l.createElement(c.Provider,{value:Y},t)))},useRuleDnD:e=>{let{activeDragItem:t,timerCopyMode:n,timerGroupMode:r}=f(_),s=h(null),c=h(null),l=v(`rule`,e.path,e.schema.qbId),u=y(`rule`,e.path,e.schema.qbId),{setNodeRef:m,setActivatorNodeRef:g,isDragging:x,listeners:w,attributes:T}=S({id:l,disabled:e.disabled,data:{path:e.path,schema:e.schema,actions:e.actions,copyModeModifierKey:e.copyModeModifierKey,groupModeModifierKey:e.groupModeModifierKey,onRuleDrop:e.onRuleDrop}}),{setNodeRef:E,isOver:D}=C({id:u,data:{type:`rule`,path:e.path,schema:e.schema,validate:t=>i({dragging:t,path:e.path,schema:e.schema,canDrop:e.canDrop,groupModeModifierKey:e.groupModeModifierKey,disabled:e.disabled,rule:e.rule}),getDropResult:()=>o({type:`rule`,path:e.path,schema:e.schema,copyModeModifierKey:e.copyModeModifierKey,groupModeModifierKey:e.groupModeModifierKey})}}),O=D&&!!t&&i({dragging:t,path:e.path,schema:e.schema,canDrop:e.canDrop,groupModeModifierKey:e.groupModeModifierKey,disabled:e.disabled,rule:e.rule}),k=D&&O,A=D&&!O,j=d(e=>{c.current=e,m(e),E(e)},[m,E]),M=d(e=>{s.current=e,g(e)},[g]);return p(()=>{let e=s.current;if(!(!e||!T))for(let[t,n]of Object.entries(T))n!=null&&e.setAttribute(t===`tabIndex`?`tabindex`:t,String(n))},[T]),b(s,w),{isDragging:x,dragMonitorId:l,isOver:k,dropMonitorId:u,dndRef:j,dragRef:M,dropEffect:n||a(e.copyModeModifierKey)?`copy`:`move`,groupItems:r||a(e.groupModeModifierKey),dropNotAllowed:A}},useRuleGroupDnD:e=>{let{activeDragItem:n,timerCopyMode:r,timerGroupMode:i}=f(_),s=h(null),c=v(`ruleGroup`,e.path,e.schema.qbId),l=y(`ruleGroup`,e.path,e.schema.qbId),u=e.disabled||e.path.length===0,{setNodeRef:m,setActivatorNodeRef:g,isDragging:x,listeners:w,attributes:T}=S({id:c,disabled:u,data:{path:e.path,schema:e.schema,actions:e.actions,copyModeModifierKey:e.copyModeModifierKey,groupModeModifierKey:e.groupModeModifierKey,onRuleDrop:e.onRuleDrop}}),{setNodeRef:E,isOver:D}=C({id:l,data:{type:`ruleGroup`,path:e.path,schema:e.schema,validate:n=>t({dragging:n,path:e.path,schema:e.schema,canDrop:e.canDrop,disabled:e.disabled,ruleGroup:e.ruleGroup}),getDropResult:()=>o({type:`ruleGroup`,path:e.path,schema:e.schema,copyModeModifierKey:e.copyModeModifierKey,groupModeModifierKey:e.groupModeModifierKey})}}),O=D&&!!n&&t({dragging:n,path:e.path,schema:e.schema,canDrop:e.canDrop,disabled:e.disabled,ruleGroup:e.ruleGroup}),k=D&&O,A=D&&!O,j=d(e=>{m(e)},[m]),M=d(e=>{E(e)},[E]),N=d(e=>{s.current=e,g(e)},[g]);return p(()=>{let e=s.current;if(!(!e||!T||u))for(let[t,n]of Object.entries(T))n!=null&&e.setAttribute(t===`tabIndex`?`tabindex`:t,String(n))},[T,u]),b(s,w),{isDragging:x,dragMonitorId:c,isOver:k,dropMonitorId:l,previewRef:j,dragRef:N,dropRef:M,dropEffect:r||a(e.copyModeModifierKey)?`copy`:`move`,groupItems:i||a(e.groupModeModifierKey),dropNotAllowed:A}},useInlineCombinatorDnD:e=>{let{activeDragItem:t,timerCopyMode:r}=f(_),i=y(`inlineCombinator`,e.path,e.schema.qbId),s=(e.rules??[])[e.path.at(-1)-1],{setNodeRef:c,isOver:l}=C({id:i,data:{type:`inlineCombinator`,path:e.path,schema:e.schema,validate:t=>n({dragging:t,path:e.path,schema:e.schema,canDrop:e.canDrop,groupModeModifierKey:e.groupModeModifierKey,hoveringItem:s}),getDropResult:()=>o({type:`inlineCombinator`,path:e.path,schema:e.schema,copyModeModifierKey:e.copyModeModifierKey,groupModeModifierKey:e.groupModeModifierKey})}}),u=l&&!!t&&n({dragging:t,path:e.path,schema:e.schema,canDrop:e.canDrop,groupModeModifierKey:e.groupModeModifierKey,hoveringItem:s}),p=l&&u,m=l&&!u;return{dropRef:d(e=>{c(e)},[c]),dropMonitorId:i,isOver:p,dropEffect:r||a(e.copyModeModifierKey)?`copy`:`move`,dropNotAllowed:m}}}};export{x as t}; //# sourceMappingURL=dnd-kit-c4Y2XzQh.mjs.map