@infinite-table/infinite-react 0.4.12 → 0.5.0

package/src/components/InfiniteTable/hooks/useCellClassName.ts

@@ -0,0 +1,80 @@
+import { ColumnCellVariantsType } from '../components/cell.css';
+import { HeaderCellVariantsType } from '../components/InfiniteTableHeader/header.css';
+import { InfiniteTableComputedColumn } from '../types';
+
+export function useCellClassName<T>(
+  column: InfiniteTableComputedColumn<T>,
+  baseClasses: string[],
+  variants: (x: ColumnCellVariantsType | HeaderCellVariantsType) => string,
+  extraFlags: {
+    groupRow: boolean;
+    rowExpanded: boolean;
+    rowActive: boolean;
+    rowSelected: boolean | null;
+    dragging: boolean;
+    zebra: 'odd' | 'even' | false;
+  },
+) {
+  const result = [...baseClasses];
+  const variantObject: ColumnCellVariantsType | HeaderCellVariantsType = {
+    filtered: column.computedFiltered,
+    first: column.computedFirst,
+    last: column.computedLast,
+    groupByField: !!column.groupByField,
+    firstInCategory: column.computedFirstInCategory,
+    lastInCategory: column.computedLastInCategory,
+    pinned: column.computedPinned || false,
+    rowSelected: extraFlags.rowSelected ?? 'null',
+    rowActive: extraFlags.rowActive,
+    dragging: extraFlags.dragging,
+    zebra: extraFlags.zebra,
+  };
+
+  const theVariant = variants(variantObject);
+
+  result.push(theVariant);
+
+  if (column.computedFirst) {
+    result.push(...baseClasses.map((c) => `${c}--first`));
+  }
+
+  if (column.groupByField) {
+    result.push(...baseClasses.map((c) => `${c}--group-column`));
+  }
+  if (column.computedLast) {
+    result.push(...baseClasses.map((c) => `${c}--last`));
+  }
+  if (column.computedFirstInCategory) {
+    result.push(...baseClasses.map((c) => `${c}--first-in-category`));
+  }
+  if (column.computedLastInCategory) {
+    result.push(...baseClasses.map((c) => `${c}--last-in-category`));
+  }
+  if (extraFlags.rowSelected) {
+    result.push(...baseClasses.map((c) => `${c}--row-selected`));
+  }
+
+  if (extraFlags.groupRow) {
+    result.push(...baseClasses.map((c) => `${c}--group-row`));
+
+    result.push(
+      ...baseClasses.map(
+        (c) =>
+          `${c}--${
+            extraFlags.rowExpanded
+              ? 'group-row-expanded'
+              : 'group-row-collapsed'
+          }`,
+      ),
+    );
+  }
+  if (column.computedPinned) {
+    result.push(
+      ...baseClasses.map((c) => `${c}--pinned-${column.computedPinned}`),
+    );
+  } else {
+    result.push(...baseClasses.map((c) => `${c}--unpinned`));
+  }
+
+  return result.filter(Boolean).join(' ');
+}

package/src/components/InfiniteTable/hooks/useCellRendering.tsx

