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

Clean elementsSidebar and fix eslint
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Eric NGUYEN 2022-08-16 09:57:59 +02:00
parent dcfb93aa12
commit 3d7baafc17
3 changed files with 5 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.eslintrc.cjs
View file

@ -25,7 +25,8 @@ module.exports = {
rules: { rules: {
'space-before-function-paren': ['error', 'never'], 'space-before-function-paren': ['error', 'never'],
'@typescript-eslint/space-before-function-paren': ['error', 'never'], '@typescript-eslint/space-before-function-paren': ['error', 'never'],
indent: ['warn', 2, { SwitchCase: 1 }], indent: 'off',
'@typescript-eslint/indent': ['warn', 2, {SwitchCase: 1}],
semi: 'off', semi: 'off',
'@typescript-eslint/semi': ['warn', 'always'], '@typescript-eslint/semi': ['warn', 'always'],
'no-unused-vars': 'off', 'no-unused-vars': 'off',

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

@ -110,8 +110,6 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
); );
}; };
const ROW_HEIGHT = 35;
const NUMBERS_OF_ROWS = 10;
return ( return (
<div className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}> <div className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
<div className='bg-slate-100 font-bold sidebar-title'> <div className='bg-slate-100 font-bold sidebar-title'>

14
src/Components/ElementsSidebar/MouseEventHandlers.ts
View file

@ -36,9 +36,8 @@ export function handleLeftClick(
} }
export function removeBorderClasses(target: HTMLButtonElement): void { export function removeBorderClasses(target: HTMLButtonElement): void {
target.classList.remove('border-t-8'); const bordersClasses = ['border-t-8', 'border-8', 'border-b-8'];
target.classList.remove('border-8'); target.classList.remove(...bordersClasses);
target.classList.remove('border-b-8');
} }
export function handleDragLeave(event: React.DragEvent): void { export function handleDragLeave(event: React.DragEvent): void {
@ -54,26 +53,19 @@ export function handleDragOver(
const target: HTMLButtonElement = event.target as HTMLButtonElement; const target: HTMLButtonElement = event.target as HTMLButtonElement;
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
const y = event.clientY - rect.top; // y position within the element. const y = event.clientY - rect.top; // y position within the element.
removeBorderClasses(target);
if (target.id === mainContainer.properties.id) { if (target.id === mainContainer.properties.id) {
target.classList.add('border-8'); target.classList.add('border-8');
target.classList.remove('border-t-8');
target.classList.remove('border-b-8');
return; return;
} }
if (y < 12) { if (y < 12) {
target.classList.add('border-t-8'); target.classList.add('border-t-8');
target.classList.remove('border-b-8');
target.classList.remove('border-8');
} else if (y < 24) { } else if (y < 24) {
target.classList.add('border-8'); target.classList.add('border-8');
target.classList.remove('border-t-8');
target.classList.remove('border-b-8');
} else { } else {
target.classList.add('border-b-8'); target.classList.add('border-b-8');
target.classList.remove('border-8');
target.classList.remove('border-t-8');
} }
} }