@kylincloud/flamegraph 0.35.22 → 0.35.24

package/src/shims/Table.tsx

@@ -1,6 +1,6 @@
 // src/shims/Table.tsx
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { useState, ReactNode, CSSProperties, RefObject } from 'react';
+import React, { useState, useRef, ReactNode, CSSProperties, RefObject } from 'react';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import clsx from 'clsx';
@@ -94,6 +94,46 @@ interface TableProps {
   itemsPerPage?: number;
 }
 
+/**
+ * 表格行组件
+ * 单击立即高亮，双击同时触发高亮和聚焦
+ */
+function TableRow({ row }: { row: BodyRow }) {
+  const {
+    cells,
+    isRowSelected,
+    isRowDisabled,
+    className,
+    onClick,
+    onDoubleClick,
+    onContextMenu,
+    ...rest
+  } = row;
+
+  const renderID = useRef(Math.random()).current;
+
+  return (
+    <tr
+      {...rest}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onContextMenu={onContextMenu}
+      className={clsx(className, {
+        [styles.isRowSelected]: isRowSelected,
+        [styles.isRowDisabled]: isRowDisabled,
+      })}
+    >
+      {cells &&
+        cells.map(({ style, value, ...cellRest }: Cell, index: number) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <td key={renderID + index} style={style} {...cellRest}>
+            {value}
+          </td>
+        ))}
+    </tr>
+  );
+}
+
 function Table({
   sortByDirection,
   sortBy,
@@ -154,45 +194,9 @@ function Table({
             </tr>
           ) : (
             paginate(table.bodyRows, currPage, itemsPerPage).map(
-              ({
-                cells,
-                isRowSelected,
-                isRowDisabled,
-                className,
-                onClick,
-                onDoubleClick,
-                onContextMenu,
-                ...rest
-              }) => {
-                // The problem is that when you switch apps or time-range and the function
-                // names stay the same it leads to an issue where rows don't get re-rendered
-                // So we force a rerender each time.
-                const renderID = Math.random();
-
-                return (
-                  <tr
-                    key={renderID}
-                    {...rest}
-                    onClick={onClick}
-                    onDoubleClick={onDoubleClick}
-                    onContextMenu={onContextMenu}
-                    className={clsx(className, {
-                      [styles.isRowSelected]: isRowSelected,
-                      [styles.isRowDisabled]: isRowDisabled,
-                    })}
-                  >
-                    {cells &&
-                      cells.map(
-                        ({ style, value, ...rest }: Cell, index: number) => (
-                          // eslint-disable-next-line react/no-array-index-key
-                          <td key={renderID + index} style={style} {...rest}>
-                            {value}
-                          </td>
-                        )
-                      )}
-                  </tr>
-                );
-              }
+              (row, idx) => (
+                <TableRow key={row['data-row'] ?? `row-${idx}`} row={row} />
+              )
             )
           )}
         </tbody>