@@ -0,0 +1,217 @@
+import type { Ref } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import * as React from 'react';
+
+import { useDataSourceContextValue } from '../../DataSource/publicHooks/useDataSource';
+import {
+  TableRenderCellFn,
+  TableRenderCellFnParam,
+} from '../../HeadlessTable/ReactHeadlessTableRenderer';
+import { useLatest } from '../../hooks/useLatest';
+import { useRerender } from '../../hooks/useRerender';
+import type { Size } from '../../types/Size';
+import { InfiniteTableColumnCellProps } from '../components/InfiniteTableRow/InfiniteTableCellTypes';
+import { InfiniteTableColumnCell } from '../components/InfiniteTableRow/InfiniteTableColumnCell';
+import type { InfiniteTableComputedValues, InfiniteTableApi } from '../types';
+
+import { useInfiniteTable } from './useInfiniteTable';
+import { useYourBrain } from './useYourBrain';
+
+type CellRenderingParam<T> = {
+  computed: InfiniteTableComputedValues<T>;
+  domRef: Ref<HTMLElement>;
+
+  imperativeApi: InfiniteTableApi<T>;
+
+  bodySize: Size;
+
+  getComputed: () => InfiniteTableComputedValues<T> | undefined;
+};
+
+type CellRenderingResult = {
+  renderCell: TableRenderCellFn;
+};
+
+const SCROLL_BOTTOM_OFFSET = 1;
+
+export function useCellRendering<T>(
+  param: CellRenderingParam<T>,
+): CellRenderingResult {
+  const { computed, bodySize, imperativeApi } = param;
+
+  const { componentActions, componentState, getState } = useInfiniteTable<T>();
+
+  const {
+    computedPinnedStartColumns,
+    computedPinnedEndColumns,
+    computedVisibleColumns,
+    computedColumnsMap,
+    fieldsToColumn,
+    rowspan,
+    toggleGroupRow,
+    columnSize,
+  } = computed;
+
+  const {
+    componentState: dataSourceState,
+    getState: getDataSourceState,
+    componentActions: dataSourceActions,
+  } = useDataSourceContextValue<T>();
+
+  const { dataArray } = dataSourceState;
+
+  const getData = useLatest(dataArray);
+  const {
+    rowHeight,
+    groupRenderStrategy,
+    brain,
+    showZebraRows,
+    rowStyle,
+    rowClassName,
+    onScrollToTop,
+    onScrollToBottom,
+    scrollToBottomOffset,
+    ready,
+  } = componentState;
+
+  const repaintId = dataSourceState.updatedAt;
+
+  useYourBrain({
+    columnSize,
+    brain,
+    computedPinnedStartColumns,
+    computedPinnedEndColumns,
+    computedVisibleColumns,
+    rowHeight,
+    dataArray,
+    bodySize,
+    rowspan,
+  });
+
+  const scrollTopMaxRef = useRef<number>(0);
+
+  useEffect(() => {
+    return brain.onRenderCountChange(() => {
+      scrollTopMaxRef.current = brain.scrollTopMax;
+    });
+  }, [brain]);
+
+  useEffect(() => {
+    return brain.onScrollStop((scrollPosition) => {
+      const { scrollTop } = scrollPosition;
+      if (scrollTop === 0) {
+        onScrollToTop?.();
+      }
+
+      const offset = scrollToBottomOffset ?? SCROLL_BOTTOM_OFFSET;
+      const isScrollBottom = scrollTop + offset >= scrollTopMaxRef.current;
+
+      if (isScrollBottom) {
+        onScrollToBottom?.();
+
+        const { livePagination, livePaginationCursor, dataArray } =
+          getDataSourceState();
+        if (livePagination) {
+          dataSourceActions.cursorId =
+            livePaginationCursor !== undefined
+              ? // when there is a `livePaginationCursor` defined we set the cursorId to Date.now
+                // as that will trigger the dataSource to fetch more data
+                Date.now()
+              : // but when there is no `livePaginationCursor` defined we use the `dataArray.length`
+                // as the cursorId, we we can't randomise it, otherwise when we get to the end
+                // of the dataset, we will still request more data
+                // see #useDataArrayLengthAsCursor ref
+                dataArray.length;
+        }
+      }
+    });
+  }, [brain, onScrollToTop, onScrollToBottom]);
+
+  useEffect(() => {
+    if (!bodySize.height) {
+      return;
+    }
+
+    componentActions.ready = true;
+  }, [!!bodySize.height]);
+
+  useEffect(() => {
+    if (!ready) {
+    }
+    const { onReady } = getState();
+
+    if (onReady) {
+      onReady(imperativeApi);
+    }
+  }, [ready]);
+
+  const [, rerender] = useRerender();
+
+  useEffect(() => {
+    rerender(); // TODO check this is still needed
+  }, [dataSourceState]);
+
+  const renderCell: TableRenderCellFn = useCallback(
+    (params: TableRenderCellFnParam) => {
+      const {
+        rowIndex,
+        colIndex,
+        heightWithRowspan,
+        domRef,
+        hidden,
+        width,
+        onMouseLeave,
+        onMouseEnter,
+      } = params;
+
+      const dataArray = getData();
+      const rowInfo = dataArray[rowIndex];
+      const column = computedVisibleColumns[colIndex];
+
+      if (!rowInfo) {
+        return null;
+      }
+
+      const cellProps: InfiniteTableColumnCellProps<T> = {
+        getData,
+        virtualized: true,
+        showZebraRows,
+        groupRenderStrategy,
+        rowIndex,
+        rowInfo,
+        hidden,
+        toggleGroupRow,
+        rowHeight: heightWithRowspan,
+        onMouseEnter,
+        onMouseLeave,
+        domRef,
+        width,
+        column,
+        columnsMap: computedColumnsMap,
+        fieldsToColumn,
+        rowStyle,
+        rowClassName,
+      };
+
+      return <InfiniteTableColumnCell<T> {...cellProps} />;
+    },
+    [
+      rowHeight,
+      getData,
+      computedVisibleColumns,
+      computedColumnsMap,
+      fieldsToColumn,
+      groupRenderStrategy,
+      toggleGroupRow,
+      showZebraRows,
+      repaintId,
+      rowStyle,
+      rowClassName,
+    ],
+  );
+
+  return {
+    renderCell,
+    // repaintId,
+  };
+}

