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

Merged PR 170: Add new eslint rules

Browse source 
- naming-convention
- prefer-arrow-callback
- func-style
- import/no-default-export
This commit is contained in:
Eric Nguyen 2022-08-26 16:13:21 +00:00
parent 3f58c5ba5e
commit ad126c6c28
65 changed files with 781 additions and 784 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/Components/ElementsSidebar/ElementsSidebar.tsx
View file

@ -2,37 +2,33 @@ import * as React from 'react';
import { FixedSizeList as List } from 'react-window';
import { Properties } from '../ContainerProperties/ContainerProperties';
import { IContainerModel } from '../../Interfaces/IContainerModel';
import { getDepth, MakeIterator } from '../../utils/itertools';
import { GetDepth, MakeIterator } from '../../utils/itertools';
import { Menu } from '../Menu/Menu';
import { MenuItem } from '../Menu/MenuItem';
import { useMouseEvents } from './MouseEventHandlers';
import { UseMouseEvents } from './MouseEventHandlers';
import { IPoint } from '../../Interfaces/IPoint';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { PropertyType } from '../../Enums/PropertyType';
interface IElementsSidebarProps {
MainContainer: IContainerModel
mainContainer: IContainerModel
symbols: Map<string, ISymbolModel>
isOpen: boolean
isHistoryOpen: boolean
SelectedContainer: IContainerModel | undefined
OnPropertyChange: (
selectedContainer: IContainerModel | undefined
onPropertyChange: (
key: string,
value: string | number | boolean,
type?: PropertyType
) => void
SelectContainer: (containerId: string) => void
DeleteContainer: (containerid: string) => void
selectContainer: (containerId: string) => void
deleteContainer: (containerid: string) => void
}
export const ElementsSidebar: React.FC<IElementsSidebarProps> = (
props: IElementsSidebarProps
): JSX.Element => {
export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
// States
const [isContextMenuOpen, setIsContextMenuOpen] =
React.useState<boolean>(false);
const [onClickContainerId, setOnClickContainerId] =
React.useState<string>('');
const [isContextMenuOpen, setIsContextMenuOpen] = React.useState<boolean>(false);
const [onClickContainerId, setOnClickContainerId] = React.useState<string>('');
const [contextMenuPosition, setContextMenuPosition] = React.useState<IPoint>({
x: 0,
y: 0
@ -41,7 +37,7 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (
const elementRef = React.useRef<HTMLDivElement>(null);
// Event listeners
useMouseEvents(
UseMouseEvents(
isContextMenuOpen,
elementRef,
setIsContextMenuOpen,
@ -55,30 +51,25 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (
isOpenClasses = props.isHistoryOpen ? 'right-64' : 'right-0';
}
const it = MakeIterator(props.MainContainer);
const it = MakeIterator(props.mainContainer);
const containers = [...it];
const Row = ({
index,
style
function Row({
index, style
}: {
index: number
style: React.CSSProperties
}): JSX.Element => {
}): JSX.Element {
const container = containers[index];
const depth: number = getDepth(container);
const depth: number = GetDepth(container);
const key = container.properties.id.toString();
const text =
container.properties.displayedText === key
? `${'|\t'.repeat(depth)} ${key}`
: `${'|\t'.repeat(depth)} ${
container.properties.displayedText
} (${key})`;
const selectedClass: string =
props.SelectedContainer !== undefined &&
props.SelectedContainer !== null &&
props.SelectedContainer.properties.id === container.properties.id
? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
: 'bg-slate-300/60 hover:bg-slate-300';
const text = container.properties.displayedText === key
? `${'|\t'.repeat(depth)} ${key}`
: `${'|\t'.repeat(depth)} ${container.properties.displayedText} (${key})`;
const selectedClass: string = props.selectedContainer !== undefined &&
props.selectedContainer !== null &&
props.selectedContainer.properties.id === container.properties.id
? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
: 'bg-slate-300/60 hover:bg-slate-300';
return (
<button type="button"
@ -87,12 +78,12 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (
id={key}
key={key}
style={style}
onClick={() => props.SelectContainer(container.properties.id)}
onClick={() => props.selectContainer(container.properties.id)}
>
{text}
</button>
);
};
}
return (
<div
@ -121,15 +112,13 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (
text="Delete"
onClick={() => {
setIsContextMenuOpen(false);
props.DeleteContainer(onClickContainerId);
}}
/>
props.deleteContainer(onClickContainerId);
} } />
</Menu>
<Properties
properties={props.SelectedContainer?.properties}
properties={props.selectedContainer?.properties}
symbols={props.symbols}
onChange={props.OnPropertyChange}
/>
onChange={props.onPropertyChange} />
</div>
);
};
}