@react-querybuilder/dnd
Version:
Drag-and-drop-enabled version of react-querybuilder
2 lines • 11.9 kB
JavaScript
var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);let l=require(`react-querybuilder`);const u=new Set([`shift`,`alt`,`meta`,`mod`,`ctrl`]),d={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`},f=e=>(0,l.lc)((e&&d[e]||e||``).trim()).replace(/key|digit|numpad|arrow/,``),p=e=>u.has(e),m={"⌘":`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&&v([f(e.key),f(e.code)])}),document.addEventListener(`keyup`,e=>{e.key!==void 0&&y([f(e.key),f(e.code)])})),typeof window<`u`&&window.addEventListener(`blur`,()=>{h.clear()});const h=new Set,g=e=>Array.isArray(e),_=(e,t=`,`)=>(g(e)?e:e.split(t)).every(e=>{let t=(0,l.lc)(e.trim());return h.has(m[t]??t)}),v=e=>{let t=Array.isArray(e)?e:[e];if(h.has(`meta`))for(let e of h)p(e)||h.delete((0,l.lc)(e));for(let e of t)h.add((0,l.lc)(e))},y=e=>{let t=Array.isArray(e)?e:[e];if(e===`meta`)h.clear();else for(let e of t)h.delete((0,l.lc)(e))},{rule:b,ruleGroup:x,combinatorSelector:S}=l.defaultControlElements,C=(0,c.createContext)({baseControls:{rule:b,ruleGroup:x,combinatorSelector:S}}),w=({component:e,...t})=>{let{canDrop:n,useDrop:r,copyModeModifierKey:i,groupModeModifierKey:a}=(0,c.useContext)(C),{dropRef:o,dropMonitorId:s,isOver:u}=T({...t,component:e,useDrop:r,canDrop:n,copyModeModifierKey:i,groupModeModifierKey:a}),d=[t.schema.suppressStandardClassnames||l.standardClassnames.betweenRules,u&&!t.schema.classNames.dndOver||!1,u&&!t.schema.suppressStandardClassnames&&l.standardClassnames.dndOver||!1].filter(e=>typeof e==`string`).join(` `);return c.createElement(`div`,{key:`dnd`,ref:o,className:d,"data-dropmonitorid":s,"data-testid":l.TestID.inlineCombinator},c.createElement(e,{...t,testID:l.TestID.combinators}))},T=e=>{let t=(0,c.useRef)(null),{path:n,canDrop:r,schema:i,useDrop:a,rules:o,copyModeModifierKey:s=`alt`,groupModeModifierKey:u=`ctrl`}=e,d=(o??[])[n.at(-1)-1],[{isOver:f,dropMonitorId:p,dropEffect:m,dropNotAllowed:h},g]=a(()=>({accept:[`rule`,`ruleGroup`],canDrop:e=>{let{path:t}=e;if(_(u)||e&&typeof r==`function`&&!r({dragging:e,hovering:{...d,path:n,qbId:i.qbId}}))return!1;let a=(0,l.getParentPath)(n),o=(0,l.getParentPath)(t),s=n.at(-1),c=t.at(-1);return!((0,l.isAncestor)(t,n)||(0,l.pathsAreEqual)(t,n)||(0,l.pathsAreEqual)(a,o)&&s-1===c||i.independentCombinators&&(0,l.pathsAreEqual)(a,o)&&s===c-1)},collect:e=>({dropNotAllowed:e.isOver()&&!e.canDrop(),isOver:e.canDrop()&&e.isOver(),dropMonitorId:e.getHandlerId()??``,dropEffect:_(s)?`copy`:`move`,groupItems:_(u)}),drop:()=>{let{qbId:e,getQuery:t,dispatchQuery:r}=i,a=_(s)?`copy`:`move`;return{type:`inlineCombinator`,path:n,qbId:e,getQuery:t,dispatchQuery:r,groupItems:_(u),dropEffect:a}}}),[r,d,n,i]);return g(t),{dropRef:t,dropMonitorId:p,isOver:f,dropEffect:m,dropNotAllowed:h}},E=()=>typeof window<`u`&&`ontouchstart`in window||typeof navigator<`u`&&navigator.maxTouchPoints>0;let D;const O=()=>(D||(D=new Image,D.src=`data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==`),D),k=({type:e,path:t,disabled:n,actions:r,schema:i,useDrag:a,copyModeModifierKey:o,groupModeModifierKey:s,hideDefaultDragPreview:c})=>a(()=>({type:e,item:()=>({...(0,l.findPath)(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=_(o)?`copy`:`move`,c=_(s),u=(0,l.getParentPath)(n.path),d=n.path.at(-1),f=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,f,a===`copy`):r.moveRule(e.path,f,a===`copy`);else{let t=n.getQuery();t&&(c?n.dispatchQuery((0,l.group)((0,l.add)(t,e,[]),[t.rules.length],f,{clone:!1})):n.dispatchQuery((0,l.insert)(t,e,f)),a!==`copy`&&r.onRuleRemove(e.path))}}}),[r.groupRule,r.moveRule,n,t]),A=e=>{let t=(0,c.useContext)(C),{canDrop:n,useDrag:r,useDrop:i,copyModeModifierKey:a,groupModeModifierKey:o,hideDefaultDragPreview:s}=t,l=!!e.parentDisabled||!!e.disabled,u=M({...e,disabled:l,useDrag:r,useDrop:i,canDrop:n,copyModeModifierKey:a,groupModeModifierKey:o,hideDefaultDragPreview:s}),{rule:d}=t.baseControls;return c.createElement(C.Provider,{value:t},c.createElement(d,{...e,...u}))},j=[`rule`,`ruleGroup`],M=e=>{let t=(0,c.useRef)(null),n=(0,c.useRef)(null),{path:r,rule:i,disabled:a,schema:o,actions:s,useDrag:u,useDrop:d,canDrop:f,copyModeModifierKey:p=`alt`,groupModeModifierKey:m=`ctrl`,hideDefaultDragPreview:h}=e,[{isDragging:g,dragMonitorId:v},y,b]=k({type:`rule`,path:r,disabled:a,independentCombinators:o.independentCombinators,schema:o,actions:s,useDrag:u,copyModeModifierKey:p,groupModeModifierKey:m,hideDefaultDragPreview:h}),[{isOver:x,dropMonitorId:S,dropEffect:C,groupItems:w,dropNotAllowed:T},E]=d(()=>({accept:j,canDrop:e=>{if(_(m)&&a||e&&typeof f==`function`&&!f({dragging:e,hovering:{...i,path:r,qbId:o.qbId}}))return!1;if(o.qbId!==e.qbId)return!0;let t=(0,l.getParentPath)(r),n=(0,l.getParentPath)(e.path),s=r.at(-1),c=e.path.at(-1);return!((0,l.isAncestor)(e.path,r)||(0,l.pathsAreEqual)(r,e.path)||!_(m)&&(0,l.pathsAreEqual)(t,n)&&(s===c-1||o.independentCombinators&&s===c-2))},collect:e=>({dropNotAllowed:e.isOver()&&!e.canDrop(),isOver:e.canDrop()&&e.isOver(),dropMonitorId:e.getHandlerId()??``,dropEffect:_(p)?`copy`:`move`,groupItems:_(m)}),drop:()=>{let{qbId:e,getQuery:t,dispatchQuery:n}=o,i=_(p)?`copy`:`move`;return{type:`rule`,path:r,qbId:e,getQuery:t,dispatchQuery:n,groupItems:_(m),dropEffect:i}}}),[a,s.moveRule,r,f,i,o]);return c.useEffect(()=>{y(n),E(t),b(h?O():t)},[y,E,h,b]),{isDragging:g,dragMonitorId:v,isOver:x,dropMonitorId:S,dndRef:t,dragRef:n,dropEffect:C,groupItems:w,dropNotAllowed:T}},N=e=>{let{canDrop:t,baseControls:{ruleGroup:n},useDrag:r,useDrop:i,copyModeModifierKey:a,groupModeModifierKey:o,hideDefaultDragPreview:s}=(0,c.useContext)(C),l=F({...e,disabled:!!e.parentDisabled||!!e.disabled,useDrag:r,useDrop:i,canDrop:t,copyModeModifierKey:a,groupModeModifierKey:o,hideDefaultDragPreview:s});return c.createElement(n,{...e,...l})},P=[`rule`,`ruleGroup`],F=e=>{let t=(0,c.useRef)(null),n=(0,c.useRef)(null),r=(0,c.useRef)(null),{disabled:i,path:a,ruleGroup:o,schema:s,actions:u,useDrag:d,useDrop:f,canDrop:p,copyModeModifierKey:m=`alt`,groupModeModifierKey:h=`ctrl`,hideDefaultDragPreview:g}=e,[{isDragging:v,dragMonitorId:y},b,x]=k({type:`ruleGroup`,path:a,disabled:i,independentCombinators:s.independentCombinators,schema:s,actions:u,useDrag:d,copyModeModifierKey:m,groupModeModifierKey:h,hideDefaultDragPreview:g}),[{isOver:S,dropMonitorId:C,dropEffect:w,groupItems:T,dropNotAllowed:E},D]=f(()=>({accept:P,canDrop:e=>{if(i||e&&typeof p==`function`&&!p({dragging:e,hovering:{...o,path:a,qbId:s.qbId}}))return!1;if(s.qbId!==e.qbId)return!0;let t=(0,l.getParentPath)(e.path),n=e.path.at(-1);return!((0,l.isAncestor)(e.path,a)||(0,l.pathsAreEqual)(a,t)&&n===0||(0,l.pathsAreEqual)(a,e.path))},collect:e=>({dropNotAllowed:e.isOver()&&!e.canDrop(),isOver:e.canDrop()&&e.isOver(),dropMonitorId:e.getHandlerId()??``,dropEffect:_(m)?`copy`:`move`,groupItems:_(h)}),drop:()=>{let{qbId:e,getQuery:t,dispatchQuery:n}=s,r=_(m)?`copy`:`move`;return{type:`ruleGroup`,path:a,qbId:e,getQuery:t,dispatchQuery:n,groupItems:_(h),dropEffect:r}}}),[i,u.groupRule,u.moveRule,a,p,o,s]);return c.useEffect(()=>{a.length>0&&(b(n),x(g?O():t)),D(r)},[b,D,g,a.length,x]),{isDragging:v,dragMonitorId:y,isOver:S,dropMonitorId:C,previewRef:t,dragRef:n,dropRef:r,dropEffect:w,groupItems:T,dropNotAllowed:E}},I={},L=e=>{let{controlClassnames:t,controlElements:n,debugMode:r,enableDragAndDrop:i,enableMountQueryChange:a,translations:o}=e,s=(0,l.useMergedContext)({controlClassnames:t,controlElements:n,debugMode:r,enableDragAndDrop:i??!0,enableMountQueryChange:a,translations:o??{}}),{enableDragAndDrop:u}=s,d=B(e.dnd),f=u&&d?`dnd`:`no-dnd`,{DndProvider:p,ReactDndBackend:m}=d??I,h=(0,c.useMemo)(()=>({...s,enableDragAndDrop:!1,debugMode:r}),[s,r]),g=(0,c.useMemo)(()=>({...s,enableDragAndDrop:u,debugMode:r}),[s,r,u]);return!u||!d||!p||!m?c.createElement(l.QueryBuilderContext.Provider,{key:f,value:h},e.children):c.createElement(p,{key:f,backend:m,debugMode:r},c.createElement(l.QueryBuilderContext.Provider,{key:f,value:g},c.createElement(R,{dnd:d,canDrop:e.canDrop,copyModeModifierKey:e.copyModeModifierKey,groupModeModifierKey:e.groupModeModifierKey,hideDefaultDragPreview:e.hideDefaultDragPreview},e.children)))},R=e=>{let t=(0,c.useContext)(l.QueryBuilderContext),n=(0,c.useContext)(C),r=B(e.dnd),i=(0,l.preferAnyProp)(void 0,e.copyModeModifierKey,n.copyModeModifierKey),a=(0,l.preferAnyProp)(void 0,e.groupModeModifierKey,n.groupModeModifierKey),o=(0,l.preferProp)(!0,e.enableDragAndDrop,t.enableDragAndDrop),s=(0,l.preferProp)(!1,e.debugMode,t.debugMode),u=(0,l.preferProp)(!1,e.hideDefaultDragPreview,n.hideDefaultDragPreview),d=(0,l.preferAnyProp)(void 0,e.canDrop,n.canDrop),f=o&&r?`dnd`:`no-dnd`,p=(0,c.useMemo)(()=>({rule:e.controlElements?.rule??t.controlElements?.rule??n.baseControls.rule,ruleGroup:e.controlElements?.ruleGroup??t.controlElements?.ruleGroup??n.baseControls.ruleGroup,combinatorSelector:e.controlElements?.combinatorSelector??t.controlElements?.combinatorSelector??n.baseControls.combinatorSelector}),[e.controlElements?.combinatorSelector,e.controlElements?.rule,e.controlElements?.ruleGroup,t.controlElements?.combinatorSelector,t.controlElements?.rule,t.controlElements?.ruleGroup,n.baseControls.combinatorSelector,n.baseControls.rule,n.baseControls.ruleGroup]),m=(0,c.useMemo)(()=>({...t,enableDragAndDrop:o,debugMode:s,controlElements:{...t.controlElements,ruleGroup:N,rule:A,inlineCombinator:w}}),[s,o,t]),{DndContext:h,useDrag:g,useDrop:_}=r??{},v=(0,c.useMemo)(()=>({baseControls:p,canDrop:d,copyModeModifierKey:i,groupModeModifierKey:a,hideDefaultDragPreview:u,useDrag:g,useDrop:_}),[p,d,i,a,u,g,_]),y=(0,c.useMemo)(()=>({...t,enableDragAndDrop:!1,debugMode:s}),[t,s]);return!o||!h?c.createElement(l.QueryBuilderContext.Provider,{key:f,value:y},e.children):c.createElement(h.Consumer,{key:f},()=>c.createElement(l.QueryBuilderContext.Provider,{key:f,value:m},c.createElement(C.Provider,{value:v},e.children)))};let z=!1;const B=e=>{let[t,n]=(0,c.useState)(e??null);return(0,c.useEffect)(()=>{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&&!E())?n(()=>({...t,...r,...i,ReactDndBackend:r.HTML5Backend})):i&&n(()=>({...t,...i,...r,ReactDndBackend:i.TouchBackend})):process.env.NODE_ENV!==`production`&&!z&&(console.error(l.messages.errorEnabledDndWithoutReactDnD),z=!0))})(),()=>{e=!0}},[t]),t&&!t.ReactDndBackend&&(t.ReactDndBackend=E()?t.TouchBackend??t.HTML5Backend:t.HTML5Backend??t.TouchBackend),t};exports.InlineCombinatorDnD=w,exports.QueryBuilderDnD=L,exports.QueryBuilderDndWithoutProvider=R,exports.RuleDnD=A,exports.RuleGroupDnD=N,exports.useInlineCombinatorDnD=T,exports.useReactDnD=B,exports.useRuleDnD=M,exports.useRuleGroupDnD=F;
//# sourceMappingURL=react-querybuilder_dnd.cjs.production.js.map