@react-querybuilder/dnd
Version:
Drag-and-drop-enabled version of react-querybuilder (DnD-library-agnostic)
2 lines • 8.14 kB
JavaScript
import{n as e,r as t,t as n}from"./shadowQuery-Z2qhxCGM.mjs";import{t as r}from"./dnd-kit-c4Y2XzQh.mjs";import{n as i,t as a}from"./pragmatic-dnd-Bp-MQRoE.mjs";import{n as o,t as s}from"./react-dnd-Ded7Ym3k.mjs";import*as c from"react";import{createContext as l,useContext as u,useEffect as d,useMemo as f,useState as p}from"react";import{QueryBuilderContext as m,TestID as h,defaultControlElements as g,messages as _,preferAnyProp as v,preferProp as y,standardClassnames as b,useMergedContext as x}from"react-querybuilder";const S=e=>typeof e==`object`&&!!e&&`DndProvider`in e&&`useRuleDnD`in e&&`useRuleGroupDnD`in e&&`useInlineCombinatorDnD`in e,C=e=>e.getAttribute(`data-rule-id`)??e.getAttribute(`data-testid`)??null,w=e=>{let t=new Map;return{captureFirst:n=>{t=new Map;let r=n.querySelectorAll(e);for(let e of r){let n=C(e);n&&t.set(n,e.getBoundingClientRect())}},playLast:n=>{let r=n.querySelectorAll(e);for(let e of r){let n=C(e);if(!n)continue;let r=t.get(n);if(!r)continue;let i=e.getBoundingClientRect(),a=r.left-i.left,o=r.top-i.top;if(a===0&&o===0)continue;let s=e;s.style.transform=`translate(${a}px, ${o}px)`,s.style.transition=`none`,requestAnimationFrame(()=>{s.style.transition=`transform 150ms ease`,s.style.transform=``;let e=()=>{s.style.transition=``,s.removeEventListener(`transitionend`,e)};s.addEventListener(`transitionend`,e)})}t=new Map}}},{rule:T,ruleGroup:E,combinatorSelector:D}=g,O=l({baseControls:{rule:T,ruleGroup:E,combinatorSelector:D}}),k=({component:e,...n})=>{let{adapter:r,canDrop:i,copyModeModifierKey:a,copyModeAfterHoverMs:o,groupModeModifierKey:s,groupModeAfterHoverMs:l}=u(O),{dragPreviewState:d}=u(t),f=d!==null,{dropRef:p,dropMonitorId:m,isOver:g}=r.useInlineCombinatorDnD({path:n.path,schema:n.schema,rules:n.rules,canDrop:i,copyModeModifierKey:a??`alt`,copyModeAfterHoverMs:o,groupModeModifierKey:s??`ctrl`,groupModeAfterHoverMs:l}),_=f?!1:g,v=[n.schema.suppressStandardClassnames||b.betweenRules,_&&!n.schema.classNames.dndOver||!1,_&&!n.schema.suppressStandardClassnames&&b.dndOver||!1].filter(e=>typeof e==`string`).join(` `);return c.createElement(`div`,{key:`dnd`,ref:p,className:v,"data-dropmonitorid":m,"data-testid":h.inlineCombinator},c.createElement(e,{...n,testID:h.combinators}))},A=e=>{let n=u(O),{dragPreviewState:r}=u(t),{adapter:i,canDrop:a,copyModeModifierKey:o,copyModeAfterHoverMs:s,groupModeModifierKey:l,groupModeAfterHoverMs:d,hideDefaultDragPreview:f,onRuleDrop:p}=n,m=!!e.parentDisabled||!!e.disabled,h=i.useRuleDnD({path:e.path,disabled:m,schema:e.schema,actions:e.actions,rule:e.rule,canDrop:a,copyModeModifierKey:o??`alt`,copyModeAfterHoverMs:s,groupModeModifierKey:l??`ctrl`,groupModeAfterHoverMs:d,hideDefaultDragPreview:f,onRuleDrop:p}),g=r?{...h,isDragging:!1,isOver:!1,dropNotAllowed:!1}:h,{rule:_}=n.baseControls;return c.createElement(O.Provider,{value:n},c.createElement(_,{...e,...g}))},j=e=>{let n=u(O),{dragPreviewState:r}=u(t),{adapter:i,canDrop:a,baseControls:{ruleGroup:o},copyModeModifierKey:s,copyModeAfterHoverMs:l,groupModeModifierKey:d,groupModeAfterHoverMs:p,hideDefaultDragPreview:m,onRuleDrop:h}=n,g=f(()=>{if(e.path.length===0&&r){let t=r.shadowQuery;return{...e,ruleGroup:t,rules:t.rules}}return e},[e,r]),_=i.useRuleGroupDnD({disabled:!!g.parentDisabled||!!g.disabled,path:g.path,schema:g.schema,actions:g.actions,ruleGroup:g.ruleGroup,canDrop:a,copyModeModifierKey:s??`alt`,copyModeAfterHoverMs:l,groupModeModifierKey:d??`ctrl`,groupModeAfterHoverMs:p,hideDefaultDragPreview:m,onRuleDrop:h}),v=r?{..._,isDragging:!1,isOver:!1,dropNotAllowed:!1}:_;return c.createElement(o,{...g,...v})},M=e=>{let{controlClassnames:t,controlElements:n,debugMode:r,enableDragAndDrop:i,enableMountQueryChange:a,translations:o}=e,s=x({controlClassnames:t,controlElements:n,debugMode:r,enableDragAndDrop:i??!0,enableMountQueryChange:a,translations:o??{}}),{enableDragAndDrop:l}=s,u=F(e.dnd),d=l&&u?`dnd`:`no-dnd`,p=f(()=>({...s,enableDragAndDrop:!1,debugMode:r}),[s,r]),h=f(()=>({...s,enableDragAndDrop:l,debugMode:r}),[s,r,l]);if(!l||!u)return c.createElement(m.Provider,{key:d,value:p},e.children);let{DndProvider:g}=u;return c.createElement(g,{key:d,debugMode:r,updateWhileDragging:e.updateWhileDragging,copyModeAfterHoverMs:e.copyModeAfterHoverMs,groupModeAfterHoverMs:e.groupModeAfterHoverMs},c.createElement(m.Provider,{key:d,value:h},c.createElement(N,{dnd:u,canDrop:e.canDrop,copyModeModifierKey:e.copyModeModifierKey,copyModeAfterHoverMs:e.copyModeAfterHoverMs,groupModeModifierKey:e.groupModeModifierKey,groupModeAfterHoverMs:e.groupModeAfterHoverMs,hideDefaultDragPreview:e.hideDefaultDragPreview,updateWhileDragging:e.updateWhileDragging,onDragMove:e.onDragMove,onRuleDrop:e.onRuleDrop},e.children)))},N=e=>{let t=u(m),n=u(O),r=F(e.dnd)??n.adapter,i=v(void 0,e.copyModeModifierKey,n.copyModeModifierKey),a=v(void 0,e.groupModeModifierKey,n.groupModeModifierKey),o=v(void 0,e.copyModeAfterHoverMs,n.copyModeAfterHoverMs),s=v(void 0,e.groupModeAfterHoverMs,n.groupModeAfterHoverMs),l=y(!0,e.enableDragAndDrop,t.enableDragAndDrop),d=y(!1,e.debugMode,t.debugMode),p=y(!1,e.hideDefaultDragPreview,n.hideDefaultDragPreview),h=v(void 0,e.canDrop,n.canDrop),g=y(!1,e.updateWhileDragging,n.updateWhileDragging),_=v(void 0,e.onDragMove,n.onDragMove),b=v(void 0,e.onRuleDrop,n.onRuleDrop),x=l&&r?`dnd`:`no-dnd`,S=f(()=>({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]),C=f(()=>({...t,enableDragAndDrop:l,debugMode:d,controlElements:{...t.controlElements,ruleGroup:j,rule:A,inlineCombinator:k}}),[d,l,t]),w=f(()=>({baseControls:S,canDrop:h,copyModeModifierKey:i,copyModeAfterHoverMs:o,groupModeModifierKey:a,groupModeAfterHoverMs:s,hideDefaultDragPreview:p,updateWhileDragging:g,onDragMove:_,onRuleDrop:b,adapter:r}),[S,h,i,o,a,s,p,g,_,b,r]),T=f(()=>({...t,enableDragAndDrop:!1,debugMode:d}),[t,d]);return!l||!r?c.createElement(m.Provider,{key:x,value:T},e.children):c.createElement(m.Provider,{key:x,value:C},c.createElement(O.Provider,{value:w},e.children))};let P=!1;const F=e=>{let t=e&&S(e)?e:null,n=f(()=>e&&!S(e)?s(e):null,[e]),r=I(t!==null||n!==null);return t??n??r},I=e=>{let[t,n]=p(null);return d(()=>{if(e)return;let r=!1;return t||(async()=>{let[e,t,i]=await Promise.all([``,`-html5-backend`,`-touch-backend`].map(e=>import(`react-dnd${e}`).catch(()=>null)));if(!r)if(e){let r;if(t&&(!i||i&&!o()))r={...e,...t,...i,ReactDndBackend:t.HTML5Backend};else if(i)r={...e,...i,...t,ReactDndBackend:i.TouchBackend};else return;n(()=>s(r))}else process.env.NODE_ENV!==`production`&&!P&&(console.error(_.errorEnabledDndWithoutReactDnD),P=!0)})(),()=>{r=!0}},[t,e]),e?null:t},L=e=>{let[t,n]=p(e??null);return d(()=>{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&&!o())?n(()=>({...t,...r,...i,ReactDndBackend:r.HTML5Backend})):i&&n(()=>({...t,...i,...r,ReactDndBackend:i.TouchBackend})):process.env.NODE_ENV!==`production`&&!P&&(console.error(_.errorEnabledDndWithoutReactDnD),P=!0))})(),()=>{e=!0}},[t]),t&&!t.ReactDndBackend&&(t.ReactDndBackend=o()?t.TouchBackend??t.HTML5Backend:t.HTML5Backend??t.TouchBackend),t},R=()=>{let{dragPreviewState:e}=u(t);return e?.shadowQuery};export{t as DragPreviewContext,k as InlineCombinatorDnD,M as QueryBuilderDnD,N as QueryBuilderDndWithoutProvider,A as RuleDnD,j as RuleGroupDnD,n as computeDestinationFromQuadrant,e as computeShadowQuery,r as createDndKitAdapter,w as createFlipAnimator,a as createPragmaticDndAdapter,s as createReactDnDAdapter,i as getQuadrant,S as isDndAdapter,L as useReactDnD,R as useShadowQuery};
//# sourceMappingURL=react-querybuilder_dnd.production.mjs.map