@infinite-table/infinite-react 0.4.13 → 0.5.1

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

@@ -0,0 +1,165 @@
+//@ts-nocheck - this file is not being used
+import * as React from 'react';
+import { useCallback } from 'react';
+
+import { getScrollbarWidth } from '../../utils/getScrollbarWidth';
+import { RenderRow } from '../../VirtualList/types';
+import type { VirtualBrain, VirtualBrainOptions } from '../../VirtualBrain';
+
+import { VirtualRowList } from '../../VirtualList/VirtualRowList';
+import type { Size } from '../../types/Size';
+import type {
+  InfiniteTableComputedColumn,
+  InfiniteTableRowInfo,
+} from '../types';
+import type { InfiniteTableRowProps } from '../components/InfiniteTableRow/InfiniteTableRowTypes';
+
+import { InfiniteTableRow } from '../components/InfiniteTableRow';
+import { TableRowUnvirtualized } from '../components/InfiniteTableRow/InfiniteTableRowUnvirtualized';
+import { InfiniteTableState } from '../types/InfiniteTableState';
+import { InfiniteTableToggleGroupRowFn } from '../types/InfiniteTableColumn';
+
+type UnpinnedRenderingParams<T> = {
+  columnShifts: number[] | null;
+  bodySize: Size;
+  getData: () => InfiniteTableRowInfo<T>[];
+  rowHeight: number;
+  toggleGroupRow: InfiniteTableToggleGroupRowFn;
+
+  repaintId: string | number;
+  applyScrollHorizontal: ({ scrollLeft }: { scrollLeft: number }) => void;
+  verticalVirtualBrain: VirtualBrain;
+  horizontalVirtualBrain: VirtualBrain;
+
+  computedPinnedEndColumns: InfiniteTableComputedColumn<T>[];
+  computedUnpinnedColumns: InfiniteTableComputedColumn<T>[];
+  computedUnpinnedColumnsWidth: number;
+  computedPinnedStartWidth: number;
+  computedPinnedEndWidth: number;
+  rowSpan?: VirtualBrainOptions['itemSpan'];
+
+  getState: () => InfiniteTableState<T>;
+};
+export function useUnpinnedRendering<T>(params: UnpinnedRenderingParams<T>) {
+  const {
+    columnShifts,
+    bodySize,
+    getData,
+    rowHeight,
+    toggleGroupRow,
+
+    repaintId,
+
+    applyScrollHorizontal,
+    verticalVirtualBrain,
+    horizontalVirtualBrain,
+    computedUnpinnedColumnsWidth,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
+
+    computedUnpinnedColumns,
+
+    rowSpan,
+    getState,
+  } = params;
+
+  const { virtualizeColumns } = getState();
+
+  const shouldVirtualizeColumns =
+    typeof virtualizeColumns === 'function'
+      ? virtualizeColumns(computedUnpinnedColumns)
+      : virtualizeColumns ?? true;
+
+  const renderRowUnpinned: RenderRow = useCallback(
+    (rowParams) => {
+      const dataArray = getData();
+      const rowInfo = dataArray[rowParams.rowIndex];
+
+      const { showZebraRows, showHoverRows } = getState();
+
+      const rowProps: InfiniteTableRowProps<T> = {
+        rowInfo,
+        showZebraRows,
+        showHoverRows,
+        getData,
+        rowSpan,
+        toggleGroupRow,
+        virtualizeColumns: shouldVirtualizeColumns,
+        brain: null!,
+        verticalBrain: verticalVirtualBrain,
+        columns: computedUnpinnedColumns,
+        rowWidth: computedUnpinnedColumnsWidth,
+        ...rowParams,
+      };
+
+      if (shouldVirtualizeColumns) {
+        rowProps.brain = horizontalVirtualBrain;
+        rowProps.repaintId = repaintId;
+      }
+
+      const TableRowComponent = shouldVirtualizeColumns
+        ? InfiniteTableRow
+        : TableRowUnvirtualized;
+
+      return <TableRowComponent<T> {...rowProps} />;
+    },
+    [
+      repaintId,
+      rowHeight,
+      rowSpan,
+
+      computedUnpinnedColumns,
+      computedUnpinnedColumnsWidth,
+
+      shouldVirtualizeColumns,
+      horizontalVirtualBrain,
+      verticalVirtualBrain,
+    ],
+  );
+
+  const fakeScrollbar = getScrollbarWidth() ? (
+    <div
+      data-name="horizontal-scrollbar-placeholder--fake"
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: getScrollbarWidth() + 1,
+        overflow: 'auto',
+        visibility: columnShifts ? 'visible' : 'hidden',
+      }}
+    >
+      <div style={{ height: '100%', width: computedUnpinnedColumnsWidth }} />
+    </div>
+  ) : null;
+
+  //TODO in the future, we can use something more lightweight instead of the VirtualRowList
+  // as the root of the InfiniteTable already renders a VirtualScrollContainer
+  // and the VirtualRowList contains another VirtualScrollContainer
+  // so I think we could optimize this 🤔 or remove the root VirtualScrollContainer there 🤷‍♂️
+  return rowHeight != 0 ? (
+    <VirtualRowList
+      repaintId={`${repaintId}-unpinned-`}
+      brain={verticalVirtualBrain}
+      onContainerScroll={applyScrollHorizontal}
+      scrollable={
+        columnShifts
+          ? 'visible'
+          : { vertical: false, horizontal: !columnShifts }
+      }
+      style={{
+        height: bodySize.height,
+        top: 0,
+        position: 'absolute',
+        left: computedPinnedStartWidth,
+        right: computedPinnedEndWidth,
+      }}
+      count={getData().length}
+      rowHeight={rowHeight}
+      renderRow={renderRowUnpinned}
+      rowWidth={computedUnpinnedColumnsWidth}
+      outerChildren={fakeScrollbar}
+    ></VirtualRowList>
+  ) : null;
+}

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

