@lensui/lens-table 0.1.27 → 0.1.29

package/dist/index.cjs

@@ -1460,10 +1460,8 @@ function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
 function resolveColumnDropPlacement(edge) {
   return edge === "right" ? "after" : "before";
 }
-function resolveColumnDropHighlightRange(target, edge, cells) {
-  if (edge === "right") return { startIndex: target.startIndex, endIndex: target.endIndex };
-  const previous = cells.find((cell) => cell.endIndex === target.startIndex - 1 && cell.level === target.level && cell.parentKey === target.parentKey);
-  return previous ? { startIndex: previous.startIndex, endIndex: previous.endIndex } : { startIndex: target.startIndex, endIndex: target.endIndex };
+function resolveColumnDropHighlightRange(target, _edge, _cells) {
+  return { startIndex: target.startIndex, endIndex: target.endIndex };
 }
 var ANNOTATION_COLORS = ["#f44336", "#ff7a45", "#f5a623", "#f2c94c", "#52c41a", "#13a8a8", "#1677ff", "#597ef7", "#9254de", "#eb2f96"];
 var FALLBACK_HEIGHT = 480;
@@ -1811,7 +1809,6 @@ function TableInner({
   const contextMenuRef = (0, import_react5.useRef)(null);
   const suppressClickRef = (0, import_react5.useRef)(false);
   const hasCompletedLoadRef = (0, import_react5.useRef)(!loading);
-  const columnDragPreviewRef = (0, import_react5.useRef)(null);
   const validColumnDropRef = (0, import_react5.useRef)(null);
   const hoveredHeaderActionRef = (0, import_react5.useRef)(null);
   const hoveredRowIndexRef = (0, import_react5.useRef)(null);
@@ -1845,6 +1842,7 @@ function TableInner({
   const [editing, setEditing] = (0, import_react5.useState)(null);
   const [draft, setDraft] = (0, import_react5.useState)("");
   const [rowDragPreview, setRowDragPreview] = (0, import_react5.useState)(null);
+  const [columnDragPreview, setColumnDragPreview] = (0, import_react5.useState)(null);
   const [columnDropTarget, setColumnDropTarget] = (0, import_react5.useState)(null);
   (0, import_react5.useEffect)(() => {
     if (!loading) hasCompletedLoadRef.current = true;
@@ -3627,7 +3625,7 @@ function TableInner({
   }, []);
   const clearColumnOrderPointerDrag = (0, import_react5.useCallback)((canvas) => {
     columnOrderDragRef.current = null;
-    columnDragPreviewRef.current = null;
+    setColumnDragPreview(null);
     validColumnDropRef.current = null;
     setColumnDropTarget(null);
     setDragGuide(null);
@@ -3663,6 +3661,27 @@ function TableInner({
     }
     event.preventDefault();
     const sourceCell = drag.sourceCell;
+    const rootRect = rootRef.current?.getBoundingClientRect() ?? event.currentTarget.getBoundingClientRect();
+    const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 160;
+    const sourceColumn = columns[sourceCell.startIndex];
+    const previewContext = event.currentTarget.getContext("2d");
+    const previewStyles = rootRef.current ? getComputedStyle(rootRef.current) : null;
+    const previewFontSize = previewStyles ? readThemePixel(previewStyles, "--rvg-font-size-body", 13) : 13;
+    if (previewContext) previewContext.font = `${previewFontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+    const measurePreviewText = (value) => previewContext?.measureText(value).width ?? value.length * previewFontSize * 0.58;
+    const previewContentWidth = Math.max(
+      measurePreviewText(sourceColumn?.title ?? ""),
+      ...rows.slice(0, 100).map((_row, rowIndex) => measurePreviewText(getCellLabel(rowIndex, sourceCell.startIndex)))
+    ) + 24;
+    const previewWidth = Math.min(
+      Math.max(sourceWidth, Math.ceil(previewContentWidth)),
+      Math.max(60, Math.min(360, viewport.width - 16))
+    );
+    setColumnDragPreview({
+      sourceIndex: sourceCell.startIndex,
+      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, event.clientX - rootRect.left - previewWidth / 2)),
+      width: previewWidth
+    });
     const hoveredColumnIndex = locateColumn(event.clientX);
     const targetCell = locateHeaderCell(event.clientX, event.clientY) ?? headerCells.find((cell) => hoveredColumnIndex >= cell.startIndex && hoveredColumnIndex <= cell.endIndex && cell.level === sourceCell.level && cell.leaf === sourceCell.leaf && cell.parentKey === sourceCell.parentKey && columns[cell.startIndex]?.fixed === columns[sourceCell.startIndex]?.fixed);
     if (!targetCell) {
@@ -3688,11 +3707,14 @@ function TableInner({
       columnEdge,
       columns.length
     );
-    columnDragPreviewRef.current = { sourceIndex: sourceCell.startIndex, targetIndex: destinationIndex };
+    const compatibleHighlightCells = headerCells.filter((cell) => {
+      const cellColumn = columns[cell.startIndex];
+      return cellColumn && !cellColumn.rowSelection && !cellColumn.rowDragHandle && !cellColumn.rowNumber && cellColumn.fixed === targetColumn.fixed;
+    });
+    setColumnDropTarget(resolveColumnDropHighlightRange(targetCell, columnEdge, compatibleHighlightCells));
+    setDragGuide(columnEdge === "right" ? targetLeft + targetWidth : targetLeft, headerRowOffsets[sourceCell.level] ?? 0);
     if (destinationIndex === sourceCell.startIndex) {
       validColumnDropRef.current = null;
-      setColumnDropTarget(null);
-      setDragGuide(null);
       return;
     }
     validColumnDropRef.current = {
@@ -3705,13 +3727,7 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-    const compatibleHighlightCells = headerCells.filter((cell) => {
-      const cellColumn = columns[cell.startIndex];
-      return cellColumn && !cellColumn.rowSelection && !cellColumn.rowDragHandle && !cellColumn.rowNumber && cellColumn.fixed === targetColumn.fixed;
-    });
-    setColumnDropTarget(resolveColumnDropHighlightRange(targetCell, columnEdge, compatibleHighlightCells));
-    setDragGuide(columnEdge === "right" ? targetLeft + targetWidth : targetLeft, headerRowOffsets[sourceCell.level] ?? 0);
-  }, [columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, setDragGuide]);
+  }, [columns, getCellLabel, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rows, setDragGuide, viewport.width]);
   const finishColumnOrderPointerDrag = (0, import_react5.useCallback)((event, apply) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -5223,6 +5239,34 @@ function TableInner({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: dragGuideRef, className: "rvg-column-guide" }),
+    columnDragPreview && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "rvg-column-drag-preview",
+        style: {
+          left: columnDragPreview.left,
+          top: 0,
+          width: columnDragPreview.width,
+          height: renderHeight
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-column-drag-preview-header", style: { top: headerLeafTop, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.renderHeader?.(columns[columnDragPreview.sourceIndex]) ?? columns[columnDragPreview.sourceIndex]?.title }),
+          rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
+            const rowIndex = domRange.rowStart + visibleRowOffset;
+            return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
+              {
+                className: `rvg-column-drag-preview-cell${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
+                style: { top: bodyTop + rowIndex * rowHeight - scrollRef.current.top, height: rowHeight },
+                children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
+              },
+              `column-preview:${String(getRowKey(rows[rowIndex], rowIndex))}`
+            );
+          })
+        ]
+      }
+    ),
     resizeGuideX !== null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {

package/dist/index.css

@@ -1508,12 +1508,14 @@
   background: var(--rvg-color-danger);
 }
 .rvg-column-drag-preview {
-  position: relative;
+  position: absolute;
+  z-index: 11;
   overflow: hidden;
-  border: 1px solid #a9c8f5;
-  background: #fff;
-  box-shadow: var(--rvg-shadow-popover);
+  border: 1px solid color-mix(in srgb, var(--rvg-color-primary) 38%, var(--rvg-color-grid));
+  background: var(--rvg-color-bg);
+  box-shadow: 0 6px 18px rgba(50, 91, 136, 0.18);
   opacity: 0.94;
+  pointer-events: none;
   box-sizing: border-box;
 }
 .rvg-column-drag-preview-header,
@@ -1538,9 +1540,12 @@
 }
 .rvg-column-drag-preview-header {
   background: var(--rvg-color-header-bg);
-  color: var(--rvg-color-muted);
+  color: var(--rvg-color-text);
   font-weight: 600;
 }
+.rvg-column-drag-preview-cell.is-striped {
+  background: var(--rvg-color-stripe);
+}
 .rvg-column-drag-preview-header .rvg-preview-header-icon {
   position: absolute;
   top: 50%;

package/dist/index.js

@@ -1430,10 +1430,8 @@ function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
 function resolveColumnDropPlacement(edge) {
   return edge === "right" ? "after" : "before";
 }
-function resolveColumnDropHighlightRange(target, edge, cells) {
-  if (edge === "right") return { startIndex: target.startIndex, endIndex: target.endIndex };
-  const previous = cells.find((cell) => cell.endIndex === target.startIndex - 1 && cell.level === target.level && cell.parentKey === target.parentKey);
-  return previous ? { startIndex: previous.startIndex, endIndex: previous.endIndex } : { startIndex: target.startIndex, endIndex: target.endIndex };
+function resolveColumnDropHighlightRange(target, _edge, _cells) {
+  return { startIndex: target.startIndex, endIndex: target.endIndex };
 }
 var ANNOTATION_COLORS = ["#f44336", "#ff7a45", "#f5a623", "#f2c94c", "#52c41a", "#13a8a8", "#1677ff", "#597ef7", "#9254de", "#eb2f96"];
 var FALLBACK_HEIGHT = 480;
@@ -1781,7 +1779,6 @@ function TableInner({
   const contextMenuRef = useRef2(null);
   const suppressClickRef = useRef2(false);
   const hasCompletedLoadRef = useRef2(!loading);
-  const columnDragPreviewRef = useRef2(null);
   const validColumnDropRef = useRef2(null);
   const hoveredHeaderActionRef = useRef2(null);
   const hoveredRowIndexRef = useRef2(null);
@@ -1815,6 +1812,7 @@ function TableInner({
   const [editing, setEditing] = useState4(null);
   const [draft, setDraft] = useState4("");
   const [rowDragPreview, setRowDragPreview] = useState4(null);
+  const [columnDragPreview, setColumnDragPreview] = useState4(null);
   const [columnDropTarget, setColumnDropTarget] = useState4(null);
   useEffect2(() => {
     if (!loading) hasCompletedLoadRef.current = true;
@@ -3597,7 +3595,7 @@ function TableInner({
   }, []);
   const clearColumnOrderPointerDrag = useCallback2((canvas) => {
     columnOrderDragRef.current = null;
-    columnDragPreviewRef.current = null;
+    setColumnDragPreview(null);
     validColumnDropRef.current = null;
     setColumnDropTarget(null);
     setDragGuide(null);
@@ -3633,6 +3631,27 @@ function TableInner({
     }
     event.preventDefault();
     const sourceCell = drag.sourceCell;
+    const rootRect = rootRef.current?.getBoundingClientRect() ?? event.currentTarget.getBoundingClientRect();
+    const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 160;
+    const sourceColumn = columns[sourceCell.startIndex];
+    const previewContext = event.currentTarget.getContext("2d");
+    const previewStyles = rootRef.current ? getComputedStyle(rootRef.current) : null;
+    const previewFontSize = previewStyles ? readThemePixel(previewStyles, "--rvg-font-size-body", 13) : 13;
+    if (previewContext) previewContext.font = `${previewFontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+    const measurePreviewText = (value) => previewContext?.measureText(value).width ?? value.length * previewFontSize * 0.58;
+    const previewContentWidth = Math.max(
+      measurePreviewText(sourceColumn?.title ?? ""),
+      ...rows.slice(0, 100).map((_row, rowIndex) => measurePreviewText(getCellLabel(rowIndex, sourceCell.startIndex)))
+    ) + 24;
+    const previewWidth = Math.min(
+      Math.max(sourceWidth, Math.ceil(previewContentWidth)),
+      Math.max(60, Math.min(360, viewport.width - 16))
+    );
+    setColumnDragPreview({
+      sourceIndex: sourceCell.startIndex,
+      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, event.clientX - rootRect.left - previewWidth / 2)),
+      width: previewWidth
+    });
     const hoveredColumnIndex = locateColumn(event.clientX);
     const targetCell = locateHeaderCell(event.clientX, event.clientY) ?? headerCells.find((cell) => hoveredColumnIndex >= cell.startIndex && hoveredColumnIndex <= cell.endIndex && cell.level === sourceCell.level && cell.leaf === sourceCell.leaf && cell.parentKey === sourceCell.parentKey && columns[cell.startIndex]?.fixed === columns[sourceCell.startIndex]?.fixed);
     if (!targetCell) {
@@ -3658,11 +3677,14 @@ function TableInner({
       columnEdge,
       columns.length
     );
-    columnDragPreviewRef.current = { sourceIndex: sourceCell.startIndex, targetIndex: destinationIndex };
+    const compatibleHighlightCells = headerCells.filter((cell) => {
+      const cellColumn = columns[cell.startIndex];
+      return cellColumn && !cellColumn.rowSelection && !cellColumn.rowDragHandle && !cellColumn.rowNumber && cellColumn.fixed === targetColumn.fixed;
+    });
+    setColumnDropTarget(resolveColumnDropHighlightRange(targetCell, columnEdge, compatibleHighlightCells));
+    setDragGuide(columnEdge === "right" ? targetLeft + targetWidth : targetLeft, headerRowOffsets[sourceCell.level] ?? 0);
     if (destinationIndex === sourceCell.startIndex) {
       validColumnDropRef.current = null;
-      setColumnDropTarget(null);
-      setDragGuide(null);
       return;
     }
     validColumnDropRef.current = {
@@ -3675,13 +3697,7 @@ function TableInner({
       fixed: targetColumn.fixed,
       columnEdge
     };
-    const compatibleHighlightCells = headerCells.filter((cell) => {
-      const cellColumn = columns[cell.startIndex];
-      return cellColumn && !cellColumn.rowSelection && !cellColumn.rowDragHandle && !cellColumn.rowNumber && cellColumn.fixed === targetColumn.fixed;
-    });
-    setColumnDropTarget(resolveColumnDropHighlightRange(targetCell, columnEdge, compatibleHighlightCells));
-    setDragGuide(columnEdge === "right" ? targetLeft + targetWidth : targetLeft, headerRowOffsets[sourceCell.level] ?? 0);
-  }, [columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, setDragGuide]);
+  }, [columns, getCellLabel, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rows, setDragGuide, viewport.width]);
   const finishColumnOrderPointerDrag = useCallback2((event, apply) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -5193,6 +5209,34 @@ function TableInner({
       }
     ),
     /* @__PURE__ */ jsx7("div", { ref: dragGuideRef, className: "rvg-column-guide" }),
+    columnDragPreview && /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "rvg-column-drag-preview",
+        style: {
+          left: columnDragPreview.left,
+          top: 0,
+          width: columnDragPreview.width,
+          height: renderHeight
+        },
+        children: [
+          /* @__PURE__ */ jsx7("div", { className: "rvg-column-drag-preview-header", style: { top: headerLeafTop, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.renderHeader?.(columns[columnDragPreview.sourceIndex]) ?? columns[columnDragPreview.sourceIndex]?.title }),
+          rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
+            const rowIndex = domRange.rowStart + visibleRowOffset;
+            return /* @__PURE__ */ jsx7(
+              "div",
+              {
+                className: `rvg-column-drag-preview-cell${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
+                style: { top: bodyTop + rowIndex * rowHeight - scrollRef.current.top, height: rowHeight },
+                children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
+              },
+              `column-preview:${String(getRowKey(rows[rowIndex], rowIndex))}`
+            );
+          })
+        ]
+      }
+    ),
     resizeGuideX !== null && /* @__PURE__ */ jsx7(
       "div",
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",