svg-layout-designer-react/src/Components/History/History.tsx

import * as React from 'react';
import { FixedSizeList as List } from 'react-window';
import { IHistoryState } from '../../Interfaces/IHistoryState';

interface IHistoryProps {
  history: IHistoryState[]
  historyCurrentStep: number
  isOpen: boolean
  jumpTo: (move: number) => void
}

export const History: React.FC<IHistoryProps> = (props: IHistoryProps) => {
  const isOpenClasses = props.isOpen ? 'right-0' : '-right-64';
  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 = step.LastAction;

    const selectedClass = reversedIndex === props.historyCurrentStep
      ? 'bg-blue-500 hover:bg-blue-600'
      : 'bg-slate-500 hover:bg-slate-700';

    return (
      <button
        key={reversedIndex}
        style={style}
        onClick={() => props.jumpTo(reversedIndex)}
        title={step.LastAction}
        className={
          `w-full elements-sidebar-row whitespace-pre overflow-hidden
            text-left text-sm font-medium transition-all ${selectedClass}`
        }
      >
        {desc}
      </button>
    );
  };

  return (
    <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>
      <List
        className='List overflow-x-hidden'
        itemCount={props.history.length}
        itemSize={35}
        height={window.innerHeight}
        width={256}
      >
        { Row }
      </List>
    </div>
  );
};