package/src/components/InfiniteTable/hooks/useColumnGroups.ts

@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+
+import { useComponentState } from '../../hooks/useComponentState';
+import { interceptMap } from '../../hooks/useInterceptedMap';
+
+import { computeColumnGroupsDepths } from '../state/computeColumnGroupsDepths';
+import { InfiniteTableState } from '../types/InfiniteTableState';
+import { rafFn } from '../utils/rafFn';
+
+export function useColumnGroups<T>() {
+  const {
+    componentState: {
+      computedColumnGroups: computedColumnGroups,
+      collapsedColumnGroups,
+    },
+    componentActions,
+    getComponentState,
+  } = useComponentState<InfiniteTableState<T>>();
+
+  useEffect(() => {
+    const recompute = () => {
+      componentActions.columnGroupsDepthsMap =
+        computeColumnGroupsDepths(computedColumnGroups);
+    };
+
+    const update = rafFn(recompute);
+
+    return interceptMap(computedColumnGroups, {
+      clear: update,
+      delete: update,
+      set: update,
+    });
+  }, [computedColumnGroups]);
+
+  // TODO we need to enhance this when we implement the UI for collapsing column groups
+  useEffect(() => {
+    // when collapsedColumnGroups change
+    //we basically update the columnVisibility map
+    return interceptMap(collapsedColumnGroups, {
+      set: (key: string[], visibleCol: string) => {
+        const colIds = key.slice(1);
+        const columnVisibility = { ...getComponentState().columnVisibility };
+
+        colIds.forEach((colId) => {
+          columnVisibility[colId] = false;
+        });
+        delete columnVisibility[visibleCol];
+        componentActions.columnVisibility = columnVisibility;
+      },
+      beforeClear: (currentCollapsedGroups) => {
+        const columnVisibility = { ...getComponentState().columnVisibility };
+        const keys = [...currentCollapsedGroups.keys()];
+        keys.forEach((key) => {
+          const colIds = key.slice(1);
+          colIds.forEach((colId) => {
+            delete columnVisibility[colId];
+          });
+        });
+        componentActions.columnVisibility = columnVisibility;
+      },
+      delete: (key: string[]) => {
+        const columnVisibility = { ...getComponentState().columnVisibility };
+        const colIds = key.slice(1);
+        colIds.forEach((colId) => {
+          delete columnVisibility[colId];
+        });
+        componentActions.columnVisibility = columnVisibility;
+      },
+    });
+  }, [collapsedColumnGroups]);
+}

package/src/components/InfiniteTable/hooks/useColumnMenu.ts

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+import { useOverlay } from '../../hooks/useOverlay';
+import { getContextMenuForColumn } from '../utils/getContextMenuForColumn';
+import { useInfiniteTable } from './useInfiniteTable';
+
+export function useColumnMenu<T>() {
+  const context = useInfiniteTable<T>();
+  const { getState, componentActions } = context;
+  const {
+    showOverlay,
+    portal: menuPortal,
+    clearAll,
+  } = useOverlay({
+    portalContainer: false,
+  });
+
+  useState(() => {
+    const { componentActions: actions, componentState } = context;
+    const { domRef } = componentState;
+    componentState.onColumnMenuClick.onChange((info) => {
+      if (!info) {
+        return;
+      }
+      const { target, column } = info;
+
+      function onHideIntent() {
+        clearAll();
+        componentActions.columnContextMenuVisibleForColumnId = null;
+      }
+
+      showOverlay(
+        () => getContextMenuForColumn(column.id, context, onHideIntent),
+        {
+          constrainTo: domRef.current!,
+          id: 'column-menu',
+          alignTo: target,
+          alignPosition: [
+            ['TopLeft', 'BottomLeft'],
+            ['TopRight', 'BottomRight'],
+          ],
+        },
+      );
+
+      actions.columnContextMenuVisibleForColumnId = column.id;
+    });
+  });
+
+  useEffect(() => {
+    const { columnContextMenuVisibleForColumnId } = getState();
+
+    if (columnContextMenuVisibleForColumnId) {
+      function handleMouseDown(event: MouseEvent) {
+        // @ts-ignore
+        if (event.__insideMenu !== true) {
+          clearAll();
+          componentActions.columnContextMenuVisibleForColumnId = null;
+        }
+      }
+      document.documentElement.addEventListener('mousedown', handleMouseDown);
+      return () => {
+        document.documentElement.removeEventListener(
+          'mousedown',
+          handleMouseDown,
+        );
+      };
+    }
+
+    return () => {};
+  }, [getState().columnContextMenuVisibleForColumnId]);
+
+  return { menuPortal };
+}

