toolbar improved - disabled buttons

packages/web/src/datagrid/DataGridToolbar.js

@@ -1,19 +1,23 @@
 import React from 'react';
-import { ToolbarButton } from '../widgets/Toolbar';
+import ToolbarButton from '../widgets/ToolbarButton';
 import { changeSetContainsChanges } from '@dbgate/datalib';
 
 export default function DataGridToolbar({ reload, changeSetState, dispatchChangeSet, save, revert }) {
   return (
     <>
-      {changeSetState.canUndo && (
-        <ToolbarButton onClick={() => dispatchChangeSet({ type: 'undo' })}>Undo</ToolbarButton>
-      )}
-      {changeSetState.canRedo && (
-        <ToolbarButton onClick={() => dispatchChangeSet({ type: 'redo' })}>Redo</ToolbarButton>
-      )}
-      {changeSetContainsChanges(changeSetState.value) && <ToolbarButton onClick={save}>Save</ToolbarButton>}
-      {changeSetContainsChanges(changeSetState.value) && <ToolbarButton onClick={revert}>Revert</ToolbarButton>}
       <ToolbarButton onClick={reload}>Refresh</ToolbarButton>
+      <ToolbarButton disabled={!changeSetState.canUndo} onClick={() => dispatchChangeSet({ type: 'undo' })}>
+        Undo
+      </ToolbarButton>
+      <ToolbarButton disabled={!changeSetState.canRedo} onClick={() => dispatchChangeSet({ type: 'redo' })}>
+        Redo
+      </ToolbarButton>
+      <ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={save}>
+        Save
+      </ToolbarButton>
+      <ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={revert}>
+        Revert
+      </ToolbarButton>
     </>
   );
 }

packages/web/src/widgets/Toolbar.js

@@ -1,44 +1,17 @@
-import ReactDOM from 'react-dom';
 import React from 'react';
 import useModalState from '../modals/useModalState';
 import ConnectionModal from '../modals/ConnectionModal';
 import styled from 'styled-components';
-import theme from '../theme';
-import { useOpenedTabs } from '../utility/globalState';
+import ToolbarButton from './ToolbarButton';
 
 const ToolbarContainer = styled.div`
   display: flex;
   user-select: none;
 `;
 
-export const ToolbarButton = styled.div`
-  // height: ${theme.toolBar.height - 5}px;
-  // border: 1px solid gray;
-  padding: 5px;
-  margin: 2px;
-  //background-color: #777;
-  background-color: #337ab7;
-  border-color: #2e6da4;  color: white;
-  border-radius: 2px;
-
-  &:hover {
-    background-color: #286090;
-  }
-`;
-
 export default function ToolBar({ toolbarPortalRef }) {
   const modalState = useModalState();
-  const tabs = useOpenedTabs();
-  const selectedTab = tabs.find(x => x.selected);
-//   React.useEffect(() => {
-//     const node = toolbarPortalRef.current;
-//     if (node) {
-//       ReactDOM.unmountComponentAtNode(node);
-//       while (node.lastElementChild) {
-//         node.removeChild(node.lastElementChild);
-//       }
-//     }
-//   }, [selectedTab]);
+
   return (
     <ToolbarContainer>
       <ConnectionModal modalState={modalState} />

packages/web/src/widgets/ToolbarButton.js

@@ -0,0 +1,52 @@
+// @ts-nocheck
+import ReactDOM from 'react-dom';
+import React from 'react';
+import useModalState from '../modals/useModalState';
+import ConnectionModal from '../modals/ConnectionModal';
+import styled from 'styled-components';
+import theme from '../theme';
+import { useOpenedTabs } from '../utility/globalState';
+
+const ButtonDiv = styled.div`
+  // height: ${theme.toolBar.height - 5}px;
+  // border: 1px solid gray;
+  padding: 5px;
+  margin: 2px;
+  //background-color: #777;
+  background-color: #337ab7;
+  border-color: #2e6da4;  color: white;
+  border-radius: 2px;
+
+  ${props =>
+    !props.disabled &&
+    `
+  &:hover {
+    background-color: #286090;
+  }
+
+  &:active:hover {
+    background-color: #204d74;
+  }
+  `}
+
+  ${props =>
+    props.disabled &&
+    `
+    background-color: #ccc;
+    color: gray;
+  `}
+  
+`;
+
+export default function ToolbarButton({ children, onClick, disabled = undefined }) {
+  return (
+    <ButtonDiv
+      onClick={() => {
+        if (!disabled && onClick) onClick();
+      }}
+      disabled={disabled}
+    >
+      {children}
+    </ButtonDiv>
+  );
+}