diff --git a/packages/datalib/src/ChangeSet.ts b/packages/datalib/src/ChangeSet.ts index 3cb27415c..ea25708ff 100644 --- a/packages/datalib/src/ChangeSet.ts +++ b/packages/datalib/src/ChangeSet.ts @@ -77,6 +77,7 @@ export function setChangeSetValue( definition: ChangeSetFieldDefinition, value: string ): ChangeSet { + if (!changeSet || !definition) return changeSet; let [fieldName, existingItem] = findExistingChangeSetItem(changeSet, definition); if (fieldName == 'deletes') { changeSet = revertChangeSetRowChanges(changeSet, definition); diff --git a/packages/web/src/TabsPanel.js b/packages/web/src/TabsPanel.js index 2e2b70818..25970e9ff 100644 --- a/packages/web/src/TabsPanel.js +++ b/packages/web/src/TabsPanel.js @@ -1,3 +1,4 @@ +import _ from 'lodash'; import React from 'react'; import styled from 'styled-components'; import theme from './theme'; @@ -15,13 +16,17 @@ const FileTabItem = styled.div` border-right: 1px solid white; padding-left: 15px; padding-right: 15px; + flex-shrink: 1; + flex-grow: 0; + min-width: 10px; display: flex; align-items: center; cursor: pointer; + user-select: none; &:hover { color: ${theme.tabsPanel.hoverFont}; } - background-color: ${props => + background-color: ${(props) => // @ts-ignore props.selected ? theme.mainArea.background : 'inherit'}; `; @@ -30,21 +35,45 @@ const FileNameWrapper = styled.span` margin-left: 5px; `; +const CloseButton = styled.i` + margin-left: 5px; + color: gray; + &:hover { + color: ${theme.tabsPanel.hoverFont}; + } +`; + export default function TabsPanel() { const tabs = useOpenedTabs(); const setOpenedTabs = useSetOpenedTabs(); - const handleTabClick = tabid => { - setOpenedTabs(files => - files.map(x => ({ + const handleTabClick = (e, tabid) => { + if (e.target.closest('.tabCloseButton')) { + return; + } + setOpenedTabs((files) => + files.map((x) => ({ ...x, selected: x.tabid == tabid, })) ); }; + const closeTab = (tabid) => { + setOpenedTabs((files) => { + let index = _.findIndex(files, (x) => x.tabid == tabid); + const newFiles = files.filter((x) => x.tabid != tabid); + + if (!newFiles.find((x) => x.selected)) { + if (index >= newFiles.length) index -= 1; + if (index >= 0) newFiles[index].selected = true; + } + + return newFiles; + }); + }; const handleMouseUp = (e, tabid) => { if (e.button == 1) { - setOpenedTabs(files => files.filter(x => x.tabid != tabid)); + closeTab(tabid); } }; // console.log( @@ -54,16 +83,23 @@ export default function TabsPanel() { return ( <> - {tabs.map(tab => ( + {tabs.map((tab) => ( handleTabClick(tab.tabid)} - onMouseUp={e => handleMouseUp(e, tab.tabid)} + onClick={(e) => handleTabClick(e, tab.tabid)} + onMouseUp={(e) => handleMouseUp(e, tab.tabid)} > {getIconImage(tab.icon)} {tab.title} + { + e.preventDefault(); + closeTab(tab.tabid); + }} + /> ))} diff --git a/packages/web/src/widgets/Toolbar.js b/packages/web/src/widgets/Toolbar.js index db4f13f78..0bac77790 100644 --- a/packages/web/src/widgets/Toolbar.js +++ b/packages/web/src/widgets/Toolbar.js @@ -18,7 +18,7 @@ export default function ToolBar({ toolbarPortalRef }) { Add connection - Query + New Query );