Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 203: Improve responsive design and refactor layout

Browse source
This commit is contained in:
Eric Nguyen 2022-10-03 12:05:16 +00:00
parent 50626218ba
commit 0d05f0959c
27 changed files with 968 additions and 485 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/Components/History/History.tsx
View file

@ -1,24 +1,23 @@
import * as React from 'react';
import { FixedSizeList as List } from 'react-window';
import { IHistoryState } from '../../Interfaces/IHistoryState';
import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
interface IHistoryProps {
history: IHistoryState[]
historyCurrentStep: number
isOpen: boolean
jumpTo: (move: number) => void
}
export function History(props: IHistoryProps): JSX.Element {
const isOpenClasses = props.isOpen ? 'right-0' : '-right-64';
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 = reversedIndex === props.historyCurrentStep
? 'bg-blue-500 hover:bg-blue-600'
: 'bg-slate-500 hover:bg-slate-700';
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"
@ -26,7 +25,7 @@ export function History(props: IHistoryProps): JSX.Element {
style={style}
onClick={() => props.jumpTo(reversedIndex)}
title={step.lastAction}
className={`w-full elements-sidebar-row whitespace-pre overflow-hidden
className={`w-full elements-sidebar-row border-blue-500 whitespace-pre overflow-hidden
text-left text-sm font-medium transition-all ${selectedClass}`}
>
{desc}
@ -35,19 +34,14 @@ export function History(props: IHistoryProps): JSX.Element {
}
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>
<List
className='List overflow-x-hidden'
itemCount={props.history.length}
itemSize={35}
height={window.innerHeight - TITLE_BAR_HEIGHT}
width={'100%'}
>
{Row}
</List>
);
}