@react-querybuilder/dnd
Version:
Drag-and-drop-enabled version of react-querybuilder
2 lines • 10.8 kB
JavaScript
import*as e from"react";import{createContext as t,useContext as n,useEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{QueryBuilderContext as s,TestID as c,add as l,defaultControlElements as u,findPath as d,getParentPath as f,group as p,insert as m,isAncestor as h,lc as g,messages as _,pathsAreEqual as v,preferAnyProp as y,preferProp as b,standardClassnames as x,useMergedContext as S}from"react-querybuilder";const C=new Set([`shift`,`alt`,`meta`,`mod`,`ctrl`]),w={esc:`escape`,return:`enter`,".":`period`,",":`comma`,"-":`slash`," ":`space`,"`":`backquote`,"#":`backslash`,"+":`bracketright`,ShiftLeft:`shift`,ShiftRight:`shift`,AltLeft:`alt`,AltRight:`alt`,MetaLeft:`meta`,MetaRight:`meta`,OSLeft:`meta`,OSRight:`meta`,ControlLeft:`ctrl`,ControlRight:`ctrl`},T=e=>g((e&&w[e]||e||``).trim()).replace(/key|digit|numpad|arrow/,``),E=e=>C.has(e),D={"⌘":`meta`,cmd:`meta`,command:`meta`,"⊞":`meta`,win:`meta`,windows:`meta`,"⇧":`shift`,"⌥":`alt`,"⌃":`ctrl`,control:`ctrl`};typeof document<`u`&&(document.addEventListener(`keydown`,e=>{e.key!==void 0&&j([T(e.key),T(e.code)])}),document.addEventListener(`keyup`,e=>{e.key!==void 0&&M([T(e.key),T(e.code)])})),typeof window<`u`&&window.addEventListener(`blur`,()=>{O.clear()});const O=new Set,k=e=>Array.isArray(e),A=(e,t=`,`)=>(k(e)?e:e.split(t)).every(e=>{let t=g(e.trim());return O.has(D[t]??t)}),j=e=>{let t=Array.isArray(e)?e:[e];if(O.has(`meta`))for(let e of O)E(e)||O.delete(g(e));for(let e of t)O.add(g(e))},M=e=>{let t=Array.isArray(e)?e:[e];if(e===`meta`)O.clear();else for(let e of t)O.delete(g(e))},{rule:N,ruleGroup:P,combinatorSelector:F}=u,I=t({baseControls:{rule:N,ruleGroup:P,combinatorSelector:F}}),L=({component:t,...r})=>{let{canDrop:i,useDrop:a,copyModeModifierKey:o,groupModeModifierKey:s}=n(I),{dropRef:l,dropMonitorId:u,isOver:d}=R({...r,component:t,useDrop:a,canDrop:i,copyModeModifierKey:o,groupModeModifierKey:s}),f=[r.schema.suppressStandardClassnames||x.betweenRules,d&&!r.schema.classNames.dndOver||!1,d&&!r.schema.suppressStandardClassnames&&x.dndOver||!1].filter(e=>typeof e==`string`).join(` `);return e.createElement(`div`,{key:`dnd`,ref:l,className:f,"data-dropmonitorid":u,"data-testid":c.inlineCombinator},e.createElement(t,{...r,testID:c.combinators}))},R=e=>{let t=a(null),{path:n,canDrop:r,schema:i,useDrop:o,rules:s,copyModeModifierKey:c=`alt`,groupModeModifierKey:l=`ctrl`}=e,u=(s??[])[n.at(-1)-1],[{isOver:d,dropMonitorId:p,dropEffect:m,dropNotAllowed:g},_]=o(()=>({accept:[`rule`,`ruleGroup`],canDrop:e=>{let{path:t}=e;if(A(l)||e&&typeof r==`function`&&!r({dragging:e,hovering:{...u,path:n,qbId:i.qbId}}))return!1;let a=f(n),o=f(t),s=n.at(-1),c=t.at(-1);return!(h(t,n)||v(t,n)||v(a,o)&&s-1===c||i.independentCombinators&&v(a,o)&&s===c-1)},collect:e=>({dropNotAllowed:e.isOver()&&!e.canDrop(),isOver:e.canDrop()&&e.isOver(),dropMonitorId:e.getHandlerId()??``,dropEffect:A(c)?`copy`:`move`,groupItems:A(l)}),drop:()=>{let{qbId:e,getQuery:t,dispatchQuery:r}=i,a=A(c)?`copy`:`move`;return{type:`inlineCombinator`,path:n,qbId:e,getQuery:t,dispatchQuery:r,groupItems:A(l),dropEffect:a}}}),[r,u,n,i]);return _(t),{dropRef:t,dropMonitorId:p,isOver:d,dropEffect:m,dropNotAllowed:g}},z=()=>typeof window<`u`&&`ontouchstart`in window||typeof navigator<`u`&&navigator.maxTouchPoints>0;let B;const V=()=>(B||(B=new Image,B.src=`data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==`),B),H=({type:e,path:t,disabled:n,actions:r,schema:i,useDrag:a,copyModeModifierKey:o,groupModeModifierKey:s,hideDefaultDragPreview:c})=>a(()=>({type:e,item:()=>({...d(t,i.getQuery()),path:t,qbId:i.qbId}),canDrag:!n,previewOptions:{captureDraggingState:!!c},collect:e=>({isDragging:!n&&e.isDragging(),dragMonitorId:e.getHandlerId()??``}),end:(e,t)=>{let n=t.getDropResult();if(!n)return;let a=A(o)?`copy`:`move`,c=A(s),u=f(n.path),d=n.path.at(-1),h=c?n.path:n.type===`ruleGroup`?[...n.path,0]:n.type===`inlineCombinator`?[...u,d]:[...u,d+1];if(i.qbId===n.qbId)c?r.groupRule(e.path,h,a===`copy`):r.moveRule(e.path,h,a===`copy`);else{let t=n.getQuery();t&&(c?n.dispatchQuery(p(l(t,e,[]),[t.rules.length],h,{clone:!1})):n.dispatchQuery(m(t,e,h)),a!==`copy`&&r.onRuleRemove(e.path))}}}),[r.groupRule,r.moveRule,n,t]),U=t=>{let r=n(I),{canDrop:i,useDrag:a,useDrop:o,copyModeModifierKey:s,groupModeModifierKey:c,hideDefaultDragPreview:l}=r,u=!!t.parentDisabled||!!t.disabled,d=G({...t,disabled:u,useDrag:a,useDrop:o,canDrop:i,copyModeModifierKey:s,groupModeModifierKey:c,hideDefaultDragPreview:l}),{rule:f}=r.baseControls;return e.createElement(I.Provider,{value:r},e.createElement(f,{...t,...d}))},W=[`rule`,`ruleGroup`],G=t=>{let n=a(null),r=a(null),{path:i,rule:o,disabled:s,schema:c,actions:l,useDrag:u,useDrop:d,canDrop:p,copyModeModifierKey:m=`alt`,groupModeModifierKey:g=`ctrl`,hideDefaultDragPreview:_}=t,[{isDragging:y,dragMonitorId:b},x,S]=H({type:`rule`,path:i,disabled:s,independentCombinators:c.independentCombinators,schema:c,actions:l,useDrag:u,copyModeModifierKey:m,groupModeModifierKey:g,hideDefaultDragPreview:_}),[{isOver:C,dropMonitorId:w,dropEffect:T,groupItems:E,dropNotAllowed:D},O]=d(()=>({accept:W,canDrop:e=>{if(A(g)&&s||e&&typeof p==`function`&&!p({dragging:e,hovering:{...o,path:i,qbId:c.qbId}}))return!1;if(c.qbId!==e.qbId)return!0;let t=f(i),n=f(e.path),r=i.at(-1),a=e.path.at(-1);return!(h(e.path,i)||v(i,e.path)||!A(g)&&v(t,n)&&(r===a-1||c.independentCombinators&&r===a-2))},collect:e=>({dropNotAllowed:e.isOver()&&!e.canDrop(),isOver:e.canDrop()&&e.isOver(),dropMonitorId:e.getHandlerId()??``,dropEffect:A(m)?`copy`:`move`,groupItems:A(g)}),drop:()=>{let{qbId:e,getQuery:t,dispatchQuery:n}=c,r=A(m)?`copy`:`move`;return{type:`rule`,path:i,qbId:e,getQuery:t,dispatchQuery:n,groupItems:A(g),dropEffect:r}}}),[s,l.moveRule,i,p,o,c]);return e.useEffect(()=>{x(r),O(n),S(_?V():n)},[x,O,_,S]),{isDragging:y,dragMonitorId:b,isOver:C,dropMonitorId:w,dndRef:n,dragRef:r,dropEffect:T,groupItems:E,dropNotAllowed:D}},K=t=>{let{canDrop:r,baseControls:{ruleGroup:i},useDrag:a,useDrop:o,copyModeModifierKey:s,groupModeModifierKey:c,hideDefaultDragPreview:l}=n(I),u=J({...t,disabled:!!t.parentDisabled||!!t.disabled,useDrag:a,useDrop:o,canDrop:r,copyModeModifierKey:s,groupModeModifierKey:c,hideDefaultDragPreview:l});return e.createElement(i,{...t,...u})},q=[`rule`,`ruleGroup`],J=t=>{let n=a(null),r=a(null),i=a(null),{disabled:o,path:s,ruleGroup:c,schema:l,actions:u,useDrag:d,useDrop:p,canDrop:m,copyModeModifierKey:g=`alt`,groupModeModifierKey:_=`ctrl`,hideDefaultDragPreview:y}=t,[{isDragging:b,dragMonitorId:x},S,C]=H({type:`ruleGroup`,path:s,disabled:o,independentCombinators:l.independentCombinators,schema:l,actions:u,useDrag:d,copyModeModifierKey:g,groupModeModifierKey:_,hideDefaultDragPreview:y}),[{isOver:w,dropMonitorId:T,dropEffect:E,groupItems:D,dropNotAllowed:O},k]=p(()=>({accept:q,canDrop:e=>{if(o||e&&typeof m==`function`&&!m({dragging:e,hovering:{...c,path:s,qbId:l.qbId}}))return!1;if(l.qbId!==e.qbId)return!0;let t=f(e.path),n=e.path.at(-1);return!(h(e.path,s)||v(s,t)&&n===0||v(s,e.path))},collect:e=>({dropNotAllowed:e.isOver()&&!e.canDrop(),isOver:e.canDrop()&&e.isOver(),dropMonitorId:e.getHandlerId()??``,dropEffect:A(g)?`copy`:`move`,groupItems:A(_)}),drop:()=>{let{qbId:e,getQuery:t,dispatchQuery:n}=l,r=A(g)?`copy`:`move`;return{type:`ruleGroup`,path:s,qbId:e,getQuery:t,dispatchQuery:n,groupItems:A(_),dropEffect:r}}}),[o,u.groupRule,u.moveRule,s,m,c,l]);return e.useEffect(()=>{s.length>0&&(S(r),C(y?V():n)),k(i)},[S,k,y,s.length,C]),{isDragging:b,dragMonitorId:x,isOver:w,dropMonitorId:T,previewRef:n,dragRef:r,dropRef:i,dropEffect:E,groupItems:D,dropNotAllowed:O}},Y={},X=t=>{let{controlClassnames:n,controlElements:r,debugMode:a,enableDragAndDrop:o,enableMountQueryChange:c,translations:l}=t,u=S({controlClassnames:n,controlElements:r,debugMode:a,enableDragAndDrop:o??!0,enableMountQueryChange:c,translations:l??{}}),{enableDragAndDrop:d}=u,f=$(t.dnd),p=d&&f?`dnd`:`no-dnd`,{DndProvider:m,ReactDndBackend:h}=f??Y,g=i(()=>({...u,enableDragAndDrop:!1,debugMode:a}),[u,a]),_=i(()=>({...u,enableDragAndDrop:d,debugMode:a}),[u,a,d]);return!d||!f||!m||!h?e.createElement(s.Provider,{key:p,value:g},t.children):e.createElement(m,{key:p,backend:h,debugMode:a},e.createElement(s.Provider,{key:p,value:_},e.createElement(Z,{dnd:f,canDrop:t.canDrop,copyModeModifierKey:t.copyModeModifierKey,groupModeModifierKey:t.groupModeModifierKey,hideDefaultDragPreview:t.hideDefaultDragPreview},t.children)))},Z=t=>{let r=n(s),a=n(I),o=$(t.dnd),c=y(void 0,t.copyModeModifierKey,a.copyModeModifierKey),l=y(void 0,t.groupModeModifierKey,a.groupModeModifierKey),u=b(!0,t.enableDragAndDrop,r.enableDragAndDrop),d=b(!1,t.debugMode,r.debugMode),f=b(!1,t.hideDefaultDragPreview,a.hideDefaultDragPreview),p=y(void 0,t.canDrop,a.canDrop),m=u&&o?`dnd`:`no-dnd`,h=i(()=>({rule:t.controlElements?.rule??r.controlElements?.rule??a.baseControls.rule,ruleGroup:t.controlElements?.ruleGroup??r.controlElements?.ruleGroup??a.baseControls.ruleGroup,combinatorSelector:t.controlElements?.combinatorSelector??r.controlElements?.combinatorSelector??a.baseControls.combinatorSelector}),[t.controlElements?.combinatorSelector,t.controlElements?.rule,t.controlElements?.ruleGroup,r.controlElements?.combinatorSelector,r.controlElements?.rule,r.controlElements?.ruleGroup,a.baseControls.combinatorSelector,a.baseControls.rule,a.baseControls.ruleGroup]),g=i(()=>({...r,enableDragAndDrop:u,debugMode:d,controlElements:{...r.controlElements,ruleGroup:K,rule:U,inlineCombinator:L}}),[d,u,r]),{DndContext:_,useDrag:v,useDrop:x}=o??{},S=i(()=>({baseControls:h,canDrop:p,copyModeModifierKey:c,groupModeModifierKey:l,hideDefaultDragPreview:f,useDrag:v,useDrop:x}),[h,p,c,l,f,v,x]),C=i(()=>({...r,enableDragAndDrop:!1,debugMode:d}),[r,d]);return!u||!_?e.createElement(s.Provider,{key:m,value:C},t.children):e.createElement(_.Consumer,{key:m},()=>e.createElement(s.Provider,{key:m,value:g},e.createElement(I.Provider,{value:S},t.children)))};let Q=!1;const $=e=>{let[t,n]=o(e??null);return r(()=>{let e=!1;return t||(async()=>{let[t,r,i]=await Promise.all([``,`-html5-backend`,`-touch-backend`].map(e=>import(`react-dnd${e}`).catch(()=>null)));e||(t?r&&(!i||i&&!z())?n(()=>({...t,...r,...i,ReactDndBackend:r.HTML5Backend})):i&&n(()=>({...t,...i,...r,ReactDndBackend:i.TouchBackend})):process.env.NODE_ENV!==`production`&&!Q&&(console.error(_.errorEnabledDndWithoutReactDnD),Q=!0))})(),()=>{e=!0}},[t]),t&&!t.ReactDndBackend&&(t.ReactDndBackend=z()?t.TouchBackend??t.HTML5Backend:t.HTML5Backend??t.TouchBackend),t};export{L as InlineCombinatorDnD,X as QueryBuilderDnD,Z as QueryBuilderDndWithoutProvider,U as RuleDnD,K as RuleGroupDnD,R as useInlineCombinatorDnD,$ as useReactDnD,G as useRuleDnD,J as useRuleGroupDnD};
//# sourceMappingURL=react-querybuilder_dnd.production.mjs.map