@heliux-org/design-system-core 0.0.293 → 0.0.294-TableTestBuild

package/src/components/NewTable/components/useLeafyGreenTable/useLeafyGreenTable.tsx

@@ -55,16 +55,47 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
 
   const columnManagerRef = useRef<HTMLButtonElement>(null);
   const isInitialSetupDone = useRef(false);
+  const initialSelectionRef = useRef<{ [key: string]: boolean }>({});
+  const previousDataRef = useRef<T[]>([]);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const loadMoreTriggerRef = useRef<HTMLDivElement | null>(null);
+
+  const getRowId = useCallback((row: T, index: number) => {
+    if (hasSelectableRows) {
+      return row.id?.toString() ?? index.toString();
+    }
+    return index.toString();
+  }, [hasSelectableRows]);
+
+  useEffect(() => {
+    if (!isInitialSetupDone.current && hasSelectableRows) {
+      initialSelectionRef.current = initiallySelectedRowIds.reduce((acc, id) => {
+        acc[id.toString()] = true;
+        return acc;
+      }, {});
+      isInitialSetupDone.current = true;
+    }
+  }, [initiallySelectedRowIds, hasSelectableRows]);
+
+  useEffect(() => {
+    setLoadedData(infiniteScrolling ? data.slice(0, initialLoadCount) : data);
+  }, [data, infiniteScrolling, initialLoadCount]);
 
   useEffect(() => {
-    if (loadedData.length === 0) {
-      setLoadedData(infiniteScrolling ? data.slice(0, initialLoadCount) : data);
-    } else {
-      setTimeout(() => {
-        setLoadedData(infiniteScrolling ? data.slice(0, loadedData.length) : data);
-      }, 0);
+    if (data !== previousDataRef.current && hasSelectableRows) {
+      const newRowSelection = { ...initialSelectionRef.current, ...rowSelection };
+      const filteredSelection = {};
+      data.forEach((row, index) => {
+        const rowId = getRowId(row, index);
+        if (newRowSelection[rowId]) {
+          filteredSelection[rowId] = true;
+        }
+      });
+      
+      setRowSelection(filteredSelection);
+      previousDataRef.current = data;
     }
-  }, [data, initialLoadCount, infiniteScrolling, loadedData.length]);
+  }, [data, getRowId, hasSelectableRows]);
 
   const baseSelectColumnConfig: LGColumnDef<T, V> = {
     id: "select",
@@ -75,17 +106,17 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
 
   useEffect(() => {
     if (selectAllRows && hasSelectableRows) {
-      const allSelected = loadedData.reduce((acc, row, index) => {
-        acc[index] = true;
+      const allSelected = data.reduce((acc, row, index) => {
+        acc[getRowId(row, index)] = true;
         return acc;
       }, {});
       setRowSelection(allSelected);
     }
-  }, [selectAllRows, hasSelectableRows, loadedData]);
+  }, [selectAllRows, hasSelectableRows, data, getRowId]);
 
-  const handleRowClick = (rowId: number) => {
+  const handleRowClick = (rowId: string) => {
     if (allowSelectSingle) {
-      const selectedRowData = loadedData.find((d) => d.id === Number(rowId) + 1);
+      const selectedRowData = data.find((d, index) => getRowId(d, index) === rowId);
       onSelect?.(selectedRowData);
     }
   };
@@ -207,33 +238,27 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
   const [columnResizeMode, setColumnResizeMode] = useState<ColumnResizeMode>("onChange");
   const [columnResizeDirection, setColumnResizeDirection] = useState<ColumnResizeDirection>("ltr");
 
-  const table = useReactTable<LGTableDataType<T>>({
-    data: loadedData,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getRowCanExpand: (row) => !!row.original.renderExpandedContent || !!row.subRows?.length,
-    enableExpanding: true,
-    enableSortingRemoval: hasSortableColumns ? true : undefined,
-    getSubRows: (row) => row.subRows,
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: withPagination ? getPaginationRowModel() : undefined,
-    initialState: initialState ? initialState : undefined,
-    state: { rowSelection },
-    onRowSelectionChange: setRowSelection,
-    columnResizeMode,
-    columnResizeDirection,
-    autoResetPageIndex,
-    ...rest,
-  });
+  const toggleAllRowsSelected = (value?: boolean) => {
+    if (!hasSelectableRows) return;
 
-  const { rows } = table.getCoreRowModel();
-  const { rows: paginationRows } = table.getPaginationRowModel();
-  const _rowVirtualizer = useVirtual({
-    parentRef: containerRef,
-    size: rows.length,
-    overscan: 30,
-    ...virtualizerOptions,
-  });
+    const newSelection = { ...initialSelectionRef.current };
+    const rowsToSelect = selectCurrentPageOnly ? table.getPageRows() : table.getPreFilteredRowModel().rows;
+
+    const setTo = value ?? !table.getIsAllRowsSelected();
+    rowsToSelect.forEach((row) => {
+      newSelection[row.id] = setTo;
+    });
+
+    setRowSelection(newSelection);
+  };
+
+  const unselectAllRows = () => {
+    if (!hasSelectableRows) return;
+
+    setRowSelection({});
+    initialSelectionRef.current = {};
+    onUnselectAll?.();
+  };
 
   const loadMoreRows = useCallback(() => {
     if (!infiniteScrolling || isLoading || loadedData.length >= data.length) return;
@@ -244,102 +269,76 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
         return [...prevData, ...nextData];
       });
       setIsLoading(false);
-    }, 1000);
-  }, [infiniteScrolling, isLoading, data, loadMoreCount]);
+      if (onLoadMore) {
+        onLoadMore();
+      }
+    }, 500);
+  }, [infiniteScrolling, isLoading, data, loadMoreCount, onLoadMore, loadedData.length]);
 
   useEffect(() => {
-    const handleScroll = () => {
-      if (
-        infiniteScrolling &&
-        containerRef.current &&
-        containerRef.current.scrollHeight - containerRef.current.scrollTop ===
-          containerRef.current.clientHeight
-      ) {
-        loadMoreRows();
-      }
-    };
+    if (infiniteScrolling && loadMoreTriggerRef.current) {
+      observerRef.current = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting) {
+            loadMoreRows();
+          }
+        },
+        { threshold: 0.1 }
+      );
 
