mirror of https://github.com/fantasticit/think.git
client: fix tocs collapsed detect
This commit is contained in:
parent
97ae2d929f
commit
7b6ba4ccca
|
@ -12,7 +12,7 @@ const FONT_SIZE_KEY = 'document-style-font-size';
|
||||||
const DEFAULT_WIDTH = Width.standardWidth;
|
const DEFAULT_WIDTH = Width.standardWidth;
|
||||||
const DEFAULT_FONT_SIZE = 16;
|
const DEFAULT_FONT_SIZE = 16;
|
||||||
|
|
||||||
export const useDocumentStyle = (onChange = null) => {
|
export const useDocumentStyle = () => {
|
||||||
const { data, refetch } = useQuery(`/fe/mock/${WIDTH_KEY}/${FONT_SIZE_KEY}`, () => {
|
const { data, refetch } = useQuery(`/fe/mock/${WIDTH_KEY}/${FONT_SIZE_KEY}`, () => {
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
return {
|
return {
|
||||||
|
@ -31,9 +31,8 @@ export const useDocumentStyle = (onChange = null) => {
|
||||||
(width: Width) => {
|
(width: Width) => {
|
||||||
setStorage(WIDTH_KEY, width);
|
setStorage(WIDTH_KEY, width);
|
||||||
refetch();
|
refetch();
|
||||||
onChange && onChange(width);
|
|
||||||
},
|
},
|
||||||
[refetch, onChange]
|
[refetch]
|
||||||
);
|
);
|
||||||
|
|
||||||
const setFontSize = useCallback(
|
const setFontSize = useCallback(
|
||||||
|
|
|
@ -78,7 +78,7 @@ const WikiContent = () => {
|
||||||
normalContent={() => {
|
normalContent={() => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.itemsWrap}>
|
<div className={styles.itemsWrap}>
|
||||||
{starWikis.length ? (
|
{starWikis && starWikis.length ? (
|
||||||
starWikis.map((wiki) => {
|
starWikis.map((wiki) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.itemWrap} key={wiki.id}>
|
<div className={styles.itemWrap} key={wiki.id}>
|
||||||
|
|
|
@ -46,5 +46,10 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
|
> div:first-of-type {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -38,19 +38,21 @@ const Toc = ({ toc, collapsed }) => {
|
||||||
|
|
||||||
export const Tocs: React.FC<{ tocs: Array<IToc>; editor: Editor }> = ({ tocs = [], editor }) => {
|
export const Tocs: React.FC<{ tocs: Array<IToc>; editor: Editor }> = ({ tocs = [], editor }) => {
|
||||||
const [hasToc, toggleHasToc] = useToggle(false);
|
const [hasToc, toggleHasToc] = useToggle(false);
|
||||||
const { width } = useDocumentStyle((width) => {
|
const { width } = useDocumentStyle();
|
||||||
if (width === Width.fullWidth) {
|
|
||||||
toggleCollapsed(true);
|
|
||||||
} else {
|
|
||||||
toggleCollapsed(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const [collapsed, toggleCollapsed] = useToggle(width === Width.fullWidth);
|
const [collapsed, toggleCollapsed] = useToggle(width === Width.fullWidth);
|
||||||
|
|
||||||
const getContainer = useCallback(() => {
|
const getContainer = useCallback(() => {
|
||||||
return document.querySelector(`#js-tocs-container`);
|
return document.querySelector(`#js-tocs-container`);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (width === Width.fullWidth) {
|
||||||
|
toggleCollapsed(true);
|
||||||
|
} else {
|
||||||
|
toggleCollapsed(false);
|
||||||
|
}
|
||||||
|
}, [width, toggleCollapsed]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const listener = () => {
|
const listener = () => {
|
||||||
const nodes = findNode(editor, TableOfContents.name);
|
const nodes = findNode(editor, TableOfContents.name);
|
||||||
|
|
Loading…
Reference in New Issue