Fixes #216

infinite-table · Feb 21, 2024 · bf0443f · bf0443f
1 parent ed538df
commit bf0443f
Show file tree

Hide file tree

Showing 19 changed files with 221 additions and 60 deletions.
diff --git a/examples/src/pages/tests/table/master-detail/default.page.tsx b/examples/src/pages/tests/table/master-detail/default.page.tsx
@@ -74,10 +74,12 @@ const dataSource = () => {
 const detailDataSource: DataSourceProps<Developer>['data'] = ({
   sortInfo,
   filterValue,
+  masterRowInfo,
 }) => {
   if (sortInfo && !Array.isArray(sortInfo)) {
     sortInfo = [sortInfo];
   }
+  console.log(masterRowInfo?.data, 'master');
 
   const args = [
     filterValue
@@ -157,7 +159,7 @@ export default function DataTestPage() {
             collapsedRows: true,
           }}
           rowDetailHeight={400}
-          rowDetailsCache={3}
+          rowDetailsCache={false}
           rowDetailRenderer={(
             rowInfo: InfiniteTableRowInfo<Developer>,
             _cache,
@@ -174,12 +176,19 @@ export default function DataTestPage() {
               >
                 <form style={{ padding: 20 }}>
                   <label>
-                    Name:
-                    <input />
+                    First name:
+                    <input
+                      name="first name"
+                      defaultValue={rowInfo.data?.firstName}
+                    />
                   </label>
                   <label>
-                    Name:
-                    <input />
+                    Age:
+                    <input
+                      name="last name"
+                      type="number"
+                      defaultValue={rowInfo.data?.age}
+                    />
                   </label>
                 </form>
                 <DataSource<Developer>

diff --git a/source/src/components/DataSource/DataSourceContext.ts b/source/src/components/DataSource/DataSourceContext.ts
@@ -16,6 +16,7 @@ export function getDataSourceContext<T>(): React.Context<
     api: null as any as DataSourceApi<T>,
     getState: () => null as any as DataSourceState<T>,
     assignState: () => null as any as DataSourceState<T>,
+    getDataSourceMasterContext: () => undefined,
     componentState: null as any as DataSourceState<T>,
     componentActions: null as any as DataSourceComponentActions<T>,
   }));

diff --git a/source/src/components/DataSource/index.tsx b/source/src/components/DataSource/index.tsx
@@ -85,10 +85,14 @@ function DataSourceCmp<T>({
   const DataSourceContext = getDataSourceContext<T>();
 
   const masterContext = useMasterDetailContext();
+  const getDataSourceMasterContext = useLatest(masterContext);
 
   const { componentState, componentActions, assignState } =
     useComponentState<DataSourceState<T>>();
 
+  componentState.getDataSourceMasterContextRef.current =
+    getDataSourceMasterContext;
+
   const getState = useLatest(componentState);
 
   const [api] = React.useState(() => {
@@ -97,6 +101,7 @@ function DataSourceCmp<T>({
   const contextValue: DataSourceContextValue<T> = {
     componentState,
     componentActions,
+    getDataSourceMasterContext,
     getState,
     assignState,
     api,

diff --git a/source/src/components/DataSource/privateHooks/useLoadData.ts b/source/src/components/DataSource/privateHooks/useLoadData.ts
@@ -1,12 +1,17 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { LazyGroupDataItem, LazyRowInfoGroup } from '..';
+import {
+  DataSourceMasterDetailContextValue,
+  LazyGroupDataItem,
+  LazyRowInfoGroup,
+} from '..';
 import { DeepMap } from '../../../utils/DeepMap';
 import { LAZY_ROOT_KEY_FOR_GROUPS } from '../../../utils/groupAndPivot';
 import { raf } from '../../../utils/raf';
 import { useComponentState } from '../../hooks/useComponentState';
 import { ComponentStateGeneratedActions } from '../../hooks/useComponentState/types';
 import { useEffectWithChanges } from '../../hooks/useEffectWithChanges';
+import { useLatest } from '../../hooks/useLatest';
 import { Scrollbars } from '../../InfiniteTable';
 import { assignExcept } from '../../InfiniteTable/utils/assignFiltered';
 import { debounce } from '../../utils/debounce';
@@ -50,6 +55,7 @@ const DATA_CHANGES_COMPARE_FUNCTIONS: Record<
 export function buildDataSourceDataParams<T>(
   componentState: DataSourceState<T>,
   overrides?: Partial<DataSourceDataParams<T>>,
+  masterContext?: DataSourceMasterDetailContextValue,
 ): DataSourceDataParams<T> {
   const sortInfo = componentState.multiSort
     ? componentState.sortInfo
@@ -66,6 +72,10 @@ export function buildDataSourceDataParams<T>(
     aggregationReducers: componentState.aggregationReducers,
   };
 
+  if (masterContext) {
+    dataSourceParams.masterRowInfo = masterContext.masterRowInfo;
+  }
+
   if (dataSourceParams.groupBy) {
     dataSourceParams.groupRowsState = componentState.groupRowsState.getState();
   }
@@ -135,8 +145,13 @@ export function loadData<T>(
   componentState: DataSourceState<T>,
   actions: ComponentStateGeneratedActions<DataSourceState<T>>,
   overrides?: Partial<DataSourceDataParams<T>>,
+  masterContext?: DataSourceMasterDetailContextValue | undefined,
 ) {
-  const dataParams = buildDataSourceDataParams(componentState, overrides);
+  const dataParams = buildDataSourceDataParams(
+    componentState,
+    overrides,
+    masterContext,
+  );
   const append = dataParams.append;
 
   if (componentState.lazyLoad) {
@@ -396,6 +411,26 @@ function computeFilterValueForRemote<T>(
   );
 }
 
+function getDetailReady(
+  masterContext: DataSourceMasterDetailContextValue | undefined,
+  getDataSourceState: () => DataSourceState<any>,
+) {
+  const isDetail = !!masterContext;
+
+  const { stateReadyAsDetails } = getDataSourceState();
+
+  const isDetailReady = isDetail
+    ? masterContext.shouldRestoreState
+      ? stateReadyAsDetails
+      : true
+    : true;
+
+  return {
+    isDetail,
+    isDetailReady,
+  };
+}
+
 export function useLoadData<T>() {
   const {
     getComponentState,
@@ -418,7 +453,6 @@ export function useLoadData<T>() {
     livePaginationCursor,
     filterTypes,
     cursorId: stateCursorId,
-    stateReadyAsDetails,
   } = componentState;
 
   const [scrollbars, setScrollbars] = useState<Scrollbars>({
@@ -527,29 +561,30 @@ export function useLoadData<T>() {
 
   useLazyLoadRange<T>();
 
-  const masterContext = useMasterDetailContext();
-
-  const isDetail = !!masterContext;
-  const isDetailRef = useRef(!!masterContext);
-  isDetailRef.current = isDetail;
-
-  const isDetailReady = isDetail
-    ? masterContext.shouldRestoreState
-      ? stateReadyAsDetails
-      : true
-    : true;
-  const isDetailReadyRef = useRef(isDetailReady);
-  isDetailReadyRef.current = isDetailReady;
+  const getMasterContext = useLatest(useMasterDetailContext());
 
   useEffectWithChanges(
     () => {
       const componentState = getComponentState();
-      if (isDetailRef.current && !isDetailReadyRef.current) {
+
+      const masterContext = getMasterContext();
+
+      const { isDetail, isDetailReady } = getDetailReady(
+        masterContext,
+        getComponentState,
+      );
+      if (isDetail && !isDetailReady) {
         return;
       }
 
       if (typeof componentState.data !== 'function') {
-        loadData(componentState.data, componentState, actions);
+        loadData(
+          componentState.data,
+          componentState,
+          actions,
+          undefined,
+          masterContext,
+        );
       }
     },
     { data },
@@ -570,15 +605,27 @@ export function useLoadData<T>() {
         }
       }
 
-      if (isDetailRef.current && !isDetailReadyRef.current) {
+      const masterContext = getMasterContext();
+      const { isDetail, isDetailReady } = getDetailReady(
+        masterContext,
+        getComponentState,
+      );
+
+      if (isDetail && !isDetailReady) {
         return;
       }
 
       const componentState = getComponentState();
       if (typeof componentState.data === 'function') {
-        loadData(componentState.data, componentState, actions, {
-          append: appendWhenLivePagination,
-        });
+        loadData(
+          componentState.data,
+          componentState,
+          actions,
+          {
+            append: appendWhenLivePagination,
+          },
+          masterContext,
+        );
       }
     },
     { ...depsObject, data },
@@ -590,7 +637,11 @@ export function useLoadData<T>() {
     if (initialRef.current) {
       initialRef.current = false;
 
-      const dataParams = buildDataSourceDataParams(componentState);
+      const dataParams = buildDataSourceDataParams(
+        componentState,
+        undefined,
+        getMasterContext(),
+      );
       actions.dataParams = dataParams;
     }
   }, depsObject);

diff --git a/source/src/components/DataSource/state/getInitialState.ts b/source/src/components/DataSource/state/getInitialState.ts
@@ -68,6 +68,8 @@ export function initSetupState<T>(): DataSourceSetupState<T> {
 
     idToIndexMap: new Map<any, number>(),
 
+    getDataSourceMasterContextRef: { current: () => undefined },
+
     // TODO: cleanup cache on unmount
     cache: undefined,
     detailDataSourcesStateToRestore: new Map(),
@@ -498,10 +500,16 @@ export function getInterceptActions<T>(): ComponentInterceptedActions<
 > {
   return {
     sortInfo: (sortInfo, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        sortInfo,
-        livePaginationCursor: null,
-      });
+      const getDataSourceMasterContext =
+        state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          sortInfo,
+          livePaginationCursor: null,
+        },
+        getDataSourceMasterContext(),
+      );
 
       actions.dataParams = dataParams;
 
@@ -515,10 +523,16 @@ export function getInterceptActions<T>(): ComponentInterceptedActions<
       }
     },
     groupBy: (groupBy, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        groupBy,
-        livePaginationCursor: null,
-      });
+      const getDataSourceMasterContext =
+        state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          groupBy,
+          livePaginationCursor: null,
+        },
+        getDataSourceMasterContext(),
+      );
 
       actions.dataParams = dataParams;
 
@@ -531,10 +545,16 @@ export function getInterceptActions<T>(): ComponentInterceptedActions<
       }
     },
     pivotBy: (pivotBy, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        pivotBy,
-        livePaginationCursor: null,
-      });
+      const getDataSourceMasterContext =
+        state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          pivotBy,
+          livePaginationCursor: null,
+        },
+        getDataSourceMasterContext(),
+      );
 
       actions.dataParams = dataParams;
 
@@ -547,10 +567,16 @@ export function getInterceptActions<T>(): ComponentInterceptedActions<
       }
     },
     filterValue: (filterValue, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        filterValue,
-        livePaginationCursor: null,
-      });
+      const getDataSourceMasterContext =
+        state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          filterValue,
+          livePaginationCursor: null,
+        },
+        getDataSourceMasterContext(),
+      );
 
       actions.dataParams = dataParams;
 
@@ -563,15 +589,27 @@ export function getInterceptActions<T>(): ComponentInterceptedActions<
       }
     },
     cursorId: (cursorId, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        __cursorId: cursorId,
-      });
+      const getDataSourceMasterContext =
+        state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          __cursorId: cursorId,
+        },
+        getDataSourceMasterContext(),
+      );
       actions.dataParams = dataParams;
     },
     livePaginationCursor: (livePaginationCursor, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        livePaginationCursor,
-      });
+      const getDataSourceMasterContext =
+        state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          livePaginationCursor,
+        },
+        getDataSourceMasterContext(),
+      );
 
       actions.dataParams = dataParams;
     },
@@ -583,6 +621,7 @@ export function getInterceptActions<T>(): ComponentInterceptedActions<
           new Set<keyof DataSourceDataParams<T>>([
             'changes',
             'originalDataArray',
+            'masterRowInfo',
           ]),
         )
       ) {