client: fix tocs collapsed detect

pull/60/head
fantasticit 2022-05-28 15:03:30 +08:00
parent 97ae2d929f
commit 7b6ba4ccca
4 changed files with 17 additions and 11 deletions

View File

@ -12,7 +12,7 @@ const FONT_SIZE_KEY = 'document-style-font-size';
const DEFAULT_WIDTH = Width.standardWidth;
const DEFAULT_FONT_SIZE = 16;
export const useDocumentStyle = (onChange = null) => {
export const useDocumentStyle = () => {
const { data, refetch } = useQuery(`/fe/mock/${WIDTH_KEY}/${FONT_SIZE_KEY}`, () => {
if (typeof window !== 'undefined') {
return {
@ -31,9 +31,8 @@ export const useDocumentStyle = (onChange = null) => {
(width: Width) => {
setStorage(WIDTH_KEY, width);
refetch();
onChange && onChange(width);
},
[refetch, onChange]
[refetch]
);
const setFontSize = useCallback(

View File

@ -78,7 +78,7 @@ const WikiContent = () => {
normalContent={() => {
return (
<div className={styles.itemsWrap}>
{starWikis.length ? (
{starWikis && starWikis.length ? (
starWikis.map((wiki) => {
return (
<div className={styles.itemWrap} key={wiki.id}>

View File

@ -46,5 +46,10 @@
display: flex;
flex: 1;
overflow: auto;
> div:first-of-type {
flex: 1;
width: 100%;
}
}
}

View File

@ -38,19 +38,21 @@ const Toc = ({ toc, collapsed }) => {
export const Tocs: React.FC<{ tocs: Array<IToc>; editor: Editor }> = ({ tocs = [], editor }) => {
const [hasToc, toggleHasToc] = useToggle(false);
const { width } = useDocumentStyle((width) => {
if (width === Width.fullWidth) {
toggleCollapsed(true);
} else {
toggleCollapsed(false);
}
});
const { width } = useDocumentStyle();
const [collapsed, toggleCollapsed] = useToggle(width === Width.fullWidth);
const getContainer = useCallback(() => {
return document.querySelector(`#js-tocs-container`);
}, []);
useEffect(() => {
if (width === Width.fullWidth) {
toggleCollapsed(true);
} else {
toggleCollapsed(false);
}
}, [width, toggleCollapsed]);
useEffect(() => {
const listener = () => {
const nodes = findNode(editor, TableOfContents.name);