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

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 { div.chatlog-entry {
border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
.username { .username {
color: #1E7295; color: #1E7295;
text-decoration: underline; text-decoration: underline;
width: $username-col-width; 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 { UserProfileComposer } from '@nitrots/nitro-renderer';
import { FC } from 'react'; 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 { SendMessageHook } from '../../../../hooks';
import { ChatlogViewProps } from './ChatlogView.types'; import { ChatlogViewProps } from './ChatlogView.types';
@ -8,10 +8,14 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
{ {
const { record = null } = props; const { record = null } = props;
const cache = new CellMeasurerCache({ const getRowHeight = ({ index }) =>
defaultHeight: 20, {
fixedWidth: true 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) =>
{ {
@ -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 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-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> </div>
); );
} }
@ -30,9 +34,9 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
<> <>
{record && <div className="chatlog-messages w-100 h-100 overflow-hidden"> {record && <div className="chatlog-messages w-100 h-100 overflow-hidden">
<div className="row align-items-start w-100"> <div className="row align-items-start w-100">
<div className="col-md-auto text-center">Time</div> <div className="col-md-auto text-center fw-bold">Time</div>
<div className="col-sm-2 username-label">User</div> <div className="col-sm-2 username-label fw-bold">User</div>
<div className="col-lg-auto">Message</div> <div className="col fw-bold">Message</div>
</div> </div>
<div className="row w-100 h-100 chatlog"> <div className="row w-100 h-100 chatlog">
<AutoSizer defaultWidth={400} defaultHeight={200}> <AutoSizer defaultWidth={400} defaultHeight={200}>
@ -43,7 +47,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
width={width} width={width}
height={height} height={height}
rowCount={record.chatlog.length} rowCount={record.chatlog.length}
rowHeight={20} rowHeight={getRowHeight}
className={'chatlog-container'} className={'chatlog-container'}
rowRenderer={rowRenderer} /> rowRenderer={rowRenderer} />
) )