-    const container = containerRef.current;
-    if (container) {
-      container.addEventListener("scroll", handleScroll);
-      return () => {
-        container.removeEventListener("scroll", handleScroll);
-      };
+      observerRef.current.observe(loadMoreTriggerRef.current);
     }
-  }, [containerRef, loadMoreRows, infiniteScrolling]);
 
-  useEffect(() => {
-    const checkContainerHeight = () => {
-      if (
-        infiniteScrolling &&
-        containerRef.current &&
-        containerRef.current.scrollHeight <= containerRef.current.clientHeight
-      ) {
-        loadMoreRows();
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
       }
     };
+  }, [infiniteScrolling, loadMoreRows]);
 
-    const container = containerRef.current;
-    if (container) {
-      const observer = new MutationObserver(checkContainerHeight);
-      observer.observe(container, { childList: true, subtree: true });
-      
-      checkContainerHeight();
-
-      return () => {
-        observer.disconnect();
-      };
-    }
-  }, [containerRef, infiniteScrolling, loadMoreRows]);
-
-  const toggleAllRowsSelected = () => {
-    const isAllRowsSelected = selectCurrentPageOnly
-      ? paginationRows.every((row) => rowSelection[row.id])
-      : rows.every((row) => rowSelection[row.id]);
-
-    const newSelection = {};
-    const rowsToSelect = selectCurrentPageOnly ? paginationRows : rows;
-
-    rowsToSelect.forEach((row) => {
-      newSelection[row.id] = !isAllRowsSelected;
-    });
-
-    setRowSelection(newSelection);
+  const tableOptions = {
+    data: loadedData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowCanExpand: (row) => !!row.original.renderExpandedContent || !!row.subRows?.length,
+    enableExpanding: true,
+    enableSortingRemoval: hasSortableColumns ? true : undefined,
+    getSubRows: (row) => row.subRows,
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: withPagination ? getPaginationRowModel() : undefined,
+    initialState: initialState ? initialState : undefined,
+    columnResizeMode,
+    columnResizeDirection,
+    autoResetPageIndex,
+    ...rest,
   };
 
-  const unselectAllRows = () => {
-    setRowSelection({});
-    onUnselectAll?.();
-  };
+  if (hasSelectableRows) {
+    tableOptions.getRowId = getRowId;
+    tableOptions.state = { rowSelection };
+    tableOptions.onRowSelectionChange = setRowSelection;
+  }
+
+  const table = useReactTable<LGTableDataType<T>>(tableOptions);
 
   table.toggleAllRowsSelected = toggleAllRowsSelected;
   table.unselectAllRows = unselectAllRows;
 
+  const { rows } = table.getCoreRowModel();
+  const { rows: paginationRows } = table.getPaginationRowModel();
+  const _rowVirtualizer = useVirtual({
+    parentRef: containerRef,
+    size: rows.length,
+    overscan: 30,
+    ...virtualizerOptions,
+  });
+
   useEffect(() => {
-    if (onRowSelectionChange) {
-      const selectedRows = Object.entries(rowSelection).reduce((selected, [key, value]) => {
-        if (value) {
-          selected.push(data[parseInt(key)]);
-        }
-        return selected;
-      }, [] as T[]);
+    if (onRowSelectionChange && hasSelectableRows) {
+      const selectedRows = data.filter((row, index) => rowSelection[getRowId(row, index)]);
       onRowSelectionChange(selectedRows);
     }
-  }, [rowSelection, data, onRowSelectionChange]);
-
-  useLayoutEffect(() => {
-    if (!isInitialSetupDone.current && table.getRowModel().rows.length > 0) {
-      const rowIds = table.getRowModel().rows
-        .filter((row) => initiallySelectedRowIds.includes(row.original.id))
-        .map((row) => row.id);
-      const initialRowSelection = rowIds.reduce((acc, id) => {
-        acc[id] = true;
-        return acc;
-      }, {});
-      setRowSelection(initialRowSelection);
-      isInitialSetupDone.current = true;
-    }
-  }, [initiallySelectedRowIds, table.getRowModel().rows]);
+  }, [rowSelection, data, onRowSelectionChange, getRowId, hasSelectableRows]);
 
   return {
     ...table,
@@ -359,6 +358,10 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
     columnManagerRef,
     setHoveredRow,
     isLoading,
+    loadedData,
+    loadMoreTriggerRef,
+    infiniteScrolling,
+    loadMoreRows,
   } as LeafyGreenTable<T>;
 };