Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 171: Refactor the multiple context menus into a single component + Fix eslint

Browse source 
Refactor the multiple context menus into a single component + Fix eslint
This commit is contained in:
Eric Nguyen 2022-08-29 15:03:47 +00:00
parent ad126c6c28
commit 87c4ea1fe5
8 changed files with 173 additions and 269 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/Components/SymbolsSidebar/SymbolsSidebar.tsx
View file

@ -1,9 +1,5 @@
import * as React from 'react';
import { FixedSizeList as List } from 'react-window';
import { Menu } from '../Menu/Menu';
import { MenuItem } from '../Menu/MenuItem';
import { UseMouseEvents } from './MouseEventHandlers';
import { IPoint } from '../../Interfaces/IPoint';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
@ -18,25 +14,6 @@ interface ISymbolsSidebarProps {
}
export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
// States
const [isContextMenuOpen, setIsContextMenuOpen] = React.useState<boolean>(false);
const [onClickSymbolId, setOnClickSymbolId] = React.useState<string>('');
const [contextMenuPosition, setContextMenuPosition] = React.useState<IPoint>({
x: 0,
y: 0
});
const elementRef = React.useRef<HTMLDivElement>(null);
// Event listeners
UseMouseEvents(
isContextMenuOpen,
elementRef,
setIsContextMenuOpen,
setOnClickSymbolId,
setContextMenuPosition
);
// Render
let isOpenClasses = '-right-64';
if (props.isOpen) {
@ -57,7 +34,7 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
return (
<button type="button"
className={`w-full border-blue-500 elements-sidebar-row whitespace-pre
className={`w-full border-blue-500 symbols-sidebar-row whitespace-pre
text-left text-sm font-medium transition-all ${selectedClass}`}
id={key}
key={key}
@ -74,7 +51,7 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
<div className='bg-slate-100 font-bold sidebar-title'>
Elements
</div>
<div ref={elementRef} className='h-96 text-gray-800'>
<div className='h-96 text-gray-800'>
<List
className='List divide-y divide-black'
itemCount={containers.length}
@ -85,17 +62,6 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
{Row}
</List>
</div>
<Menu
className='transition-opacity rounded bg-slate-200 py-1 drop-shadow-xl'
x={contextMenuPosition.x}
y={contextMenuPosition.y}
isOpen={isContextMenuOpen}
>
<MenuItem className='contextmenu-item' text='Delete' onClick={() => {
setIsContextMenuOpen(false);
props.deleteSymbol(onClickSymbolId);
} } />
</Menu>
<SymbolProperties
symbol={props.symbols.get(props.selectedSymbolId)}
symbols={props.symbols}