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

toolbar improved - disabled buttons

Browse Source
This commit is contained in:
Jan Prochazka
2020-03-30 21:58:09 +02:00
parent 8f245ca40f
commit fdd0285c6f
3 changed files with 67 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/web/src/datagrid/DataGridToolbar.js
View File

@@ -1,19 +1,23 @@
import React from 'react'; import React from 'react';
import { ToolbarButton } from '../widgets/Toolbar'; import ToolbarButton from '../widgets/ToolbarButton';
import { changeSetContainsChanges } from '@dbgate/datalib'; import { changeSetContainsChanges } from '@dbgate/datalib';
export default function DataGridToolbar({ reload, changeSetState, dispatchChangeSet, save, revert }) { export default function DataGridToolbar({ reload, changeSetState, dispatchChangeSet, save, revert }) {
return ( 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 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>
</> </>
); );
} }

31
packages/web/src/widgets/Toolbar.js
View File

@@ -1,44 +1,17 @@
import ReactDOM from 'react-dom';
import React from 'react'; import React from 'react';
import useModalState from '../modals/useModalState'; import useModalState from '../modals/useModalState';
import ConnectionModal from '../modals/ConnectionModal'; import ConnectionModal from '../modals/ConnectionModal';
import styled from 'styled-components'; import styled from 'styled-components';
import theme from '../theme'; import ToolbarButton from './ToolbarButton';
import { useOpenedTabs } from '../utility/globalState';
const ToolbarContainer = styled.div` const ToolbarContainer = styled.div`
display: flex; display: flex;
user-select: none; 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 }) { export default function ToolBar({ toolbarPortalRef }) {
const modalState = useModalState(); 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 ( return (
<ToolbarContainer> <ToolbarContainer>
<ConnectionModal modalState={modalState} /> <ConnectionModal modalState={modalState} />

52
packages/web/src/widgets/ToolbarButton.js Normal file
View File

@@ -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>
);
}