From 990f0666937af98917bfd5acca20ba21efe7b829 Mon Sep 17 00:00:00 2001
From: lqqyt2423 <974923609@qq.com>
Date: Mon, 23 May 2022 22:01:13 +0800
Subject: [PATCH] =?UTF-8?q?web:=20=E4=BC=98=E5=8C=96=E8=87=AA=E5=8A=A8scro?=
 =?UTF-8?q?ll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addon/web/client/src/App.tsx  | 16 ++++++++++++++--
 addon/web/client/src/utils.ts | 19 +++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/addon/web/client/src/App.tsx b/addon/web/client/src/App.tsx
index 1b99798..369a0d2 100644
--- a/addon/web/client/src/App.tsx
+++ b/addon/web/client/src/App.tsx
@@ -10,6 +10,7 @@ import ViewFlow from './components/ViewFlow'
 
 import { FlowManager } from './flow'
 import { parseMessage, SendMessageType, buildMessageMeta, Flow, MessageType } from './message'
+import { isInViewPort } from './utils'
 
 interface IState {
   flows: Flow[]
@@ -27,6 +28,7 @@ class App extends React.Component<IProps, IState> {
   private flowMgr: FlowManager
   private ws: WebSocket | null
   private wsUnmountClose: boolean
+  private tableBottomRef: React.RefObject<HTMLDivElement>
 
   private wsReconnCount = -1
 
@@ -44,6 +46,7 @@ class App extends React.Component<IProps, IState> {
 
     this.ws = null
     this.wsUnmountClose = false
+    this.tableBottomRef = React.createRef<HTMLDivElement>()
   }
 
   componentDidMount() {
@@ -106,7 +109,16 @@ class App extends React.Component<IProps, IState> {
       if (msg.type === MessageType.REQUEST) {
         const flow = new Flow(msg)
         this.flowMgr.add(flow)
-        this.setState({ flows: this.flowMgr.showList() })
+
+        let shouldScroll = false
+        if (this.tableBottomRef?.current && isInViewPort(this.tableBottomRef.current)) {
+          shouldScroll = true
+        }
+        this.setState({ flows: this.flowMgr.showList() }, () => {
+          if (shouldScroll) {
+            this.tableBottomRef?.current?.scrollIntoView({ behavior: 'auto' })
+          }
+        })
       }
       else if (msg.type === MessageType.REQUEST_BODY) {
         const flow = this.flowMgr.get(msg.id)
@@ -192,7 +204,7 @@ class App extends React.Component<IProps, IState> {
               }
             </tbody>
           </Table>
-          <div id="hidden-bottom" style={{ height: '0px', visibility: 'hidden' }}></div>
+          <div ref={this.tableBottomRef} id="hidden-bottom" style={{ height: '0px', visibility: 'hidden', marginBottom: '1px' }}></div>
         </div>
 
         <ViewFlow
diff --git a/addon/web/client/src/utils.ts b/addon/web/client/src/utils.ts
index 2342cf5..543e446 100644
--- a/addon/web/client/src/utils.ts
+++ b/addon/web/client/src/utils.ts
@@ -79,3 +79,22 @@ export const bufHexView = (buf: ArrayBuffer) => {
 
   return str
 }
+
+// https://github.com/febobo/web-interview/issues/84
+export function isInViewPort(element: HTMLElement) {
+  const viewWidth = window.innerWidth || document.documentElement.clientWidth
+  const viewHeight = window.innerHeight || document.documentElement.clientHeight
+  const {
+    top,
+    right,
+    bottom,
+    left,
+  } = element.getBoundingClientRect()
+
+  return (
+    top >= 0 &&
+    left >= 0 &&
+    right <= viewWidth &&
+    bottom <= viewHeight
+  )
+}