Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-23 19:37:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

change scroll to bottom

Browse Source
This commit is contained in:
PhilReact 2024-11-16 05:13:58 +02:00
parent 953b60831a
commit 47c2c6ce16
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Chat/ChatList.tsx
View File

@ -13,7 +13,13 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
const [showScrollDownButton, setShowScrollDownButton] = useState(false); const [showScrollDownButton, setShowScrollDownButton] = useState(false);
const hasLoadedInitialRef = useRef(false); const hasLoadedInitialRef = useRef(false);
const isAtBottomRef = useRef(true);
const showScrollButtonRef = useRef(showScrollButton);
// Update the ref whenever the state changes
useEffect(() => {
showScrollButtonRef.current = showScrollButton;
}, [showScrollButton]);
// Update message list with unique signatures and tempMessages // Update message list with unique signatures and tempMessages
useEffect(() => { useEffect(() => {
@ -42,6 +48,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed
if (!atBottom && hasUnreadMessages) { if (!atBottom && hasUnreadMessages) {
setShowScrollButton(hasUnreadMessages); setShowScrollButton(hasUnreadMessages);
setShowScrollDownButton(false)
} else { } else {
handleMessageSeen(); handleMessageSeen();
} }
@ -84,8 +91,16 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
const sentNewMessageGroupFunc = useCallback(() => { const sentNewMessageGroupFunc = useCallback(() => {
scrollToBottom(); const { scrollHeight, scrollTop, clientHeight } = parentRef.current;
// Check if the user is within 200px from the bottom
const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
console.log('distanceFromBottom', distanceFromBottom)
if (distanceFromBottom <= 700) {
scrollToBottom();
}
}, [messages]); }, [messages]);
useEffect(() => { useEffect(() => {
subscribeToEvent('sent-new-message-group', sentNewMessageGroupFunc); subscribeToEvent('sent-new-message-group', sentNewMessageGroupFunc);
@ -115,7 +130,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
const offsetCheck = () => { const offsetCheck = () => {
const { scrollHeight, scrollTop, clientHeight } = instance.scrollElement; const { scrollHeight, scrollTop, clientHeight } = instance.scrollElement;
const atBottom = scrollHeight - scrollTop - clientHeight <= 300; const atBottom = scrollHeight - scrollTop - clientHeight <= 300;
if(showScrollButton){ if(showScrollButtonRef.current){
setShowScrollDownButton(false) setShowScrollDownButton(false)
} else } else
if(atBottom){ if(atBottom){
@ -288,7 +303,8 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
cursor: 'pointer', cursor: 'pointer',
zIndex: 10, zIndex: 10,
border: 'none', border: 'none',
outline: 'none' outline: 'none',
fontSize: '16px'
}} }}
> >
Scroll to bottom Scroll to bottom