add batchOperationDelay prop to DataSource

infinite-table · Aug 15, 2024 · cb3915c · cb3915c
1 parent 2fbdeed
commit cb3915c
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 5 deletions.
diff --git a/source/src/components/DataSource/getDataSourceApi.ts b/source/src/components/DataSource/getDataSourceApi.ts
@@ -50,6 +50,10 @@ class DataSourceApiImpl<T> implements DataSourceApi<T> {
 
   private getState: () => DataSourceState<T>;
   private actions: DataSourceComponentActions<T>;
+  //@ts-ignore
+  private batchOperationRafId: number = 0;
+  //@ts-ignore
+  private batchOperationTimeoutId: any = 0;
 
   constructor(param: GetDataSourceApiParam<T>) {
     this.getState = param.getState;
@@ -68,9 +72,20 @@ class DataSourceApiImpl<T> implements DataSourceApi<T> {
       this.pendingPromise = new Promise((resolve) => {
         this.resolvePendingPromise = resolve;
       });
-      raf(() => {
-        this.commit();
-      });
+
+      const delay = Math.max(0, this.getState().batchOperationDelay ?? 0);
+
+      if (delay === 0) {
+        this.batchOperationRafId = raf(() => {
+          this.commit();
+        });
+      } else {
+        this.batchOperationTimeoutId = setTimeout(() => {
+          this.batchOperationRafId = raf(() => {
+            this.commit();
+          });
+        }, delay);
+      }
     }
     this.pendingOperations.push(operation);
 

diff --git a/source/src/components/DataSource/state/getInitialState.ts b/source/src/components/DataSource/state/getInitialState.ts
@@ -200,6 +200,7 @@ export const forwardProps = <T>(
             __idToIndex: idToIndexReducer,
           };
     },
+    batchOperationDelay: 1,
     isRowSelected: 1,
     onDataArrayChange: 1,
     onDataMutations: 1,

diff --git a/source/src/components/DataSource/types.ts b/source/src/components/DataSource/types.ts
@@ -133,6 +133,8 @@ export interface DataSourceMappedState<T> {
   isRowSelected: DataSourceProps<T>['isRowSelected'];
   debugId: DataSourceProps<T>['debugId'];
 
+  batchOperationDelay: DataSourceProps<T>['batchOperationDelay'];
+
   onDataArrayChange: DataSourceProps<T>['onDataArrayChange'];
   onDataMutations: DataSourceProps<T>['onDataMutations'];
   onReady: DataSourceProps<T>['onReady'];
@@ -481,6 +483,8 @@ export type DataSourceProps<T> = {
   fields?: (keyof T)[];
   refetchKey?: number | string | object;
 
+  batchOperationDelay?: number;
+
   rowInfoReducers?: DataSourcePropRowInfoReducers<T>;
 
   // TODO move this on the DataSourceAPI? I think so

diff --git a/source/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx b/source/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
@@ -105,7 +105,7 @@ function InfiniteTableCellFn<T>(
       ? column.components?.ColumnCell
       : column.components?.HeaderCell;
   if (RenderComponent) {
-    return <RenderComponent {...finalDOMProps} />;
+    return <RenderComponent {...finalDOMProps} ref={domRef} />;
   }
   return <div {...finalDOMProps} ref={domRef} />;
 }

diff --git a/source/src/components/hooks/useComponentState/index.tsx b/source/src/components/hooks/useComponentState/index.tsx
@@ -292,6 +292,7 @@ export function buildManagedComponent<
     T_PARENT_STATE
   >,
 ) {
+  const useParentStateFn = config.getParentState || (() => null);
   /**
    * since config is passed outside the cmp, we can skip it inside useMemo deps list
    */
@@ -319,7 +320,7 @@ export function buildManagedComponent<
       COMPONENT_DERIVED_STATE &
       COMPONENT_SETUP_STATE;
 
-    const parentState = config.getParentState?.() ?? null;
+    const parentState = useParentStateFn();
     const getParentState = useLatest(parentState);
 
     function initStateOnce() {
@@ -382,6 +383,7 @@ export function buildManagedComponent<
       }
 
       const parentState = getParentState?.() ?? null;
+
       const mappedState: Partial<COMPONENT_MAPPED_STATE> | null =
         action.payload.mappedState;
       const updatedProps: Partial<T_PROPS> | null =
@@ -500,6 +502,9 @@ export function buildManagedComponent<
 
     const prevProps = usePrevious(props);
 
+    const skipTriggerParentStateChangeRef = useRef(false);
+    skipTriggerParentStateChangeRef.current = false;
+
     const effectFn = config.layoutEffect ? useLayoutEffect : useEffect;
     effectFn(() => {
       const currentProps = props;
@@ -582,6 +587,7 @@ export function buildManagedComponent<
 
         // const newState = theReducer(state, action);
 
+        skipTriggerParentStateChangeRef.current = true;
         dispatch(action);
 
         if (config.onPropChange) {
@@ -612,6 +618,15 @@ export function buildManagedComponent<
       }
     });
 
+    effectFn(() => {
+      if (parentState != null && !skipTriggerParentStateChangeRef.current) {
+        dispatch({
+          type: 'PARENT_STATE_CHANGE',
+          payload: {},
+        });
+      }
+    }, [parentState]);
+
     useEffectOnce(() => {
       return () => {
         config.cleanup?.(getComponentState());