dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-26 06:26:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

TabContent component split

Browse Source
This commit is contained in:
Jan Prochazka
2021-03-10 18:23:02 +01:00
parent fca23f65de
commit 0c94d7fcac
3 changed files with 70 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/Screen.svelte
View File

@@ -3,7 +3,7 @@
import WidgetIconPanel from './widgets/WidgetIconPanel.svelte'; import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
import { currentTheme, leftPanelWidth, selectedWidget, visibleCommandPalette, visibleToolbar } from './stores'; import { currentTheme, leftPanelWidth, selectedWidget, visibleCommandPalette, visibleToolbar } from './stores';
import TabsPanel from './widgets/TabsPanel.svelte'; import TabsPanel from './widgets/TabsPanel.svelte';
import TabContent from './TabContent.svelte'; import TabRegister from './TabRegister.svelte';
import CommandPalette from './commands/CommandPalette.svelte'; import CommandPalette from './commands/CommandPalette.svelte';
import Toolbar from './widgets/Toolbar.svelte'; import Toolbar from './widgets/Toolbar.svelte';
import splitterDrag from './utility/splitterDrag'; import splitterDrag from './utility/splitterDrag';
@@ -28,7 +28,7 @@
<TabsPanel /> <TabsPanel />
</div> </div>
<div class="content"> <div class="content">
<TabContent /> <TabRegister />
</div> </div>
{#if $selectedWidget} {#if $selectedWidget}
<div <div

59
packages/web/src/TabContent.svelte
View File

@@ -1,61 +1,12 @@
<script context="module" lang="ts">
function createTabComponent(selectedTab) {
const tabComponent = tabs[selectedTab.tabComponent]?.default;
if (tabComponent) {
return {
tabComponent,
props: selectedTab && selectedTab.props,
};
}
return null;
}
</script>
<script lang="ts"> <script lang="ts">
import _ from 'lodash'; export let tabid;
import { openedTabs } from './stores'; export let tabVisible;
import tabs from './tabs'; export let tabComponent;
let mountedTabs = {};
$: selectedTab = $openedTabs.find(x => x.selected && x.closedTime == null);
// cleanup closed tabs
$: {
if (
_.difference(
_.keys(mountedTabs),
_.map(
$openedTabs.filter(x => x.closedTime == null),
'tabid'
)
).length > 0
) {
mountedTabs = _.pickBy(mountedTabs, (v, k) => $openedTabs.find(x => x.tabid == k && x.closedTime == null));
}
}
// open missing tabs
$: {
if (selectedTab) {
const { tabid } = selectedTab;
if (tabid && !mountedTabs[tabid]) {
const newTab = createTabComponent(selectedTab);
if (newTab) {
mountedTabs = {
...mountedTabs,
[tabid]: newTab,
};
}
}
}
}
</script> </script>
{#each _.keys(mountedTabs) as tabid (tabid)} <div class:tabVisible>
<div class:tabVisible={tabid == (selectedTab && selectedTab.tabid)}> <svelte:component this={tabComponent} {...$$restProps} {tabid} {tabVisible} />
<svelte:component this={mountedTabs[tabid].tabComponent} {...mountedTabs[tabid].props} {tabid} />
</div> </div>
{/each}
<style> <style>
div { div {

62
packages/web/src/TabRegister.svelte Normal file
View File

@@ -0,0 +1,62 @@
<script context="module" lang="ts">
function createTabComponent(selectedTab) {
const tabComponent = tabs[selectedTab.tabComponent]?.default;
if (tabComponent) {
return {
tabComponent,
props: selectedTab && selectedTab.props,
};
}
return null;
}
</script>
<script lang="ts">
import _ from 'lodash';
import { openedTabs } from './stores';
import TabContent from './TabContent.svelte';
import tabs from './tabs';
let mountedTabs = {};
$: selectedTab = $openedTabs.find(x => x.selected && x.closedTime == null);
// cleanup closed tabs
$: {
if (
_.difference(
_.keys(mountedTabs),
_.map(
$openedTabs.filter(x => x.closedTime == null),
'tabid'
)
).length > 0
) {
mountedTabs = _.pickBy(mountedTabs, (v, k) => $openedTabs.find(x => x.tabid == k && x.closedTime == null));
}
}
// open missing tabs
$: {
if (selectedTab) {
const { tabid } = selectedTab;
if (tabid && !mountedTabs[tabid]) {
const newTab = createTabComponent(selectedTab);
if (newTab) {
mountedTabs = {
...mountedTabs,
[tabid]: newTab,
};
}
}
}
}
</script>
{#each _.keys(mountedTabs) as tabid (tabid)}
<TabContent
tabComponent={mountedTabs[tabid].tabComponent}
{...mountedTabs[tabid].props}
{tabid}
tabVisible={tabid == (selectedTab && selectedTab.tabid)}
/>
{/each}