diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.tsx b/src/views/mod-tools/views/chatlog/ChatlogView.tsx index 67eab764..64e9a9ca 100644 --- a/src/views/mod-tools/views/chatlog/ChatlogView.tsx +++ b/src/views/mod-tools/views/chatlog/ChatlogView.tsx @@ -1,6 +1,6 @@ import { UserProfileComposer } from '@nitrots/nitro-renderer'; import { FC } from 'react'; -import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized'; +import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized'; import { SendMessageHook } from '../../../../hooks'; import { ChatlogViewProps } from './ChatlogView.types'; @@ -8,27 +8,31 @@ export const ChatlogView: FC = props => { const { record = null } = props; - const getRowHeight = ({ index }) => - { - const item = record.chatlog[index]; - - if(item.message.length < 40) return 20; - else if(item.message.length < 70) return 42; - else return 62; - }; - const rowRenderer: ListRowRenderer = (props: ListRowProps) => { const item = record.chatlog[props.index]; return ( -
-
{item.timestamp}
-
SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}
-
{item.message}
-
+ +
+
{item.timestamp}
+
SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}
+
{item.message}
+
+
); - } + }; + + const cache = new CellMeasurerCache({ + defaultHeight: 25, + fixedWidth: true + }); return ( <> @@ -47,9 +51,10 @@ export const ChatlogView: FC = props => width={width} height={height} rowCount={record.chatlog.length} - rowHeight={getRowHeight} + rowHeight={cache.rowHeight} className={'chatlog-container'} - rowRenderer={rowRenderer} /> + rowRenderer={rowRenderer} + deferredMeasurementCache={cache} /> ) } }