@infinite-table/infinite-react 0.4.13 → 0.5.0

package/src/components/InfiniteTable/state/getColumnVisibilityForHideEmptyGroupColumns.ts

@@ -0,0 +1,127 @@
+import { DataSourceState } from '../../DataSource';
+import { InfiniteTableState } from '../types';
+import {
+  InfiniteTableColumn,
+  InfiniteTableGeneratedGroupColumn,
+} from '../types/InfiniteTableColumn';
+import { GroupByMap } from '../types/InfiniteTableState';
+
+export function getGroupColumnsMapForComputedColumns<T>(
+  computedColumns: Map<string, InfiniteTableColumn<T>>,
+  groupByMap: GroupByMap<T>,
+) {
+  const computedGroupColumns = new Map<
+    string,
+    InfiniteTableGeneratedGroupColumn<T>
+  >();
+  computedColumns.forEach(
+    (
+      column: InfiniteTableColumn<T> | InfiniteTableGeneratedGroupColumn<T>,
+      colId: string,
+    ) => {
+      // go over all columns (ignore columns which are not group columns - also ignore the single group column)
+      if (
+        typeof (column as InfiniteTableGeneratedGroupColumn<T>).groupByField !==
+        'string'
+      ) {
+        return;
+      }
+      const { groupByField } = column as InfiniteTableGeneratedGroupColumn<T>;
+      const field = groupByField as keyof T;
+      const groupInfoForColumn = groupByMap.get(field);
+      if (!groupInfoForColumn) {
+        return;
+      }
+
+      computedGroupColumns.set(
+        colId,
+        column as InfiniteTableGeneratedGroupColumn<T>,
+      );
+    },
+  );
+
+  return computedGroupColumns;
+}
+
+export function getColumnVisibilityForHideEmptyGroupColumns<T>(params: {
+  computedGroupColumns: Map<string, InfiniteTableGeneratedGroupColumn<T>>;
+  columnVisibility: InfiniteTableState<T>['columnVisibility'];
+  hideEmptyGroupColumns: boolean;
+  groupRowsIndexesInDataArray: DataSourceState<T>['groupRowsIndexesInDataArray'];
+  dataArray: DataSourceState<T>['dataArray'];
+  groupBy: DataSourceState<T>['groupBy'];
+  groupByMap: GroupByMap<T>;
+}): InfiniteTableState<T>['columnVisibility'] {
+  const {
+    hideEmptyGroupColumns,
+
+    groupByMap,
+    computedGroupColumns,
+    groupRowsIndexesInDataArray,
+    dataArray,
+    groupBy,
+  } = params;
+
+  const columnVisibility = { ...params.columnVisibility };
+  if (!hideEmptyGroupColumns) {
+    computedGroupColumns.forEach(
+      (_column: InfiniteTableGeneratedGroupColumn<T>, colId: string) => {
+        if (columnVisibility[colId] === false) {
+          delete columnVisibility[colId];
+        }
+      },
+    );
+
+    return columnVisibility;
+  }
+
+  if (!groupRowsIndexesInDataArray || !groupRowsIndexesInDataArray.length) {
+    return columnVisibility;
+  }
+
+  const groupsLength = groupBy.length;
+
+  let expandedGroupsLevel = 0;
+
+  const len = groupRowsIndexesInDataArray.length;
+
+  for (let i = 0; i < len; i++) {
+    const groupRowIndex = groupRowsIndexesInDataArray[i];
+    const rowInfo = dataArray[groupRowIndex];
+
+    if (!rowInfo.isGroupRow) {
+      continue;
+    }
+    expandedGroupsLevel = Math.max(
+      expandedGroupsLevel,
+      rowInfo.groupNesting! - 1,
+    );
+    if (expandedGroupsLevel === groupsLength - 1) {
+      break;
+    }
+  }
+
+  computedGroupColumns.forEach(
+    (column: InfiniteTableGeneratedGroupColumn<T>, colId: string) => {
+      const { groupByField } = column as InfiniteTableGeneratedGroupColumn<T>;
+      const field = groupByField as keyof T;
+      const groupInfoForColumn = groupByMap.get(field)!;
+      const index = groupInfoForColumn.groupIndex;
+
+      const shouldBeHidden =
+        index > expandedGroupsLevel && hideEmptyGroupColumns;
+
+      if (shouldBeHidden) {
+        if (columnVisibility[colId] !== false) {
+          columnVisibility[colId] = false;
+        }
+      } else {
+        if (columnVisibility.hasOwnProperty(colId)) {
+          delete columnVisibility[colId];
+        }
+      }
+    },
+  );
+
+  return columnVisibility;
+}

package/src/components/InfiniteTable/state/getInitialState.ts

