Фикс дерганого скролла в сообщениях, более логичное поведение при пересылке сообщения
This commit is contained in:
@@ -7,14 +7,12 @@ import { MessageSkeleton } from "../MessageSkeleton/MessageSkeleton";
|
||||
import { ScrollArea } from "@mantine/core";
|
||||
import { MESSAGE_AVATAR_NO_RENDER_TIME_DIFF_S, SCROLL_TOP_IN_MESSAGES_TO_VIEW_AFFIX } from "@/app/constants";
|
||||
import { DialogAffix } from "../DialogAffix/DialogAffix";
|
||||
import { useReplyMessages } from "@/app/providers/DialogProvider/useReplyMessages";
|
||||
import { useSetting } from "@/app/providers/SettingsProvider/useSetting";
|
||||
|
||||
export function Messages() {
|
||||
const colors = useRosettaColors();
|
||||
const publicKey = usePublicKey();
|
||||
const { messages, dialog, loadMessagesToTop, loading } = useDialog();
|
||||
const { replyMessages, isSelectionStarted } = useReplyMessages();
|
||||
|
||||
const viewportRef = useRef<HTMLDivElement | null>(null);
|
||||
const lastMessageRef = useRef<HTMLDivElement | null>(null);
|
||||
@@ -22,6 +20,7 @@ export function Messages() {
|
||||
const shouldAutoScrollRef = useRef(true);
|
||||
const isFirstRenderRef = useRef(true);
|
||||
const previousScrollHeightRef = useRef(0);
|
||||
const distanceFromButtomRef = useRef(0);
|
||||
|
||||
const [affix, setAffix] = useState(false);
|
||||
const [wallpaper] = useSetting<string>
|
||||
@@ -121,15 +120,10 @@ export function Messages() {
|
||||
const lastMessage = messages[messages.length - 1];
|
||||
|
||||
// Скроллим если пользователь внизу или это его собственное сообщение
|
||||
if ((shouldAutoScrollRef.current || lastMessage.from_me) && !affix) {
|
||||
/**
|
||||
* Скролл только если пользователь не читает сейчас старую переписку
|
||||
* (!affix))
|
||||
*/
|
||||
//console.info("Scroll because", shouldAutoScrollRef.current);
|
||||
if ((shouldAutoScrollRef.current || lastMessage.from_me)) {
|
||||
scrollToBottom(true);
|
||||
}
|
||||
}, [messages.length, loading, affix, scrollToBottom]);
|
||||
}, [messages.length, loading, scrollToBottom]);
|
||||
|
||||
// Восстановление позиции после загрузки старых сообщений
|
||||
useEffect(() => {
|
||||
@@ -142,12 +136,6 @@ export function Messages() {
|
||||
}
|
||||
}, [messages.length]);
|
||||
|
||||
// Скролл при отправке reply сообщения
|
||||
useEffect(() => {
|
||||
if (replyMessages.messages.length === 0 || isSelectionStarted()) return;
|
||||
scrollToBottom(true);
|
||||
}, [replyMessages.messages.length]);
|
||||
|
||||
const loadMessagesToScrollAreaTop = async () => {
|
||||
if (!viewportRef.current) return;
|
||||
|
||||
@@ -195,6 +183,7 @@ export function Messages() {
|
||||
// Показываем/скрываем кнопку "вниз"
|
||||
const distanceFromBottom =
|
||||
(viewportRef.current.scrollHeight - viewportRef.current.clientHeight) - scroll.y;
|
||||
distanceFromButtomRef.current = distanceFromBottom;
|
||||
|
||||
setAffix(distanceFromBottom > SCROLL_TOP_IN_MESSAGES_TO_VIEW_AFFIX);
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user