2024-05-11 22:38:07 +00:00
|
|
|
import { Maybe } from '@apextoaster/js-utils';
|
2024-05-06 01:17:00 +00:00
|
|
|
import { Divider, List } from '@mui/material';
|
|
|
|
import React, { useEffect, useRef } from 'react';
|
2024-05-11 22:38:07 +00:00
|
|
|
import { useStore } from 'zustand';
|
2024-05-06 01:17:00 +00:00
|
|
|
import { EventItem } from './events';
|
2024-05-12 05:08:53 +00:00
|
|
|
import { StoreState, store } from './store';
|
2024-05-06 01:17:00 +00:00
|
|
|
|
2024-05-11 22:38:07 +00:00
|
|
|
export function historyStateSelector(s: StoreState) {
|
|
|
|
return {
|
|
|
|
history: s.eventHistory,
|
|
|
|
scroll: s.autoScroll,
|
|
|
|
};
|
2024-05-06 01:17:00 +00:00
|
|
|
}
|
|
|
|
|
2024-05-12 05:08:53 +00:00
|
|
|
export interface HistoryPanelProps {
|
2024-05-12 20:47:18 +00:00
|
|
|
renderEntity: (type: string, entity: string) => void;
|
|
|
|
renderEvent: (event: string) => void;
|
2024-05-12 05:08:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export function HistoryPanel(props: HistoryPanelProps) {
|
2024-05-11 22:38:07 +00:00
|
|
|
const state = useStore(store, historyStateSelector);
|
|
|
|
const { history, scroll } = state;
|
|
|
|
|
2024-05-06 01:17:00 +00:00
|
|
|
const scrollRef = useRef<Maybe<Element>>(undefined);
|
|
|
|
|
2024-05-11 22:38:07 +00:00
|
|
|
const scrollBehavior = state.scroll ? 'smooth' : 'auto';
|
|
|
|
|
2024-05-06 01:17:00 +00:00
|
|
|
useEffect(() => {
|
|
|
|
if (scrollRef.current && scroll !== false) {
|
2024-05-11 22:38:07 +00:00
|
|
|
scrollRef.current.scrollIntoView({ behavior: scrollBehavior, block: 'end' });
|
2024-05-06 01:17:00 +00:00
|
|
|
}
|
2024-05-11 22:38:07 +00:00
|
|
|
}, [scrollRef.current, scrollBehavior]);
|
2024-05-06 01:17:00 +00:00
|
|
|
|
|
|
|
const items = history.map((item, index) => {
|
|
|
|
if (index === history.length - 1) {
|
2024-05-12 20:47:18 +00:00
|
|
|
return <EventItem {...props} key={`item-${index}`} event={item} focusRef={scrollRef} />;
|
2024-05-06 01:17:00 +00:00
|
|
|
}
|
|
|
|
|
2024-05-12 20:47:18 +00:00
|
|
|
return <EventItem {...props} key={`item-${index}`} event={item} />;
|
2024-05-06 01:17:00 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
|
|
}
|