fix: more adjustments

gisce · Aug 14, 2024 · 4c140d4 · 4c140d4
1 parent 503d3a8
commit 4c140d4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 58 deletions.
diff --git a/src/components/InfiniteTable/InfiniteTable.tsx b/src/components/InfiniteTable/InfiniteTable.tsx
@@ -13,18 +13,15 @@ import "@/styles/ag-theme-quartz.css";
 import {
   BodyScrollEvent,
   ColDef,
-  ColumnMovedEvent,
   ColumnResizedEvent,
   ColumnState,
-  DragStoppedEvent,
   FirstDataRenderedEvent,
   GridReadyEvent,
   IGetRowsParams,
   RowDoubleClickedEvent,
 } from "ag-grid-community";
 import { TableProps } from "@/types";
 import { useDeepArrayMemo } from "@/hooks/useDeepArrayMemo";
-import debounce from "lodash/debounce";
 import { HeaderCheckbox } from "./HeaderCheckbox";
 import { useRowSelection } from "./useRowSelection";
 import { useColumnState } from "./useColumnState";
@@ -133,36 +130,33 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
       onGetColumnsState,
     });
 
-    const debouncedOnColumnChanged = useCallback(
-      (state: ColumnState[]) => {
-        if (!columnChangeListenerReady.current) {
-          columnChangeListenerReady.current = true;
+    const onColumnChanged = useCallback(() => {
+      const state = gridRef?.current?.api.getColumnState();
+      if (!columnChangeListenerReady.current) {
+        columnChangeListenerReady.current = true;
+        return;
+      }
+      if (!state) {
+        return;
+      }
+      applyAndUpdateNewState(state);
+      onColumnsChangedProps?.(state);
+    }, [applyAndUpdateNewState, onColumnsChangedProps]);
+
+    const onColumnMoved = useCallback(() => {
+      onColumnChanged();
+    }, [onColumnChanged]);
+
+    const onColumnResized = useCallback(
+      (event: ColumnResizedEvent) => {
+        if (!event.finished) {
           return;
         }
-        applyAndUpdateNewState(state);
-        onColumnsChangedProps?.(state);
+        onColumnChanged();
       },
-      [applyAndUpdateNewState, onColumnsChangedProps],
+      [onColumnChanged],
     );
 
-    const onColumnChanged = useCallback(
-      (event: DragStoppedEvent | ColumnResizedEvent) => {
-        // if (!event.finished) {
-        //   return;
-        // }
-        // const et = event.source === "uiColumnResized";
-        console.log({ event });
-        const state = gridRef?.current?.api.getColumnState();
-        if (!state) {
-          return;
-        }
-        debouncedOnColumnChanged(state);
-      },
-      [debouncedOnColumnChanged],
-    );
-
-    const defaultColDef = useMemo<ColDef>(() => ({}), []);
-
     const colDefs = useMemo((): ColDef[] => {
       const checkboxColumn = {
         checkboxSelection: true,
@@ -299,14 +293,6 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
       ],
     );
 
-    console.log("-----");
-    console.log("InfiniteTable render");
-    console.log({
-      internalState: gridRef.current?.api?.getColumnState(),
-      columnsPersistedStateRef: columnsPersistedStateRef.current,
-    });
-    console.log("-----");
-
     const onGridReady = useCallback(
       (params: GridReadyEvent) => {
         params.api.setGridOption("datasource", {
@@ -361,7 +347,6 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
           <AgGridReact
             ref={gridRef}
             columnDefs={colDefs}
-            // defaultColDef={defaultColDef}
             onRowDoubleClicked={onRowDoubleClicked}
             rowStyle={{
               cursor: onRowDoubleClick ? "pointer" : "auto",
@@ -371,9 +356,8 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
             suppressRowClickSelection={true}
             rowBuffer={0}
             rowSelection={"multiple"}
-            onDragStopped={onColumnChanged}
-            // onColumnMoved={onColumnChanged}
-            onColumnResized={onColumnChanged}
+            onDragStopped={onColumnMoved}
+            onColumnResized={onColumnResized}
             rowModelType={"infinite"}
             cacheBlockSize={20}
             onSelectionChanged={onSelectionChangedDebounced}

diff --git a/src/components/InfiniteTable/useColumnState.ts b/src/components/InfiniteTable/useColumnState.ts
@@ -53,33 +53,20 @@ export const useColumnState = ({
 
   const applyPersistedState = useCallback(() => {
     runDeferredCallback(() => {
-      console.log(
-        "1- Applying column state: ",
-        columnsPersistedStateRef.current,
-      );
       gridRef?.current?.api.applyColumnState({
         state: columnsPersistedStateRef.current,
         applyOrder: true,
       });
-      console.log(
-        "Checking state after applyColumnState: ",
-        gridRef?.current?.api.getColumnState()!,
-      );
     });
   }, [gridRef, runDeferredCallback]);
 
   const applyAndUpdateNewState = useCallback(
     (state: ColumnState[]) => {
-      console.log("3- Applying column state: ", state);
       columnsPersistedStateRef.current = state;
       gridRef?.current?.api.applyColumnState({
         state: columnsPersistedStateRef.current,
         applyOrder: true,
       });
-      console.log(
-        "Checking state after applyColumnState: ",
-        gridRef?.current?.api.getColumnState()!,
-      );
     },
     [gridRef],
   );
@@ -100,12 +87,7 @@ export const useColumnState = ({
             ? col.width
             : col.width + spacePerColumn,
         }));
-        console.log("2- Applying column state: ", newState);
         gridRef?.current?.api.applyColumnState({ state: newState });
-        console.log(
-          "Checking state after applyColumnState: ",
-          gridRef?.current?.api.getColumnState()!,
-        );
       }
     });
   }, [columnsToIgnore, gridRef, remainingBlankSpace, runDeferredCallback]);