@infinite-table/infinite-react 0.5.0 → 0.5.2

package/src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx

@@ -1,185 +0,0 @@
-import * as React from 'react';
-
-import type { Scrollbars } from '../..';
-import { useMatrixBrain } from '../../../HeadlessTable';
-import { getScrollbarWidth } from '../../../utils/getScrollbarWidth';
-import { MatrixBrain } from '../../../VirtualBrain/MatrixBrain';
-import { useInfiniteTable } from '../../hooks/useInfiniteTable';
-
-import { buildColumnAndGroupTree } from './buildColumnAndGroupTree';
-import { HeaderScrollbarPlaceholderCls, HeaderWrapperCls } from './header.css';
-import { InfiniteTableHeader } from './InfiniteTableHeader';
-
-export type TableHeaderWrapperProps = {
-  headerBrain: MatrixBrain;
-  bodyBrain: MatrixBrain;
-  scrollbars: Scrollbars;
-};
-export function TableHeaderWrapper<T>(props: TableHeaderWrapperProps) {
-  const { headerBrain, bodyBrain, scrollbars } = props;
-
-  const tableContextValue = useInfiniteTable<T>();
-
-  const {
-    computedPinnedStartColumns,
-    computedPinnedEndColumns,
-    computedVisibleColumns,
-    columnSize,
-    showColumnFilters,
-  } = tableContextValue.computed;
-
-  const {
-    componentState: {
-      columnHeaderHeight,
-      columnGroupsDepthsMap,
-      columnGroupsMaxDepth,
-      computedColumnGroups,
-    },
-  } = tableContextValue;
-
-  const rows =
-    !computedColumnGroups || !computedColumnGroups.size
-      ? 1
-      : columnGroupsMaxDepth + 2;
-
-  const height =
-    rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
-  // console.log({
-  //   columnGroupsMaxDepth,
-  //   computedColumnGroups,
-  //   rows,
-  //   columnHeaderHeight,
-  // });
-
-  const columnAndGroupTreeInfo = React.useMemo(() => {
-    if (!computedColumnGroups || !computedColumnGroups.size) {
-      return undefined;
-    }
-
-    return buildColumnAndGroupTree(
-      computedVisibleColumns,
-      computedColumnGroups,
-      columnGroupsDepthsMap,
-      columnGroupsMaxDepth,
-    );
-  }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
-
-  const cellspan = React.useCallback(
-    ({ rowIndex, colIndex }: { rowIndex: number; colIndex: number }) => {
-      const column = computedVisibleColumns[colIndex];
-
-      const rowspan = 1;
-      const colspan = 1;
-      if (!column || !columnAndGroupTreeInfo) {
-        return { rowspan, colspan };
-      }
-
-      const treeItem = columnAndGroupTreeInfo.pathsToCells.get([
-        rowIndex,
-        colIndex,
-      ]);
-
-      if (!treeItem) {
-        return { rowspan, colspan };
-      }
-      if (treeItem.type === 'column') {
-        return {
-          colspan,
-          rowspan: rows - treeItem.depth,
-        };
-      }
-
-      const index = treeItem.columnItems.findIndex(
-        (child) => child.id === column.id,
-      );
-
-      return {
-        rowspan,
-        colspan: index === 0 ? treeItem.columnItems.length : 1,
-      };
-    },
-    [
-      computedColumnGroups,
-      columnGroupsMaxDepth,
-      computedVisibleColumns,
-      columnAndGroupTreeInfo,
-      rows,
-      columnGroupsDepthsMap,
-    ],
-  );
-
-  const rowspan = React.useCallback(
-    ({ rowIndex, colIndex }: { rowIndex: number; colIndex: number }) =>
-      cellspan({ rowIndex, colIndex }).rowspan,
-    [cellspan],
-  );
-  const colspan = React.useCallback(
-    ({ rowIndex, colIndex }: { rowIndex: number; colIndex: number }) =>
-      cellspan({ rowIndex, colIndex }).colspan,
-    [cellspan],
-  );
-
-  const rowHeight = React.useCallback(
-    (index: number) => {
-      // if we need to show the column filters
-
-      return showColumnFilters
-        ? index < rows - 1
-          ? columnHeaderHeight
-          : 2 * columnHeaderHeight
-        : columnHeaderHeight;
-    },
-    [rows, showColumnFilters, columnHeaderHeight],
-  );
-
-  useMatrixBrain(
-    headerBrain,
-    {
-      colWidth: columnSize,
-      rowHeight,
-      rows,
-      cols: computedVisibleColumns.length,
-      height,
-      rowspan,
-      colspan,
-    },
-    {
-      fixedColsEnd: computedPinnedEndColumns.length,
-      fixedColsStart: computedPinnedStartColumns.length,
-    },
-  );
-
-  const header = (
-    <InfiniteTableHeader
-      columns={computedVisibleColumns}
-      headerBrain={headerBrain}
-      bodyBrain={bodyBrain}
-      columnHeaderHeight={height}
-      columnGroupsMaxDepth={columnGroupsMaxDepth}
-      columnAndGroupTreeInfo={columnAndGroupTreeInfo}
-    />
-  );
-
-  const verticalScrollbarPlaceholder =
-    scrollbars.vertical && getScrollbarWidth() ? (
-      <div
-        className={HeaderScrollbarPlaceholderCls}
-        style={{
-          zIndex: 1000,
-          width: getScrollbarWidth(),
-        }}
-      />
-    ) : null;
-
-  return (
-    <div
-      className={HeaderWrapperCls}
-      style={{
-        height: height,
-      }}
-    >
-      {header}
-      {verticalScrollbarPlaceholder}
-    </div>
-  );
-}

package/src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx

@@ -1,159 +0,0 @@
-import { CSSProperties, PointerEvent, useRef, useState } from 'react';
-import * as React from 'react';
-import { FlexComputeGroupResizeResult } from '../../../../flexbox';
-import { internalProps } from '../../../internalProps';
-import { InfiniteTableComputedColumn } from '../../../types';
-
-import { getColumnGroupResizer } from './columnResizer';
-import {
-  ResizeHandleCls,
-  ResizeHandleRecipeCls,
-  ResizeHandleDraggerClsRecipe,
-} from './ResizeHandle.css';
-import type { MatrixBrain } from '../../../../VirtualBrain/MatrixBrain';
-import { ThemeVars } from '../../../theme.css';
-
-type GroupResizeHandleProps<T> = {
-  groupColumns: InfiniteTableComputedColumn<T>[];
-  columns: InfiniteTableComputedColumn<T>[];
-
-  style: CSSProperties;
-
-  brain: MatrixBrain;
-  computeResize: (diff: number) => FlexComputeGroupResizeResult;
-
-  onResize: (diff: number) => void;
-};
-
-const { rootClassName } = internalProps;
-
-export const InfiniteTableHeaderCellResizeHandleCls = `${rootClassName}HeaderCell_ResizeHandle`;
-
-function GroupResizeHandleFn<T>(props: GroupResizeHandleProps<T>) {
-  const domRef = useRef<HTMLDivElement>(null);
-  const [constrained, setConstrained] = useState(false);
-  const constrainedRef = useRef<boolean>(constrained);
-  constrainedRef.current = constrained;
-
-  const col = props.groupColumns[0];
-  if (!col) {
-    return null;
-  }
-  const computedPinned = col.computedPinned;
-  const computedFirstInCategory = col.computedFirstInCategory;
-  const computedLastInCategory = col.computedLastInCategory;
-
-  const onPointerDown = (e: PointerEvent) => {
-    e.stopPropagation();
-
-    const pointerId = e.pointerId;
-    const initialX = e.clientX;
-    const target = e.target as HTMLElement;
-
-    target.setPointerCapture(pointerId);
-
-    let initialMove = true;
-
-    const resizer = getColumnGroupResizer(
-      props.groupColumns.map((c) => c.computedVisibleIndex),
-      {
-        columns: props.columns,
-        domRef,
-      },
-    );
-
-    const resizeDiff = (diff: number) => {
-      if (computedPinned === 'end') {
-        diff *= -1;
-      }
-      const { constrained, adjustedDiffs, adjustedDiff } =
-        props.computeResize(diff);
-
-      if (constrainedRef.current !== constrained) {
-        setConstrained(constrained);
-      }
-
-      resizer.resize(adjustedDiffs);
-
-      return adjustedDiff;
-    };
-
-    const onPointerMove = (e: PointerEvent) => {
-      if (initialMove) {
-        // since this group could be dragged so all columns have the minimum width
-        // and new columns could come into the viewport, which might not be visible yet, and thus are hidden via virtualization
-        // we need to adjust the available size while dragging to determine the brain to render additional columns
-
-        const maxDiff = props.groupColumns.reduce((diff, col) => {
-          return diff + col.computedWidth - col.computedMinWidth;
-        }, 0);
-        const currentSize = props.brain.getAvailableSize();
-        const newSize = {
-          width: currentSize.width + maxDiff,
-          height: currentSize.height,
-        };
-
-        props.brain.setAvailableSize(newSize);
-        initialMove = false;
-      }
-
-      resizeDiff(Math.round(e.clientX - initialX));
-    };
-
-    const onPointerUp = (e: PointerEvent) => {
-      target.releasePointerCapture(pointerId);
-
-      //@ts-ignore
-      target.removeEventListener('pointermove', onPointerMove);
-      //@ts-ignore
-      target.removeEventListener('pointerup', onPointerUp);
-
-      const diff = Math.round(e.clientX - initialX);
-      const adjustedDiffs = resizeDiff(diff);
-
-      props.onResize(adjustedDiffs);
-    };
-
-    //@ts-ignore
-    target.addEventListener('pointermove', onPointerMove);
-    //@ts-ignore
-    target.addEventListener('pointerup', onPointerUp);
-  };
-
-  const style =
-    (computedPinned === false || computedPinned === 'start') &&
-    computedLastInCategory
-      ? {
-          right:
-            computedPinned === 'start'
-              ? 0
-              : ThemeVars.components.HeaderCell.resizeHandleWidth,
-        }
-      : computedPinned === 'end' && computedFirstInCategory
-      ? { right: 'none', left: 0 }
-      : undefined;
-
-  return (
-    <div
-      ref={domRef}
-      className={`${InfiniteTableHeaderCellResizeHandleCls} ${ResizeHandleCls} ${ResizeHandleRecipeCls(
-        {
-          computedPinned,
-          computedFirstInCategory,
-          computedLastInCategory,
-        },
-      )}`}
-      onPointerDown={onPointerDown}
-    >
-      <div
-        style={{ ...style, ...props.style }}
-        className={ResizeHandleDraggerClsRecipe({
-          constrained,
-        })}
-      />
-    </div>
-  );
-}
-export const GroupResizeHandle = React.memo(
-  GroupResizeHandleFn,
-) as typeof GroupResizeHandleFn;

package/src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/ResizeHandle.css.ts

@@ -1,124 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe } from '@vanilla-extract/recipes';
-import { ThemeVars } from '../../../theme.css';
-
-import {
-  position,
-  right,
-  top,
-  bottom,
-  cursor,
-  left,
-  overflow,
-} from '../../../utilities.css';
-
-export const ResizeHandleCls = style(
-  [
-    position.absolute,
-    top['0'],
-    right['0'],
-    bottom['0'],
-    cursor.colResize,
-    overflow.hidden,
-    {
-      transform: 'translateX(50%)',
-      width: ThemeVars.components.HeaderCell.resizeHandleActiveAreaWidth,
-      selectors: {
-        '&:hover': {
-          overflow: 'visible',
-        },
-      },
-    },
-  ],
-
-  'ResizeHandleCls',
-);
-
-export const ResizeHandleRecipeCls = recipe({
-  variants: {
-    computedPinned: {
-      start: {},
-      end: [
-        left['0'],
-        right['auto'],
-        {
-          transform: 'translateX(-50%)',
-        },
-      ],
-      false: {},
-    },
-    computedFirstInCategory: {
-      true: {},
-      false: {},
-    },
-    computedLastInCategory: {
-      true: {},
-      false: {},
-    },
-  },
-  compoundVariants: [
-    {
-      variants: {
-        computedPinned: 'end',
-        computedLastInCategory: false,
-        computedFirstInCategory: true,
-      },
-      style: {
-        transform: 'none',
-      },
-    },
-    {
-      variants: {
-        computedPinned: false,
-        computedFirstInCategory: false,
-        computedLastInCategory: true,
-      },
-      style: {
-        transform: 'none',
-      },
-    },
-    {
-      variants: {
-        computedPinned: 'start',
-        computedFirstInCategory: false,
-        computedLastInCategory: true,
-      },
-      style: {
-        transform: 'none',
-      },
-    },
-  ],
-});
-
-export const ResizeHandleDraggerClsRecipe = recipe({
-  base: [
-    position.absolute,
-    top['0'],
-
-    bottom['0'],
-    {
-      right: `calc((${ThemeVars.components.HeaderCell.resizeHandleActiveAreaWidth} - ${ThemeVars.components.HeaderCell.resizeHandleWidth}) / 2)`,
-      width: ThemeVars.components.HeaderCell.resizeHandleWidth,
-      selectors: {
-        [`${ResizeHandleCls}:hover &`]: {
-          background:
-            ThemeVars.components.HeaderCell.resizeHandleHoverBackground,
-        },
-      },
-    },
-  ],
-  variants: {
-    constrained: {
-      false: {},
-      true: {
-        selectors: {
-          [`${ResizeHandleCls}:hover &`]: {
-            background:
-              ThemeVars.components.HeaderCell
-                .resizeHandleConstrainedHoverBackground,
-          },
-        },
-      },
-    },
-  },
-});

