mirror of https://github.com/fantasticit/think.git
client: add resize handler in tocs
This commit is contained in:
parent
19924b740b
commit
d010f3aaba
|
@ -51,17 +51,19 @@ export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }>
|
||||||
|
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
|
|
||||||
const handler = throttle(() => {
|
const handler = () => {
|
||||||
const diffWidth = el.offsetWidth - (el.firstChild as HTMLDivElement).offsetWidth;
|
const diffWidth = el.offsetWidth - (el.firstChild as HTMLDivElement).offsetWidth;
|
||||||
toggleCollapsed(diffWidth <= TOCS_WIDTH);
|
toggleCollapsed(diffWidth <= TOCS_WIDTH);
|
||||||
}, 200);
|
};
|
||||||
|
|
||||||
handler();
|
handler();
|
||||||
const observer = new MutationObserver(handler);
|
const observer = new MutationObserver(handler);
|
||||||
observer.observe(el, { attributes: true, childList: true, subtree: true });
|
observer.observe(el, { attributes: true, childList: true, subtree: true });
|
||||||
|
window.addEventListener('resize', handler);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
observer.disconnect();
|
observer.disconnect();
|
||||||
|
window.removeEventListener('resize', handler);
|
||||||
};
|
};
|
||||||
}, [getContainer, toggleCollapsed]);
|
}, [getContainer, toggleCollapsed]);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue