@infinite-table/infinite-react 0.4.12 → 0.5.0

package/src/components/DataSource/state/reducer.ts

@@ -0,0 +1,466 @@
+import { DataSourceSetupState } from '..';
+import { DeepMap } from '../../../utils/DeepMap';
+import {
+  InfiniteTableRowInfo,
+  InfiniteTable_NoGrouping_RowInfoNormal,
+  lazyGroup,
+} from '../../../utils/groupAndPivot';
+import { enhancedFlatten, group } from '../../../utils/groupAndPivot';
+import { getPivotColumnsAndColumnGroups } from '../../../utils/groupAndPivot/getPivotColumnsAndColumnGroups';
+import { multisort } from '../../../utils/multisort';
+import { rowSelectionStateConfigGetter } from '../../InfiniteTable/api/getSelectionApi';
+import { RowSelectionState } from '../RowSelectionState';
+import type {
+  DataSourceState,
+  DataSourceDerivedState,
+  LazyRowInfoGroup,
+  DataSourcePropFilterFunction,
+  DataSourcePropFilterValue,
+  DataSourceFilterOperatorFunctionParam,
+  DataSourcePropFilterTypes,
+} from '../types';
+
+const haveDepsChanged = <StateType>(
+  state1: StateType,
+  state2: StateType,
+  deps: (keyof StateType)[],
+) => {
+  for (let i = 0, len = deps.length; i < len; i++) {
+    const k = deps[i];
+    const oldValue = (state1 as any)[k];
+    const newValue = (state2 as any)[k];
+
+    if (oldValue !== newValue) {
+      return true;
+    }
+  }
+  return false;
+};
+
+function toRowInfo<T>(
+  data: T,
+  id: any,
+  index: number,
+  isRowSelected?: (rowInfo: InfiniteTableRowInfo<T>) => boolean | null,
+): InfiniteTable_NoGrouping_RowInfoNormal<T> {
+  const rowInfo: InfiniteTable_NoGrouping_RowInfoNormal<T> = {
+    dataSourceHasGrouping: false,
+    data,
+    id,
+    indexInAll: index,
+    isGroupRow: false,
+    selfLoaded: true,
+    rowSelected: false,
+  };
+  if (isRowSelected) {
+    rowInfo.rowSelected = isRowSelected(rowInfo);
+  }
+
+  return rowInfo;
+}
+
+function filterDataSource<T>(params: {
+  dataArray: T[];
+  operatorsByFilterType: DataSourceDerivedState<T>['operatorsByFilterType'];
+  filterTypes: DataSourcePropFilterTypes<T>;
+  filterFunction?: DataSourcePropFilterFunction<T>;
+  filterValue?: DataSourcePropFilterValue<T>;
+  toPrimaryKey: (data: T, index: number) => any;
+}) {
+  const {
+    filterTypes,
+    filterValue: filterValueArray,
+    operatorsByFilterType,
+    filterFunction,
+    toPrimaryKey,
+  } = params;
+  let { dataArray } = params;
+  if (filterFunction) {
+    dataArray = dataArray.filter((data, index, arr) =>
+      filterFunction({
+        data,
+        index,
+        dataArray: arr,
+        primaryKey: toPrimaryKey(data, index),
+      }),
+    );
+  }
+
+  if (filterValueArray && filterValueArray.length) {
+    return dataArray.filter((data, index, arr) => {
+      const param = {
+        data,
+        index,
+        dataArray: arr,
+        primaryKey: toPrimaryKey(data, index),
+      };
+
+      for (let i = 0, len = filterValueArray.length; i < len; i++) {
+        const currentFilterValue = filterValueArray[i];
+
+        const {
+          disabled,
+          filterValue,
+          field,
+          filterType: filterTypeKey,
+          valueGetter,
+          operator,
+        } = currentFilterValue;
+        const filterType = filterTypes[filterTypeKey];
+        if (disabled || !filterType) {
+          continue;
+        }
+        const currentOperator =
+          operatorsByFilterType[filterTypeKey]?.[operator];
+        if (!currentOperator) {
+          continue;
+        }
+
+        const getter =
+          valueGetter || (({ data }) => (field ? data[field] : data));
+
+        const operatorFnParam = {
+          ...param,
+        } as DataSourceFilterOperatorFunctionParam<T>;
+        operatorFnParam.filterValue = filterValue;
+        operatorFnParam.currentValue = getter(param);
+        operatorFnParam.emptyValues = filterType.emptyValues;
+
+        if (!currentOperator.fn(operatorFnParam)) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }
+
+  return dataArray;
+}
+
+export function concludeReducer<T>(params: {
+  previousState: DataSourceState<T> & DataSourceDerivedState<T>;
+  state: DataSourceState<T> &
+    DataSourceDerivedState<T> &
+    DataSourceSetupState<T>;
+}) {
+  const { state, previousState } = params;
+
+  const sortInfo = state.sortInfo;
+  let shouldSort = !!sortInfo?.length && !state.controlledSort;
+
+  if (state.lazyLoad || state.livePagination) {
+    shouldSort = false;
+  }
+
+  let originalDataArrayChanged = haveDepsChanged(previousState, state, [
+    'originalDataArray',
+    'originalLazyGroupDataChangeDetect',
+  ]);
+
+  const dataSourceChange = previousState && state.data !== previousState.data;
+  let lazyLoadGroupDataChange =
+    state.lazyLoad &&
+    previousState &&
+    (previousState.groupBy !== state.groupBy ||
+      previousState.sortInfo !== state.sortInfo);
+
+  if (dataSourceChange) {
+    lazyLoadGroupDataChange = true;
+  }
+
+  if (lazyLoadGroupDataChange) {
+    state.originalLazyGroupData = new DeepMap<string, LazyRowInfoGroup<T>>();
+    originalDataArrayChanged = true;
+
+    // TODO if we have defaultGroupRowsState in props (so this is uncontrolled)
+    // reset state.groupRowsState to the value in props.defaultGroupRowsState
+    // also make sure onGroupRowsState is triggered to notify the action to consumers
+  }
+
+  const shouldIndex = originalDataArrayChanged;
+  if (shouldIndex) {
+    state.indexer.clear();
+    if (!state.lazyLoad) {
+      state.indexer.indexArray(state.originalDataArray, state.toPrimaryKey);
+    }
+  }
+
+  const { filterFunction, filterValue, filterTypes, operatorsByFilterType } =
+    state;
+  const shouldFilter =
+    !!filterFunction || (Array.isArray(filterValue) && filterValue.length);
+
+  const shouldFilterClientSide = shouldFilter && state.filterMode === 'local';
+
+  const filterDepsChanged = haveDepsChanged(previousState, state, [
+    'filterFunction',
+    'filterValue',
+    'filterTypes',
+  ]);
+  const filterChanged = originalDataArrayChanged || filterDepsChanged;
+
+  const sortInfoChanged = haveDepsChanged(previousState, state, ['sortInfo']);
+
+  const sortDepsChanged =
+    originalDataArrayChanged || filterDepsChanged || sortInfoChanged;
+
+  const shouldFilterAgain =
+    state.filterMode === 'local' &&
+    (filterChanged || !state.lastFilterDataArray);
+
+  const shouldSortAgain =
+    shouldSort && (sortDepsChanged || !state.lastSortDataArray);
+
+  const groupBy = state.groupBy;
+  const pivotBy = state.pivotBy;
+
+  const shouldGroup = groupBy.length > 0 || !!pivotBy;
+  const selectionDepsChanged = haveDepsChanged(previousState, state, [
+    'rowSelection',
+    'isRowSelected',
+    'originalLazyGroupDataChangeDetect',
+  ]);
+  const groupsDepsChanged =
+    originalDataArrayChanged ||
+    sortDepsChanged ||
+    haveDepsChanged(previousState, state, [
+      'generateGroupRows',
+      'originalLazyGroupData',
+      'originalLazyGroupDataChangeDetect',
+      'groupBy',
+      'groupRowsState',
+      'pivotBy',
+      'aggregationReducers',
+      'pivotTotalColumnPosition',
+      'pivotGrandTotalColumnPosition',
+      'showSeparatePivotColumnForSingleAggregation',
+    ]);
+
+  const shouldGroupAgain =
+    (shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray)) ||
+    selectionDepsChanged;
+
+  const now = Date.now();
+
+  let dataArray = state.originalDataArray;
+
+  const toPrimaryKey = state.toPrimaryKey;
+
+  if (!shouldFilter) {
+    state.unfilteredCount = dataArray.length;
+  }
+  if (shouldFilterClientSide) {
+    state.unfilteredCount = dataArray.length;
+
+    dataArray = shouldFilterAgain
+      ? filterDataSource({
+          dataArray,
+          toPrimaryKey,
+          filterTypes,
+          operatorsByFilterType,
+          filterFunction,
+          filterValue,
+        })
+      : state.lastFilterDataArray!;
+
+    state.lastFilterDataArray = dataArray;
+    state.filteredAt = now;
+  }
+
+  state.filteredCount = dataArray.length;
+
+  state.postFilterDataArray = dataArray;
+
+  const shouldSortClientSide = shouldSort && state.sortMode === 'local';
+  if (shouldSortClientSide) {
+    const prevKnownTypes = multisort.knownTypes;
+    multisort.knownTypes = state.sortTypes;
+    dataArray = shouldSortAgain
+      ? multisort(sortInfo!, [...dataArray])
+      : state.lastSortDataArray!;
+
+    multisort.knownTypes = prevKnownTypes;
+
+    state.lastSortDataArray = dataArray;
+    state.sortedAt = now;
+  }
+  state.postSortDataArray = dataArray;
+
+  let rowInfoDataArray: InfiniteTableRowInfo<T>[] = state.dataArray;
+
+  const rowSelectionState =
+    state.rowSelection instanceof RowSelectionState
+      ? state.rowSelection
+      : undefined;
+
+  //@ts-ignore
+  rowSelectionState?.xcache();
+
+  let isRowSelected:
+    | ((rowInfo: InfiniteTableRowInfo<T>) => boolean | null)
+    | undefined =
+    state.selectionMode === 'single-row'
+      ? (rowInfo) => {
+          return rowInfo.id === state.rowSelection;
+        }
+      : state.selectionMode === 'multi-row'
+      ? (rowInfo) => {
+          const rowSelection = rowSelectionState as RowSelectionState;
+
+          return rowInfo.isGroupRow
+            ? rowSelection.getGroupRowSelectionState(rowInfo.groupKeys)
+            : rowSelection.isRowSelected(
+                rowInfo.id,
+                rowInfo.dataSourceHasGrouping ? rowInfo.groupKeys : undefined,
+              );
+        }
+      : undefined;
+
+  if (state.isRowSelected && state.selectionMode === 'multi-row') {
+    isRowSelected = (rowInfo) =>
+      state.isRowSelected!(
+        rowInfo,
+        rowSelectionState as RowSelectionState,
+        state.selectionMode as 'multi-row',
+      );
+  }
+
+  if (shouldGroup) {
+    if (shouldGroupAgain) {
+      let aggregationReducers = state.aggregationReducers;
+
+      const groupResult = state.lazyLoad
+        ? lazyGroup(
+            {
+              groupBy,
+              // groupByIndex: 0,
+              // parentGroupKeys: [],
+              pivot: pivotBy,
+              mappings: state.pivotMappings,
+              reducers: aggregationReducers,
+              indexer: state.indexer,
+              toPrimaryKey,
+            },
+            state.originalLazyGroupData,
+          )
+        : group(
+            {
+              groupBy,
+              pivot: pivotBy,
+              reducers: aggregationReducers,
+            },
+            dataArray,
+          );
+
+      state.groupDeepMap = groupResult.deepMap;
+      if (rowSelectionState) {
+        rowSelectionState.getConfig = rowSelectionStateConfigGetter(state);
+      }
+
+      const flattenResult = enhancedFlatten({
+        groupResult,
+        lazyLoad: !!state.lazyLoad,
+        reducers: aggregationReducers,
+        toPrimaryKey,
+        isRowSelected,
+        rowSelectionState,
+
+        groupRowsState: state.groupRowsState,
+        generateGroupRows: state.generateGroupRows,
+      });
+
+      rowInfoDataArray = flattenResult.data;
+
+      state.groupRowsIndexesInDataArray = flattenResult.groupRowsIndexes;
+      state.reducerResults = groupResult.reducerResults;
+
+      const pivotGroupsAndCols = pivotBy
+        ? getPivotColumnsAndColumnGroups<T>({
+            deepMap: groupResult.topLevelPivotColumns!,
+            pivotBy,
+
+            pivotTotalColumnPosition: state.pivotTotalColumnPosition ?? 'end',
+            pivotGrandTotalColumnPosition:
+              state.pivotGrandTotalColumnPosition ?? false,
+            reducers: state.aggregationReducers,
+            showSeparatePivotColumnForSingleAggregation:
+              state.showSeparatePivotColumnForSingleAggregation,
+          })
+        : undefined;
+
+      state.pivotColumns = pivotGroupsAndCols?.columns;
+      state.pivotColumnGroups = pivotGroupsAndCols?.columnGroups;
+    } else {
+      rowInfoDataArray = state.lastGroupDataArray!;
+    }
+
+    state.lastGroupDataArray = rowInfoDataArray;
+    state.groupedAt = now;
+  } else {
+    state.groupDeepMap = undefined;
+    state.pivotColumns = undefined;
+    state.groupRowsIndexesInDataArray = undefined;
+    const arrayDifferentAfterSortStep =
+      previousState.postSortDataArray != state.postSortDataArray;
+
+    if (
+      arrayDifferentAfterSortStep ||
+      groupsDepsChanged ||
+      selectionDepsChanged
+    ) {
+      rowInfoDataArray = dataArray.map((data, index) => {
+        const rowInfo = toRowInfo(
+          data,
+          data ? toPrimaryKey(data) : index,
+          index,
+          isRowSelected,
+        );
+
+        return rowInfo;
+      });
+    }
+  }
+
+  state.postGroupDataArray = rowInfoDataArray;
+
+  if (rowInfoDataArray !== state.dataArray) {
+    state.updatedAt = now;
+  }
+
+  state.dataArray = rowInfoDataArray;
+  state.reducedAt = now;
+
+  if (state.selectionMode === 'multi-row') {
+    if (shouldGroup && state.lazyLoad) {
+      let allRowsSelected = true;
+      let someRowsSelected = false;
+
+      state.dataArray.forEach((rowInfo) => {
+        if (rowInfo.isGroupRow && rowInfo.groupKeys.length === 1) {
+          const { rowSelected } = rowInfo;
+          if (rowSelected !== true) {
+            allRowsSelected = false;
+          }
+          if (rowSelected === true || rowSelected === null) {
+            someRowsSelected = true;
+          }
+        }
+      });
+      state.allRowsSelected = allRowsSelected;
+      state.someRowsSelected = someRowsSelected;
+    } else {
+      const dataArrayCount = state.filteredCount;
+      const selectedRowCount =
+        (state.rowSelection as RowSelectionState)!.getSelectedCount();
+
+      state.allRowsSelected = dataArrayCount === selectedRowCount;
+      state.someRowsSelected = selectedRowCount > 0;
+    }
+  }
+
+  if (__DEV__) {
+    (globalThis as any).state = state;
+  }
+
+  return state;
+}

package/src/components/DataSource/state/rowInfoStatus.ts

@@ -0,0 +1,27 @@
+import { InfiniteTableRowInfo } from '../../../utils/groupAndPivot';
+
+export const showLoadingIcon = (
+  rowInfo: InfiniteTableRowInfo<any>,
+): boolean => {
+  // display loading indicator when row data is not yet available
+  // if (rowInfo?.data == undefined) {
+  //   return true;
+  // }
+
+  // if (rowInfo.dataSourceHasGrouping) {
+  //   return rowInfo.isGroupRow
+  //     ? rowInfo.childrenLoading ||
+  //         !rowInfo.selfLoaded ||
+  //         !rowInfo.childrenAvailable
+  //     : !rowInfo.selfLoaded;
+  // }
+
+  if (rowInfo.dataSourceHasGrouping) {
+    return rowInfo.isGroupRow
+      ? rowInfo.childrenLoading || !rowInfo.selfLoaded
+      : !rowInfo.selfLoaded;
+  }
+
+  // // display loading indicator when row is loading group(children rows) data
+  return !rowInfo.selfLoaded;
+};