From ae373fbe48732332cf39e0d4a7d37cf3c988b6a2 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Fri, 17 Jun 2022 21:53:00 +0800
Subject: [PATCH] client: scroll active label into view

---
 .../client/src/components/wiki/tocs/tree.tsx  | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/wiki/tocs/tree.tsx b/packages/client/src/components/wiki/tocs/tree.tsx
index c4ea03cd..559eeb5a 100644
--- a/packages/client/src/components/wiki/tocs/tree.tsx
+++ b/packages/client/src/components/wiki/tocs/tree.tsx
@@ -5,7 +5,8 @@ import { DocumentCreator as DocumenCreatorForm } from 'components/document/creat
 import { CREATE_DOCUMENT, event, triggerCreateDocument } from 'event';
 import { useToggle } from 'hooks/use-toggle';
 import Link from 'next/link';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import scrollIntoView from 'scroll-into-view-if-needed';
 
 import styles from './index.module.scss';
 
@@ -64,14 +65,17 @@ const AddDocument = () => {
   );
 };
 
+let scrollTimer;
+
 export const Tree = ({ data, docAsLink, getDocLink, parentIds, activeId, isShareMode = false }) => {
+  const $container = useRef<HTMLDivElement>(null);
   const [expandedKeys, setExpandedKeys] = useState(parentIds);
 
   const renderBtn = useCallback((node) => <Actions key={node.id} node={node} />, []);
 
   const renderLabel = useCallback(
     (label, item) => (
-      <div className={styles.treeItemWrap}>
+      <div className={styles.treeItemWrap} id={`item-${item.id}`}>
         <Link href={docAsLink} as={getDocLink(item.id)}>
           <a className={styles.left}>
             <Typography.Text
@@ -95,8 +99,26 @@ export const Tree = ({ data, docAsLink, getDocLink, parentIds, activeId, isShare
     setExpandedKeys(parentIds);
   }, [parentIds]);
 
+  useEffect(() => {
+    clearTimeout(scrollTimer);
+    scrollTimer = setTimeout(() => {
+      const target = $container.current.querySelector(`#item-${activeId}`);
+      if (!target) return;
+      target.scrollIntoView();
+      scrollIntoView(target, {
+        behavior: 'smooth',
+        scrollMode: 'if-needed',
+        block: 'center',
+      });
+    }, 500);
+
+    return () => {
+      clearTimeout(scrollTimer);
+    };
+  }, [activeId]);
+
   return (
-    <div className={styles.treeInnerWrap}>
+    <div className={styles.treeInnerWrap} ref={$container}>
       <SemiTree
         treeData={data}
         renderLabel={renderLabel}