56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import * as React from 'react';
|
|
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 states = props.history.map((step, move) => {
|
|
const desc = move > 0
|
|
? `Go to modification n°${move}`
|
|
: 'Go to the beginning';
|
|
|
|
const isCurrent = move === props.historyCurrentStep;
|
|
|
|
const selectedClass = isCurrent
|
|
? '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)}
|
|
className={
|
|
`w-full elements-sidebar-row whitespace-pre
|
|
text-left text-sm font-medium transition-all ${selectedClass}`
|
|
}
|
|
>
|
|
{desc}{isCurrentText}
|
|
</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='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>
|
|
</div>
|
|
);
|
|
};
|