diff --git a/webapp/packages/core-blocks/src/Tabs/VerticalTabs/verticalTabStyles.ts b/webapp/packages/core-blocks/src/Tabs/Tab/verticalTabStyles.ts similarity index 100% rename from webapp/packages/core-blocks/src/Tabs/VerticalTabs/verticalTabStyles.ts rename to webapp/packages/core-blocks/src/Tabs/Tab/verticalTabStyles.ts diff --git a/webapp/packages/core-blocks/src/Tabs/TabsContainer/TabsContainer.ts b/webapp/packages/core-blocks/src/Tabs/TabsContainer/TabsContainer.ts index ef95191fa1..2b25108fe0 100644 --- a/webapp/packages/core-blocks/src/Tabs/TabsContainer/TabsContainer.ts +++ b/webapp/packages/core-blocks/src/Tabs/TabsContainer/TabsContainer.ts @@ -28,13 +28,13 @@ implements ITabsContainer { private currentTabId: string | null; constructor() { + this.tabInfoMap = new Map(); + this.currentTabId = null; + makeObservable, 'currentTabId'>(this, { tabInfoMap: observable.shallow, currentTabId: observable, }); - - this.tabInfoMap = new Map(); - this.currentTabId = null; } has(tabId: string): boolean { diff --git a/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabHeader.tsx b/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabHeader.tsx deleted file mode 100644 index 27ada4c91a..0000000000 --- a/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabHeader.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ - -import { observer } from 'mobx-react-lite'; -import styled from 'reshadow'; - -import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming'; - -import type { ITab } from '../ITab'; -import { Tab } from '../Tab/Tab'; -import { TabIcon } from '../Tab/TabIcon'; -import { TabTitle } from '../Tab/TabTitle'; -import { verticalTabStyles } from './verticalTabStyles'; - -interface IProps extends Omit, 'style'> { - tab: ITab; - style: ComponentStyle; -} - -export const VerticalTabHeader = observer(function VerticalTabHeader({ tab, style, ...props }) { - return styled(useStyles(verticalTabStyles, style))( - - {tab.icon && } - {tab.title} - - ); -}); diff --git a/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabPanel.tsx b/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabPanel.tsx deleted file mode 100644 index b167f5aa55..0000000000 --- a/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabPanel.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ - -import { observer } from 'mobx-react-lite'; -import styled from 'reshadow'; - -import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming'; - -import type { ITab } from '../ITab'; -import { TabPanel } from '../TabPanel'; -import { verticalTabStyles } from './verticalTabStyles'; - -interface IProps extends Omit, 'style'> { - tab: ITab; - style: ComponentStyle; -} - -export const VerticalTabPanel = observer(function VerticalTabPanel({ tab, style }) { - const Panel = tab.panel; - - return styled(useStyles(verticalTabStyles, style))( - - - - ); -}); diff --git a/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabs.tsx b/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabs.tsx deleted file mode 100644 index d1dc4bdeb9..0000000000 --- a/webapp/packages/core-blocks/src/Tabs/VerticalTabs/VerticalTabs.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ - -import { observer } from 'mobx-react-lite'; -import styled from 'reshadow'; - -import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming'; - -import type { ITabContainer } from '../ITab'; -import { TabList } from '../TabList'; -import { TabsState } from '../TabsState'; -import { VerticalTabHeader } from './VerticalTabHeader'; -import { VerticalTabPanel } from './VerticalTabPanel'; -import { verticalTabStyles } from './verticalTabStyles'; - -interface IProps extends Omit, 'style'> { - tabContainer: ITabContainer; - style: ComponentStyle; -} - -export const VerticalTabs = observer(function VerticalTabs({ tabContainer, style, ...props }) { - return styled(useStyles(verticalTabStyles, style))( - - - - {tabContainer.tabs.map(tab => ( - - ))} - - {tabContainer.tabs.map(tab => ( - - ))} - - - ); -}); diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts index 691c620bf1..0b116b11c8 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -74,13 +74,11 @@ export * from './Tabs/Tab/TabTitle'; export * from './Tabs/Tab/useTab'; export * from './Tabs/Tab/verticalRotatedTabStyles'; export * from './Tabs/Tab/UnderlineTabStyles'; +export * from './Tabs/Tab/verticalTabStyles'; export * from './Tabs/TabsBox/TabsBox'; export * from './Tabs/TabsBox/TabsBoxFromArray'; -export * from './Tabs/VerticalTabs/VerticalTabs'; -export * from './Tabs/VerticalTabs/verticalTabStyles'; - export * from './Tree/TreeNode/EventTreeNodeExpandFlag'; export * from './Tree/TreeNode/EventTreeNodeSelectFlag'; export * from './Tree/TreeNode/TreeNode'; diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectFolders.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectFolders.tsx index 5d9aa6555a..a0dcc9f6ec 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectFolders.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectFolders.tsx @@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite'; import styled, { css } from 'reshadow'; import type { ITab } from '@cloudbeaver/core-app'; -import { VerticalTabs } from '@cloudbeaver/core-blocks'; +import { Tab, TabIcon, TabList, TabPanel, TabsState, TabTitle, verticalTabStyles } from '@cloudbeaver/core-blocks'; import { useController } from '@cloudbeaver/core-di'; import { useStyles, composes } from '@cloudbeaver/core-theming'; @@ -22,7 +22,7 @@ const styles = composes( TabList { composes: theme-background-surface theme-text-on-surface theme-border-color-background from global; } - VerticalTabs { + vertical-tabs { composes: theme-border-color-background from global; } Tab { @@ -33,7 +33,7 @@ const styles = composes( Tab { color: inherit; } - VerticalTabs { + vertical-tabs { border-top: 1px solid; flex: 1; } @@ -53,5 +53,30 @@ interface IProps { export const ObjectFolders = observer(function ObjectFolders({ tab }) { const controller = useController(ObjectFoldersController, tab); - return styled(useStyles(styles))(); + const tabContainer = controller.getTabContainer(); + + return styled(useStyles(verticalTabStyles, styles))( + + + + {tabContainer.tabs.map(tab => ( + + {tab.icon && } + {tab.title} + + ))} + + {tabContainer.tabs.map(tab => ( + + + + ))} + + + ); });