@atlaskit/editor-plugin-table 5.4.17 → 5.4.18

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
@@ -14,8 +13,7 @@ import {
   selectColumn,
 } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
-import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
-import type { CellHoverMeta, HandleTypes } from '../../../types';
+import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -68,6 +66,14 @@ export const ColumnControls = ({
   const colIndex = hoveredCell?.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
 
+  const gridColumnPosition = useMemo(() => {
+    // if more than one row is selected, ensure the handle spans over the selected range
+    if (selectedColIndexes.includes(colIndex!)) {
+      return `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`;
+    }
+    return `${colIndex! + 1} / span 1`;
+  }, [colIndex, selectedColIndexes]);
+
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow
     ? firstRow.getAttribute('data-header-row')
@@ -134,120 +140,6 @@ export const ColumnControls = ({
 
   const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
 
-  const generateHandleByType = useCallback(
-    (type: HandleTypes): JSX.Element | null => {
-      if (!hoveredCell) {
-        return null;
-      }
-      const { isDragMenuOpen, dragMenuIndex, dragMenuDirection } =
-        getDragDropPluginState(editorView.state);
-      const isHover = type === 'hover';
-
-      const isHoveredOnSelectedColumn =
-        isDragMenuOpen &&
-        dragMenuDirection === 'column' &&
-        dragMenuIndex === colIndex;
-
-      const showCondition = isHover
-        ? !isHoveredOnSelectedColumn && Number.isFinite(hoveredCell?.colIndex)
-        : isDragMenuOpen && dragMenuDirection === 'column';
-
-      if (!showCondition) {
-        return null;
-      }
-
-      const selectedColumnPosition = `${dragMenuIndex + 1} / span ${
-        selectedColIndexes.length
-      }`;
-
-      const gridColumnPosition = selectedColIndexes.includes(colIndex!)
-        ? `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`
-        : `${colIndex! + 1} / span 1`;
-
-      const selectedApprearance = isInDanger ? 'danger' : 'selected';
-      const hoveredAppearance = selectedColIndexes.includes(colIndex!)
-        ? isInDanger
-          ? 'danger'
-          : 'selected'
-        : 'default';
-
-      return (
-        showCondition && (
-          <div
-            key={type}
-            style={{
-              gridColumn: isHover ? gridColumnPosition : selectedColumnPosition,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              height: 'fit-content',
-              placeSelf: 'center',
-              zIndex: 99,
-            }}
-            data-column-control-index={hoveredCell.colIndex}
-            data-testid={
-              isHover
-                ? 'table-floating-column-control'
-                : 'table-floating-column-control-selected'
-            }
-          >
-            <DragHandle
-              direction="column"
-              tableLocalId={localId || ''}
-              indexes={isHover ? colIndexes : selectedColIndexes}
-              forceDefaultHandle={!isHover}
-              previewWidth={colWidths?.[colIndex!] ?? 48}
-              previewHeight={previewHeight}
-              appearance={isHover ? hoveredAppearance : selectedApprearance}
-              onClick={handleClick}
-              onMouseOver={handleMouseOver}
-              onMouseOut={handleMouseOut}
-              onMouseUp={handleMouseUp}
-              editorView={editorView}
-            />
-          </div>
-        )
-      );
-    },
-    [
-      colIndex,
-      previewHeight,
-      colWidths,
-      colIndexes,
-      editorView,
-      handleClick,
-      handleMouseOut,
-      handleMouseOver,
-      handleMouseUp,
-      hoveredCell,
-      isInDanger,
-      localId,
-      selectedColIndexes,
-    ],
-  );
-
-  const columnHandles = useCallback(
-    (hoveredCell: CellHoverMeta | undefined) => {
-      if (!hoveredCell) {
-        return null;
-      }
-
-      if (hoveredCell.colIndex === undefined) {
-        return generateHandleByType('selected');
-      }
-
-      const sortedHandles = [
-        generateHandleByType('hover'),
-        generateHandleByType('selected'),
-      ];
-
-      return hoveredCell.colIndex < selectedColIndexes[0]
-        ? sortedHandles
-        : sortedHandles.reverse();
-    },
-    [generateHandleByType, selectedColIndexes],
-  );
-
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS}
@@ -289,7 +181,45 @@ export const ColumnControls = ({
               />
             </div>
           ))}
-        {tableActive && !isResizing && columnHandles(hoveredCell)}
+        {tableActive &&
+          !isResizing &&
+          isTableHovered &&
+          !!hoveredCell &&
+          Number.isFinite(hoveredCell.colIndex) && (
+            <div
+              style={{
+                gridColumn: gridColumnPosition,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: 'fit-content',
+                placeSelf: 'center',
+                zIndex: 99,
+              }}
+              data-column-control-index={hoveredCell.colIndex}
+              data-testid="table-floating-column-control"
+            >
+              <DragHandle
+                direction="column"
+                tableLocalId={localId || ''}
+                indexes={colIndexes}
+                previewWidth={colWidths?.[colIndex!] ?? 48}
+                previewHeight={previewHeight}
+                appearance={
+                  selectedColIndexes.includes(hoveredCell.colIndex!)
+                    ? isInDanger
+                      ? 'danger'
+                      : 'selected'
+                    : 'default'
+                }
+                onClick={handleClick}
+                onMouseOver={handleMouseOver}
+                onMouseOut={handleMouseOut}
+                onMouseUp={handleMouseUp}
+                editorView={editorView}
+              />
+            </div>
+          )}
       </div>
     </div>
   );

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

@@ -1,4 +1,3 @@
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
 import React, {
   Fragment,
@@ -21,14 +20,9 @@ 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,
-  HandleTypes,
-} from '../../../types';
+import type { CellHoverMeta, DraggableSourceData } from '../../../types';
 import {
   getRowHeights,
   getRowsParams,
@@ -120,6 +114,14 @@ 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;
@@ -161,124 +163,6 @@ 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}
@@ -335,7 +219,38 @@ const DragControlsComponent = ({
             )}
           </Fragment>
         ))}
-      {!isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell)}
+      {!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>
+      )}
     </div>
   );
 };