package/src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts

@@ -1,166 +0,0 @@
-import { RefObject } from 'react';
-
-import { InfiniteTableComputedColumn } from '../../../types';
-import {
-  addToInfiniteColumnOffset,
-  setInfiniteColumnOffset,
-  setInfiniteColumnWidth,
-} from '../../../utils/infiniteDOMUtils';
-
-export function getColumnResizer<T>(
-  colIndex: number,
-  {
-    columns,
-    shareSpaceOnResize,
-    domRef,
-  }: {
-    columns: InfiniteTableComputedColumn<T>[];
-    shareSpaceOnResize: boolean;
-    domRef: RefObject<HTMLDivElement>;
-  },
-) {
-  const column = columns[colIndex];
-
-  return {
-    resize(diff: number) {
-      // set the new width for the current column
-      setInfiniteColumnWidth(
-        colIndex,
-        column.computedWidth + diff,
-        domRef.current,
-      );
-
-      const nextColIndex = colIndex + 1;
-
-      if (shareSpaceOnResize) {
-        // and then manage width and offset for next column
-        const nextColumn = columns[nextColIndex];
-        if (!nextColumn) {
-          return;
-        }
-        setInfiniteColumnWidth(
-          nextColIndex,
-          nextColumn.computedWidth - diff,
-          domRef.current,
-        );
-
-        if (nextColumn.computedPinned === 'start') {
-          addToInfiniteColumnOffset(nextColumn, diff, domRef.current);
-        } else {
-          setInfiniteColumnOffset(
-            nextColIndex,
-            nextColumn.computedOffset + diff,
-            domRef.current,
-          );
-        }
-        return;
-      }
-      if (column.computedPinned === 'end') {
-        // when a pinned end col is resized
-        // we need to adjust just it's own width
-        // and no other offsets, since the offsets are computed
-        // based on the widths of previos pinned end cols
-        // see #startcoloffsets-pinnedend
-
-        // TODO it would be a great idea to computed offsets for all other columns
-        // in this way, and we would not need to adjust offsets anymore on resize - just
-        // adjust column widths
-        return;
-      }
-
-      if (column.computedPinned === 'start') {
-        for (let i = nextColIndex, len = columns.length; i < len; i++) {
-          const col = columns[i];
-
-          if (col.computedPinned === 'start') {
-            addToInfiniteColumnOffset(col, diff, domRef.current);
-            continue;
-          }
-          if (col.computedPinned === 'end') {
-            continue;
-          }
-          setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
-        }
-        return;
-      }
-
-      for (let i = nextColIndex, len = columns.length; i < len; i++) {
-        const col = columns[i];
-
-        if (col.computedPinned) {
-          continue;
-        }
-        setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
-      }
-    },
-  };
-}
-/**
- *
- * @param colIndexes An array of indexes for the columns that will be resized
- * @param config
- * @param config.columns The array of computed visible columns
- * @param config.domRef A ref that points to the DOM node of the component.
- * @returns The resizer object, with a resize(diffs: number[]) method that should be called when the user moves/drags the resize handle.
- */
-export function getColumnGroupResizer<T>(
-  colIndexes: number[],
-  config: {
-    columns: InfiniteTableComputedColumn<T>[];
-    domRef: RefObject<HTMLDivElement>;
-  },
-) {
-  const lastColIndex = colIndexes[colIndexes.length - 1];
-
-  return {
-    /**
-     * Performs real-time resizing of columns by updating the corresponding
-     * CSS variables for the corresponding colIndexes.
-     *
-     * Note: this resize is transient - so after the resize handle is dropped,
-     * the table needs to be re-rendered so that the actual widths end up in the component state as well.
-     *
-     * @param diffs an array of diffs, one for each column in the colIndexes
-     */
-    resize(diffs: number[]) {
-      const { columns, domRef } = config;
-      const firstCol = columns[colIndexes[0]];
-      let offset = firstCol.computedOffset;
-      let diffSum = 0;
-
-      const node = domRef.current;
-
-      diffs.forEach((diff, i) => {
-        diffSum += diff;
-
-        const colIndex = colIndexes[i];
-        const column = columns[colIndex];
-        const newWidth = column.computedWidth + diff;
-
-        setInfiniteColumnWidth(colIndex, newWidth, node);
-
-        if (column.computedPinned === 'end') {
-          return;
-        }
-
-        if (offset) {
-          setInfiniteColumnOffset(colIndex, offset, node);
-        }
-        offset += newWidth;
-      });
-
-      if (firstCol.computedPinned === 'end') {
-        return;
-      }
-
-      for (let i = lastColIndex + 1; i < columns.length; i++) {
-        const col = columns[i];
-
-        if (col.computedPinned === 'end') {
-          continue;
-        }
-        setInfiniteColumnOffset(i, col.computedOffset + diffSum, node);
-      }
-    },
-  };
-}