mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

optimized switching between tabs

Browse Source
This commit is contained in:
Jan Prochazka 2021-01-14 10:06:01 +01:00
parent 2f2310a883
commit 9fe0c2ac86
1 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/web/src/TabContent.js
View File

@ -5,7 +5,7 @@ import tabs from './tabs';
import { useOpenedTabs } from './utility/globalState';
import ErrorBoundary from './utility/ErrorBoundary';
const TabContainer = styled.div`
const TabContainerStyled = styled.div`
position: absolute;
left: 0;
top: 0;
@ -17,6 +17,20 @@ const TabContainer = styled.div`
props.tabVisible ? 'visible' : 'hidden'};
`;
function TabContainer({ TabComponent, ...props }) {
const { tabVisible, tabid, toolbarPortalRef } = props;
return (
// @ts-ignore
<TabContainerStyled tabVisible={tabVisible}>
<ErrorBoundary>
<TabComponent {...props} tabid={tabid} tabVisible={tabVisible} toolbarPortalRef={toolbarPortalRef} />
</ErrorBoundary>
</TabContainerStyled>
);
}
const TabContainerMemo = React.memo(TabContainer);
function createTabComponent(selectedTab) {
const TabComponent = tabs[selectedTab.tabComponent];
if (TabComponent) {
@ -60,12 +74,14 @@ export default function TabContent({ toolbarPortalRef }) {
const { TabComponent, props } = mountedTabs[tabid];
const tabVisible = tabid == (selectedTab && selectedTab.tabid);
return (
// @ts-ignore
<TabContainer key={tabid} tabVisible={tabVisible}>
<ErrorBoundary>
<TabComponent {...props} tabid={tabid} tabVisible={tabVisible} toolbarPortalRef={toolbarPortalRef} />
</ErrorBoundary>
</TabContainer>
<TabContainerMemo
key={tabid}
{...props}
tabid={tabid}
tabVisible={tabVisible}
toolbarPortalRef={toolbarPortalRef}
TabComponent={TabComponent}
/>
);
});
}