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

fixed row height

Browse Source
This commit is contained in:
dank074 2021-10-15 22:34:34 -05:00
parent 2d2604cdc9
commit 7d9b6f9336
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/mod-tools/views/chatlog/ChatlogView.scss
View File

@ -16,12 +16,15 @@
div.chatlog-entry {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
.username {
color: #1E7295;
text-decoration: underline;
width: $username-col-width;
}
.message {
word-break: break-all;
}
}
}
}

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

@ -1,6 +1,6 @@
import { UserProfileComposer } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { AutoSizer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
import { SendMessageHook } from '../../../../hooks';
import { ChatlogViewProps } from './ChatlogView.types';
@ -8,10 +8,14 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
{
const { record = null } = props;
const cache = new CellMeasurerCache({
defaultHeight: 20,
fixedWidth: true
});
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) =>
{
@ -21,7 +25,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
<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-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-lg-auto justify-content-start">{item.message}</div>
<div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div>
</div>
);
}
@ -30,9 +34,9 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
<>
{record && <div className="chatlog-messages w-100 h-100 overflow-hidden">
<div className="row align-items-start w-100">
<div className="col-md-auto text-center">Time</div>
<div className="col-sm-2 username-label">User</div>
<div className="col-lg-auto">Message</div>
<div className="col-md-auto text-center fw-bold">Time</div>
<div className="col-sm-2 username-label fw-bold">User</div>
<div className="col fw-bold">Message</div>
</div>
<div className="row w-100 h-100 chatlog">
<AutoSizer defaultWidth={400} defaultHeight={200}>
@ -43,7 +47,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
width={width}
height={height}
rowCount={record.chatlog.length}
rowHeight={20}
rowHeight={getRowHeight}
className={'chatlog-container'}
rowRenderer={rowRenderer} />
)