@infinite-table/infinite-react 0.5.1 → 0.5.2

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

@@ -1,146 +0,0 @@
-import { PointerEvent, useRef, useState } from 'react';
-import * as React from 'react';
-import { FlexComputeResizeResult } from '../../../../flexbox';
-import { internalProps } from '../../../internalProps';
-import { InfiniteTableComputedColumn } from '../../../types';
-
-import { getColumnResizer } from './columnResizer';
-import {
-  ResizeHandleCls,
-  ResizeHandleDraggerClsRecipe,
-  ResizeHandleRecipeCls,
-} from './ResizeHandle.css';
-
-type ResizeHandleProps<T> = {
-  columnIndex: number;
-  columns: InfiniteTableComputedColumn<T>[];
-
-  computeResize: ({
-    diff,
-    shareSpaceOnResize,
-  }: {
-    diff: number;
-    shareSpaceOnResize: boolean;
-  }) => FlexComputeResizeResult;
-
-  onResize: ({
-    diff,
-    shareSpaceOnResize,
-  }: {
-    diff: number;
-    shareSpaceOnResize: boolean;
-  }) => void;
-};
-
-const { rootClassName } = internalProps;
-
-/**
- * For the resize handle for column groups, see GroupResizeHandle.tsx
- */
-
-export const InfiniteTableHeaderCellResizeHandleCls = `${rootClassName}HeaderCell_ResizeHandle`;
-
-function ResizeHandleFn<T>(props: ResizeHandleProps<T>) {
-  const domRef = useRef<HTMLDivElement>(null);
-  const [constrained, setConstrained] = useState(false);
-  const constrainedRef = useRef<boolean>(constrained);
-  constrainedRef.current = constrained;
-
-  const col = props.columns[props.columnIndex];
-
-  if (!col) {
-    return null;
-  }
-  const computedPinned = col.computedPinned;
-  const computedFirstInCategory = col.computedFirstInCategory;
-  const computedLastInCategory = col.computedLastInCategory;
-
-  const onPointerDown = (e: PointerEvent) => {
-    e.stopPropagation();
-
-    const shareSpaceOnResize = !!e.shiftKey;
-    const pointerId = e.pointerId;
-    const initialX = e.clientX;
-    const target = e.target as HTMLElement;
-
-    target.setPointerCapture(pointerId);
-
-    const resizer = getColumnResizer(props.columnIndex, {
-      columns: props.columns,
-      shareSpaceOnResize,
-      domRef,
-    });
-
-    const resizeDiff = (diff: number) => {
-      if (computedPinned === 'end') {
-        diff *= -1;
-      }
-      const { adjustedDiff, constrained } = props.computeResize({
-        diff,
-        shareSpaceOnResize,
-      });
-
-      if (constrainedRef.current !== constrained) {
-        setConstrained(constrained);
-      }
-
-      resizer.resize(adjustedDiff);
-
-      return adjustedDiff;
-    };
-
-    const onPointerMove = (e: PointerEvent) => {
-      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 adjustedDiff = resizeDiff(diff);
-
-      props.onResize({ diff: adjustedDiff, shareSpaceOnResize });
-    };
-
-    //@ts-ignore
-    target.addEventListener('pointermove', onPointerMove);
-    //@ts-ignore
-    target.addEventListener('pointerup', onPointerUp);
-  };
-
-  const style =
-    (computedPinned === false || computedPinned === 'start') &&
-    computedLastInCategory
-      ? {
-          right: computedPinned === 'start' ? 0 : 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}
-        className={ResizeHandleDraggerClsRecipe({
-          constrained,
-        })}
-      />
-    </div>
-  );
-}
-export const ResizeHandle = React.memo(ResizeHandleFn) as typeof ResizeHandleFn;

package/src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts

