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

Fix chat history

Browse Source
This commit is contained in:
Bill 2022-09-20 15:50:35 -04:00
parent 0ad2592f4e
commit 675bade4d6
1 changed files with 50 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/chat-history/ChatHistoryView.tsx
View File

@ -1,6 +1,6 @@
import { ILinkEventTracker } from '@nitrots/nitro-renderer';
import { FC, useEffect, useMemo, useRef, useState } from 'react';
import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer, Size } from 'react-virtualized';
import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
import { AddEventLinkTracker, ChatEntryType, LocalizeText, RemoveLinkEventTracker } from '../../api';
import { Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
import { useChatHistory } from '../../hooks';
@ -8,61 +8,25 @@ import { useChatHistory } from '../../hooks';
export const ChatHistoryView: FC<{}> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const [ searchText, setSearchText ] = useState<string>('');
const { chatHistory = [] } = useChatHistory();
const elementRef = useRef<List>(null);
const [ searchText, setSearchText ] = useState<string>('');
const cache = useMemo(() => new CellMeasurerCache({ defaultHeight: 25, fixedWidth: true }), []);
const cache = useMemo(() => new CellMeasurerCache({ defaultHeight: 35, fixedWidth: true }), []);
const filteredChatHistory = useMemo(() =>
{
if (searchText.length === 0) return chatHistory;
return chatHistory.filter((i) => (i.message && i.message.includes(searchText)) || i.name.includes(searchText));
let text = searchText.toLowerCase();
return chatHistory.filter(entry => (entry.message.toLowerCase().includes(text)) || entry.name.includes(text));
}, [ chatHistory, searchText ]);
useEffect(() =>
useEffect(() =>
{
cache.clearAll();
}, [ filteredChatHistory ]);
const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
{
const item = filteredChatHistory[props.index];
if (!item) return null;
return (
<CellMeasurer cache={ cache } columnIndex={ 0 } key={ props.key } parent={ props.parent } rowIndex={ props.index }>
<Flex key={ props.key } style={ props.style } className="p-1" gap={ 2 }>
<Text variant="muted">{ item.timestamp }</Text>
{ (item.type === ChatEntryType.TYPE_CHAT) &&
<div className="bubble-container" style={ { position: 'relative' } }>
{ (item.style === 0) &&
<div className="user-container-bg" style={ { backgroundColor: item.color } } /> }
<div className={ `chat-bubble bubble-${ item.style } type-${ item.chatType }` } style={ { maxWidth: '100%' } }>
<div className="user-container">
{ item.imageUrl && (item.imageUrl.length > 0) &&
<div className="user-image" style={ { backgroundImage: `url(${ item.imageUrl })` } } /> }
</div>
<div className="chat-content">
<b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ item.name }: ` } } />
<span className="message" dangerouslySetInnerHTML={ { __html: `${ item.message }` } } />
</div>
</div>
</div> }
{ (item.type === ChatEntryType.TYPE_ROOM_INFO) &&
<>
<i className="icon icon-small-room" />
<Text textBreak wrap grow>{ item.name }</Text>
</> }
</Flex>
</CellMeasurer>
);
};
const onResize = (info: Size) => cache.clearAll();
if(elementRef && elementRef.current && isVisible) elementRef.current.scrollToRow(-1);
}, [ isVisible ]);
useEffect(() =>
{
@ -94,30 +58,62 @@ export const ChatHistoryView: FC<{}> = props =>
return () => RemoveLinkEventTracker(linkTracker);
}, []);
useEffect(() =>
{
if(elementRef && elementRef.current && isVisible) elementRef.current.scrollToRow(-1);
}, [ isVisible ]);
if(!isVisible) return null;
const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
{
const item = filteredChatHistory[props.index];
if (!item) return null;
return (
<CellMeasurer cache={ cache } columnIndex={ 0 } key={ props.key } parent={ props.parent } rowIndex={ props.index }>
<Flex alignItems="center" style={ props.style } className="p-1" gap={ 2 }>
<Text variant="muted">{ item.timestamp }</Text>
{ (item.type === ChatEntryType.TYPE_CHAT) &&
<div className="bubble-container" style={ { position: 'relative' } }>
{ (item.style === 0) &&
<div className="user-container-bg" style={ { backgroundColor: item.color } } /> }
<div className={ `chat-bubble bubble-${ item.style } type-${ item.chatType }` } style={ { maxWidth: '100%' } }>
<div className="user-container">
{ item.imageUrl && (item.imageUrl.length > 0) &&
<div className="user-image" style={ { backgroundImage: `url(${ item.imageUrl })` } } /> }
</div>
<div className="chat-content">
<b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ item.name }: ` } } />
<span className="message" dangerouslySetInnerHTML={ { __html: `${ item.message }` } } />
</div>
</div>
</div> }
{ (item.type === ChatEntryType.TYPE_ROOM_INFO) &&
<>
<i className="icon icon-small-room" />
<Text textBreak wrap grow>{ item.name }</Text>
</> }
</Flex>
</CellMeasurer>
);
};
return (
<NitroCardView uniqueKey="chat-history" className="nitro-chat-history" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('room.chathistory.button.text') } onCloseClick={ event => setIsVisible(false) }/>
<NitroCardContentView>
<NitroCardContentView overflow="hidden">
<Flex column fullHeight gap={ 2 }>
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchText } onChange={ event => setSearchText(event.target.value) } />
<div className="h-100">
<AutoSizer defaultWidth={ 300 } defaultHeight={ 170 } onResize={ onResize }>
<AutoSizer defaultWidth={ 300 } defaultHeight={ 170 }>
{ ({ height, width }) =>
{
cache.clearAll();
return (
<List
ref={ elementRef }
width={ width }
height={ height }
rowCount={ chatHistory.length }
rowHeight={ cache.rowHeight }
rowCount={ filteredChatHistory.length }
rowHeight={ 35 }
className={ 'chat-history-list' }
rowRenderer={ RowRenderer }
deferredMeasurementCache={ cache } />