@infinite-table/infinite-react 0.5.1 → 0.5.2

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

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

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

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

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

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

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