forked from rDrama/rDrama
Don't scroll down unless you need to
parent
636d42dff1
commit
30ed8b6171
|
@ -1,4 +1,4 @@
|
||||||
import React from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { DndProvider, useDrop } from "react-dnd";
|
import { DndProvider, useDrop } from "react-dnd";
|
||||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||||
import {
|
import {
|
||||||
|
@ -8,9 +8,11 @@ import {
|
||||||
UserList,
|
UserList,
|
||||||
UsersTyping,
|
UsersTyping,
|
||||||
} from "./features";
|
} from "./features";
|
||||||
import { ChatProvider, DrawerProvider, useDrawer } from "./hooks";
|
import { ChatProvider, DrawerProvider, useChat, useDrawer } from "./hooks";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
|
|
||||||
|
const SCROLL_CANCEL_THRESHOLD = 200;
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
return (
|
return (
|
||||||
<DndProvider backend={HTML5Backend}>
|
<DndProvider backend={HTML5Backend}>
|
||||||
|
@ -28,6 +30,30 @@ function AppInner() {
|
||||||
accept: "drawer",
|
accept: "drawer",
|
||||||
});
|
});
|
||||||
const { open, config } = useDrawer();
|
const { open, config } = useDrawer();
|
||||||
|
const contentWrapper = useRef<HTMLDivElement>(null);
|
||||||
|
const initiallyScrolledDown = useRef(false);
|
||||||
|
const { messages } = useChat();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (messages.length > 0) {
|
||||||
|
if (initiallyScrolledDown.current) {
|
||||||
|
/* We only want to scroll back down on a new message
|
||||||
|
if the user is not scrolled up looking at previous messages. */
|
||||||
|
const scrollableDistance = contentWrapper.current.scrollHeight - contentWrapper.current.clientHeight;
|
||||||
|
const scrolledDistance = contentWrapper.current.scrollTop;
|
||||||
|
const hasScrolledEnough = scrollableDistance - scrolledDistance >= SCROLL_CANCEL_THRESHOLD;
|
||||||
|
|
||||||
|
if (hasScrolledEnough) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Always scroll to the bottom on first load.
|
||||||
|
initiallyScrolledDown.current = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
contentWrapper.current.scrollTop = contentWrapper.current.scrollHeight;
|
||||||
|
}
|
||||||
|
}, [messages]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App" ref={dropRef}>
|
<div className="App" ref={dropRef}>
|
||||||
|
@ -37,14 +63,12 @@ function AppInner() {
|
||||||
<ChatHeading />
|
<ChatHeading />
|
||||||
</div>
|
</div>
|
||||||
<div className="App-center">
|
<div className="App-center">
|
||||||
<div className="App-content">
|
<div className="App-content" ref={contentWrapper}>
|
||||||
<div id="chatWrapper" style={{ flex: 1, height: "100%" }}>
|
|
||||||
{open ? (
|
{open ? (
|
||||||
<div className="App-drawer">{config.content}</div>
|
<div className="App-drawer">{config.content}</div>
|
||||||
) : (
|
) : (
|
||||||
<ChatMessageList />
|
<ChatMessageList />
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="App-side">
|
<div className="App-side">
|
||||||
<UserList />
|
<UserList />
|
||||||
|
|
|
@ -93,14 +93,9 @@ export function ChatMessage({
|
||||||
|
|
||||||
export function ChatMessageList() {
|
export function ChatMessageList() {
|
||||||
const { messages } = useChat();
|
const { messages } = useChat();
|
||||||
const messageWrapper = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
messageWrapper.current.scrollTop = messageWrapper.current.scrollHeight;
|
|
||||||
}, [messages]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="ChatMessageList" ref={messageWrapper}>
|
<div className="ChatMessageList">
|
||||||
{messages.map((message, index) => (
|
{messages.map((message, index) => (
|
||||||
<ChatMessage
|
<ChatMessage
|
||||||
key={key(message)}
|
key={key(message)}
|
||||||
|
|
Loading…
Reference in New Issue