UNPKG

@react-querybuilder/dnd

Version:

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

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