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

reference context menu

Browse Source
This commit is contained in:
Jan Prochazka
2020-12-27 12:05:21 +01:00
parent 8fccaffedb
commit ab0a551d67
2 changed files with 80 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/web/src/designer/DesignerReference.js
View File

@@ -3,6 +3,8 @@ import styled from 'styled-components';
import DomTableRef from './DomTableRef';
import _ from 'lodash';
import useTheme from '../theme/useTheme';
import { useShowMenu } from '../modals/showMenu';
import { DropDownMenuDivider, DropDownMenuItem } from '../modals/DropDownMenu';
const StyledSvg = styled.svg`
position: absolute;
@@ -35,8 +37,31 @@ const ReferenceText = styled.span`
background-color: ${(props) => props.theme.designer_background};
`;
export default function DesignerReference({ domTablesRef, designerId, sourceId, targetId, columns, changeToken }) {
function ReferenceContextMenu({ remove, setJoinType }) {
return (
<>
<DropDownMenuItem onClick={remove}>Remove</DropDownMenuItem>
<DropDownMenuDivider />
<DropDownMenuItem onClick={() => setJoinType('INNER JOIN')}>Set INNER JOIN</DropDownMenuItem>
<DropDownMenuItem onClick={() => setJoinType('LEFT JOIN')}>Set LEFT JOIN</DropDownMenuItem>
<DropDownMenuItem onClick={() => setJoinType('RIGHT JOIN')}>Set RIGHT JOIN</DropDownMenuItem>
<DropDownMenuItem onClick={() => setJoinType('FULL OUTER JOIN')}>Set FULL OUTER JOIN</DropDownMenuItem>
<DropDownMenuItem onClick={() => setJoinType('WHERE EXISTS')}>Set WHERE EXISTS</DropDownMenuItem>
<DropDownMenuItem onClick={() => setJoinType('WHERE NOT EXISTS')}>Set WHERE NOT EXISTS</DropDownMenuItem>
</>
);
}
export default function DesignerReference({
domTablesRef,
reference,
changeToken,
onRemoveReference,
onChangeReference,
}) {
const { designerId, sourceId, targetId, columns, joinType } = reference;
const theme = useTheme();
const showMenu = useShowMenu();
const domTables = domTablesRef.current;
/** @type {DomTableRef} */
const sourceTable = domTables[sourceId];
@@ -47,8 +72,6 @@ export default function DesignerReference({ domTablesRef, designerId, sourceId,
const targetRect = targetTable.getRect();
if (!sourceRect || !targetRect) return null;
const buswi = 10;
const extwi = 25;
@@ -73,6 +96,23 @@ export default function DesignerReference({ domTablesRef, designerId, sourceId,
const lineStyle = { fill: 'none', stroke: theme.designer_line, strokeWidth: 2 };
const handleContextMenu = (event) => {
event.preventDefault();
showMenu(
event.pageX,
event.pageY,
<ReferenceContextMenu
remove={() => onRemoveReference({ designerId })}
setJoinType={(joinType) => {
onChangeReference({
...reference,
joinType,
});
}}
/>
);
};
return (
<>
<StyledSvg>
@@ -116,8 +156,13 @@ export default function DesignerReference({ domTablesRef, designerId, sourceId,
left: (src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2 - 16,
top: (src.y + dst.y) / 2 - 16,
}}
onContextMenu={handleContextMenu}
>
<ReferenceText theme={theme}>inner join</ReferenceText>
<ReferenceText theme={theme}>
{_.snakeCase(joinType || 'INNER JOIN')
.replace('_', '\xa0')
.replace('_', '\xa0')}
</ReferenceText>
</ReferenceWrapper>
</>
);