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/History/History.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { IHistoryState } from "../../Interfaces/IHistoryState";
+import { FixedSizeList as List } from 'react-window';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
 
 interface IHistoryProps {
   history: IHistoryState[]
@@ -10,47 +11,47 @@ interface IHistoryProps {
 
 export const History: React.FC<IHistoryProps> = (props: IHistoryProps) => {
   const isOpenClasses = props.isOpen ? 'right-0' : '-right-64';
-
-  const states = props.history.map((step, move) => {
-    const desc = move > 0
-      ? `Go to modification n°${move}`
+  const Row = ({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element => {
+    const reversedIndex = (props.history.length - 1) - index;
+    const step = props.history[reversedIndex];
+    const desc = reversedIndex > 0
+      ? `${reversedIndex}: ${step.LastAction}`
       : 'Go to the beginning';
 
-    const isCurrent = move === props.historyCurrentStep;
-
-    const selectedClass = isCurrent
+    const selectedClass = reversedIndex === props.historyCurrentStep
       ? 'bg-blue-500 hover:bg-blue-600'
       : 'bg-slate-500 hover:bg-slate-700';
 
-    const isCurrentText = isCurrent
-      ? ' (current)'
-      : '';
     return (
-
       <button
-        key={move}
-        onClick={() => props.jumpTo(move)}
+        key={reversedIndex}
+        style={style}
+        onClick={() => props.jumpTo(reversedIndex)}
+        title={step.LastAction}
         className={
-          `w-full elements-sidebar-row whitespace-pre
+          `w-full elements-sidebar-row whitespace-pre overflow-hidden
             text-left text-sm font-medium transition-all ${selectedClass}`
         }
       >
-        {desc}{isCurrentText}
+        {desc}
       </button>
     );
-  });
-
-  // recent first
-  states.reverse();
+  };
 
   return (
-    <div className={`fixed flex flex-col bg-slate-300 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
+    <div className={`fixed flex flex-col bg-slate-300 text-white transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
       <div className='bg-slate-600 font-bold sidebar-title'>
           Timeline
       </div>
-      <div className='overflow-y-auto overflow-x-hidden text-slate-300 flex-grow divide-y divide-solid divide-slate-600'>
-        { states }
-      </div>
+      <List
+        className='List overflow-x-hidden'
+        itemCount={props.history.length}
+        itemSize={35}
+        height={window.innerHeight}
+        width={256}
+      >
+        { Row }
+      </List>
     </div>
   );
 };