@@ -1,240 +0,0 @@
-import { DeepMap } from '../../../../utils/DeepMap';
-import {
-  InfiniteTableColumnGroup,
-  InfiniteTableComputedColumn,
-  InfiniteTableState,
-} from '../../types';
-import { InfiniteTableColumnPinnedValues } from '../../types/InfiniteTableProps';
-
-export type ColGroupTreeBaseItem = {
-  id: string;
-  groupOffset: number;
-  depth: number;
-  computedPinned: InfiniteTableColumnPinnedValues;
-  computedWidth: number;
-};
-export type ColGroupTreeColumnItem<T> = ColGroupTreeBaseItem & {
-  type: 'column';
-  ref: InfiniteTableComputedColumn<T>;
-};
-
-export type ColGroupTreeGroupItem<T> = ColGroupTreeBaseItem & {
-  type: 'group';
-  ref: InfiniteTableColumnGroup;
-
-  uniqueGroupId: string[];
-
-  children: ColGroupTreeItem<T>[];
-  columnItems: ColGroupTreeColumnItem<T>[];
-};
-export type ColGroupTreeItem<T> =
-  | ColGroupTreeColumnItem<T>
-  | ColGroupTreeGroupItem<T>;
-
-/*
- *  -----------------------------------------------------------------------------------------------
- *  |         ADDRESS       |           |                 A D D R E S S         |   contact info  |
- *  |_______________________|           |_______________________________________|_________________|
- *  |    street   | LOCATION|           |          street       |   LOCATION    |                 |
- *  |_____________|_________|___________|_______________________|_______________|                 |
- *  |   streetNo  | city    | firstName  | streetName            |country|region |  email  | phone |
- *
- */
-
-export type ColumnAndGroupTreeInfo<T> = {
-  tree: ColGroupTreeItem<T>[];
-  pathsToCells: DeepMap<number, ColGroupTreeItem<T>>;
-};
-
-export function buildColumnAndGroupTree<T>(
-  columns: InfiniteTableComputedColumn<T>[],
-  columnGroups: InfiniteTableState<T>['columnGroups'],
-  columnGroupsDepthsMap: InfiniteTableState<T>['columnGroupsDepthsMap'],
-  columnGroupsMaxDepth: number,
-
-  /**
-   * The returned pathsToCells is a deepmap that maps cells to their corresponding treeitem,
-   * namely, it answers the question - for cell at [2,3] - third row, forth col,
-   * which is my tree item?
-   *
-   * For example, in the above drawing, [0,1] we have the ADDRESS tree item
-   * For example, in the above drawing, at [1,1] we have the LOCATION tree item
-   */
-): ColumnAndGroupTreeInfo<T> {
-  /*
-   * this is basically a tree with multiple top-level nodes
-   * and we return the top-level nodes in the tree (we consider the table above to be a tree,
-   * with first row items being the top-level nodes)
-   *
-   * this map contains columns or groups.
-   *
-   * the keys for columns are arrays with single elements, the column id
-   * the keys for groups are arrays with the path from the first column in the group
-   * all the way up to the group itself:
-   *    - eg, for first ADDRESS group above, the key will be : ['streetNo','street','address']
-   *    - eg, for the second ADDRESS group above, the key will be : ['streetName','street','address']
-   *
-   */
-  const map: Map<string[], ColGroupTreeItem<T>> = new Map();
-
-  /*
-   *
-   * We'll also need a temporary map of groups/cols items, where groups will be keyed
-   * only by a single string, the group id
-   *
-   * eg: we need that, as for example when we reach (city=>location=>address) group, we need access to the
-   * address group previously created by streetNo=>street=>address
-   *
-   */
-  const temporaryMap: Map<string, ColGroupTreeItem<T>> = new Map();
-
-  // this will contain all parent groups for a column:
-  // eg: for streetNo, it will contain: street, address
-  // eg: for city, it will contain: location, address
-
-  const mapOfAllParentGroupsForColumns: Map<string, Set<string>> = new Map();
-
-  columns.forEach((col, index) => {
-    const colId = col.id;
-    const previousColumn = columns[index - 1];
-    const previousColumnId = previousColumn?.id ?? '';
-
-    const parentGroups = new Set<string>();
-
-    const parentGroupsOfPreviousColumn =
-      previousColumn?.computedPinned !== col.computedPinned
-        ? new Set()
-        : mapOfAllParentGroupsForColumns.get(previousColumnId) ?? new Set();
-
-    mapOfAllParentGroupsForColumns.set(colId, parentGroups);
-
-    const colItem: ColGroupTreeColumnItem<T> = {
-      type: 'column',
-      id: colId,
-      ref: col,
-      groupOffset: 0,
-      computedPinned: col.computedPinned,
-      computedWidth: col.computedWidth,
-      depth: col.columnGroup
-        ? (columnGroupsDepthsMap.get(col.columnGroup) ?? 0) + 1
-        : 0,
-    };
-
-    map.set([colId], colItem);
-
-    let groupId = col.columnGroup;
-    let colGroupItem: ColGroupTreeGroupItem<T> | undefined;
-    let prevGroupItem: ColGroupTreeItem<T> | undefined = colItem;
-
-    while (groupId) {
-      const colGroup = columnGroups.get(groupId);
-
-      if (colGroup) {
-        parentGroups.add(groupId);
-
-        const groupAbsoluteId = [colId, ...parentGroups];
-
-        colGroupItem = parentGroupsOfPreviousColumn.has(groupId)
-          ? (temporaryMap.get(groupId) as ColGroupTreeGroupItem<T> | undefined)
-          : undefined;
-
-        if (!colGroupItem) {
-          colGroupItem = {
-            id: groupId,
-            type: 'group',
-            ref: colGroup,
-            columnItems: [],
-            children: [],
-            groupOffset: 0,
-            uniqueGroupId: [groupId],
-            computedWidth: 0,
-            computedPinned: colItem.computedPinned,
-            depth: columnGroupsDepthsMap.get(groupId) ?? 0,
-          };
-          map.set(groupAbsoluteId, colGroupItem);
-          temporaryMap.set(groupId, colGroupItem);
-        }
-
-        colGroupItem.columnItems.push(colItem);
-        colGroupItem.uniqueGroupId.push(colItem.id);
-
-        if (
-          prevGroupItem &&
-          !parentGroupsOfPreviousColumn.has(prevGroupItem.id)
-        ) {
-          colGroupItem.children.push(prevGroupItem);
-        }
-
-        prevGroupItem = colGroupItem;
-
-        groupId = colGroup.columnGroup;
-      } else {
-        break;
-      }
-    }
-  });
-
-  const result: ColGroupTreeItem<T>[] = [];
-  const pathsToCells: DeepMap<number, ColGroupTreeItem<T>> = new DeepMap();
-
-  let groupOffset = 0;
-
-  // get the root nodes from the tree
-  // - the root nodes  are the nodes without a parent column group
-  map.forEach((item) => {
-    if (!item.ref.columnGroup) {
-      const itemWidth =
-        item.type === 'column'
-          ? item.ref.computedWidth
-          : item.columnItems.reduce(
-              (sum, col) => sum + col.ref.computedWidth,
-              0,
-            );
-
-      item.groupOffset = groupOffset;
-      item.computedWidth = itemWidth;
-
-      if (item.type === 'group') {
-        assignGroupOffsetsAndComputedWidths(item.children);
-      }
-      result.push(item);
-
-      groupOffset += itemWidth;
-    }
-
-    if (item.type === 'group') {
-      item.columnItems.forEach((colItem) => {
-        pathsToCells.set([item.depth, colItem.ref.computedVisibleIndex], item);
-      });
-    } else {
-      for (let i = item.depth; i <= columnGroupsMaxDepth + 1; i++) {
-        pathsToCells.set([i, item.ref.computedVisibleIndex], item);
-      }
-    }
-  });
-
-  map.clear();
-  temporaryMap.clear();
-
-  return { tree: result, pathsToCells };
-}
-
-function assignGroupOffsetsAndComputedWidths<T>(
-  items: ColGroupTreeItem<T>[],
-  groupOffset = 0,
-) {
-  items.forEach((item) => {
-    const itemWidth =
-      item.type === 'column'
-        ? item.ref.computedWidth
-        : item.columnItems.reduce((sum, col) => sum + col.ref.computedWidth, 0);
-
-    item.computedWidth = itemWidth;
-    item.groupOffset = groupOffset;
-    if (item.type === 'group') {
-      assignGroupOffsetsAndComputedWidths(item.children);
-    }
-
-    groupOffset += itemWidth;
-  });
-}