Merge pull request #90 from webzard-io/feat/dialog

render modal in editor view instead of full screen

packages/editor/src/components/Editor.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
-import { GridCallbacks } from '@meta-ui/runtime';
+import { GridCallbacks, DIALOG_CONTAINER_ID } from '@meta-ui/runtime';
 import produce from 'immer';
 import { Box, Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react';
-import { last } from 'lodash';
 import { App, stateStore } from '../metaUI';
 import { StructureTree } from './StructureTree';
 import {
@@ -116,6 +115,12 @@ export const Editor = () => {
               background="white"
               transform={`scale(${scale / 100})`}
             >
+              <Box
+                id={DIALOG_CONTAINER_ID}
+                width="full"
+                height="full"
+                position="absolute"
+              />
               {appComponent}
             </Box>
           </Box>

packages/runtime/src/components/chakra-ui/Dialog.tsx

@@ -9,10 +9,13 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
   Button,
+  ModalContentProps,
+  ModalOverlayProps,
 } from '@chakra-ui/react';
 import { Static, Type } from '@sinclair/typebox';
 import Slot from '../_internal/Slot';
 import { ColorSchemePropertySchema } from './Types/ColorScheme';
+import { DIALOG_CONTAINER_ID } from '../../constants';
 
 const HandleButtonPropertySchema = Type.Object({
   text: Type.Optional(Type.String()),
@@ -37,6 +40,11 @@ const Dialog: ComponentImplementation<Static<typeof PropsSchema>> = ({
   const [isOpen, setIsOpen] = useState(false);
   const [title, setTitle] = useState(customerTitle || '');
   const cancelRef = useRef(null);
+  const containerRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    containerRef.current = document.getElementById(DIALOG_CONTAINER_ID);
+  }, [containerRef]);
 
   useEffect(() => {
     subscribeMethods({
@@ -53,17 +61,34 @@ const Dialog: ComponentImplementation<Static<typeof PropsSchema>> = ({
     });
   }, []);
 
+  const dialogContentProps: ModalContentProps = {
+    position: 'absolute',
+    width: 'full',
+    containerProps: { position: 'absolute', width: 'full', height: 'full' },
+  };
+
+  const dialogOverlayProps: ModalOverlayProps = {
+    position: 'absolute',
+    width: 'full',
+    height: 'full',
+  };
+
+  const portalProps = {
+    appendToParentPortal: true,
+    containerRef,
+  };
+
   return (
     <React.Fragment>
       <AlertDialog
         isOpen={isOpen}
         leastDestructiveRef={cancelRef}
         onClose={() => setIsOpen(false)}
+        portalProps={containerRef.current ? portalProps : undefined}
       >
-        <AlertDialogOverlay>
-          <AlertDialogContent>
+        <AlertDialogOverlay {...(containerRef.current ? dialogOverlayProps : {})}>
+          <AlertDialogContent {...(containerRef.current ? dialogContentProps : {})}>
             <AlertDialogHeader>{title}</AlertDialogHeader>
-
             <AlertDialogBody>
               <Slot slotsMap={slotsMap} slot="content" />
             </AlertDialogBody>

packages/runtime/src/constants.ts

@@ -1,3 +1,4 @@
 export const LIST_ITEM_EXP = '$listItem';
 export const LIST_ITEM_INDEX_EXP = '$i';
 export const GRID_HEIGHT = 40;
+export const DIALOG_CONTAINER_ID = 'meta-ui-dialog-container';

packages/runtime/src/index.ts

@@ -24,3 +24,4 @@ export function initMetaUI() {
 export * from './utils/parseType';
 export * from './utils/parseTypeBox';
 export * from './types/RuntimeSchema';
+export * from './constants';