@@ -0,0 +1,55 @@
+// CONFESSION: this should have been named `useVirtualAndHorizontalBrains`
+// but I couldn't stand naming it `useYourBrain` instead 🤷‍♂️
+
+import { useMatrixBrain } from '../../HeadlessTable';
+import { Size } from '../../types/Size';
+import { MatrixBrain, SpanFunction } from '../../VirtualBrain/MatrixBrain';
+import { InfiniteTableComputedColumn } from '../types';
+
+type UseYourBrainParam<T = any> = {
+  brain: MatrixBrain;
+
+  columnSize: (rowIndex: number) => number;
+  computedVisibleColumns: InfiniteTableComputedColumn<T>[];
+  computedPinnedStartColumns: InfiniteTableComputedColumn<T>[];
+  computedPinnedEndColumns: InfiniteTableComputedColumn<T>[];
+
+  dataArray: any[];
+  rowHeight: number;
+  bodySize: Size;
+  rowspan?: SpanFunction;
+  colspan?: SpanFunction;
+};
+export function useYourBrain<T = any>(param: UseYourBrainParam<T>) {
+  const {
+    dataArray,
+    brain,
+    computedPinnedEndColumns,
+    computedPinnedStartColumns,
+    computedVisibleColumns,
+    columnSize,
+    rowHeight,
+    rowspan,
+  } = param;
+
+  useMatrixBrain(
+    brain,
+    {
+      colWidth: columnSize,
+      rowHeight,
+      // don't update width and height here
+      // since it's updated by HeadlessTable, to account also for scrollbar sizes
+      // height: bodySize.height,
+      // width: bodySize.width,
+      rows: dataArray.length,
+      cols: computedVisibleColumns.length,
+      rowspan,
+    },
+    {
+      fixedColsEnd: computedPinnedEndColumns.length,
+      fixedColsStart: computedPinnedStartColumns.length,
+    },
+  );
+
+  return brain;
+}

package/src/components/InfiniteTable/index.tsx

