d9e06537e8
This improve greatly the performance and the code cleaning. It allows us to separate the inseparable class methods into modules functions
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import * as React from 'react';
|
|
import { HistoryState } from "../../Interfaces/HistoryState";
|
|
|
|
interface IHistoryProps {
|
|
history: HistoryState[]
|
|
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>
|
|
);
|
|
};
|