fix: memo list auto scroll to top (#313)

fix: editor initial content
This commit is contained in:
boojack
2022-10-18 22:56:43 +08:00
committed by GitHub
parent c7378e78d9
commit 35a8817442
2 changed files with 7 additions and 6 deletions

View File

@ -29,6 +29,7 @@ const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefAction
useEffect(() => { useEffect(() => {
if (editorRef.current && initialContent) { if (editorRef.current && initialContent) {
editorRef.current.value = initialContent; editorRef.current.value = initialContent;
handleContentChangeCallback(initialContent);
} }
}, []); }, []);

View File

@ -1,4 +1,4 @@
import { useEffect, useRef } from "react"; import { useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { memoService, shortcutService } from "../services"; import { memoService, shortcutService } from "../services";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
@ -13,7 +13,6 @@ const MemoList = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const query = useAppSelector((state) => state.location.query); const query = useAppSelector((state) => state.location.query);
const { memos, isFetching } = useAppSelector((state) => state.memo); const { memos, isFetching } = useAppSelector((state) => state.memo);
const wrapperElement = useRef<HTMLDivElement>(null);
const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId } = query ?? {}; const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId } = query ?? {};
const shortcut = shortcutId ? shortcutService.getShortcutById(shortcutId) : null; const shortcut = shortcutId ? shortcutService.getShortcutById(shortcutId) : null;
@ -86,13 +85,14 @@ const MemoList = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
wrapperElement.current?.scrollTo({ const pageWrapper = document.body.querySelector(".page-wrapper");
top: 0, if (pageWrapper) {
}); pageWrapper.scrollTo(0, 0);
}
}, [query]); }, [query]);
return ( return (
<div className="memo-list-container" ref={wrapperElement}> <div className="memo-list-container">
{sortedMemos.map((memo) => ( {sortedMemos.map((memo) => (
<Memo key={`${memo.id}-${memo.createdTs}-${memo.updatedTs}`} memo={memo} /> <Memo key={`${memo.id}-${memo.createdTs}-${memo.updatedTs}`} memo={memo} />
))} ))}