70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import * as React from 'react';
|
|
import { FixedSizeList as List } from 'react-window';
|
|
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
|
import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
|
|
|
|
interface ISymbolsSidebarProps {
|
|
selectedSymbolId: string
|
|
symbols: Map<string, ISymbolModel>
|
|
isOpen: boolean
|
|
isHistoryOpen: boolean
|
|
onPropertyChange: (key: string, value: string | number | boolean) => void
|
|
selectSymbol: (symbolId: string) => void
|
|
}
|
|
|
|
export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
|
|
// Render
|
|
let isOpenClasses = '-right-64';
|
|
if (props.isOpen) {
|
|
isOpenClasses = props.isHistoryOpen
|
|
? 'right-64'
|
|
: 'right-0';
|
|
}
|
|
|
|
const containers = [...props.symbols.values()];
|
|
function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {
|
|
const container = containers[index];
|
|
const key = container.id.toString();
|
|
const text = key;
|
|
const selectedClass: string = props.selectedSymbolId !== '' &&
|
|
props.selectedSymbolId === container.id
|
|
? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
|
|
: 'bg-slate-300/60 hover:bg-slate-300';
|
|
|
|
return (
|
|
<button type="button"
|
|
className={`w-full border-blue-500 symbols-sidebar-row whitespace-pre
|
|
text-left text-sm font-medium transition-all ${selectedClass}`}
|
|
id={key}
|
|
key={key}
|
|
style={style}
|
|
onClick={() => props.selectSymbol(key)}
|
|
>
|
|
{text}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
|
|
<div className='bg-slate-100 font-bold sidebar-title'>
|
|
Elements
|
|
</div>
|
|
<div className='h-96 text-gray-800'>
|
|
<List
|
|
className='List divide-y divide-black'
|
|
itemCount={containers.length}
|
|
itemSize={35}
|
|
height={384}
|
|
width={256}
|
|
>
|
|
{Row}
|
|
</List>
|
|
</div>
|
|
<SymbolProperties
|
|
symbol={props.symbols.get(props.selectedSymbolId)}
|
|
symbols={props.symbols}
|
|
onChange={props.onPropertyChange} />
|
|
</div>
|
|
);
|
|
}
|