diff --git a/src/components/chat-history/ChatHistoryView.tsx b/src/components/chat-history/ChatHistoryView.tsx index 0684c1a7..1ac6591a 100644 --- a/src/components/chat-history/ChatHistoryView.tsx +++ b/src/components/chat-history/ChatHistoryView.tsx @@ -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(''); const { chatHistory = [] } = useChatHistory(); const elementRef = useRef(null); - const [ searchText, setSearchText ] = useState(''); - - 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 ( - - - { item.timestamp } - { (item.type === ChatEntryType.TYPE_CHAT) && -
- { (item.style === 0) && -
} -
-
- { item.imageUrl && (item.imageUrl.length > 0) && -
} -
-
- - -
-
-
} - { (item.type === ChatEntryType.TYPE_ROOM_INFO) && - <> - - { item.name } - } - - - ); - }; - - 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 ( + + + { item.timestamp } + { (item.type === ChatEntryType.TYPE_CHAT) && +
+ { (item.style === 0) && +
} +
+
+ { item.imageUrl && (item.imageUrl.length > 0) && +
} +
+
+ + +
+
+
} + { (item.type === ChatEntryType.TYPE_ROOM_INFO) && + <> + + { item.name } + } + + + ); + }; + return ( setIsVisible(false) }/> - + setSearchText(event.target.value) } />
- + { ({ height, width }) => { + cache.clearAll(); + return (