@infinite-table/infinite-react 0.4.13 → 0.5.0

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

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

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

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

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