Merged PR 170: Add new eslint rules
- naming-convention - prefer-arrow-callback - func-style - import/no-default-export
This commit is contained in:
Eric Nguyen
parent
3f58c5ba5e
commit
ad126c6c28
65 changed files with 781 additions and 784 deletions
|
|
@ -4,13 +4,13 @@ import { fireEvent, render, screen } from '../../utils/test-utils';
|
|||
import { ElementsSidebar } from './ElementsSidebar';
|
||||
import { IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { XPositionReference } from '../../Enums/XPositionReference';
|
||||
import { findContainerById } from '../../utils/itertools';
|
||||
import { FindContainerById } from '../../utils/itertools';
|
||||
|
||||
describe.concurrent('Elements sidebar', () => {
|
||||
it('With a MainContainer', () => {
|
||||
render(<ElementsSidebar
|
||||
symbols={new Map()}
|
||||
MainContainer={{
|
||||
mainContainer={{
|
||||
children: [],
|
||||
parent: null,
|
||||
properties: {
|
||||
|
|
@ -27,17 +27,17 @@ describe.concurrent('Elements sidebar', () => {
|
|||
type: 'type',
|
||||
maxWidth: Infinity,
|
||||
isFlex: false,
|
||||
XPositionReference: XPositionReference.Left,
|
||||
xPositionReference: XPositionReference.Left,
|
||||
isAnchor: false
|
||||
},
|
||||
userData: {}
|
||||
}}
|
||||
isOpen={true}
|
||||
isHistoryOpen={false}
|
||||
SelectedContainer={undefined}
|
||||
OnPropertyChange={() => {}}
|
||||
SelectContainer={() => {}}
|
||||
DeleteContainer={() => {}}
|
||||
selectedContainer={undefined}
|
||||
onPropertyChange={() => {}}
|
||||
selectContainer={() => {}}
|
||||
deleteContainer={() => {}}
|
||||
/>);
|
||||
|
||||
expect(screen.getByText(/Elements/i));
|
||||
|
|
@ -46,7 +46,7 @@ describe.concurrent('Elements sidebar', () => {
|
|||
});
|
||||
|
||||
it('With a selected MainContainer', () => {
|
||||
const MainContainer: IContainerModel = {
|
||||
const mainContainer: IContainerModel = {
|
||||
children: [],
|
||||
parent: null,
|
||||
properties: {
|
||||
|
|
@ -64,20 +64,20 @@ describe.concurrent('Elements sidebar', () => {
|
|||
maxWidth: Infinity,
|
||||
type: 'type',
|
||||
isAnchor: false,
|
||||
XPositionReference: XPositionReference.Left
|
||||
xPositionReference: XPositionReference.Left
|
||||
},
|
||||
userData: {}
|
||||
};
|
||||
|
||||
const { container } = render(<ElementsSidebar
|
||||
symbols={new Map()}
|
||||
MainContainer={MainContainer}
|
||||
mainContainer={mainContainer}
|
||||
isOpen={true}
|
||||
isHistoryOpen={false}
|
||||
SelectedContainer={MainContainer}
|
||||
OnPropertyChange={() => {}}
|
||||
SelectContainer={() => {}}
|
||||
DeleteContainer={() => {}}
|
||||
selectedContainer={mainContainer}
|
||||
onPropertyChange={() => {}}
|
||||
selectContainer={() => {}}
|
||||
deleteContainer={() => {}}
|
||||
/>);
|
||||
|
||||
expect(screen.getByText(/Elements/i));
|
||||
|
|
@ -94,22 +94,22 @@ describe.concurrent('Elements sidebar', () => {
|
|||
const propertyY = container.querySelector('#y');
|
||||
const propertyWidth = container.querySelector('#width');
|
||||
const propertyHeight = container.querySelector('#height');
|
||||
expect((propertyId as HTMLInputElement).value).toBe(MainContainer.properties.id.toString());
|
||||
expect((propertyId as HTMLInputElement).value).toBe(mainContainer.properties.id.toString());
|
||||
expect(propertyParentId).toBeDefined();
|
||||
expect((propertyParentId as HTMLInputElement).value).toBe('');
|
||||
expect(propertyX).toBeDefined();
|
||||
expect((propertyX as HTMLInputElement).value).toBe(MainContainer.properties.x.toString());
|
||||
expect((propertyX as HTMLInputElement).value).toBe(mainContainer.properties.x.toString());
|
||||
expect(propertyY).toBeDefined();
|
||||
expect((propertyY as HTMLInputElement).value).toBe(MainContainer.properties.y.toString());
|
||||
expect((propertyY as HTMLInputElement).value).toBe(mainContainer.properties.y.toString());
|
||||
expect(propertyWidth).toBeDefined();
|
||||
expect((propertyWidth as HTMLInputElement).value).toBe(MainContainer.properties.width.toString());
|
||||
expect((propertyWidth as HTMLInputElement).value).toBe(mainContainer.properties.width.toString());
|
||||
expect(propertyHeight).toBeDefined();
|
||||
expect((propertyHeight as HTMLInputElement).value).toBe(MainContainer.properties.height.toString());
|
||||
expect((propertyHeight as HTMLInputElement).value).toBe(mainContainer.properties.height.toString());
|
||||
});
|
||||
|
||||
it('With multiple containers', () => {
|
||||
const children: IContainerModel[] = [];
|
||||
const MainContainer: IContainerModel = {
|
||||
const mainContainer: IContainerModel = {
|
||||
children,
|
||||
parent: null,
|
||||
properties: {
|
||||
|
|
@ -122,7 +122,7 @@ describe.concurrent('Elements sidebar', () => {
|
|||
minWidth: 1,
|
||||
width: 2000,
|
||||
height: 100,
|
||||
XPositionReference: XPositionReference.Left,
|
||||
xPositionReference: XPositionReference.Left,
|
||||
margin: {},
|
||||
isFlex: false,
|
||||
maxWidth: Infinity,
|
||||
|
|
@ -135,7 +135,7 @@ describe.concurrent('Elements sidebar', () => {
|
|||
children.push(
|
||||
{
|
||||
children: [],
|
||||
parent: MainContainer,
|
||||
parent: mainContainer,
|
||||
properties: {
|
||||
id: 'child-1',
|
||||
parentId: 'main',
|
||||
|
|
@ -151,7 +151,7 @@ describe.concurrent('Elements sidebar', () => {
|
|||
maxWidth: Infinity,
|
||||
type: 'type',
|
||||
isAnchor: false,
|
||||
XPositionReference: XPositionReference.Left
|
||||
xPositionReference: XPositionReference.Left
|
||||
},
|
||||
userData: {}
|
||||
}
|
||||
|
|
@ -160,7 +160,7 @@ describe.concurrent('Elements sidebar', () => {
|
|||
children.push(
|
||||
{
|
||||
children: [],
|
||||
parent: MainContainer,
|
||||
parent: mainContainer,
|
||||
properties: {
|
||||
id: 'child-2',
|
||||
parentId: 'main',
|
||||
|
|
@ -172,7 +172,7 @@ describe.concurrent('Elements sidebar', () => {
|
|||
minWidth: 1,
|
||||
width: 0,
|
||||
height: 0,
|
||||
XPositionReference: XPositionReference.Left,
|
||||
xPositionReference: XPositionReference.Left,
|
||||
isFlex: false,
|
||||
maxWidth: Infinity,
|
||||
type: 'type',
|
||||
|
|
@ -184,13 +184,13 @@ describe.concurrent('Elements sidebar', () => {
|
|||
|
||||
render(<ElementsSidebar
|
||||
symbols={new Map()}
|
||||
MainContainer={MainContainer}
|
||||
mainContainer={mainContainer}
|
||||
isOpen={true}
|
||||
isHistoryOpen={false}
|
||||
SelectedContainer={MainContainer}
|
||||
OnPropertyChange={() => {}}
|
||||
SelectContainer={() => {}}
|
||||
DeleteContainer={() => {}}
|
||||
selectedContainer={mainContainer}
|
||||
onPropertyChange={() => {}}
|
||||
selectContainer={() => {}}
|
||||
deleteContainer={() => {}}
|
||||
/>);
|
||||
|
||||
expect(screen.getByText(/Elements/i));
|
||||
|
|
@ -202,7 +202,7 @@ describe.concurrent('Elements sidebar', () => {
|
|||
|
||||
it('With multiple containers, change selection', () => {
|
||||
const children: IContainerModel[] = [];
|
||||
const MainContainer: IContainerModel = {
|
||||
const mainContainer: IContainerModel = {
|
||||
children,
|
||||
parent: null,
|
||||
properties: {
|
||||
|
|
@ -215,7 +215,7 @@ describe.concurrent('Elements sidebar', () => {
|
|||
minWidth: 1,
|
||||
width: 2000,
|
||||
height: 100,
|
||||
XPositionReference: XPositionReference.Left,
|
||||
xPositionReference: XPositionReference.Left,
|
||||
margin: {},
|
||||
isFlex: false,
|
||||
maxWidth: Infinity,
|
||||
|
|
@ -227,7 +227,7 @@ describe.concurrent('Elements sidebar', () => {
|
|||
|
||||
const child1Model: IContainerModel = {
|
||||
children: [],
|
||||
parent: MainContainer,
|
||||
parent: mainContainer,
|
||||
properties: {
|
||||
id: 'child-1',
|
||||
parentId: 'main',
|
||||
|
|
@ -238,7 +238,7 @@ describe.concurrent('Elements sidebar', () => {
|
|||
minWidth: 1,
|
||||
width: 0,
|
||||
height: 0,
|
||||
XPositionReference: XPositionReference.Left,
|
||||
xPositionReference: XPositionReference.Left,
|
||||
margin: {},
|
||||
isFlex: false,
|
||||
maxWidth: Infinity,
|
||||
|
|
@ -249,20 +249,20 @@ describe.concurrent('Elements sidebar', () => {
|
|||
};
|
||||
children.push(child1Model);
|
||||
|
||||
let SelectedContainer: IContainerModel | undefined = MainContainer;
|
||||
let selectedContainer: IContainerModel | undefined = mainContainer;
|
||||
const selectContainer = vi.fn((containerId: string) => {
|
||||
SelectedContainer = findContainerById(MainContainer, containerId);
|
||||
selectedContainer = FindContainerById(mainContainer, containerId);
|
||||
});
|
||||
|
||||
const { container, rerender } = render(<ElementsSidebar
|
||||
symbols={new Map()}
|
||||
MainContainer={MainContainer}
|
||||
mainContainer={mainContainer}
|
||||
isOpen={true}
|
||||
isHistoryOpen={false}
|
||||
SelectedContainer={SelectedContainer}
|
||||
OnPropertyChange={() => {}}
|
||||
SelectContainer={selectContainer}
|
||||
DeleteContainer={() => {}}
|
||||
selectedContainer={selectedContainer}
|
||||
onPropertyChange={() => {}}
|
||||
selectContainer={selectContainer}
|
||||
deleteContainer={() => {}}
|
||||
/>);
|
||||
|
||||
expect(screen.getByText(/Elements/i));
|
||||
|
|
@ -272,20 +272,20 @@ describe.concurrent('Elements sidebar', () => {
|
|||
expect(child1);
|
||||
const propertyId = container.querySelector('#id');
|
||||
const propertyParentId = container.querySelector('#parentId');
|
||||
expect((propertyId as HTMLInputElement).value).toBe(MainContainer.properties.id.toString());
|
||||
expect((propertyId as HTMLInputElement).value).toBe(mainContainer.properties.id.toString());
|
||||
expect((propertyParentId as HTMLInputElement).value).toBe('');
|
||||
|
||||
fireEvent.click(child1);
|
||||
|
||||
rerender(<ElementsSidebar
|
||||
symbols={new Map()}
|
||||
MainContainer={MainContainer}
|
||||
mainContainer={mainContainer}
|
||||
isOpen={true}
|
||||
isHistoryOpen={false}
|
||||
SelectedContainer={SelectedContainer}
|
||||
OnPropertyChange={() => {}}
|
||||
SelectContainer={selectContainer}
|
||||
DeleteContainer={() => {}}
|
||||
selectedContainer={selectedContainer}
|
||||
onPropertyChange={() => {}}
|
||||
selectContainer={selectContainer}
|
||||
deleteContainer={() => {}}
|
||||
/>);
|
||||
|
||||
expect((propertyId as HTMLInputElement).value === 'main').toBeFalsy();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { RefObject, Dispatch, SetStateAction, useEffect } from 'react';
|
||||
import { IPoint } from '../../Interfaces/IPoint';
|
||||
|
||||
export function useMouseEvents(
|
||||
export function UseMouseEvents(
|
||||
isContextMenuOpen: boolean,
|
||||
elementRef: RefObject<HTMLDivElement>,
|
||||
setIsContextMenuOpen: Dispatch<SetStateAction<boolean>>,
|
||||
|
|
@ -9,44 +9,48 @@ export function useMouseEvents(
|
|||
setContextMenuPosition: Dispatch<SetStateAction<IPoint>>
|
||||
): void {
|
||||
useEffect(() => {
|
||||
const onContextMenu = (event: MouseEvent): void => handleRightClick(
|
||||
event,
|
||||
setIsContextMenuOpen,
|
||||
setOnClickContainerId,
|
||||
setContextMenuPosition
|
||||
);
|
||||
function OnContextMenu(event: MouseEvent): void {
|
||||
return HandleRightClick(
|
||||
event,
|
||||
setIsContextMenuOpen,
|
||||
setOnClickContainerId,
|
||||
setContextMenuPosition
|
||||
);
|
||||
}
|
||||
|
||||
const onLeftClick = (): void => handleLeftClick(
|
||||
isContextMenuOpen,
|
||||
setIsContextMenuOpen,
|
||||
setOnClickContainerId
|
||||
);
|
||||
function OnLeftClick(): void {
|
||||
return HandleLeftClick(
|
||||
isContextMenuOpen,
|
||||
setIsContextMenuOpen,
|
||||
setOnClickContainerId
|
||||
);
|
||||
}
|
||||
|
||||
elementRef.current?.addEventListener(
|
||||
'contextmenu',
|
||||
onContextMenu
|
||||
OnContextMenu
|
||||
);
|
||||
|
||||
window.addEventListener(
|
||||
'click',
|
||||
onLeftClick
|
||||
OnLeftClick
|
||||
);
|
||||
|
||||
return () => {
|
||||
elementRef.current?.removeEventListener(
|
||||
'contextmenu',
|
||||
onContextMenu
|
||||
OnContextMenu
|
||||
);
|
||||
|
||||
window.removeEventListener(
|
||||
'click',
|
||||
onLeftClick
|
||||
OnLeftClick
|
||||
);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export function handleRightClick(
|
||||
export function HandleRightClick(
|
||||
event: MouseEvent,
|
||||
setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,
|
||||
setOnClickContainerId: React.Dispatch<React.SetStateAction<string>>,
|
||||
|
|
@ -66,7 +70,7 @@ export function handleRightClick(
|
|||
setContextMenuPosition(contextMenuPosition);
|
||||
}
|
||||
|
||||
export function handleLeftClick(
|
||||
export function HandleLeftClick(
|
||||
isContextMenuOpen: boolean,
|
||||
setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,
|
||||
setOnClickContainerId: React.Dispatch<React.SetStateAction<string>>
|
||||
|
|
@ -78,4 +82,3 @@ export function handleLeftClick(
|
|||
setIsContextMenuOpen(false);
|
||||
setOnClickContainerId('');
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue