feat: multiple tabs & react-data-grid & toggled autoScroll (#12)

* react-data-grid demo * no margin and no padding for <body> * more RDG properties * new code structure & multiple tabs support * automatically scroll to bottom * now autoScroll can be toggled * start & stop -> toggleCapturing
tyn1998 · Jul 17, 2022 · b55db74 · b55db74
1 parent f9df346
commit b55db74
Show file tree

Hide file tree

Showing 12 changed files with 2,521 additions and 2,579 deletions.
diff --git a/package.json b/package.json
@@ -16,8 +16,10 @@
     "@hot-loader/react-dom": "^17.0.2",
     "echarts": "^5.3.2",
     "react": "^17.0.2",
+    "react-data-grid": "^7.0.0-beta.13",
     "react-dom": "^17.0.2",
-    "react-hot-loader": "^4.13.0"
+    "react-hot-loader": "^4.13.0",
+    "react-tabs": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",

diff --git a/src/pages/Panel/Panel.css b/src/pages/Panel/Panel.css
diff --git a/src/pages/Panel/Panel.jsx b/src/pages/Panel/Panel.jsx
diff --git a/src/pages/Panel/index.css b/src/pages/Panel/index.css
diff --git a/src/pages/Panel/index.html b/src/pages/Panel/index.html
@@ -6,6 +6,6 @@
   </head>
 
   <body>
-    <div id="app-container"></div>
+    <div id="panel"></div>
   </body>
 </html>
diff --git a/src/pages/Panel/index.jsx b/src/pages/Panel/index.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { render } from 'react-dom';
 
-import Panel from './Panel';
-import './index.css';
+import Panel from '../../ui/Panel';
 
-render(<Panel />, window.document.querySelector('#app-container'));
+render(<Panel />, window.document.querySelector('#panel'));
 
 if (module.hot) module.hot.accept();
diff --git a/src/ui/MessagesTab/index.jsx b/src/ui/MessagesTab/index.jsx
@@ -0,0 +1,99 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { startCapturing, stopCapturing, getMessages } from '../../capturer';
+import DataGrid from 'react-data-grid';
+
+const INTERVAL = 500;
+
+const commonColumnProperties = {
+  resizable: true,
+  sortable: true,
+  filterable: true,
+};
+
+const columns = [
+  { key: 'id', name: 'ID', width: 50, frozen: true },
+  { key: 'time', name: 'Time', width: 150, frozen: true },
+  { key: 'message', name: 'Message' },
+].map((c) => ({ ...c, ...commonColumnProperties }));
+
+const MessagesTab = () => {
+  const [capturing, setCapturing] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [timer, setTimer] = useState(null);
+  const [bottomRow, setBottomRow] = useState(-1);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const gridRef = useRef(null);
+
+  useEffect(() => {
+    gridRef.current && autoScroll && gridRef.current.scrollToRow(bottomRow);
+  }, [autoScroll, bottomRow]);
+
+  const toggleAutoScroll = () => {
+    setAutoScroll(!autoScroll);
+  };
+
+  const addMessages = () => {
+    getMessages()
+      .then((newMessages) => {
+        setMessages((oldMessages) => [...oldMessages, ...newMessages]);
+        if (newMessages.length > 0) {
+          setBottomRow((oldBottomRow) => oldBottomRow + newMessages.length);
+        }
+      })
+      .catch((error) => {
+        console.error('Getting messages failed!');
+        console.error(error.stack || error);
+      });
+  };
+
+  const toggleCapturing = () => {
+    if (capturing === true) {
+      stopCapturing()
+        .then(() => {
+          setCapturing(false);
+          clearInterval(timer);
+          setTimer(null);
+        })
+        .catch((error) => {
+          console.error('Stoping capturing failed!');
+          console.error(error.stack || error);
+        });
+    } else {
+      startCapturing()
+        .then(() => {
+          setCapturing(true);
+          setTimer(setInterval(() => addMessages(), INTERVAL));
+        })
+        .catch((error) => {
+          console.error('Starting capturing failed!');
+          console.error(error.stack || error);
+        });
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={toggleCapturing}>toggleCapturing</button>
+      <button onClick={toggleAutoScroll}>toggleAutoScroll</button>
+
+      <DataGrid
+        style={{ fontSize: '10px', height: 'calc(100vh - 78px' }}
+        ref={gridRef}
+        columns={columns}
+        rows={messages.map((msg, index) => {
+          return {
+            id: index,
+            time: msg.time,
+            message: msg.msg,
+          };
+        })}
+        rowKeyGetter={(row) => row.id}
+        headerRowHeight={30}
+        rowHeight={20}
+      />
+    </div>
+  );
+};
+
+export default MessagesTab;
diff --git a/src/ui/Panel.css b/src/ui/Panel.css
@@ -0,0 +1,9 @@
+body {
+  /* height: 100%; */
+  /* padding: 0; */
+  /* margin: 0; */
+  /* font-size: 13px; */
+  /* line-height: 1.6; */
+  /* color: #333; */
+  /* background-color: transparent; */
+}
diff --git a/src/ui/Panel.jsx b/src/ui/Panel.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import './Panel.css';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import MessagesTab from './MessagesTab';
+
+const Panel = () => {
+  return (
+    <Tabs forceRenderTabPanel={true}>
+      <TabList>
+        <Tab>Messages</Tab>
+        <Tab>XXX</Tab>
+      </TabList>
+
+      <TabPanel>
+        <MessagesTab />
+      </TabPanel>
+      <TabPanel>
+        <div>XXX</div>
+      </TabPanel>
+    </Tabs>
+  );
+};
+
+export default Panel;
diff --git a/src/pages/Panel/line/line.tsx → src/ui/line/line.tsx b/src/pages/Panel/line/line.tsx → src/ui/line/line.tsx
diff --git a/webpack.config.js b/webpack.config.js
@@ -11,6 +11,8 @@ const ASSET_PATH = process.env.ASSET_PATH || '/';
 
 const alias = {
   'react-dom': '@hot-loader/react-dom',
+  'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
+  'react/jsx-runtime': 'react/jsx-runtime.js',
 };
 
 // load the secrets
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,6 @@ @@
       </head>
       <body>
-        <div id="app-container"></div>
+        <div id="panel"></div>
       </body>
     </html>