@infinite-table/infinite-react 0.5.0 → 0.5.2

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

@@ -1,476 +0,0 @@
-import binarySearch from 'binary-search';
-import { stripVar } from '../../../utils/stripVar';
-
-import { MatrixBrain } from '../../VirtualBrain/MatrixBrain';
-import { InternalVars } from '../theme.css';
-
-import { InfiniteTableComputedColumn } from '../types';
-import {
-  InfiniteTableApi,
-  InfiniteTablePropColumnPinning,
-} from '../types/InfiniteTableProps';
-import {
-  clearInfiniteColumnReorderDuration,
-  restoreInfiniteColumnReorderDuration,
-  setInfiniteColumnOffsetWhileReordering,
-  setInfiniteVarOnRoot,
-} from '../utils/infiniteDOMUtils';
-import { moveXatY } from '../utils/moveXatY';
-import { progressiveSpeedScroller } from '../utils/progressiveSpeedScroller';
-
-type TopLeft = {
-  left: number;
-  top: number;
-};
-type TopLeftOrNull = TopLeft | null;
-
-type MousePosition = {
-  clientX: number;
-  clientY: number;
-};
-
-type ColumnBreakpoint = {
-  columnId: string;
-  index: number;
-  breakpoint: number;
-};
-
-export type ReorderDragResult = {
-  columnPinning: InfiniteTablePropColumnPinning;
-  columnOrder: string[];
-};
-
-export type ReorderParams<T> = {
-  computedVisibleColumns: InfiniteTableComputedColumn<T>[];
-  computedPinnedStartColumns: InfiniteTableComputedColumn<T>[];
-  computedPinnedEndColumns: InfiniteTableComputedColumn<T>[];
-  computedUnpinnedColumns: InfiniteTableComputedColumn<T>[];
-
-  computedVisibleColumnsMap: Map<string, InfiniteTableComputedColumn<T>>;
-
-  brain: MatrixBrain;
-
-  tableRect: DOMRect;
-  /**
-   * The rect of the column header which is being dragged
-   */
-  dragColumnHeaderTargetRect: DOMRect;
-
-  infiniteDOMNode: HTMLElement;
-
-  dragColumnId: string;
-
-  initialMousePosition: MousePosition;
-
-  imperativeApi: InfiniteTableApi<T>;
-
-  setProxyPosition: (position: TopLeftOrNull) => void;
-  columnOffsetAtIndexCSSVar: string;
-  columnWidthAtIndexCSSVar: string;
-};
-
-const PROXY_OFFSET = 10;
-
-const pinnedStartWidthCSSVar = stripVar(InternalVars.pinnedStartWidth);
-// const pinnedEndWidthCSSVar = stripVar(InternalVars.pinnedEndWidth);
-
-export function reorderColumnsOnDrag<T>(params: ReorderParams<T>) {
-  const {
-    columnOffsetAtIndexCSSVar,
-    columnWidthAtIndexCSSVar,
-    computedVisibleColumns,
-    computedVisibleColumnsMap,
-    computedPinnedEndColumns,
-    computedPinnedStartColumns,
-    dragColumnId,
-    infiniteDOMNode,
-    brain,
-    dragColumnHeaderTargetRect,
-    tableRect,
-    setProxyPosition,
-    imperativeApi,
-  } = params;
-
-  // returns the total width of the pinned start columns
-  // we need to take into account that one of them may be the drag column
-  // and it might have been dragged out of pinning
-  // so we need to substract it
-  function getCurrentPinnedWidth(pinned: 'start' | 'end') {
-    let currentWidth =
-      pinned === 'start' ? pinnedStartInitialWidth : pinnedEndInitialWidth;
-
-    // the pinning has not changed
-    if (initialDragColumnPinned === currentDragColumnPinned) {
-      return currentWidth;
-    }
-    if (currentDragColumnPinned === pinned) {
-      // was not pinned, but is now
-      return currentWidth + dragColumn.computedWidth;
-    }
-    if (initialDragColumnPinned === pinned) {
-      // was pinned, but by dragging it's no longer pinned
-      return currentWidth - dragColumn.computedWidth;
-    }
-
-    return currentWidth;
-  }
-
-  function isColumnVisible(b: ColumnBreakpoint) {
-    if (b.index === dragColumnIndex) {
-      return true;
-    }
-    const col = computedVisibleColumns[b.index];
-
-    if (col.computedPinned) {
-      return true;
-    }
-
-    const scrollLeft = brain.getScrollPosition().scrollLeft;
-
-    return (
-      col.computedOffset >= scrollLeft + getCurrentPinnedWidth('start') &&
-      col.computedOffset + col.computedWidth <
-        scrollLeft + tableRect.width - getCurrentPinnedWidth('end')
-    );
-  }
-
-  const getBreakPoints = <T>(columns: InfiniteTableComputedColumn<T>[]) => {
-    const breakpoints: ColumnBreakpoint[] = [];
-
-    columns.forEach((c) => {
-      const b = {
-        columnId: c.id,
-        index: c.computedVisibleIndex,
-        breakpoint:
-          // tableRect.left +
-          c.computedOffset + Math.round(c.computedWidth / 2),
-      };
-
-      if (isColumnVisible(b)) {
-        breakpoints.push(b);
-      }
-      // if (c.computedPinned === 'start' && c.computedLastInCategory) {
-      //   breakpoints.push({
-      //     index: c.computedVisibleIndex,
-      //     breakpoint: c.computedOffset + c.computedWidth,
-      //   });
-      // }
-
-      // if (c.computedPinned === 'end' && c.computedFirstInCategory) {
-      //   breakpoints.push({
-      //     index: c.computedVisibleIndex,
-      //     breakpoint: c.computedOffset,
-      //   });
-      // }
-    });
-
-    return breakpoints;
-  };
-
-  const initialPinnedStartCount = computedPinnedStartColumns.length;
-  let currentPinnedStartCount = initialPinnedStartCount;
-
-  // const initialPinnedEndCount = computedPinnedEndColumns.length;
-  // let currentPinnedEndCount = initialPinnedEndCount;
-
-  const initialMousePosition: MousePosition = {
-    clientX: Math.round(params.initialMousePosition.clientX),
-    clientY: Math.round(params.initialMousePosition.clientY),
-  };
-
-  const initialProxyPosition: TopLeft = {
-    left:
-      initialMousePosition.clientX -
-      tableRect.left -
-      (initialMousePosition.clientX - dragColumnHeaderTargetRect.left) +
-      PROXY_OFFSET,
-    top:
-      initialMousePosition.clientY -
-      tableRect.top -
-      (initialMousePosition.clientY - dragColumnHeaderTargetRect.top) +
-      PROXY_OFFSET,
-  };
-
-  const initialScrollPosition = brain.getScrollPosition();
-
-  const initialIndexes = computedVisibleColumns.map(
-    (c) => c.computedVisibleIndex,
-  );
-  let currentIndexes = initialIndexes;
-
-  const dragColumn = computedVisibleColumnsMap.get(dragColumnId)!;
-  const dragColumnIndex = dragColumn.computedVisibleIndex;
-  const initialDragColumnPinned = dragColumn?.computedPinned;
-
-  let currentDropIndex = dragColumnIndex;
-  let currentDragColumnPinned = initialDragColumnPinned;
-
-  const pinnedStartInitialWidth = brain.getFixedStartColsWidth();
-  const pinnedEndInitialWidth = brain.getFixedEndColsWidth();
-
-  let currentMousePosition: MousePosition = initialMousePosition;
-  let currentDiff = {
-    x: 0,
-    y: 0,
-  };
-
-  let dir: -1 | 1 = 1;
-  let diffX = 0;
-
-  function updatePositionAndDiff(mousePosition: MousePosition) {
-    const clientX = Math.round(mousePosition.clientX);
-    const clientY = Math.round(mousePosition.clientY);
-
-    if (
-      clientX === currentMousePosition.clientX &&
-      clientY === currentMousePosition.clientY
-    ) {
-      return;
-    }
-
-    currentMousePosition = { clientX, clientY };
-
-    const currentScrollLeft = brain.getScrollPosition().scrollLeft;
-
-    const scrollLeftDiff = currentScrollLeft - initialScrollPosition.scrollLeft;
-
-    currentDiff.x =
-      currentMousePosition.clientX - initialMousePosition!.clientX;
-    currentDiff.y =
-      currentMousePosition.clientY - initialMousePosition!.clientY;
-
-    diffX = currentDiff.x + scrollLeftDiff;
-
-    dir = diffX < 0 ? -1 : 1;
-
-    setProxyPosition({
-      left: initialProxyPosition.left + currentDiff.x,
-      top: initialProxyPosition.top + currentDiff.y,
-    });
-  }
-
-  function updatePinnedStartCount(columnIndexes: number[]) {
-    let pinnedStartCount = 0;
-
-    if (!initialDragColumnPinned) {
-      columnIndexes.forEach((colIndex, i) => {
-        if (computedVisibleColumns[colIndex]?.computedPinned === 'start') {
-          pinnedStartCount = i + 1;
-        }
-      });
-    } else if (initialDragColumnPinned === 'start') {
-      columnIndexes.forEach((colIndex, i) => {
-        if (pinnedStartCount) {
-          return;
-        }
-        if (computedVisibleColumns[colIndex]?.computedPinned !== 'start') {
-          pinnedStartCount = i;
-        }
-      });
-    }
-
-    currentPinnedStartCount = pinnedStartCount;
-
-    updatePinningMarker('start', columnIndexes, pinnedStartCount);
-  }
-
-  function updatePinningMarker(
-    where: 'start', //| 'end' // pinning end marker coming soon
-    columnIndexes: number[],
-    pinnedCount: number,
-  ) {
-    if (where === 'start') {
-      let width = 0;
-
-      for (let i = 0; i < pinnedCount; i++) {
-        const colIndex = columnIndexes[i];
-        const col = computedVisibleColumns[colIndex];
-        width += col.computedWidth;
-      }
-      // update pinned start marker to correct offset/width
-      setInfiniteVarOnRoot(
-        pinnedStartWidthCSSVar,
-        `${width}px`,
-        infiniteDOMNode,
-      );
-    }
-  }
-
-  function updateDropIndex(newDropIndex: number) {
-    if (newDropIndex === currentDropIndex) {
-      return;
-    }
-
-    currentDropIndex = newDropIndex;
-
-    const newColumnIndexes = moveXatY(
-      initialIndexes,
-      dragColumnIndex,
-      currentDropIndex > dragColumnIndex
-        ? currentDropIndex - 1
-        : currentDropIndex,
-    );
-
-    let pinnedStartCount = 0;
-    // let pinnedEndCount = 0;
-
-    currentPinnedStartCount = pinnedStartCount;
-    // currentPinnedEndCount = pinnedEndCount;
-
-    const indexesWithTransition = new Set<number>();
-
-    newColumnIndexes.forEach((newIndex, i) => {
-      const currentIndex = currentIndexes[i];
-
-      if (newIndex !== currentIndex) {
-        indexesWithTransition.add(newIndex);
-      }
-
-      updatePinnedStartCount(newColumnIndexes);
-    });
-
-    currentIndexes = newColumnIndexes;
-
-    adjustAllOffsets(indexesWithTransition);
-
-    return {
-      newColumnIndexes,
-      indexesWithTransition,
-      pinnedStartCount: currentPinnedStartCount,
-    };
-  }
-
-  function adjustAllOffsets(indexesWithTransition: Set<number>) {
-    computedVisibleColumns.forEach((col) => {
-      const colIndex = col.computedVisibleIndex;
-
-      if (indexesWithTransition.has(colIndex)) {
-        restoreInfiniteColumnReorderDuration(colIndex, infiniteDOMNode);
-      } else {
-        clearInfiniteColumnReorderDuration(colIndex, infiniteDOMNode);
-      }
-
-      const isDragColumn = colIndex === dragColumnIndex;
-
-      let isOutsideCol =
-        dir === -1
-          ? colIndex < currentDropIndex || colIndex > dragColumnIndex
-          : colIndex < dragColumnIndex || colIndex >= currentDropIndex;
-
-      let newPosition: string = '';
-      if (dir === -1) {
-        newPosition = isDragColumn
-          ? // this is the column we're dragging to the left
-            // so we place it exactly at the offset of the currentDropIndex
-            `var(${columnOffsetAtIndexCSSVar}-${currentDropIndex})`
-          : isOutsideCol
-          ? // this col should have the initial pos, so we're good
-            `var(${columnOffsetAtIndexCSSVar}-${colIndex})`
-          : // place it at the default offset + the width of the drag column
-            // as these are columns situated between the dragindex and the dropindex
-            `calc( var(${columnOffsetAtIndexCSSVar}-${colIndex}) + var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`;
-
-        // newColumnIndexes.push(colCurrentIndex);
-      } else {
-        newPosition = isOutsideCol
-          ? // this is the default value for a column
-            `var(${columnOffsetAtIndexCSSVar}-${colIndex})`
-          : isDragColumn
-          ? // this is the column we're dragging to the right
-            `calc( var(${columnOffsetAtIndexCSSVar}-${
-              currentDropIndex - 1
-            }) + var(${columnWidthAtIndexCSSVar}-${
-              currentDropIndex - 1
-            }) - var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`
-          : `calc( var(${columnOffsetAtIndexCSSVar}-${colIndex}) - var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`;
-      }
-
-      setInfiniteColumnOffsetWhileReordering(
-        colIndex,
-        newPosition,
-        infiniteDOMNode,
-      );
-    });
-  }
-
-  const pinnedStartColsRight = tableRect.left + getCurrentPinnedWidth('start');
-  const pinnedEndColsLeft = tableRect.right - getCurrentPinnedWidth('end');
-
-  const speedScroller = progressiveSpeedScroller({
-    scrollOffsetStart: pinnedStartColsRight,
-    scrollOffsetEnd: pinnedEndColsLeft,
-  });
-  updatePositionAndDiff(initialMousePosition);
-
-  return {
-    speedScroller,
-    stop() {
-      speedScroller.stop();
-    },
-    onMove(mousePosition: MousePosition): ReorderDragResult {
-      updatePositionAndDiff(mousePosition);
-
-      speedScroller.scroll({
-        mousePosition: currentMousePosition,
-        get scrollLeft() {
-          return brain.getScrollPosition().scrollLeft;
-        },
-        set scrollLeft(value) {
-          imperativeApi.scrollLeft = value;
-        },
-      });
-
-      const breakpoints = getBreakPoints(computedVisibleColumns);
-
-      let currentPos =
-        dir === -1
-          ? dragColumn.computedOffset + diffX
-          : dragColumn.computedOffset + dragColumn.computedWidth + diffX;
-
-      let idx = binarySearch<{ breakpoint: number }, number>(
-        breakpoints,
-        currentPos,
-        ({ breakpoint }, value) => {
-          return breakpoint < value ? -1 : breakpoint > value ? 1 : 0;
-        },
-      );
-      if (idx < 0) {
-        idx = ~idx;
-      }
-
-      idx = breakpoints[idx]
-        ? breakpoints[idx].index
-        : breakpoints[breakpoints.length - 1].index + 1;
-
-      if (idx != null && idx !== currentDropIndex) {
-        if (dir === 1 && currentDropIndex === dragColumnIndex + 1) {
-          idx = dragColumnIndex;
-        }
-
-        updateDropIndex(idx);
-      }
-
-      const columnPinning: InfiniteTablePropColumnPinning = {};
-
-      // will need to adjust pinning end to take into account the count of pinned end cols after the drag
-      // but for now, we don't support column reordering when we have pinned end cols
-      computedPinnedEndColumns.forEach((col) => {
-        columnPinning[col.id] = 'end';
-      });
-
-      for (let i = 0; i < currentPinnedStartCount; i++) {
-        const colIndex = currentIndexes[i];
-        const col = computedVisibleColumns[colIndex];
-        columnPinning[col.id] = 'start';
-      }
-
-      const columnOrder = currentIndexes.map((colIndex) => {
-        return computedVisibleColumns[colIndex].id;
-      });
-      return {
-        columnPinning,
-        columnOrder,
-      };
-    },
-  };
-}

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

