implement column reorder in horizontal layout

infinite-table · Oct 4, 2024 · 624b4de · 624b4de
1 parent ddb78de
commit 624b4de
Show file tree

Hide file tree

Showing 22 changed files with 545 additions and 114 deletions.
diff --git a/examples/src/pages/tests/horizontal-layout/test.page.tsx b/examples/src/pages/tests/horizontal-layout/test.page.tsx
@@ -27,13 +27,16 @@ const columns: InfiniteTablePropColumns<Developer> = {
   id: {
     field: 'id',
     type: 'number',
+    defaultWidth: 100,
   },
   canDesign: {
     field: 'canDesign',
+    defaultWidth: 200,
   },
   salary: {
     field: 'salary',
     type: 'number',
+    defaultWidth: 300,
   },
   // firstName: {
   //   field: 'firstName',
@@ -53,7 +56,7 @@ const domProps = {
   style: { height: '50vh' /*30px header, 420 body*/, width: '80vw' },
 };
 
-const data = Array.from({ length: 50 }, (_, i) => ({
+const data = Array.from({ length: 100 }, (_, i) => ({
   id: i,
   preferredLanguage: `Lang ${i}`,
   age: i * 10,

diff --git a/source/src/components/HeadlessTable/HorizontalLayoutTableRenderer.tsx b/source/src/components/HeadlessTable/HorizontalLayoutTableRenderer.tsx
@@ -1,7 +1,7 @@
+import { InternalVarUtils } from '../InfiniteTable/utils/infiniteDOMUtils';
 import { ThemeVars } from '../InfiniteTable/vars.css';
 import { HorizontalLayoutMatrixBrain } from '../VirtualBrain/HorizontalLayoutMatrixBrain';
 import {
-  columnOffsetAtIndex,
   columnOffsetAtIndexWhileReordering,
   currentTransformY,
   ReactHeadlessTableRenderer,
@@ -81,7 +81,9 @@ export class HorizontalLayoutTableRenderer extends ReactHeadlessTableRenderer {
     const pageWidth = ThemeVars.runtime.totalVisibleColumnsWidthVar;
     const pageOffset = pageIndex ? `calc(${pageWidth} * ${pageIndex})` : '0px';
 
-    const columnOffsetX = `${columnOffsetAtIndex}-${horizontalLayoutCoords.colIndex}`;
+    const columnOffsetX = InternalVarUtils.columnOffsets.get(
+      horizontalLayoutCoords.colIndex,
+    );
     const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering}-${horizontalLayoutCoords.colIndex}`;
 
     const currentTransformYValue = `${y}px`;
@@ -93,11 +95,12 @@ export class HorizontalLayoutTableRenderer extends ReactHeadlessTableRenderer {
       element.style.setProperty(currentTransformY, currentTransformYValue);
     }
 
-    const xOffset = `calc(var(${columnOffsetX}) + ${pageOffset})`;
-    const transformX = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
+    const xOffset = `calc(var(${columnOffsetXWhileReordering}, ${columnOffsetX}) + ${pageOffset})`;
+    // const transformX = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
+    // const transformXIncludeReordering = `calc(var(${columnOffsetXWhileReordering}, ${xOffset}) + var(${pageOffset}))`;
     const transformY = `var(${currentTransformY})`;
 
-    const transformValue = `translate3d(${transformX}, ${transformY}, 0px)`;
+    const transformValue = `translate3d(${xOffset}, ${transformY}, 0px)`;
 
     //@ts-ignore
     if (element.__transformValue !== transformValue) {

diff --git a/source/src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx b/source/src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
@@ -9,6 +9,7 @@ import { InternalVars } from '../InfiniteTable/internalVars.css';
 import { ScrollAdjustPosition } from '../InfiniteTable/types/InfiniteTableProps';
 import {
   getParentInfiniteNode,
+  InternalVarUtils,
   setInfiniteScrollPosition,
 } from '../InfiniteTable/utils/infiniteDOMUtils';
 import { AvoidReactDiff } from '../RawList/AvoidReactDiff';
@@ -154,7 +155,7 @@ export class ReactHeadlessTableRenderer extends Logger {
     }: { x: number; y: number; scrollLeft?: boolean; scrollTop?: boolean },
     zIndex: number | 'auto' | undefined | null,
   ) => {
-    const columnOffsetX = `${columnOffsetAtIndex}-${colIndex}`;
+    const columnOffsetX = InternalVarUtils.columnOffsets.get(colIndex);
     const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering}-${colIndex}`;
     // const columnZIndex = `${columnZIndexAtIndex}-${colIndex}`;
 
@@ -186,7 +187,7 @@ export class ReactHeadlessTableRenderer extends Logger {
       element.style.setProperty(currentTransformY, currentTransformYValue);
     }
 
-    const transformValue = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), var(${currentTransformY}), 0)`;
+    const transformValue = `translate3d(var(${columnOffsetXWhileReordering}, ${columnOffsetX}), var(${currentTransformY}), 0)`;
 
     // this does not change, but we need for initial setup
     //@ts-ignore
@@ -718,6 +719,24 @@ export class ReactHeadlessTableRenderer extends Logger {
     const fixedRanges = this.getFixedRanges(range);
     const ranges = [range, ...fixedRanges];
 
+    const alwaysRenderedColumns = this.brain.getAlwaysRenderedColumns();
+
+    if (alwaysRenderedColumns.length > 0) {
+      const startCol = range.start[1];
+      const endCol = range.end[1];
+
+      alwaysRenderedColumns.forEach((colIndex) => {
+        const colInRange = startCol <= colIndex && colIndex < endCol;
+
+        if (!colInRange) {
+          ranges.push({
+            start: [range.start[0], colIndex],
+            end: [range.end[0], colIndex + 1],
+          });
+        }
+      });
+    }
+
     const extraCellsMap = new Map<string, boolean>();
     const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
     /**

diff --git a/source/src/components/InfiniteTable/InfiniteCls.css.ts b/source/src/components/InfiniteTable/InfiniteCls.css.ts
@@ -54,6 +54,10 @@ const activeCellBorderVarsForUnfocusedState = {
 };
 export const InfiniteClsRecipe = recipe({
   variants: {
+    horizontalLayout: {
+      true: {},
+      false: {},
+    },
     focused: {
       true: {},
       false: {},

diff --git a/...e/src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx b/...e/src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
@@ -153,6 +153,7 @@ export function InfiniteTableHeaderCell<T>(
       columnHeaderHeight,
       columnReorderDragColumnId,
       columnMenuVisibleForColumnId,
+      columnReorderInPageIndex,
     },
     getDataSourceMasterContext,
   } = useInfiniteTable<T>();
@@ -167,8 +168,13 @@ export function InfiniteTableHeaderCell<T>(
   const { allRowsSelected, someRowsSelected, selectionMode } =
     useDataSourceState<T>();
 
+  const horizontalLayoutPageIndex = props.horizontalLayoutPageIndex;
   const dragging = columnReorderDragColumnId === column.id;
 
+  const insideDisabledDraggingPage =
+    columnReorderInPageIndex != null
+      ? horizontalLayoutPageIndex !== columnReorderInPageIndex
+      : false;
   const { onResize, height, width, headerOptions, columnsMap } = props;
 
   const sortInfo = column.computedSortInfo;
@@ -261,7 +267,7 @@ export function InfiniteTableHeaderCell<T>(
   const menuIcon = <MenuIconCmp {...menuIconProps} />;
 
   const initialRenderParam: InfiniteTableColumnHeaderParam<T> = {
-    horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
+    horizontalLayoutPageIndex,
     dragging,
     domRef: ref,
     insideColumnMenu: false,
@@ -493,6 +499,7 @@ export function InfiniteTableHeaderCell<T>(
   const { onPointerDown, proxyPosition } = useColumnPointerEvents({
     columnId: column.id,
     domRef,
+    horizontalLayoutPageIndex,
   });
 
   let draggingProxy = null;
@@ -563,7 +570,7 @@ export function InfiniteTableHeaderCell<T>(
     column.components?.FilterOperatorSwitch;
 
   const resizeHandle = useColumnResizeHandle(column, {
-    horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
+    horizontalLayoutPageIndex,
   });
 
   const zIndex = `var(${columnZIndexAtIndex}-${column.computedVisibleIndex})`;
@@ -614,6 +621,7 @@ export function InfiniteTableHeaderCell<T>(
             HeaderCellRecipe,
             {
               dragging,
+              insideDisabledDraggingPage,
               align,
               verticalAlign,
               rowSelected: false,
@@ -636,7 +644,7 @@ export function InfiniteTableHeaderCell<T>(
             {showColumnFilters ? (
               column.computedFilterable ? (
                 <InfiniteTableColumnHeaderFilter
-                  horizontalLayoutPageIndex={props.horizontalLayoutPageIndex}
+                  horizontalLayoutPageIndex={horizontalLayoutPageIndex}
                   filterEditor={FilterEditor}
                   filterOperatorSwitch={
                     FilterOperatorSwitch ?? InfiniteTableFilterOperatorSwitch

diff --git a/...src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts b/...src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
@@ -3,8 +3,7 @@ import { RefObject } from 'react';
 import { InfiniteTableComputedColumn } from '../../../types';
 import {
   addToInfiniteColumnOffset,
-  setInfiniteColumnOffset,
-  setInfiniteColumnWidth,
+  InternalVarUtils,
 } from '../../../utils/infiniteDOMUtils';
 
 export function getColumnResizer<T>(
@@ -24,7 +23,7 @@ export function getColumnResizer<T>(
   return {
     resize(diff: number) {
       // set the new width for the current column
-      setInfiniteColumnWidth(
+      InternalVarUtils.columnWidths.set(
         colIndex,
         column.computedWidth + diff,
         domRef.current,
@@ -38,7 +37,7 @@ export function getColumnResizer<T>(
         if (!nextColumn) {
           return;
         }
-        setInfiniteColumnWidth(
+        InternalVarUtils.columnWidths.set(
           nextColIndex,
           nextColumn.computedWidth - diff,
           domRef.current,
@@ -47,7 +46,7 @@ export function getColumnResizer<T>(
         if (nextColumn.computedPinned === 'start') {
           addToInfiniteColumnOffset(nextColumn, diff, domRef.current);
         } else {
-          setInfiniteColumnOffset(
+          InternalVarUtils.columnOffsets.set(
             nextColIndex,
             nextColumn.computedOffset + diff,
             domRef.current,
@@ -79,7 +78,11 @@ export function getColumnResizer<T>(
           if (col.computedPinned === 'end') {
             continue;
           }
-          setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
+          InternalVarUtils.columnOffsets.set(
+            i,
+            col.computedOffset + diff,
+            domRef.current,
+          );
         }
         return;
       }
@@ -90,7 +93,11 @@ export function getColumnResizer<T>(
         if (col.computedPinned) {
           continue;
         }
-        setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
+        InternalVarUtils.columnOffsets.set(
+          i,
+          col.computedOffset + diff,
+          domRef.current,
+        );
       }
     },
   };
@@ -137,14 +144,14 @@ export function getColumnGroupResizer<T>(
         const column = columns[colIndex];
         const newWidth = column.computedWidth + diff;
 
-        setInfiniteColumnWidth(colIndex, newWidth, node);
+        InternalVarUtils.columnWidths.set(colIndex, newWidth, node);
 
         if (column.computedPinned === 'end') {
           return;
         }
 
         if (offset) {
-          setInfiniteColumnOffset(colIndex, offset, node);
+          InternalVarUtils.columnOffsets.set(colIndex, offset, node);
         }
         offset += newWidth;
       });
@@ -159,7 +166,11 @@ export function getColumnGroupResizer<T>(
         if (col.computedPinned === 'end') {
           continue;
         }
-        setInfiniteColumnOffset(i, col.computedOffset + diffSum, node);
+        InternalVarUtils.columnOffsets.set(
+          i,
+          col.computedOffset + diffSum,
+          node,
+        );
       }
     },
   };

diff --git a/source/src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts b/source/src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
@@ -212,6 +212,15 @@ export const HeaderCellRecipe = recipe({
       true: {},
       false: {},
     },
+    insideDisabledDraggingPage: {
+      true: {
+        opacity:
+          ThemeVars.components.Cell
+            .horizontalLayoutColumnReorderDisabledPageOpacity,
+      },
+
+      false: {},
+    },
 
     first: {
       true: ColumnCellVariantsObject.first,

diff --git a/source/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx b/source/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
@@ -198,7 +198,8 @@ function InfiniteTableColumnCellFn<T>(props: InfiniteTableColumnCellProps<T>) {
     componentActions: dataSourceActions,
   } = useDataSourceContextValue<T>();
 
-  const { activeRowIndex, keyboardNavigation } = getState();
+  const { activeRowIndex, keyboardNavigation, columnReorderInPageIndex } =
+    getState();
   const rowActive = rowIndex === activeRowIndex && keyboardNavigation === 'row';
 
   const renderingContext: InfiniteTableColumnRenderingContext<T> = {
@@ -617,6 +618,11 @@ function InfiniteTableColumnCellFn<T>(props: InfiniteTableColumnCellProps<T>) {
         }
       : null;
 
+  const insideDisabledDraggingPage =
+    columnReorderInPageIndex != null
+      ? horizontalLayoutPageIndex !== columnReorderInPageIndex
+      : false;
+
   const afterChildren = editor;
   const theChildren = renderChildren();
   const cellProps: InfiniteTableCellProps<T> &
@@ -645,6 +651,7 @@ function InfiniteTableColumnCellFn<T>(props: InfiniteTableColumnCellProps<T>) {
         ColumnCellRecipe,
         {
           dragging: false,
+          insideDisabledDraggingPage,
           zebra,
           align,
           verticalAlign,

diff --git a/source/src/components/InfiniteTable/components/cell.css.ts b/source/src/components/InfiniteTable/components/cell.css.ts
@@ -249,6 +249,14 @@ export const ColumnCellRecipe = recipe({
   ],
   variants: {
     dragging: { false: {}, true: {} },
+    insideDisabledDraggingPage: {
+      true: {
+        opacity:
+          ThemeVars.components.Cell
+            .horizontalLayoutColumnReorderDisabledPageOpacity,
+      },
+      false: {},
+    },
     cellSelected: { false: {}, true: {} },
     align: {
       start: {},