@atlaskit/editor-plugin-table 5.4.15 → 5.4.16

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,
@@ -20,9 +21,14 @@ import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
 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,
@@ -114,14 +120,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;
@@ -163,6 +161,124 @@ const DragControlsComponent = ({
     [rowIndex, selectRow],
   );
 
+  const generateHandleByType = useCallback(
+    (type: HandleTypes): JSX.Element | null => {
+      if (!hoveredCell) {
+        return null;
+      }
+      const { isDragMenuOpen, dragMenuIndex, dragMenuDirection } =
+        getDragDropPluginState(editorView.state);
+      const isHover = type === 'hover';
+
+      const isHoveredOnSelectedRow =
+        isDragMenuOpen &&
+        dragMenuDirection === 'row' &&
+        dragMenuIndex === rowIndex;
+
+      const showCondition = isHover
+        ? !isHoveredOnSelectedRow &&
+          !selectedRowIndexes.includes(rowIndex!) &&
+          Number.isFinite(hoveredCell?.colIndex)
+        : isDragMenuOpen &&
+          dragMenuDirection === 'row' &&
+          Number.isFinite(hoveredCell?.colIndex);
+
+      if (!showCondition) {
+        return null;
+      }
+
+      const gridRowPosition =
+        // if more than one row is selected, ensure the handle spans over the selected range
+        selectedRowIndexes.includes(rowIndex!)
+          ? `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`
+          : `${rowIndex! + 1} / span 1`;
+
+      const selectedRowPosition = `${dragMenuIndex + 1} / span ${
+        selectedRowIndexes.length
+      }`;
+
+      const selectedApprearance = isInDanger ? 'danger' : 'selected';
+      const hoveredAppearance = selectedRowIndexes.includes(rowIndex!)
+        ? isInDanger
+          ? 'danger'
+          : 'selected'
+        : 'default';
+
+      return (
+        showCondition && (
+          <div
+            key={type}
+            style={{
+              gridRow: isHover ? gridRowPosition : selectedRowPosition,
+              gridColumn: '2',
+              display: 'flex',
+              height: '100%',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+            data-testid={
+              isHover
+                ? 'table-floating-row-drag-handle'
+                : 'table-floating-row-control-selected'
+            }
+          >
+            <DragHandle
+              direction="row"
+              tableLocalId={currentNodeLocalId}
+              indexes={isHover ? rowIndexes : selectedRowIndexes}
+              forceDefaultHandle={!isHover}
+              previewWidth={tableWidth}
+              previewHeight={rowHeights[rowIndex!]}
+              appearance={isHover ? hoveredAppearance : selectedApprearance}
+              onClick={handleClick}
+              onMouseOver={handleMouseOver}
+              onMouseOut={handleMouseOut}
+              onMouseUp={onMouseUp}
+              editorView={editorView}
+            />
+          </div>
+        )
+      );
+    },
+    [
+      currentNodeLocalId,
+      editorView,
+      handleClick,
+      handleMouseOut,
+      handleMouseOver,
+      hoveredCell,
+      isInDanger,
+      onMouseUp,
+      rowHeights,
+      rowIndex,
+      rowIndexes,
+      selectedRowIndexes,
+      tableWidth,
+    ],
+  );
+
+  const rowHandles = useCallback(
+    (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();
+    },
+    [generateHandleByType, selectedRowIndexes],
+  );
+
   return (
     <div
       className={ClassName.DRAG_ROW_CONTROLS}
@@ -219,38 +335,7 @@ const DragControlsComponent = ({
             )}
           </Fragment>
         ))}
-      {!isResizing && isTableHovered && Number.isFinite(rowIndex) && (
-        <div
-          style={{
-            gridRow: gridRowPosition,
-            gridColumn: '2',
-            display: 'flex',
-            height: '100%',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-          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}
-          />
-        </div>
-      )}
+      {!isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell)}
     </div>
   );
 };