keep opened tab content mounted

packages/datalib/src/GridDisplay.ts

@@ -138,7 +138,7 @@ export abstract class GridDisplay {
   getDisplayColumn(table: TableInfo, col: ColumnInfo, parentPath: string[]) {
     const uniquePath = [...parentPath, col.columnName];
     const uniqueName = uniquePath.join('.');
-    console.log('this.config.addedColumns', this.config.addedColumns, uniquePath);
+    // console.log('this.config.addedColumns', this.config.addedColumns, uniquePath);
     return {
       ...col,
       pureName: table.pureName,

packages/web/src/TabContent.js

@@ -1,18 +1,58 @@
 import React from 'react';
+import _ from 'lodash';
 import styled from 'styled-components';
-import theme from './theme';
 import tabs from './tabs';
-
 import { useOpenedTabs } from './utility/globalState';
 
+const TabContainer = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  visibility: ${props =>
+    // @ts-ignore
+    props.tabVisible ? 'visible' : 'hidden'};
+`;
+
+function createTabComponent(selectedTab) {
+  const TabComponent = tabs[selectedTab.tabComponent];
+  if (TabComponent) {
+    return {
+      TabComponent,
+      props: selectedTab.props,
+    };
+  }
+  return null;
+}
+
 export default function TabContent() {
   const files = useOpenedTabs();
 
-  const selectedTab = files.find(x => x.selected);
-  if (!selectedTab) return null;
+  const [mountedTabs, setMountedTabs] = React.useState({});
 
-  const TabComponent = tabs[selectedTab.tabComponent];
-  if (TabComponent) return <TabComponent {...selectedTab.props} />;
-
-  return null;
+  // cleanup closed tabs
+  if (_.difference(_.keys(mountedTabs), _.map(files, 'tabid')).length > 0) {
+    setMountedTabs(_.pickBy(mountedTabs, (v, k) => files.find(x => x.tabid == k)));
+  }
+
+  const selectedTab = files.find(x => x.selected);
+  if (selectedTab) {
+    const { tabid } = selectedTab;
+    if (tabid && !mountedTabs[tabid])
+      setMountedTabs({
+        ...mountedTabs,
+        [tabid]: createTabComponent(selectedTab),
+      });
+  }
+
+  return _.keys(mountedTabs).map(tabid => {
+    const { TabComponent, props } = mountedTabs[tabid];
+    return (
+      // @ts-ignore
+      <TabContainer key={tabid} tabVisible={tabid == (selectedTab && selectedTab.tabid)}>
+        <TabComponent {...props} />
+      </TabContainer>
+    );
+  });
 }

packages/web/src/datagrid/DataGridCore.js

@@ -310,7 +310,7 @@ export default function DataGridCore(props) {
     setCurrentCell(cell);
     setSelectedCells(getCellRange(cell, cell));
     setDragStartCell(cell);
-    console.log('START', cell);
+    // console.log('START', cell);
   }
 
   function handleGridMouseMove(event) {