@infinite-table/infinite-react 0.5.1 → 0.5.3

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

@@ -1,80 +0,0 @@
-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

@@ -1,217 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,258 +0,0 @@
-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,
-  };
-};