every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Refactor/bugfix] Main Page: Message Logs. Fix scroll animation, that is not using at this time though.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-01-03 19:04:46 +09:00
parent 0d6c73fba4
commit 227aacd005
5 changed files with 101 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
View File

@@ -1,50 +1,26 @@
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import React, { useRef, useLayoutEffect, useEffect } from "react";
import styles from "./LogBox.module.scss";
import { store } from "@store";
import { MessageContainer } from "./message_container/MessageContainer";
import { scrollToBottom } from "@utils";
import { useMessage } from "@logics_common";
import { useMessageLogScroll } from "@logics_main";
import { store } from "@store";
export const LogBox = () => {
const { currentMessageLogs } = useMessage();
const log_container_ref = useRef(null);
const [is_scrolling, setIsScrolling] = useState(false);
const { scrollToBottom, isScrolling } = useMessageLogScroll();
const logContainerRef = useRef(null);
useLayoutEffect(() => {
store.log_box_ref = log_container_ref;
if (!is_scrolling) {
scrollToBottom(store.log_box_ref);
// scrollToBottom(store.log_box_ref, true); [Fix me]
store.log_box_ref = logContainerRef;
if (!isScrolling) {
scrollToBottom();
}
}, [currentMessageLogs.data]);
useEffect(() => {
const handleScroll = () => {
const element = log_container_ref.current;
if (!element) return;
const currentScrollTop = element.scrollTop;
const at_bottom = element.scrollHeight - currentScrollTop === element.clientHeight;
if (at_bottom) {
setIsScrolling(false);
} else {
setIsScrolling(true);
}
};
const element = log_container_ref.current;
element.addEventListener("scroll", handleScroll);
return () => {
element.removeEventListener("scroll", handleScroll);
};
}, []);
}, [currentMessageLogs.data, isScrolling]);
return (
<div id="log_container" className={styles.container} ref={log_container_ref}>
<div id="log_container" className={styles.container} ref={logContainerRef}>
<MessageLogUiSizeController />
{currentMessageLogs.data.map(message_data => (
{currentMessageLogs.data.map((message_data) => (
<MessageContainer key={message_data.id} {...message_data} />
))}
</div>

7
src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
View File

@@ -3,8 +3,7 @@ import styles from "./MessageInputBox.module.scss";
import SendMessageSvg from "@images/send_message.svg?react";
import { useMessage } from "@logics_common";
import { useSendMessageButtonType, useEnableAutoClearMessageInputBox } from "@logics_configs";
import { store } from "@store";
import { scrollToBottom } from "@utils";
import { useMessageLogScroll } from "@logics_main";
export const MessageInputBox = () => {
const [message_history, setMessageHistory] = useState([]);
@@ -21,6 +20,8 @@ export const MessageInputBox = () => {
const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
const { currentSendMessageButtonType } = useSendMessageButtonType();
const { scrollToBottom } = useMessageLogScroll();
useEffect(() => {
if (currentMessageLogs.data) {
const sentMessages = currentMessageLogs.data
@@ -40,7 +41,7 @@ export const MessageInputBox = () => {
if (currentEnableAutoClearMessageInputBox.data) updateMessageInputValue("");
setTimeout(() => {
scrollToBottom(store.log_box_ref);
scrollToBottom();
}, 10);
setHistoryIndex(-1);