47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import * as React from 'react';
|
|
import { FixedSizeList as List } from 'react-window';
|
|
import { type IHistoryState } from '../../Interfaces/IHistoryState';
|
|
import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
|
|
|
|
interface IHistoryProps {
|
|
history: IHistoryState[]
|
|
historyCurrentStep: number
|
|
jumpTo: (move: number) => void
|
|
}
|
|
|
|
export function History(props: IHistoryProps): JSX.Element {
|
|
function 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: string = reversedIndex === props.historyCurrentStep
|
|
? 'border-l-4 bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 hover:shadow-blue-500 text-slate-50'
|
|
: 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400';
|
|
|
|
return (
|
|
<button type="button"
|
|
key={reversedIndex}
|
|
style={style}
|
|
onClick={() => { props.jumpTo(reversedIndex); }}
|
|
title={step.lastAction}
|
|
className={`w-full elements-sidebar-row border-blue-500 whitespace-pre overflow-hidden
|
|
text-left text-sm font-medium transition-all ${selectedClass}`}
|
|
>
|
|
{desc}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<List
|
|
className='List overflow-x-hidden'
|
|
itemCount={props.history.length}
|
|
itemSize={35}
|
|
height={window.innerHeight - TITLE_BAR_HEIGHT}
|
|
width={'100%'}
|
|
>
|
|
{Row}
|
|
</List>
|
|
);
|
|
}
|