69 lines
2 KiB
TypeScript
69 lines
2 KiB
TypeScript
import { TrashIcon } from '@heroicons/react/24/outline';
|
|
import * as React from 'react';
|
|
import { FixedSizeList as List } from 'react-window';
|
|
import { MessageType } from '../../Enums/MessageType';
|
|
import { IHistoryState } from '../../Interfaces/IHistoryState';
|
|
import { IMessage } from '../../Interfaces/IMessage';
|
|
import { DISABLE_API } from '../../utils/default';
|
|
import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
|
|
import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
|
|
|
|
interface IMessagesProps {
|
|
historyState: IHistoryState
|
|
messages: IMessage[]
|
|
clearMessage: () => void
|
|
}
|
|
|
|
export function Messages(props: IMessagesProps): JSX.Element {
|
|
function Row({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element {
|
|
const reversedIndex = (props.messages.length - 1) - index;
|
|
const message = props.messages[reversedIndex];
|
|
let classType = '';
|
|
switch (message.type) {
|
|
case MessageType.Success:
|
|
classType = 'bg-green-400 hover:bg-green-400/60';
|
|
break;
|
|
|
|
case MessageType.Warning:
|
|
classType = 'bg-yellow-400 hover:bg-yellow-400/60';
|
|
break;
|
|
|
|
case MessageType.Error:
|
|
classType = 'bg-red-400 hover:bg-red-400/60';
|
|
break;
|
|
}
|
|
return (<p
|
|
key={`m-${reversedIndex}`}
|
|
className={`p-2 ${classType}`}
|
|
style={style}
|
|
>
|
|
{message.text}
|
|
</p>);
|
|
}
|
|
|
|
const toolbarHeight = 28;
|
|
|
|
return (
|
|
<div>
|
|
<div className='hover:bg-slate-300 h-7 text-right pr-1 pl-1'>
|
|
<button
|
|
onClick={() => { props.clearMessage(); }}
|
|
className='h-full hover:bg-slate-400 rounded-lg p-1'
|
|
aria-label='Clear all messages'
|
|
title='Clear all messages'
|
|
>
|
|
<TrashIcon className='heroicon'></TrashIcon>
|
|
</button>
|
|
</div>
|
|
<List
|
|
className='List md:text-xs font-bold'
|
|
itemCount={props.messages.length}
|
|
itemSize={65}
|
|
height={window.innerHeight - TITLE_BAR_HEIGHT - toolbarHeight}
|
|
width={'100%'}
|
|
>
|
|
{Row}
|
|
</List>
|
|
</div>
|
|
);
|
|
};
|