datagrid toolbar using portals

packages/web/src/Screen.js

@@ -69,10 +69,11 @@ const StausBar = styled.div`
 export default function Screen() {
   const currentWidget = useCurrentWidget();
   const leftPanelWidth = currentWidget ? theme.leftPanel.width : 0;
+  const toolbarPortalRef = React.useRef();
   return (
     <>
       <ToolBarDiv>
-        <ToolBar />
+        <ToolBar toolbarPortalRef={toolbarPortalRef} />
       </ToolBarDiv>
       <IconBar>
         <WidgetIconPanel />
@@ -86,7 +87,7 @@ export default function Screen() {
         <TabsPanel></TabsPanel>
       </TabsPanelContainer>
       <BodyDiv leftPanelWidth={leftPanelWidth}>
-        <TabContent />
+        <TabContent toolbarPortalRef={toolbarPortalRef} />
       </BodyDiv>
       <StausBar></StausBar>
     </>

packages/web/src/TabContent.js

@@ -26,7 +26,7 @@ function createTabComponent(selectedTab) {
   return null;
 }
 
-export default function TabContent() {
+export default function TabContent({ toolbarPortalRef }) {
   const files = useOpenedTabs();
 
   const [mountedTabs, setMountedTabs] = React.useState({});
@@ -52,7 +52,7 @@ export default function TabContent() {
     return (
       // @ts-ignore
       <TabContainer key={tabid} tabVisible={tabVisible}>
-        <TabComponent {...props} tabVisible={tabVisible} />
+        <TabComponent {...props} tabVisible={tabVisible} toolbarPortalRef={toolbarPortalRef} />
       </TabContainer>
     );
   });

packages/web/src/datagrid/DataGridCore.js

@@ -1,6 +1,7 @@
 import moment from 'moment';
 import _ from 'lodash';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import useFetch from '../utility/useFetch';
 import styled from 'styled-components';
 import theme from '../theme';
@@ -39,6 +40,7 @@ import {
 import { scriptToSql } from '@dbgate/sqltree';
 import { sleep } from '../utility/common';
 import { copyTextToClipboard } from '../utility/clipboard';
+import DataGridToolbar from './DataGridToolbar';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -906,6 +908,9 @@ export default function DataGridCore(props) {
         engine={display.engine}
         onConfirm={handleConfirmSql}
       />
+      {props.toolbarPortalRef &&
+        tabVisible &&
+        ReactDOM.createPortal(<DataGridToolbar reload={reload} />, props.toolbarPortalRef.current)}
     </GridContainer>
   );
 }

packages/web/src/datagrid/DataGridToolbar.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ToolbarButton } from '../widgets/Toolbar';
+
+export default function DataGridToolbar({ reload }) {
+  return <ToolbarButton onClick={reload}>Refresh</ToolbarButton>;
+}

packages/web/src/datagrid/types.ts

@@ -7,4 +7,5 @@ export interface DataGridProps {
   tabVisible?: boolean;
   changeSetState: { value: ChangeSet };
   dispatchChangeSet: Function;
+  toolbarPortalRef: any;
 }

packages/web/src/tabs/TableDataTab.js

@@ -10,7 +10,7 @@ import engines from '@dbgate/engines';
 import getTableInfo from '../utility/getTableInfo';
 import useUndoReducer from '../utility/useUndoReducer';
 
-export default function TableDataTab({ conid, database, schemaName, pureName, tabVisible }) {
+export default function TableDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef }) {
   const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
   const [config, setConfig] = React.useState(createGridConfig());
   const [cache, setCache] = React.useState(createGridCache());
@@ -40,6 +40,7 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
       tabVisible={tabVisible}
       changeSetState={changeSetState}
       dispatchChangeSet={dispatchChangeSet}
+      toolbarPortalRef={toolbarPortalRef}
     />
   );
 }

packages/web/src/widgets/Toolbar.js

@@ -1,15 +1,17 @@
+import ReactDOM from 'react-dom';
 import React from 'react';
 import useModalState from '../modals/useModalState';
 import ConnectionModal from '../modals/ConnectionModal';
 import styled from 'styled-components';
 import theme from '../theme';
+import { useOpenedTabs } from '../utility/globalState';
 
 const ToolbarContainer = styled.div`
   display: flex;
   user-select: none;
 `;
 
-const ToolbarButton = styled.div`
+export const ToolbarButton = styled.div`
   // height: ${theme.toolBar.height - 5}px;
   // border: 1px solid gray;
   padding: 5px;
@@ -22,15 +24,26 @@ const ToolbarButton = styled.div`
   &:hover {
     background-color: #286090;
   }
-
 `;
 
-export default function ToolBar() {
+export default function ToolBar({ toolbarPortalRef }) {
   const modalState = useModalState();
+  const tabs = useOpenedTabs();
+  const selectedTab = tabs.find(x => x.selected);
+//   React.useEffect(() => {
+//     const node = toolbarPortalRef.current;
+//     if (node) {
+//       ReactDOM.unmountComponentAtNode(node);
+//       while (node.lastElementChild) {
+//         node.removeChild(node.lastElementChild);
+//       }
+//     }
+//   }, [selectedTab]);
   return (
     <ToolbarContainer>
       <ConnectionModal modalState={modalState} />
       <ToolbarButton onClick={modalState.open}>Add connection</ToolbarButton>
+      <ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
     </ToolbarContainer>
   );
 }