modal refactor

packages/web/src/App.js

@@ -11,6 +11,7 @@ import {
 } from './utility/globalState';
 import { SocketProvider } from './utility/SocketProvider';
 import ConnectionsPinger from './utility/ConnectionsPinger';
+import { ModalLayerProvider } from './modals/showModal';
 
 function App() {
   return (
@@ -22,7 +23,9 @@ function App() {
               <OpenedConnectionsProvider>
                 <LeftPanelWidthProvider>
                   <ConnectionsPinger>
-                    <Screen />
+                    <ModalLayerProvider>
+                      <Screen />
+                    </ModalLayerProvider>
                   </ConnectionsPinger>
                 </LeftPanelWidthProvider>
               </OpenedConnectionsProvider>

packages/web/src/Screen.js

@@ -11,6 +11,7 @@ import WidgetContainer from './widgets/WidgetContainer';
 import ToolBar from './widgets/Toolbar';
 import StatusBar from './widgets/StatusBar';
 import { useSplitterDrag, HorizontalSplitHandle } from './widgets/Splitter';
+import { ModalLayer } from './modals/showModal';
 
 const BodyDiv = styled.div`
   position: fixed;
@@ -132,6 +133,7 @@ export default function Screen() {
       <StausBarContainer>
         <StatusBar />
       </StausBarContainer>
+      <ModalLayer />
     </>
   );
 }

packages/web/src/appobj/connectionAppObject.js

@@ -2,15 +2,14 @@ import _ from 'lodash';
 import React from 'react';
 import { getEngineIcon } from '../icons';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
-import showModal from '../modals/showModal';
+import useShowModal from '../modals/showModal';
 import ConnectionModal from '../modals/ConnectionModal';
 import axios from '../utility/axios';
 import { filterName } from '@dbgate/datalib';
 import ConfirmModal from '../modals/ConfirmModal';
 import { useConfig } from '../utility/metadataLoaders';
 
-function Menu({ data, setOpenedConnections, openedConnections }) {
-  const config = useConfig();
+function Menu({ data, setOpenedConnections, openedConnections, config, showModal }) {
   const handleEdit = () => {
     showModal((modalState) => <ConnectionModal modalState={modalState} connection={data} />);
   };

packages/web/src/datagrid/DataFilterControl.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import keycodes from '../utility/keycodes';
 import { parseFilter, createMultiLineFilter } from '@dbgate/filterparser';
 import InlineButton from '../widgets/InlineButton';
-import showModal from '../modals/showModal';
+import useShowModal from '../modals/showModal';
 import FilterMultipleValuesModal from '../modals/FilterMultipleValuesModal';
 import SetFilterModal from '../modals/SetFilterModal';
 // import { $ } from '../../Utility/jquery';
@@ -167,6 +167,7 @@ function DropDownContent({ filterType, setFilter, filterMultipleValues, openFilt
 }
 
 export default function DataFilterControl({ isReadOnly = false, filterType, filter, setFilter }) {
+  const showModal = useShowModal();
   const [filterState, setFilterState] = React.useState('empty');
   const setFilterText = (filter) => {
     setFilter(filter);

packages/web/src/datagrid/DataGridCore.js

@@ -40,7 +40,7 @@ import DataGridContextMenu from './DataGridContextMenu';
 import useSocket from '../utility/SocketProvider';
 import LoadingInfo from '../widgets/LoadingInfo';
 import ErrorInfo from '../widgets/ErrorInfo';
-import showModal from '../modals/showModal';
+import useShowModal from '../modals/showModal';
 import ErrorMessageModal from '../modals/ErrorMessageModal';
 import ImportExportModal from '../modals/ImportExportModal';
 
@@ -249,6 +249,8 @@ export default function DataGridCore(props) {
     [selectedCells]
   );
 
+  const showModal = useShowModal();
+
   const handleLoadRowCount = async () => {
     const rowCount = await loadRowCount(props);
     setLoadProps((oldLoadProps) => ({

packages/web/src/modals/showModal.js

@@ -2,16 +2,43 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import useModalState from './useModalState';
 
-function ShowModalComponent({ renderModal, container }) {
+function ShowModalComponent({ renderModal, onClose }) {
   const modalState = useModalState(true);
   if (!modalState.isOpen) {
-    container.remove();
+    onClose();
   }
   return renderModal(modalState);
 }
 
-export default function showModal(renderModal) {
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  ReactDOM.render(<ShowModalComponent renderModal={renderModal} container={container} />, container);
+const Context = React.createContext(null);
+
+export function ModalLayerProvider({ children }) {
+  const [modals, setModals] = React.useState([]);
+  return <Context.Provider value={[modals, setModals]}>{children}</Context.Provider>;
+}
+
+export function ModalLayer() {
+  const [modals, setModals] = React.useContext(Context);
+  return (
+    <div>
+      {modals.map((modal, index) => (
+        <ShowModalComponent
+          key={index}
+          renderModal={modal}
+          onClose={() => setModals((x) => x.filter((y) => y != modal))}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default function useShowModal() {
+  const [modals, setModals] = React.useContext(Context);
+  const showModal = (renderModal) => {
+    setModals([...modals, renderModal]);
+  };
+  return showModal;
+  // const container = document.createElement('div');
+  // document.body.appendChild(container);
+  // ReactDOM.render(<ShowModalComponent renderModal={renderModal} container={container} />, container);
 }

packages/web/src/sqleditor/SqlEditor.js

@@ -5,7 +5,7 @@ import useDimensions from '../utility/useDimensions';
 import analyseQuerySources from './analyseQuerySources';
 import keycodes from '../utility/keycodes';
 import useCodeCompletion from './useCodeCompletion';
-import showModal from '../modals/showModal';
+import useShowModal from '../modals/showModal';
 import InsertJoinModal from '../modals/InsertJoinModal';
 import { getDatabaseInfo } from '../utility/metadataLoaders';
 
@@ -57,6 +57,7 @@ export default function SqlEditor({
   const ownEditorRef = React.useRef(null);
 
   const currentEditorRef = editorRef || ownEditorRef;
+  const showModal = useShowModal();
 
   useCodeCompletion({
     conid,

packages/web/src/utility/globalState.js

@@ -1,9 +1,10 @@
 import _ from 'lodash';
 import React from 'react';
 import useStorage from './useStorage';
-import { useConnectionInfo } from './metadataLoaders';
+import { useConnectionInfo, useConfig } from './metadataLoaders';
 import usePrevious from './usePrevious';
 import useNewQuery from '../query/useNewQuery';
+import useShowModal from '../modals/showModal';
 
 function createGlobalState(defaultValue) {
   const Context = React.createContext(null);
@@ -86,6 +87,8 @@ export function useAppObjectParams() {
   const setSavedSqlFiles = useSetSavedSqlFiles();
   const openedConnections = useOpenedConnections();
   const setOpenedConnections = useSetOpenedConnections();
+  const showModal = useShowModal();
+  const config = useConfig();
 
   return {
     setOpenedTabs,
@@ -95,6 +98,8 @@ export function useAppObjectParams() {
     setSavedSqlFiles,
     openedConnections,
     setOpenedConnections,
+    config,
+    showModal,
   };
 }