@atlaskit/editor-plugin-table 5.5.2 → 5.5.3

package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
 import React, {
   Fragment,
@@ -22,7 +23,11 @@ import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
-import type { CellHoverMeta, DraggableSourceData } from '../../../types';
+import type {
+  CellHoverMeta,
+  DraggableSourceData,
+  HandleTypes,
+} from '../../../types';
 import {
   getRowHeights,
   getRowsParams,
@@ -116,14 +121,6 @@ const DragControlsComponent = ({
 
   const rowIndex = hoveredCell?.rowIndex;
 
-  const gridRowPosition = useMemo(() => {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedRowIndexes.includes(rowIndex!)) {
-      return `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`;
-    }
-    return `${rowIndex! + 1} / span 1`;
-  }, [rowIndex, selectedRowIndexes]);
-
   const handleMouseOut = useCallback(() => {
     if (tableActive) {
       const { state, dispatch } = editorView;
@@ -165,6 +162,111 @@ const DragControlsComponent = ({
     [rowIndex, selectRow],
   );
 
+  const generateHandleByType = (type: HandleTypes): JSX.Element | null => {
+    if (!hoveredCell) {
+      return null;
+    }
+    const isHover = type === 'hover';
+
+    const isRowsSelected = selectedRowIndexes.length > 0;
+
+    const showCondition = isHover
+      ? isRowsSelected &&
+        !selectedRowIndexes.includes(rowIndex!) &&
+        Number.isFinite(hoveredCell?.colIndex)
+      : selectedRowIndexes.length < rowHeights.length &&
+        Number.isFinite(hoveredCell?.colIndex);
+
+    if (!showCondition) {
+      return null;
+    }
+
+    const gridRowPosition = `${rowIndex! + 1} / span 1`;
+
+    // if more than one row is selected, ensure the handle spans over the selected range
+    const selectedRowPosition = `${selectedRowIndexes[0] + 1} / span ${
+      selectedRowIndexes.length
+    }`;
+
+    const hoveredAppearance = selectedRowIndexes.includes(rowIndex!)
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : 'default';
+
+    const currentSelectionAppearance = isRowsSelected
+      ? isInDanger
+        ? 'danger'
+        : 'selected'
+      : hoveredAppearance;
+
+    const isSelecting = isRowsSelected && !isHover;
+
+    const indexes = isRowsSelected
+      ? isHover
+        ? rowIndexes
+        : selectedRowIndexes
+      : rowIndexes;
+
+    return (
+      showCondition && (
+        <div
+          key={type}
+          style={{
+            gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
+            gridColumn: '2',
+            // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
+            width: '9px',
+            position: 'relative',
+            right: '-0.5px',
+          }}
+          data-testid={
+            isHover
+              ? 'table-floating-row-drag-handle-hover'
+              : 'table-floating-row-drag-handle'
+          }
+        >
+          <DragHandle
+            direction="row"
+            tableLocalId={currentNodeLocalId}
+            indexes={indexes}
+            forceDefaultHandle={isHover ? false : isRowsSelected}
+            previewWidth={tableWidth}
+            previewHeight={rowHeights[rowIndex!]}
+            appearance={
+              isSelecting ? currentSelectionAppearance : hoveredAppearance
+            }
+            onClick={handleClick}
+            onMouseOver={handleMouseOver}
+            onMouseOut={handleMouseOut}
+            onMouseUp={onMouseUp}
+            editorView={editorView}
+            canDrag={canDrag}
+          />
+        </div>
+      )
+    );
+  };
+
+  const rowHandles = (hoveredCell: CellHoverMeta | undefined) => {
+    if (!hoveredCell) {
+      return null;
+    }
+
+    if (hoveredCell.rowIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+
+    const sortedHandles = [
+      generateHandleByType('hover'),
+      generateHandleByType('selected'),
+    ];
+
+    return hoveredCell.rowIndex < selectedRowIndexes[0]
+      ? sortedHandles
+      : sortedHandles.reverse();
+  };
+
   return (
     <div
       className={ClassName.DRAG_ROW_CONTROLS}
@@ -221,39 +323,11 @@ const DragControlsComponent = ({
             )}
           </Fragment>
         ))}
-      {!isResizing && isTableHovered && Number.isFinite(rowIndex) && (
-        <div
-          style={{
-            gridRow: gridRowPosition,
-            gridColumn: '2',
-            // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
-            width: '9px',
-            position: 'relative',
-            right: '-0.5px',
-          }}
-          data-testid="table-floating-row-drag-handle"
-        >
-          <DragHandle
-            tableLocalId={currentNodeLocalId}
-            indexes={rowIndexes}
-            previewWidth={tableWidth}
-            previewHeight={rowHeights[rowIndex!]}
-            appearance={
-              selectedRowIndexes.includes(rowIndex!)
-                ? isInDanger
-                  ? 'danger'
-                  : 'selected'
-                : 'default'
-            }
-            onClick={handleClick}
-            onMouseOver={handleMouseOver}
-            onMouseOut={handleMouseOut}
-            onMouseUp={onMouseUp}
-            editorView={editorView}
-            canDrag={canDrag}
-          />
-        </div>
-      )}
+      {tableActive &&
+        isTableHovered &&
+        !isResizing &&
+        Number.isFinite(rowIndex) &&
+        rowHandles(hoveredCell)}
     </div>
   );
 };