@@ -0,0 +1,352 @@
+import * as React from 'react';
+import { RefObject } from 'react';
+
+import { join } from '../../utils/join';
+import { CSSVariableWatch } from '../CSSVariableWatch';
+
+import {
+  useDataSource,
+  useDataSourceContextValue,
+} from '../DataSource/publicHooks/useDataSource';
+import { HeadlessTable } from '../HeadlessTable';
+
+import {
+  getComponentStateRoot,
+  useComponentState,
+} from '../hooks/useComponentState';
+import { useLatest } from '../hooks/useLatest';
+import { useResizeObserver } from '../ResizeObserver';
+
+import { debounce } from '../utils/debounce';
+
+import { InfiniteTableBody } from './components/InfiniteTableBody';
+import { InfiniteTableFooter } from './components/InfiniteTableFooter';
+import { useInfiniteHeaderCell } from './components/InfiniteTableHeader/InfiniteTableHeaderCell';
+import { TableHeaderWrapper } from './components/InfiniteTableHeader/InfiniteTableHeaderWrapper';
+import { InfiniteTableLicenseFooter } from './components/InfiniteTableLicenseFooter';
+import { useInfiniteColumnCell } from './components/InfiniteTableRow/InfiniteTableColumnCell';
+import { RowHoverCls } from './components/InfiniteTableRow/row.css';
+import { LoadMask } from './components/LoadMask';
+import { getImperativeApi } from './api/getImperativeApi';
+import { useAutoSizeColumns } from './hooks/useAutoSizeColumns';
+import { useCellRendering } from './hooks/useCellRendering';
+import { useComputed } from './hooks/useComputed';
+import { useDOMProps } from './hooks/useDOMProps';
+import { useInfiniteTable } from './hooks/useInfiniteTable';
+import { useLicense } from './hooks/useLicense/useLicense';
+
+import { useScrollToActiveCell } from './hooks/useScrollToActiveCell';
+import { useScrollToActiveRow } from './hooks/useScrollToActiveRow';
+import {
+  PinnedEndIndicatorBorder,
+  PinnedStartIndicatorBorder,
+} from './InfiniteCls.css';
+import { getInfiniteTableContext } from './InfiniteTableContext';
+import { internalProps, rootClassName } from './internalProps';
+
+import {
+  forwardProps,
+  mapPropsToState,
+  initSetupState,
+  cleanupState,
+} from './state/getInitialState';
+import { columnHeaderHeightName } from './theme.css';
+
+import type {
+  InfiniteTableContextValue,
+  InfiniteTableProps,
+  InfiniteTableState,
+} from './types';
+import { position, zIndex, top, left } from './utilities.css';
+import { toCSSVarName } from './utils/toCSSVarName';
+import { useDOMEventHandlers } from './eventHandlers';
+import { useColumnMenu } from './hooks/useColumnMenu';
+
+export const InfiniteTableClassName = internalProps.rootClassName;
+
+const HOVERED_CLASS_NAMES = [RowHoverCls, 'InfiniteColumnCell--hovered'];
+
+const InfiniteTableRoot = getComponentStateRoot({
+  // @ts-ignore
+  initSetupState,
+  // @ts-ignore
+  forwardProps,
+  // @ts-ignore
+  mapPropsToState,
+  // @ts-ignore
+  cleanup: cleanupState,
+  // @ts-ignore
+  allowedControlledPropOverrides: {
+    rowHeight: true,
+    columnHeaderHeight: true,
+  } as Record<keyof InfiniteTableProps<any>, true>,
+  // @ts-ignore
+  getParentState: () => useDataSource(),
+  debugName: 'InfiniteTable',
+});
+
+// const InfiniteTableFactory = <T extends unknown>(
+//   _cfg: InfiniteTableFactoryConfig = {},
+// ) => {
+export const InfiniteTableComponent = React.memo(
+  function InfiniteTableComponent<T>() {
+    const context = useInfiniteTable<T>();
+    const { componentState, getComputed, computed, imperativeApi } = context;
+    const {
+      componentState: { loading, dataArray },
+      getState: getDataSourceState,
+      componentActions: dataSourceActions,
+    } = useDataSourceContextValue<T>();
+
+    const {
+      domRef,
+      scrollerDOMRef,
+      portalDOMRef,
+
+      licenseKey,
+      loadingText,
+
+      header,
+      onRowHeightCSSVarChange,
+      onColumnHeaderHeightCSSVarChange,
+      rowHeightCSSVar,
+      columnHeaderHeightCSSVar,
+      components,
+      scrollStopDelay,
+      brain,
+      headerBrain,
+      renderer,
+      keyboardNavigation,
+      activeRowIndex,
+      activeCellIndex,
+      onRenderUpdater,
+    } = componentState;
+
+    useScrollToActiveRow(activeRowIndex, dataArray.length, imperativeApi);
+    useScrollToActiveCell(activeCellIndex, dataArray.length, imperativeApi);
+    // useRowSelection();
+
+    const { onKeyDown } = useDOMEventHandlers<T>();
+
+    const { bodySize } = componentState;
+
+    const { scrollbars } = computed;
+
+    const { renderCell } = useCellRendering({
+      imperativeApi,
+      getComputed,
+      domRef: componentState.domRef,
+
+      bodySize,
+      computed,
+    });
+
+    React.useEffect(() => {
+      const dataSourceState = getDataSourceState();
+      const onChange = debounce(
+        (renderRange: [number, number]) => {
+          dataSourceState.notifyRenderRangeChange({
+            renderStartIndex: renderRange[0],
+            renderEndIndex: renderRange[1],
+          });
+        },
+        { wait: scrollStopDelay },
+      );
+
+      return brain.onVerticalRenderRangeChange(onChange);
+    }, [brain, scrollStopDelay]);
+
+    const licenseValid = useLicense(licenseKey);
+
+    const domProps = useDOMProps<T>(componentState.domProps);
+
+    const LoadMaskCmp = components?.LoadMask ?? LoadMask;
+
+    React.useEffect(() => {
+      brain.setScrollStopDelay(scrollStopDelay);
+      dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
+    }, [scrollStopDelay]);
+
+    useAutoSizeColumns();
+
+    const { menuPortal } = useColumnMenu();
+
+    React.useEffect(() => {
+      if (
+        typeof (globalThis as any)
+          .__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY === 'function'
+      ) {
+        (
+          globalThis as any
+        ).__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY(
+          componentState.id,
+          componentState.ready,
+        );
+      }
+    }, [componentState.ready]);
+
+    return (
+      <div onKeyDown={onKeyDown} ref={domRef} {...domProps}>
+        {header ? (
+          <TableHeaderWrapper
+            bodyBrain={brain}
+            headerBrain={headerBrain}
+            scrollbars={scrollbars}
+          />
+        ) : null}
+
+        <InfiniteTableBody>
+          <HeadlessTable
+            tabIndex={0}
+            activeRowIndex={
+              componentState.ready && keyboardNavigation === 'row'
+                ? activeRowIndex
+                : null
+            }
+            activeCellIndex={
+              componentState.ready &&
+              keyboardNavigation === 'cell' &&
+              // we want to hide the active cell indicator while column reodering is happening
+              !componentState.columnReorderDragColumnId
+                ? activeCellIndex
+                : null
+            }
+            scrollStopDelay={scrollStopDelay}
+            renderer={renderer}
+            onRenderUpdater={onRenderUpdater}
+            brain={brain}
+            renderCell={renderCell}
+            cellHoverClassNames={HOVERED_CLASS_NAMES}
+            scrollerDOMRef={scrollerDOMRef}
+          ></HeadlessTable>
+
+          <LoadMaskCmp visible={loading}>{loadingText}</LoadMaskCmp>
+        </InfiniteTableBody>
+
+        <div
+          data-name="pinned-start-border"
+          className={PinnedStartIndicatorBorder}
+        />
+        <div
+          data-name="pinned-end-border"
+          className={PinnedEndIndicatorBorder}
+        />
+        <div
+          ref={portalDOMRef as RefObject<HTMLDivElement>}
+          className={join(
+            `${rootClassName}Portal`,
+            zIndex[10_000_000],
+            position.absolute,
+            top[0],
+            left[0],
+          )}
+        >
+          {menuPortal}
+        </div>
+        {rowHeightCSSVar ? (
+          <CSSVariableWatch
+            varName={rowHeightCSSVar}
+            onChange={onRowHeightCSSVarChange}
+          />
+        ) : null}
+        {columnHeaderHeightCSSVar ? (
+          <CSSVariableWatch
+            varName={columnHeaderHeightCSSVar}
+            onChange={onColumnHeaderHeightCSSVarChange}
+          />
+        ) : null}
+        <InfiniteTableFooter />
+        {licenseValid ? null : <InfiniteTableLicenseFooter />}
+      </div>
+    );
+  },
+);
+function InfiniteTableContextProvider<T>() {
+  const { componentActions, componentState } =
+    useComponentState<InfiniteTableState<T>>();
+
+  const { scrollerDOMRef, scrollTopKey } = componentState;
+
+  const computed = useComputed<T>();
+  const getComputed = useLatest(computed);
+  const getState = useLatest(componentState);
+
+  if (__DEV__) {
+    (globalThis as any).getState = getState;
+    (globalThis as any).getComputed = getComputed;
+    (globalThis as any).componentActions = componentActions;
+  }
+
+  const { getState: getDataSourceState, componentActions: dataSourceActions } =
+    useDataSourceContextValue<T>();
+
+  const [imperativeApi] = React.useState(() => {
+    return getImperativeApi({
+      getComputed,
+      getState,
+      getDataSourceState,
+      componentActions,
+      dataSourceActions,
+    });
+  });
+
+  const contextValue: InfiniteTableContextValue<T> = {
+    componentActions,
+    componentState,
+    computed,
+    getComputed,
+    getState,
+    imperativeApi,
+  };
+
+  useResizeObserver(
+    scrollerDOMRef,
+    (size) => {
+      const bodySize = {
+        width: size.width, //- reservedScrollSpace,
+        height: size.height,
+      };
+
+      // TODO this was here before, but cant remember why
+      // bodySize.width = scrollerDOMRef.current?.scrollWidth ?? bodySize.width;
+
+      componentActions.bodySize = bodySize;
+    },
+    { earlyAttach: true, debounce: 50 },
+  );
+
+  React.useEffect(() => {
+    if (scrollerDOMRef.current) {
+      scrollerDOMRef.current.scrollTop = 0;
+    }
+  }, [scrollTopKey, scrollerDOMRef]);
+
+  const TableContext = getInfiniteTableContext<T>();
+
+  return (
+    <TableContext.Provider value={contextValue}>
+      <InfiniteTableComponent />
+    </TableContext.Provider>
+  );
+}
+
+export function InfiniteTable<T>(props: InfiniteTableProps<T>) {
+  const table = (
+    //@ts-ignore
+    <InfiniteTableRoot {...props}>
+      <InfiniteTableContextProvider />
+    </InfiniteTableRoot>
+  );
+  if (__DEV__) {
+    return <React.StrictMode>{table}</React.StrictMode>;
+  }
+  return table;
+}
+InfiniteTable.defaultProps = {
+  rowHeight: 40,
+  columnHeaderHeight: toCSSVarName(columnHeaderHeightName),
+};
+
+export * from './types';
+
+export { useInfiniteColumnCell, useInfiniteHeaderCell };

package/src/components/InfiniteTable/internalProps.ts

@@ -0,0 +1,4 @@
+export const rootClassName = 'Infinite';
+export const internalProps = {
+  rootClassName,
+};

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

@@ -0,0 +1,29 @@
+import type { InfiniteTablePropColumnGroupsMap } from '../types/InfiniteTableProps';
+import type { InfiniteTableColumnGroupsDepthsMap } from '../types/InfiniteTableState';
+
+export function computeColumnGroupsDepths(
+  columnGroups: InfiniteTablePropColumnGroupsMap,
+): InfiniteTableColumnGroupsDepthsMap {
+  const map = new Map();
+
+  columnGroups.forEach((colGroup, colGroupId) => {
+    let parentGroupId = colGroup.columnGroup;
+    let depth = 0;
+
+    while (parentGroupId) {
+      const parent = columnGroups.get(parentGroupId);
+
+      if (!parent) {
+        if (__DEV__) {
+          console.warn(`Cannot find column group ${parentGroupId}`);
+        }
+        break;
+      }
+      depth++;
+      parentGroupId = parent.columnGroup;
+    }
+    map.set(colGroupId, depth);
+  });
+
+  return map;
+}