@@ -0,0 +1,375 @@
+import { createRef, KeyboardEvent, MouseEvent } from 'react';
+import {
+  DataSourceGroupBy,
+  DataSourcePropGroupBy,
+  DataSourceState,
+} from '../../DataSource';
+import { ReactHeadlessTableRenderer } from '../../HeadlessTable/ReactHeadlessTableRenderer';
+import { ForwardPropsToStateFnResult } from '../../hooks/useComponentState';
+import { CellPosition } from '../../types/CellPosition';
+import { Renderable } from '../../types/Renderable';
+import { buildSubscriptionCallback } from '../../utils/buildSubscriptionCallback';
+import { MatrixBrain } from '../../VirtualBrain/MatrixBrain';
+import { ScrollListener } from '../../VirtualBrain/ScrollListener';
+import { defaultFilterEditors } from '../components/FilterEditors';
+import { ThemeVars } from '../theme.css';
+import {
+  InfiniteTableComputedColumn,
+  InfiniteTableProps,
+  InfiniteTableState,
+} from '../types';
+import {
+  InfiniteTableColumnsMap,
+  InfiniteTablePropFilterEditors,
+  InfiniteTablePropGroupColumn,
+  InfiniteTablePropGroupRenderStrategy,
+} from '../types/InfiniteTableProps';
+import {
+  InfiniteTableSetupState,
+  InfiniteTableDerivedState,
+  InfiniteTableMappedState,
+  GroupByMap,
+} from '../types/InfiniteTableState';
+import { toMap } from '../utils/toMap';
+
+import { computeColumnGroupsDepths } from './computeColumnGroupsDepths';
+
+function createRenderer(brain: MatrixBrain) {
+  const renderer = new ReactHeadlessTableRenderer(brain);
+  const onRenderUpdater = buildSubscriptionCallback<Renderable>();
+
+  brain.onDestroy(() => {
+    renderer.destroy();
+    onRenderUpdater.destroy();
+  });
+
+  return {
+    renderer,
+    onRenderUpdater,
+  };
+}
+/**
+ * The computed state is independent from props and cannot
+ * be affected by props.
+ */
+export function initSetupState<T>(): InfiniteTableSetupState<T> {
+  const columnsGeneratedForGrouping: InfiniteTableColumnsMap<T> = new Map();
+
+  /**
+   * This is the main virtualization brain that powers the table
+   */
+  const brain = new MatrixBrain();
+
+  /**
+   * The brain that virtualises the header is different from the main brain
+   * because obviously the header will have different rowspans/colspans
+   * (which are due to column groups) than the main grid viewport
+   */
+  const headerBrain = new MatrixBrain('header');
+
+  // however, we sync the headerBrain with the main brain
+  // on horizontal scrolling
+  brain.onScroll((scrollPosition) => {
+    headerBrain.setScrollPosition({
+      scrollLeft: scrollPosition.scrollLeft,
+      scrollTop: 0,
+    });
+  });
+
+  if (__DEV__) {
+    (globalThis as any).brain = brain;
+    (globalThis as any).headerBrain = headerBrain;
+  }
+
+  const { renderer, onRenderUpdater } = createRenderer(brain);
+
+  // and on width changes
+  brain.onAvailableSizeChange((size) => {
+    headerBrain.setAvailableSize({ width: size.width });
+  });
+
+  if (__DEV__) {
+    (globalThis as any).renderer = renderer;
+  }
+
+  return {
+    renderer,
+    onRenderUpdater,
+    propsCache: new Map<keyof InfiniteTableProps<T>, WeakMap<any, any>>([]),
+    columnContextMenuVisibleForColumnId: null,
+
+    brain,
+    headerBrain,
+
+    domRef: createRef(),
+    scrollerDOMRef: createRef(),
+    portalDOMRef: createRef(),
+    activeCellIndicatorDOMRef: createRef(),
+
+    onColumnMenuClick: buildSubscriptionCallback<{
+      target: HTMLElement;
+      column: InfiniteTableComputedColumn<T>;
+    }>(),
+
+    onRowHeightCSSVarChange: buildSubscriptionCallback<number>(),
+    onColumnHeaderHeightCSSVarChange: buildSubscriptionCallback<number>(),
+    cellClick: buildSubscriptionCallback<
+      CellPosition & { event: MouseEvent }
+    >(),
+    cellMouseDown: buildSubscriptionCallback<
+      CellPosition & { event: MouseEvent }
+    >(),
+    keyDown: buildSubscriptionCallback<KeyboardEvent>(),
+    bodySize: {
+      width: 0,
+      height: 0,
+    },
+    scrollPosition: {
+      scrollTop: 0,
+      scrollLeft: 0,
+    },
+    columnReorderDragColumnId: false,
+    ready: false,
+    focused: false,
+    focusedWithin: false,
+    columnsWhenGrouping: columnsGeneratedForGrouping,
+    columnVisibilityForGrouping: {},
+
+    pinnedStartScrollListener: new ScrollListener(),
+    pinnedEndScrollListener: new ScrollListener(),
+
+    columnsWhenInlineGroupRenderStrategy: undefined,
+  };
+}
+
+export const forwardProps = <T>(
+  setupState: InfiniteTableSetupState<T>,
+): ForwardPropsToStateFnResult<
+  InfiniteTableProps<T>,
+  InfiniteTableMappedState<T>
+> => {
+  return {
+    scrollTopKey: 1,
+    components: 1,
+    id: 1,
+    loadingText: 1,
+    pivotColumns: 1,
+    groupColumn: 1,
+    onReady: 1,
+    domProps: 1,
+    focusedClassName: 1,
+    focusedWithinClassName: 1,
+    focusedStyle: 1,
+    focusedWithinStyle: 1,
+    onSelfFocus: 1,
+    onFocusWithin: 1,
+    onSelfBlur: 1,
+    onBlurWithin: 1,
+
+    onScrollToTop: 1,
+    onScrollToBottom: 1,
+    onScrollStop: 1,
+    scrollToBottomOffset: 1,
+
+    getColumContextMenuItems: 1,
+    columnPinning: 1,
+
+    rowStyle: 1,
+    rowProps: 1,
+    rowClassName: 1,
+    pinnedStartMaxWidth: 1,
+    pinnedEndMaxWidth: 1,
+    pivotColumn: 1,
+    pivotColumnGroups: 1,
+
+    onScrollbarsChange: 1,
+    autoSizeColumnsKey: 1,
+
+    scrollStopDelay: (scrollStopDelay) => scrollStopDelay ?? 250,
+
+    filterEditors: (filterEditors) =>
+      ({
+        ...defaultFilterEditors,
+        ...filterEditors,
+      } as InfiniteTablePropFilterEditors<T>),
+
+    viewportReservedWidth: (viewportReservedWidth) =>
+      viewportReservedWidth ?? 0,
+    resizableColumns: (resizableColumns) => resizableColumns ?? true,
+
+    hideColumnWhenGrouped: (hideColumnWhenGrouped) =>
+      hideColumnWhenGrouped ?? false,
+    columnMinWidth: (columnMinWidth) => columnMinWidth ?? 30,
+    columnMaxWidth: (columnMaxWidth) => columnMaxWidth ?? 5000,
+    columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth ?? 200,
+
+    columnCssEllipsis: (columnCssEllipsis) => columnCssEllipsis ?? true,
+    draggableColumns: (draggableColumns) => draggableColumns ?? true,
+    headerOptions: (headerOptions) => ({
+      alwaysReserveSpaceForSortIcon: true,
+      ...headerOptions,
+    }),
+
+    showSeparatePivotColumnForSingleAggregation: (
+      showSeparatePivotColumnForSingleAggregation,
+    ) => showSeparatePivotColumnForSingleAggregation ?? false,
+    sortable: (sortable) => sortable ?? true,
+    hideEmptyGroupColumns: (hideEmptyGroupColumns) =>
+      hideEmptyGroupColumns ?? false,
+
+    pivotTotalColumnPosition: (pivotTotalColumnPosition) =>
+      pivotTotalColumnPosition ?? 'end',
+    pivotGrandTotalColumnPosition: 1,
+
+    // groupRenderStrategy: (groupRenderStrategy) =>
+    //   groupRenderStrategy ?? 'multi-column',
+
+    licenseKey: (licenseKey) => licenseKey || '',
+
+    keyboardSelection: (keyboardSelection) => keyboardSelection ?? true,
+
+    activeRowIndex: 1,
+    activeCellIndex: 1,
+    columnOrder: (columnOrder) => columnOrder ?? true,
+    header: (header) => header ?? true,
+    showZebraRows: (showZebraRows) => showZebraRows ?? true,
+    showHoverRows: (showHoverRows) => showHoverRows ?? true,
+    virtualizeColumns: (virtualizeColumns) => virtualizeColumns ?? true,
+
+    rowHeight: (rowHeight) => (typeof rowHeight === 'number' ? rowHeight : 0),
+    columnHeaderHeight: (columnHeaderHeight) =>
+      typeof columnHeaderHeight === 'number' ? columnHeaderHeight : 30,
+
+    columns: (columns) => toMap(columns, setupState.propsCache.get('columns')),
+    columnVisibility: (columnVisibility) => columnVisibility ?? {},
+    // TODO check if columnPinning works when the value for a pinned col is `true` instead of `"start"`
+
+    columnSizing: (columnSizing) => columnSizing || {},
+    columnTypes: (columnTypes) => columnTypes || {},
+
+    collapsedColumnGroups: (collapsedColumnGroups) =>
+      collapsedColumnGroups ?? new Map(),
+    columnGroups: (columnGroups) =>
+      toMap(columnGroups, setupState.propsCache.get('columnGroups')),
+  };
+};
+
+type GetGroupColumnStrategyOptions<T> = {
+  groupBy: DataSourceGroupBy<T>[];
+  groupColumn?: Partial<InfiniteTablePropGroupColumn<T>>;
+  groupRenderStrategy?: InfiniteTablePropGroupRenderStrategy;
+};
+
+function getGroupRenderStrategy<T>(
+  options: GetGroupColumnStrategyOptions<T>,
+): InfiniteTablePropGroupRenderStrategy {
+  const { groupBy, groupColumn, groupRenderStrategy } = options;
+
+  if (groupRenderStrategy) {
+    return groupRenderStrategy;
+  }
+
+  if (groupColumn != null && typeof groupColumn === 'object') {
+    return 'single-column';
+  }
+
+  const columnsInGroupBy = groupBy.filter((g) => g.column);
+
+  if (columnsInGroupBy.length) {
+    return 'multi-column';
+  }
+
+  return 'multi-column';
+}
+
+export const cleanupState = <T>(state: InfiniteTableState<T>) => {
+  state.brain.destroy();
+  state.headerBrain.destroy();
+  state.renderer.destroy();
+  state.onRenderUpdater.destroy();
+
+  state.onRowHeightCSSVarChange.destroy();
+  state.onColumnHeaderHeightCSSVarChange.destroy();
+  state.onColumnMenuClick.destroy();
+
+  state.domRef.current = null;
+  state.scrollerDOMRef.current = null;
+  state.portalDOMRef.current = null;
+
+  state.onRowHeightCSSVarChange.destroy();
+  state.onColumnHeaderHeightCSSVarChange.destroy();
+  state.pinnedEndScrollListener.destroy();
+  state.pinnedStartScrollListener.destroy();
+};
+
+export function getGroupByMap<T>(groupBy: DataSourcePropGroupBy<T>) {
+  return groupBy.reduce((acc, groupBy, index) => {
+    acc.set(groupBy.field, {
+      groupBy,
+      groupIndex: index,
+    });
+    return acc;
+  }, new Map() as GroupByMap<T>);
+}
+
+export const mapPropsToState = <T>(params: {
+  props: InfiniteTableProps<T>;
+  state: InfiniteTableState<T>;
+  oldState: InfiniteTableState<T> | null;
+  parentState: DataSourceState<T>;
+}): InfiniteTableDerivedState<T> => {
+  const { props, state, oldState, parentState } = params;
+
+  const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
+
+  const columnGroupsDepthsMap =
+    (state.columnGroups && state.columnGroups != oldState?.columnGroups) ||
+    (state.pivotColumnGroups &&
+      state.pivotColumnGroups != oldState?.pivotColumnGroups)
+      ? computeColumnGroupsDepths(computedColumnGroups)
+      : state.columnGroupsDepthsMap;
+
+  const groupBy = parentState?.groupBy;
+  const groupRenderStrategy = getGroupRenderStrategy({
+    groupRenderStrategy: props.groupRenderStrategy,
+    groupBy,
+    groupColumn: props.groupColumn,
+  });
+
+  const computedColumns =
+    state.columnsWhenGrouping ||
+    state.columnsWhenInlineGroupRenderStrategy ||
+    state.columns;
+
+  return {
+    controlledColumnVisibility: !!props.columnVisibility,
+    groupRenderStrategy,
+    groupBy: groupBy,
+    computedColumns,
+    initialColumns: props.columns,
+
+    keyboardNavigation:
+      props.keyboardNavigation ??
+      (state.activeCellIndex != null
+        ? 'cell'
+        : state.activeRowIndex != null
+        ? 'row'
+        : 'cell'),
+
+    columnHeaderCssEllipsis:
+      props.columnHeaderCssEllipsis ?? props.columnCssEllipsis ?? true,
+    columnGroupsDepthsMap,
+    columnGroupsMaxDepth:
+      columnGroupsDepthsMap != state.columnGroupsDepthsMap
+        ? Math.max(...columnGroupsDepthsMap.values(), 0)
+        : state.columnGroupsMaxDepth,
+    computedColumnGroups,
+
+    rowHeightCSSVar: typeof props.rowHeight === 'string' ? props.rowHeight : '',
+    columnHeaderHeightCSSVar:
+      typeof props.columnHeaderHeight === 'string'
+        ? props.columnHeaderHeight ||
+          ThemeVars.components.Header.columnHeaderHeight
+        : '',
+  };
+};