nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix dynamic row height for real this time

Browse Source
This commit is contained in:
dank074 2021-10-16 00:44:36 -05:00
parent 7d9b6f9336
commit 5c914a6de1
1 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/mod-tools/views/chatlog/ChatlogView.tsx
View File

@ -1,6 +1,6 @@
import { UserProfileComposer } from '@nitrots/nitro-renderer'; import { UserProfileComposer } from '@nitrots/nitro-renderer';
import { FC } from 'react'; 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 { SendMessageHook } from '../../../../hooks';
import { ChatlogViewProps } from './ChatlogView.types'; import { ChatlogViewProps } from './ChatlogView.types';
@ -8,27 +8,31 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
{ {
const { record = null } = 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 rowRenderer: ListRowRenderer = (props: ListRowProps) =>
{ {
const item = record.chatlog[props.index]; const item = record.chatlog[props.index];
return ( return (
<CellMeasurer
cache={cache}
columnIndex={0}
key={props.key}
parent={props.parent}
rowIndex={props.index}
>
<div key={props.key} style={props.style} className="row chatlog-entry justify-content-start"> <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
<div className="col-md-auto text-center">{item.timestamp}</div> <div className="col-md-auto text-center">{item.timestamp}</div>
<div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div> <div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div>
<div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div> <div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div>
</div> </div>
</CellMeasurer>
); );
} };
const cache = new CellMeasurerCache({
defaultHeight: 25,
fixedWidth: true
});
return ( return (
<> <>
@ -47,9 +51,10 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
width={width} width={width}
height={height} height={height}
rowCount={record.chatlog.length} rowCount={record.chatlog.length}
rowHeight={getRowHeight} rowHeight={cache.rowHeight}
className={'chatlog-container'} className={'chatlog-container'}
rowRenderer={rowRenderer} /> rowRenderer={rowRenderer}
deferredMeasurementCache={cache} />
) )
} }
} }