Fixed hovering.

Author: novykh

src/components/tableV2/core/rows.js

@@ -1,14 +1,13 @@
-import React, { useState, useEffect } from "react"
+import React, { useEffect } from "react"
 import { useVirtualizer } from "@tanstack/react-virtual"
 import { flexRender } from "@tanstack/react-table"
+import { useTableContext } from "../features/provider"
 import Table from "./base-table"
 import { CELL_HEIGHT } from "../constants"
 
 const Rows = ({
   disableClickRow,
   getRowHandler = "getCenterVisibleCells",
-  onHoverRow,
-  hoveredRow,
   onClickRow,
   pinnedStyles,
   table,
@@ -20,6 +19,8 @@ const Rows = ({
   loading,
   loadMore,
 }) => {
+  const { onHover, hoveredRow } = useTableContext()
+
   const { rows } = table.getRowModel()
 
   const virtualizer = useVirtualizer({
@@ -68,8 +69,8 @@ const Rows = ({
             disableClickRow={() =>
               disableClickRow?.({ data: row.original, table: table, fullRow: row })
             }
-            onMouseEnter={() => onHoverRow(row.id)}
-            onMouseLeave={() => onHoverRow(null)}
+            onMouseEnter={() => onHover(row.id)}
+            onMouseLeave={() => onHover(null)}
             isHovering={row.id === hoveredRow}
             background={virtualRow.index % 2 == 0 ? "mainBackground" : "tableRowBg"}
           >

src/components/tableV2/features/provider.js

@@ -0,0 +1,30 @@
+import React, { useContext, createContext, useState, useCallback, useMemo } from "react"
+
+const TableContext = createContext({})
+
+export const useTableContext = () => useContext(TableContext)
+
+const TableProvider = ({ onHoverRow, children }) => {
+  const [state, setState] = useState({ hoveredRow: null })
+
+  const dispatch = useCallback(values => {
+    setState(prev => ({
+      ...prev,
+      ...values,
+    }))
+  }, [])
+
+  const onHover = useCallback(
+    id => {
+      dispatch({ hoveredRow: id })
+      onHoverRow?.(id)
+    },
+    [onHoverRow]
+  )
+
+  const contextValue = useMemo(() => ({ ...state, dispatch, onHover }), [state, onHover])
+
+  return <TableContext.Provider value={contextValue}>{children}</TableContext.Provider>
+}
+
+export default TableProvider

src/components/tableV2/features/useRowHover.js

@@ -14,7 +14,7 @@ import makePagination from "./features/pagination"
 import useBulkActions from "./features/useBulkActions"
 import ColumnPinning from "./features/columnPinning"
 import GlobalControls from "./features/globalControls"
-import useRowHover from "./features/useRowHover"
+import TableProvider from "./features/provider"
 
 import MainTable from "./features/mainTable"
 
@@ -59,8 +59,6 @@ const NetdataTable = ({
   virtualizeOptions = {},
   ...rest
 }) => {
-  const [hoveredRow, setHoveredRow] = useRowHover(onHoverRow)
-
   const [columnVisibility, setColumnVisibility] = useState(defaultColumnVisibility)
 
   useEffect(() => {
@@ -174,53 +172,51 @@ const NetdataTable = ({
   })
 
   return (
-    <Flex height="100%" overflow="hidden" width="100%" column>
-      {onGlobalSearchChange || hasBulkActions ? (
-        <GlobalControls
-          bulkActions={actions}
-          dataGa={dataGa}
-          handleSearch={onGlobalSearchChange ? onGlobalFilterChange : null}
-          searchValue={globalFilter}
-        />
-      ) : null}
-      <Flex ref={scrollParentRef} overflow="auto" width="100%" height="100%">
-        {enableColumnPinning && (
-          <ColumnPinning
+    <TableProvider onHoverRow={onHoverRow}>
+      <Flex height="100%" overflow="hidden" width="100%" column>
+        {onGlobalSearchChange || hasBulkActions ? (
+          <GlobalControls
+            bulkActions={actions}
+            dataGa={dataGa}
+            handleSearch={onGlobalSearchChange ? onGlobalFilterChange : null}
+            searchValue={globalFilter}
+          />
+        ) : null}
+        <Flex ref={scrollParentRef} overflow="auto" width="100%" height="100%">
+          {enableColumnPinning && (
+            <ColumnPinning
+              enableResize={enableResize}
+              disableClickRow={disableClickRow}
+              onClickRow={onClickRow}
+              testPrefixCallback={testPrefixCallback}
+              enableSorting={enableSorting}
+              table={table}
+              headers={table.getLeftFlatHeaders()}
+              testPrefix={testPrefix}
+              dataGa={dataGa}
+              scrollParentRef={scrollParentRef}
+              virtualizeOptions={virtualizeOptions}
+            />
+          )}
+          <MainTable
+            scrollParentRef={scrollParentRef}
             enableResize={enableResize}
             disableClickRow={disableClickRow}
             onClickRow={onClickRow}
             testPrefixCallback={testPrefixCallback}
             enableSorting={enableSorting}
+            enableColumnPinning={enableColumnPinning}
             table={table}
-            headers={table.getLeftFlatHeaders()}
-            testPrefix={testPrefix}
             dataGa={dataGa}
-            onHoverRow={setHoveredRow}
-            hoveredRow={hoveredRow}
-            scrollParentRef={scrollParentRef}
+            tableRef={tableRef}
+            testPrefix={testPrefix}
             virtualizeOptions={virtualizeOptions}
+            {...rest}
           />
-        )}
-        <MainTable
-          scrollParentRef={scrollParentRef}
-          enableResize={enableResize}
-          disableClickRow={disableClickRow}
-          onClickRow={onClickRow}
-          testPrefixCallback={testPrefixCallback}
-          enableSorting={enableSorting}
-          enableColumnPinning={enableColumnPinning}
-          table={table}
-          dataGa={dataGa}
-          tableRef={tableRef}
-          testPrefix={testPrefix}
-          onHoverRow={setHoveredRow}
-          hoveredRow={hoveredRow}
-          virtualizeOptions={virtualizeOptions}
-          {...rest}
-        />
+        </Flex>
+        {enablePagination && makePagination({ table })}
       </Flex>
-      {enablePagination && makePagination({ table })}
-    </Flex>
+    </TableProvider>
   )
 }