Optimize history and fix nodes pollution + fix css + removes motion.framer (#28)

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/28

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { motion } from 'framer-motion';
+import { FixedSizeList as List } from 'react-window';
 import { Properties } from '../Properties/Properties';
 import ContainerProperties from '../../Interfaces/IProperties';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
@@ -21,45 +21,6 @@ interface IElementsSidebarProps {
   AddContainer: (index: number, type: string, parent: string) => void
 }
 
-function createRows(
-  container: IContainerModel,
-  props: IElementsSidebarProps,
-  containerRows: React.ReactNode[]
-): void {
-  const depth: number = getDepth(container);
-  const key = container.properties.id.toString();
-  const text = '|\t'.repeat(depth) + 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';
-
-  containerRows.push(
-    <motion.button
-      whileHover={{ scale: 1.05 }}
-      whileTap={{ scale: 1.2 }}
-      initial={{ opacity: 0, scale: 0 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transition={{
-        duration: 0.150
-      }}
-      className={
-        `w-full border-blue-500 elements-sidebar-row whitespace-pre
-          text-left text-sm font-medium transition-all ${selectedClass}`
-      }
-      id={key}
-      key={key}
-      onDrop={(event) => handleOnDrop(event, props.MainContainer, props.AddContainer)}
-      onDragOver={(event) => handleDragOver(event, props.MainContainer)}
-      onDragLeave={(event) => handleDragLeave(event)}
-      onClick={() => props.SelectContainer(container)}
-    >
-      { text }
-    </motion.button>
-  );
-};
-
 export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElementsSidebarProps): JSX.Element => {
   // States
   const [isContextMenuOpen, setIsContextMenuOpen] = React.useState<boolean>(false);
@@ -117,24 +78,55 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
       : 'right-0';
   }
 
-  const containerRows: React.ReactNode[] = [];
-
   const it = MakeIterator(props.MainContainer);
-  for (const container of it) {
-    createRows(
-      container,
-      props,
-      containerRows
-    );
-  }
+  const containers = [...it];
+  const Row = ({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element => {
+    const container = containers[index];
+    const depth: number = getDepth(container);
+    const key = container.properties.id.toString();
+    const text = '|\t'.repeat(depth) + 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
+        className={
+          `w-full border-blue-500 elements-sidebar-row whitespace-pre
+          text-left text-sm font-medium transition-all ${selectedClass}`
+        }
+        id={key}
+        key={key}
+        style={style}
+        onDrop={(event) => handleOnDrop(event, props.MainContainer, props.AddContainer)}
+        onDragOver={(event) => handleDragOver(event, props.MainContainer)}
+        onDragLeave={(event) => handleDragLeave(event)}
+        onClick={() => props.SelectContainer(container)}
+      >
+        { text }
+      </button>
+    );
+  };
+
+  const ROW_HEIGHT = 35;
+  const NUMBERS_OF_ROWS = 10;
   return (
-    <div className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-screen 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'>
           Elements
       </div>
-      <div ref={elementRef} className='overflow-y-auto overflow-x-hidden text-gray-800 flex-grow'>
-        { containerRows }
+      <div ref={elementRef} className='h-96 text-gray-800'>
+        <List
+          className='List'
+          itemCount={containers.length}
+          itemSize={35}
+          height={384}
+          width={256}
+        >
+          { Row }
+        </List>
       </div>
       <Menu
         className='transition-opacity rounded bg-slate-200 py-1 drop-shadow-xl'