diff --git a/src/components/InfiniteTable/InfiniteTable.tsx b/src/components/InfiniteTable/InfiniteTable.tsx index 989076c..ceabea7 100644 --- a/src/components/InfiniteTable/InfiniteTable.tsx +++ b/src/components/InfiniteTable/InfiniteTable.tsx @@ -13,10 +13,8 @@ import "@/styles/ag-theme-quartz.css"; import { BodyScrollEvent, ColDef, - ColumnMovedEvent, ColumnResizedEvent, ColumnState, - DragStoppedEvent, FirstDataRenderedEvent, GridReadyEvent, IGetRowsParams, @@ -24,7 +22,6 @@ import { } 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( 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(() => ({}), []); - const colDefs = useMemo((): ColDef[] => { const checkboxColumn = { checkboxSelection: true, @@ -299,14 +293,6 @@ const InfiniteTableComp = forwardRef( ], ); - 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( ( 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 index 5c7813c..d2b581a 100644 --- 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]);