@lensui/lens-table 0.1.27 → 0.1.28

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,17 @@ function TableInner({
     }
     event.preventDefault();
     const sourceCell = drag.sourceCell;
+    const rootRect = rootRef.current?.getBoundingClientRect() ?? event.currentTarget.getBoundingClientRect();
+    const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 160;
+    const previewWidth = Math.min(sourceWidth, Math.max(60, viewport.width - 16));
+    const previewRowCount = Math.min(rows.length, 6);
+    const previewHeight = headerLeafHeight + previewRowCount * rowHeight;
+    setColumnDragPreview({
+      sourceIndex: sourceCell.startIndex,
+      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, event.clientX - rootRect.left + 12)),
+      top: Math.max(4, Math.min(viewport.height - previewHeight - 4, event.clientY - rootRect.top + 12)),
+      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,7 +3697,6 @@ function TableInner({
       columnEdge,
       columns.length
     );
-    columnDragPreviewRef.current = { sourceIndex: sourceCell.startIndex, targetIndex: destinationIndex };
     if (destinationIndex === sourceCell.startIndex) {
       validColumnDropRef.current = null;
       setColumnDropTarget(null);
@@ -3711,7 +3719,7 @@ function TableInner({
     });
     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, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerLeafHeight, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rowHeight, rows.length, setDragGuide, viewport.height, viewport.width]);
   const finishColumnOrderPointerDrag = (0, import_react5.useCallback)((event, apply) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -5223,6 +5231,31 @@ 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: columnDragPreview.top,
+          width: columnDragPreview.width,
+          height: headerLeafHeight + Math.min(rows.length, 6) * rowHeight
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-column-drag-preview-header", style: { top: 0, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.title }),
+          rows.slice(0, 6).map((_row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "div",
+            {
+              className: "rvg-column-drag-preview-cell",
+              style: { top: headerLeafHeight + rowIndex * rowHeight, 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);
-  opacity: 0.94;
+  border: 1px solid color-mix(in srgb, var(--rvg-color-primary) 32%, var(--rvg-color-grid));
+  background: color-mix(in srgb, var(--rvg-color-primary) 4%, var(--rvg-color-bg));
+  box-shadow: 0 8px 22px rgba(50, 91, 136, 0.2);
+  opacity: 0.96;
+  pointer-events: none;
   box-sizing: border-box;
 }
 .rvg-column-drag-preview-header,
@@ -1537,8 +1539,8 @@
   box-sizing: border-box;
 }
 .rvg-column-drag-preview-header {
-  background: var(--rvg-color-header-bg);
-  color: var(--rvg-color-muted);
+  background: color-mix(in srgb, var(--rvg-color-primary) 10%, var(--rvg-color-header-bg));
+  color: var(--rvg-color-text);
   font-weight: 600;
 }
 .rvg-column-drag-preview-header .rvg-preview-header-icon {

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,17 @@ function TableInner({
     }
     event.preventDefault();
     const sourceCell = drag.sourceCell;
+    const rootRect = rootRef.current?.getBoundingClientRect() ?? event.currentTarget.getBoundingClientRect();
+    const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 160;
+    const previewWidth = Math.min(sourceWidth, Math.max(60, viewport.width - 16));
+    const previewRowCount = Math.min(rows.length, 6);
+    const previewHeight = headerLeafHeight + previewRowCount * rowHeight;
+    setColumnDragPreview({
+      sourceIndex: sourceCell.startIndex,
+      left: Math.max(4, Math.min(viewport.width - previewWidth - 4, event.clientX - rootRect.left + 12)),
+      top: Math.max(4, Math.min(viewport.height - previewHeight - 4, event.clientY - rootRect.top + 12)),
+      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,7 +3667,6 @@ function TableInner({
       columnEdge,
       columns.length
     );
-    columnDragPreviewRef.current = { sourceIndex: sourceCell.startIndex, targetIndex: destinationIndex };
     if (destinationIndex === sourceCell.startIndex) {
       validColumnDropRef.current = null;
       setColumnDropTarget(null);
@@ -3681,7 +3689,7 @@ function TableInner({
     });
     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, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerLeafHeight, headerRowOffsets, hideDragTooltips, locateColumn, locateHeaderCell, metrics, rowHeight, rows.length, setDragGuide, viewport.height, viewport.width]);
   const finishColumnOrderPointerDrag = useCallback2((event, apply) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -5193,6 +5201,31 @@ 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: columnDragPreview.top,
+          width: columnDragPreview.width,
+          height: headerLeafHeight + Math.min(rows.length, 6) * rowHeight
+        },
+        children: [
+          /* @__PURE__ */ jsx7("div", { className: "rvg-column-drag-preview-header", style: { top: 0, height: headerLeafHeight }, children: columns[columnDragPreview.sourceIndex]?.title }),
+          rows.slice(0, 6).map((_row, rowIndex) => /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: "rvg-column-drag-preview-cell",
+              style: { top: headerLeafHeight + rowIndex * rowHeight, 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.28",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",