package/src/components/InfiniteTable/hooks/useColumnPointerEvents.ts

@@ -0,0 +1,258 @@
+import * as React from 'react';
+
+import { useCallback, useState } from 'react';
+
+import { useInfiniteTable } from './useInfiniteTable';
+
+import {
+  clearInfiniteColumnReorderDuration,
+  setInfiniteColumnOffsetWhileReordering,
+  setInfiniteColumnZIndex,
+} from '../utils/infiniteDOMUtils';
+
+import { InfiniteClsShiftingColumns } from '../InfiniteCls.css';
+import { InternalVars } from '../theme.css';
+import { stripVar } from '../../../utils/stripVar';
+import { getColumnZIndex } from './useDOMProps';
+import {
+  reorderColumnsOnDrag,
+  ReorderDragResult,
+} from './reorderColumnsOnDrag';
+import { shallowEqualObjects } from '../../../utils/shallowEqualObjects';
+import { InfiniteTablePropColumnPinning } from '../types';
+import adjustColumnOrderForAllColumns from './adjustColumnOrderForAllColumns';
+
+const columnOffsetAtIndex = stripVar(InternalVars.columnOffsetAtIndex);
+const columnWidthAtIndex = stripVar(InternalVars.columnWidthAtIndex);
+const baseZIndexForCells = stripVar(InternalVars.baseZIndexForCells);
+
+type TopLeft = {
+  left: number;
+  top: number;
+};
+type TopLeftOrNull = TopLeft | null;
+
+const equalPinning = (
+  pinning1: null | InfiniteTablePropColumnPinning,
+  pinning2: null | InfiniteTablePropColumnPinning,
+) => {
+  const empty1 = !pinning1 || Object.keys(pinning1).length === 0;
+  const empty2 = !pinning2 || Object.keys(pinning2).length === 0;
+
+  if (empty1 && empty2) {
+    return true;
+  }
+  if (!!pinning1 != !!pinning2) {
+    return false;
+  }
+
+  return shallowEqualObjects(pinning1, pinning2);
+};
+
+export const useColumnPointerEvents = ({
+  columnId,
+  domRef,
+}: {
+  columnId: string;
+  domRef: React.MutableRefObject<HTMLElement | null>;
+}) => {
+  const [proxyPosition, setProxyPosition] = useState<TopLeftOrNull>(null);
+
+  const {
+    componentActions,
+    computed,
+    getComputed,
+    getState,
+    imperativeApi,
+    componentState: { domRef: rootRef, brain, headerBrain },
+  } = useInfiniteTable();
+
+  const onPointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      //@ts-ignore
+      if (e.target?.tagName === 'INPUT') {
+        // early exit, so that (for example) checkbox selection works in the column header when clicking the checkbox
+        return;
+      }
+      const {
+        computedVisibleColumns,
+        computedVisibleColumnsMap,
+        computedPinnedStartColumns,
+        computedUnpinnedColumns,
+        computedPinnedEndColumns,
+      } = getComputed();
+
+      const dragColumn = computedVisibleColumnsMap.get(columnId)!;
+
+      if (!dragColumn.computedDraggable) {
+        return;
+      }
+
+      const target = domRef.current!;
+
+      const targetRect = target.getBoundingClientRect();
+      const tableRect = rootRef.current!.getBoundingClientRect();
+
+      const initialAvailableSize = brain.getAvailableSize();
+
+      const dragColumnIndex = dragColumn.computedVisibleIndex;
+
+      let initialCursor: React.CSSProperties['cursor'] =
+        target.style.cursor ?? 'auto';
+
+      let didDragAtLeastOnce = false;
+
+      const dragger = reorderColumnsOnDrag({
+        brain,
+        columnOffsetAtIndexCSSVar: columnOffsetAtIndex,
+        columnWidthAtIndexCSSVar: columnWidthAtIndex,
+        computedPinnedEndColumns,
+        computedPinnedStartColumns,
+        computedUnpinnedColumns,
+        computedVisibleColumns,
+        computedVisibleColumnsMap,
+        dragColumnHeaderTargetRect: targetRect,
+        dragColumnId: columnId,
+        imperativeApi,
+        infiniteDOMNode: rootRef.current!,
+        setProxyPosition,
+        tableRect,
+        initialMousePosition: {
+          clientX: e.clientX,
+          clientY: e.clientY,
+        },
+      });
+
+      let reorderDragResult: ReorderDragResult | null = null;
+
+      function persistColumnOrder(reorderDragResult: ReorderDragResult) {
+        const { columnPinning, columnOrder } = reorderDragResult;
+
+        if (!equalPinning(getState().columnPinning, columnPinning)) {
+          componentActions.columnPinning = columnPinning;
+        }
+        const currentComputedColumnOrder = getComputed().computedColumnOrder;
+
+        if (JSON.stringify(columnOrder, currentComputedColumnOrder)) {
+          computedVisibleColumns.forEach((col) => {
+            setInfiniteColumnOffsetWhileReordering(
+              col.computedVisibleIndex,
+              '',
+              rootRef.current,
+            );
+          });
+
+          // componentActions.columnOrder = columnOrder;
+          // we can't simply do the above line
+          // as it would discard non visible columns from the column order
+          // as the `columnOrder` variable only takes into account visible columns
+          // so we have to adjust it to account for all columns
+          componentActions.columnOrder = adjustColumnOrderForAllColumns({
+            newColumnOrder: columnOrder,
+            visibleColumnOrder: getComputed().computedVisibleColumns.map(
+              (c) => c.id,
+            ),
+            existingColumnOrder: currentComputedColumnOrder,
+            dragColumnId: columnId,
+          });
+        }
+      }
+
+      const onPointerMove = (e: PointerEvent) => {
+        if (!didDragAtLeastOnce) {
+          didDragAtLeastOnce = true;
+          // TODO we can improve this - instead of making all cols visible
+          // by increasing the render count
+          // we could have a method that says: keep this column rendered (the current column)
+          // even if the scrolling changes horizontally
+          brain.setRenderCount({
+            horizontal: computedVisibleColumns.length,
+            vertical: undefined,
+          });
+          headerBrain.setRenderCount({
+            horizontal: computedVisibleColumns.length,
+            vertical: undefined,
+          });
+
+          componentActions.columnReorderDragColumnId = dragColumn.id;
+
+          setInfiniteColumnZIndex(
+            dragColumnIndex,
+            `calc( var(${baseZIndexForCells}) + 10000 )`,
+            rootRef.current,
+          );
+
+          rootRef.current?.classList.add(InfiniteClsShiftingColumns);
+          target.style.cursor = 'grabbing';
+        }
+
+        reorderDragResult = dragger.onMove(e);
+      };
+
+      const onPointerUp = (e: PointerEvent) => {
+        const target = domRef.current!;
+        rootRef.current?.classList.remove(InfiniteClsShiftingColumns);
+
+        dragger.stop();
+
+        brain.setAvailableSize({
+          ...initialAvailableSize,
+        });
+
+        computedVisibleColumns.forEach((col) => {
+          clearInfiniteColumnReorderDuration(
+            col.computedVisibleIndex,
+            rootRef.current,
+          );
+          setInfiniteColumnOffsetWhileReordering(
+            col.computedVisibleIndex,
+            '',
+            rootRef.current,
+          );
+        });
+
+        setInfiniteColumnZIndex(
+          dragColumnIndex,
+          getColumnZIndex(dragColumn, {
+            pinnedStartColsCount: computedPinnedStartColumns.length,
+            visibleColsCount: computedVisibleColumns.length,
+          }),
+          rootRef.current,
+        );
+
+        target.style.cursor = initialCursor as string;
+        target.releasePointerCapture(e.pointerId);
+
+        target.removeEventListener('pointermove', onPointerMove);
+        target.removeEventListener('pointerup', onPointerUp);
+
+        setProxyPosition(null);
+
+        if (!didDragAtLeastOnce && dragColumn.computedSortable) {
+          dragColumn.toggleSort();
+        }
+
+        if (reorderDragResult) {
+          persistColumnOrder(reorderDragResult);
+        }
+
+        componentActions.columnReorderDragColumnId = false;
+      };
+
+      target.addEventListener('pointermove', onPointerMove);
+      target.addEventListener('pointerup', onPointerUp);
+
+      target.setPointerCapture(e.pointerId);
+    },
+    [columnId],
+  );
+
+  return {
+    onPointerDown: computed.computedVisibleColumnsMap.get(columnId)
+      ?.computedDraggable
+      ? onPointerDown
+      : () => {},
+
+    proxyPosition,
+  };
+};