Scroll to last position when re-opening a chat.

This commit is contained in:
Paul 2021-08-07 20:53:17 +01:00
parent 1f903cd56b
commit 7c7f813118
2 changed files with 7 additions and 4 deletions

View file

@ -4,7 +4,6 @@ import { Channel } from "revolt.js/dist/maps/Channels";
import { Message } from "revolt.js/dist/maps/Messages"; import { Message } from "revolt.js/dist/maps/Messages";
import { Nullable } from "revolt.js/dist/util/null"; import { Nullable } from "revolt.js/dist/util/null";
import { defer } from "../defer";
import { SimpleRenderer } from "./simple/SimpleRenderer"; import { SimpleRenderer } from "./simple/SimpleRenderer";
import { RendererRoutines, ScrollState } from "./types"; import { RendererRoutines, ScrollState } from "./types";
@ -23,6 +22,7 @@ export class ChannelRenderer {
stale = false; stale = false;
fetching = false; fetching = false;
scrollPosition = 0;
constructor(channel: Channel) { constructor(channel: Channel) {
this.channel = channel; this.channel = channel;
@ -30,6 +30,7 @@ export class ChannelRenderer {
makeAutoObservable(this, { makeAutoObservable(this, {
channel: false, channel: false,
currentRenderer: false, currentRenderer: false,
scrollPosition: false,
}); });
this.receive = this.receive.bind(this); this.receive = this.receive.bind(this);

View file

@ -173,7 +173,7 @@ export const MessageArea = observer(({ channel }: Props) => {
if (message) return; if (message) return;
if (renderer.state === "RENDER") { if (renderer.state === "RENDER") {
runInAction(() => (renderer.fetching = true)); runInAction(() => (renderer.fetching = true));
setScrollState({ type: "ScrollTop", y: 151 }); setScrollState({ type: "ScrollTop", y: renderer.scrollPosition });
} else { } else {
renderer.init(); renderer.init();
} }
@ -245,12 +245,14 @@ export const MessageArea = observer(({ channel }: Props) => {
if (!current) return; if (!current) return;
async function onScroll() { async function onScroll() {
renderer.scrollPosition = current!.scrollTop;
if (atTop(100)) { if (atTop(100)) {
renderer.loadTop(ref.current!); renderer.loadTop(current!);
} }
if (atBottom(100)) { if (atBottom(100)) {
renderer.loadBottom(ref.current!); renderer.loadBottom(current!);
} }
} }