fix: table html5backend root

gorules · Jul 2, 2023 · 1d9c410 · 1d9c410
1 parent 6b2c152
commit 1d9c410
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gorules/jdm-editor",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "",
   "author": "GoRules <hi@gorules.io> (https://gorules.io)",
   "homepage": "https://github.com/gorules/jdm-editor",

diff --git a/src/components/decision-table/dt.tsx b/src/components/decision-table/dt.tsx
@@ -1,5 +1,5 @@
 import { theme } from 'antd'
-import React, { useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 
@@ -17,33 +17,40 @@ export type DecisionTableProps = {
 
 export const DecisionTable: React.FC<DecisionTableProps> = ({
   tableHeight,
-  mountDialogsOnBody = true,
+  mountDialogsOnBody = false,
   ...props
 }) => {
   const { token } = theme.useToken()
 
+  const [_, setMounted] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
 
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   const getContainer = () => ref.current as HTMLElement
 
   return (
     <div ref={ref} className={'grl-dt'} style={{ background: token.colorBgElevated }}>
-      <DndProvider
-        backend={HTML5Backend}
-        options={{
-          rootElement: ref.current,
-        }}
-      >
-        <DecisionTableProvider {...props}>
-          <DecisionTableDialogProvider
-            getContainer={mountDialogsOnBody === true ? undefined : getContainer}
-          >
-            <DecisionTableCommandBar />
-            <Table maxHeight={tableHeight} />
-            <DecisionTableDialogs />
-          </DecisionTableDialogProvider>
-        </DecisionTableProvider>
-      </DndProvider>
+      {ref.current && (
+        <DndProvider
+          backend={HTML5Backend}
+          options={{
+            rootElement: ref.current,
+          }}
+        >
+          <DecisionTableProvider {...props}>
+            <DecisionTableDialogProvider
+              getContainer={mountDialogsOnBody === true ? undefined : getContainer}
+            >
+              <DecisionTableCommandBar />
+              <Table maxHeight={tableHeight} />
+              <DecisionTableDialogs />
+            </DecisionTableDialogProvider>
+          </DecisionTableProvider>
+        </DndProvider>
+      )}
     </div>
   )
 }