@@ -1,206 +0,0 @@
-import {
-  MutableRefObject,
-  RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-
-import { getGlobal } from '../../../utils/getGlobal';
-import { useComponentState } from '../../hooks/useComponentState';
-import { useLatest } from '../../hooks/useLatest';
-import { InfiniteTableHeaderCellClassName } from '../components/InfiniteTableHeader/InfiniteTableHeaderCell';
-import {
-  InfiniteTableCellClassName,
-  InfiniteTableCellContentClassName,
-} from '../components/InfiniteTableRow/InfiniteTableCell';
-import { InfiniteTablePropColumnSizing, InfiniteTableState } from '../types';
-import { cssEllipsisClassName } from '../utilities.css';
-
-const OFFSET = 10;
-
-function getColumnContentMaxWidths(
-  domRef: RefObject<HTMLElement>,
-  options: {
-    includeHeader: boolean;
-    columnsToSkip?: Set<string>;
-    columnsToResize?: Set<string>;
-  },
-) {
-  const { includeHeader, columnsToResize, columnsToSkip } = options;
-  const query = `.${InfiniteTableCellClassName} > .${InfiniteTableCellContentClassName}`;
-
-  const match = domRef.current?.querySelectorAll(query);
-
-  const measuredMaxWidths: Record<string, number> = {};
-
-  const computedPaddingsForColumns: Record<string, number> = {};
-
-  if (match && match.length) {
-    match.forEach((content) => {
-      const cell = content.parentElement!;
-      const isHeader = cell.matches(`.${InfiniteTableHeaderCellClassName}`);
-      if (includeHeader === false && isHeader) {
-        return;
-      }
-
-      const colId = cell.getAttribute('data-column-id') as string;
-
-      const contentClone = content.cloneNode(true) as HTMLElement;
-      contentClone.style.visibility = 'hidden';
-      contentClone.style.pointerEvents = 'none';
-
-      contentClone.classList.remove(...cssEllipsisClassName.split(' '));
-      contentClone.style.position = 'absolute';
-      contentClone.style.width = 'auto';
-
-      cell.appendChild(contentClone);
-      let measuredWidth = contentClone.offsetWidth;
-      cell.removeChild(contentClone);
-
-      if (!computedPaddingsForColumns[colId]) {
-        const cellComputedStyle = getGlobal().getComputedStyle(cell);
-        computedPaddingsForColumns[colId] =
-          parseInt(cellComputedStyle.paddingLeft, 10) +
-          parseInt(cellComputedStyle.paddingRight, 10) +
-          parseInt(cellComputedStyle.borderLeftWidth, 10) +
-          parseInt(cellComputedStyle.borderRightWidth, 10) +
-          OFFSET;
-      }
-
-      measuredWidth += computedPaddingsForColumns[colId]!;
-
-      if (isHeader) {
-        let otherElementsLength = 0;
-        cell.childNodes.forEach((child) => {
-          if (child !== content) {
-            const el = child as HTMLElement;
-            let elWidth = Math.max(
-              el.offsetWidth,
-              parseInt(el.style.width, 10),
-            );
-            if (isNaN(elWidth)) {
-              elWidth = 0;
-            }
-
-            otherElementsLength += elWidth;
-
-            if (elWidth > 0) {
-              const style = getGlobal().getComputedStyle(el);
-              otherElementsLength +=
-                parseInt(style.marginLeft, 10) +
-                parseInt(style.marginRight, 10);
-            }
-          }
-        });
-        measuredWidth += otherElementsLength;
-      }
-
-      if (columnsToSkip && columnsToSkip.has(colId)) {
-        return;
-      }
-      if (columnsToResize && !columnsToResize.has(colId)) {
-        return;
-      }
-
-      measuredMaxWidths[colId] = Math.max(
-        measuredWidth,
-        measuredMaxWidths[colId] || 0,
-      );
-    });
-  }
-  return measuredMaxWidths;
-}
-
-export function useAutoSizeColumns<T>() {
-  const {
-    getComponentState,
-    componentActions,
-    componentState: { domRef, ready, autoSizeColumnsKey, brain },
-  } = useComponentState<InfiniteTableState<T>>();
-
-  const [refreshId, setRefreshId] = useState(0);
-
-  const theKey =
-    typeof autoSizeColumnsKey === 'object'
-      ? autoSizeColumnsKey.key
-      : autoSizeColumnsKey;
-
-  const getTheKey = useLatest<typeof theKey>(theKey);
-
-  const lastExecutedIdentifierRef: MutableRefObject<string | number | null> =
-    useRef(null);
-
-  useEffect(() => {
-    const key = getTheKey();
-    if (key == null) {
-      return;
-    }
-
-    const { current } = lastExecutedIdentifierRef;
-
-    const onChange = () => {
-      if (autoSizeColumnsKey !== current) {
-        setRefreshId(refreshId + 1);
-      }
-    };
-
-    return brain.onRenderRangeChange(onChange);
-  }, [brain]);
-
-  useEffect(() => {
-    if (theKey == null) {
-      return;
-    }
-
-    const { autoSizeColumnsKey } = getComponentState();
-
-    let columnsToResize: Set<string> | undefined;
-    let columnsToSkip: Set<string> | undefined;
-
-    let includeHeader = true;
-
-    if (typeof autoSizeColumnsKey === 'object') {
-      if (autoSizeColumnsKey.columnsToResize) {
-        columnsToResize = new Set(autoSizeColumnsKey.columnsToResize);
-      }
-      if (autoSizeColumnsKey.columnsToSkip) {
-        columnsToSkip = new Set(autoSizeColumnsKey.columnsToSkip);
-      }
-      includeHeader = autoSizeColumnsKey.includeHeader ?? includeHeader;
-    }
-
-    lastExecutedIdentifierRef.current = theKey;
-
-    const measuredMaxWidths = getColumnContentMaxWidths(domRef, {
-      includeHeader,
-      columnsToResize,
-      columnsToSkip,
-    });
-
-    const colIds = Object.keys(measuredMaxWidths);
-
-    if (!colIds.length) {
-      return;
-    }
-
-    const columnSizing = getComponentState().columnSizing;
-    const newColumnSizing: InfiniteTablePropColumnSizing = {
-      ...columnSizing,
-    };
-
-    let changed = false;
-
-    colIds.forEach((colId) => {
-      newColumnSizing[colId] = {
-        width: measuredMaxWidths[colId],
-      };
-      changed =
-        changed || newColumnSizing[colId].width !== columnSizing[colId]?.width;
-    });
-
-    if (changed) {
-      componentActions.columnSizing = newColumnSizing;
-    }
-  }, [theKey, ready, refreshId]);
-}