40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
|
import { Divider, List } from '@mui/material';
|
||
|
|
import React, { useEffect, useRef } from 'react';
|
||
|
|
import { Maybe } from '@apextoaster/js-utils';
|
||
|
|
import { EventItem } from './events';
|
||
|
|
|
||
|
|
export interface HistoryPanelProps {
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
history: Array<any>;
|
||
|
|
scroll: 'auto' | 'instant' | 'smooth' | false;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function HistoryPanel(props: HistoryPanelProps) {
|
||
|
|
const { history, scroll } = props;
|
||
|
|
const scrollRef = useRef<Maybe<Element>>(undefined);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (scrollRef.current && scroll !== false) {
|
||
|
|
scrollRef.current.scrollIntoView({ behavior: scroll as ScrollBehavior, block: 'end' });
|
||
|
|
}
|
||
|
|
}, [scrollRef.current, props.scroll]);
|
||
|
|
|
||
|
|
const items = history.map((item, index) => {
|
||
|
|
if (index === history.length - 1) {
|
||
|
|
return <EventItem key={`item-${index}`} event={item} focusRef={scrollRef} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
return <EventItem key={`item-${index}`} event={item} />;
|
||
|
|
});
|
||
|
|
|
||
|
|
return <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
|
||
|
|
{interleave(items)}
|
||
|
|
</List>;
|
||
|
|
}
|
||
|
|
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
export function interleave(arr: Array<any>) {
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
|
||
|
|
return arr.reduce((acc, val, idx) => acc.concat(val, <Divider component='li' key={`sep-${idx}`} variant='inset' />), []).slice(0, -1);
|
||
|
|
}
|