@atlaskit/editor-plugin-table 5.3.1 → 5.3.3

package/src/plugins/table/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -1,12 +1,16 @@
 import React, { Component } from 'react';
 
+import classnames from 'classnames';
+
 import { Selection } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
 
-import { clearHoverSelection } from '../../../commands';
+import { clearHoverSelection, hoverCell } from '../../../commands';
+import { getPluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';
+import { tableBorderColor } from '../../consts';
 
 export interface Props {
   editorView: EditorView;
@@ -19,11 +23,13 @@ export interface Props {
   isInDanger?: boolean;
   isResizing?: boolean;
   stickyTop?: number;
+  isDragAndDropEnabled?: boolean;
 }
 
 export default class NumberColumn extends Component<Props, any> {
   render() {
-    const { tableRef, hasHeaderRow } = this.props;
+    const { tableRef, hasHeaderRow, isDragAndDropEnabled, tableActive } =
+      this.props;
     const rowHeights = getRowHeights(tableRef);
 
     return (
@@ -34,30 +40,38 @@ export default class NumberColumn extends Component<Props, any> {
             hasHeaderRow && this.props.stickyTop !== undefined
               ? rowHeights[0]
               : undefined,
+          borderLeft:
+            isDragAndDropEnabled && tableActive
+              ? `1px solid ${tableBorderColor()}`
+              : undefined,
         }}
         contentEditable={false}
       >
-        {rowHeights.map((rowHeight, index) => (
-          <div
-            key={`wrapper-${index}`}
-            className={this.getClassNames(index)}
-            data-index={index}
-            style={{
-              height: rowHeight,
-              top:
-                this.props.stickyTop !== undefined &&
-                hasHeaderRow &&
-                index === 0
-                  ? `${this.props.stickyTop}px`
-                  : undefined,
-            }}
-            onClick={(event) => this.selectRow(index, event)}
-            onMouseOver={() => this.hoverRows(index)}
-            onMouseOut={this.clearHoverSelection}
-          >
-            {hasHeaderRow ? (index > 0 ? index : null) : index + 1}
-          </div>
-        ))}
+        {rowHeights.map((rowHeight, index) =>
+          isDragAndDropEnabled ? (
+            <div
+              key={`wrapper-${index}`}
+              className={this.getClassNames(index, true)}
+              data-index={index}
+              style={this.getCellStyles(index, rowHeight)}
+              onMouseOver={() => this.updateDragHandleLocation(index)}
+            >
+              {hasHeaderRow ? (index > 0 ? index : null) : index + 1}
+            </div>
+          ) : (
+            <div
+              key={`wrapper-${index}`}
+              className={this.getClassNames(index)}
+              data-index={index}
+              style={this.getCellStyles(index, rowHeight)}
+              onClick={(event) => this.selectRow(index, event)}
+              onMouseOver={() => this.hoverRows(index)}
+              onMouseOut={this.clearHoverSelection}
+            >
+              {hasHeaderRow ? (index > 0 ? index : null) : index + 1}
+            </div>
+          ),
+        )}
       </div>
     );
   }
@@ -95,15 +109,39 @@ export default class NumberColumn extends Component<Props, any> {
     }
   };
 
-  private getClassNames = (index: number) => {
+  private updateDragHandleLocation = (rowIndex: number) => {
+    const { editorView, tableActive } = this.props;
+    const { state, dispatch } = editorView;
+    const { hoveredCell } = getPluginState(state);
+
+    if (tableActive && hoveredCell.rowIndex !== rowIndex) {
+      hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
+    }
+  };
+
+  private getCellStyles = (index: number, rowHeight: number) => {
+    const { stickyTop, hasHeaderRow } = this.props;
+    if (stickyTop && hasHeaderRow && index === 0) {
+      return {
+        height: rowHeight,
+        top: `${stickyTop}px`,
+      };
+    }
+    return {
+      height: rowHeight,
+    };
+  };
+
+  private getClassNames = (index: number, isButtonDisabled = false) => {
     const { hoveredRows, editorView, isInDanger, isResizing } = this.props;
     const isActive =
       isRowSelected(index)(editorView.state.selection) ||
       ((hoveredRows || []).indexOf(index) !== -1 && !isResizing);
-    return [
-      ClassName.NUMBERED_COLUMN_BUTTON,
-      isActive ? ClassName.HOVERED_CELL_ACTIVE : '',
-      isActive && isInDanger ? ClassName.HOVERED_CELL_IN_DANGER : '',
-    ].join(' ');
+
+    return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
+      [ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
+      [ClassName.HOVERED_CELL_IN_DANGER]: isActive && isInDanger,
+      [ClassName.HOVERED_CELL_ACTIVE]: isActive,
+    });
   };
 }

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

@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+
+import type { WrappedComponentProps } from 'react-intl-next';
+import { defineMessages, injectIntl } from 'react-intl-next';
+
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+import { clearHoverSelection } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import type { RowParams } from '../../../utils';
+import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
+import { tableControlsSpacing, tableToolbarSize } from '../../consts';
+
+const messages = defineMessages({
+  rowControl: {
+    id: 'fabric.editor.rowControl',
+    defaultMessage: 'Highlight row',
+    description:
+      'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.',
+  },
+});
+
+export interface Props {
+  editorView: EditorView;
+  tableRef: HTMLTableElement;
+  selectRow: (row: number, expand: boolean) => void;
+  hoverRows: (rows: number[], danger?: boolean) => void;
+  hoveredRows?: number[];
+  isInDanger?: boolean;
+  isResizing?: boolean;
+  insertRowButtonIndex?: number;
+  stickyTop?: number;
+}
+
+class RowControlsComponent extends Component<Props & WrappedComponentProps> {
+  render() {
+    const {
+      editorView,
+      tableRef,
+      hoveredRows,
+      isInDanger,
+      isResizing,
+      intl: { formatMessage },
+    } = this.props;
+    if (!tableRef) {
+      return null;
+    }
+    const { selection } = editorView.state;
+    const rowHeights = getRowHeights(tableRef);
+    const rowsParams = getRowsParams(rowHeights);
+
+    const firstRow = tableRef.querySelector('tr');
+    const hasHeaderRow = firstRow
+      ? firstRow.getAttribute('data-header-row')
+      : false;
+
+    return (
+      <div className={ClassName.ROW_CONTROLS}>
+        <div className={ClassName.ROW_CONTROLS_INNER}>
+          {rowsParams.map(
+            ({ startIndex, endIndex, height }: RowParams, index) => {
+              // if previous row was header row, add its height to our margin
+              let marginTop = -1;
+              if (
+                index === 1 &&
+                hasHeaderRow &&
+                this.props.stickyTop !== undefined
+              ) {
+                marginTop += rowHeights[index - 1] + tableToolbarSize;
+              }
+
+              const thisRowSticky =
+                this.props.stickyTop !== undefined &&
+                index === 0 &&
+                hasHeaderRow;
+
+              return (
+                <div
+                  className={`${
+                    ClassName.ROW_CONTROLS_BUTTON_WRAP
+                  } ${getRowClassNames(
+                    startIndex,
+                    selection,
+                    hoveredRows,
+                    isInDanger,
+                    isResizing,
+                  )} ${thisRowSticky ? 'sticky' : ''}`}
+                  key={startIndex}
+                  style={{
+                    height: height,
+                    marginTop: `${marginTop}px`,
+                    top: thisRowSticky
+                      ? `${this.props.stickyTop! + 3}px`
+                      : undefined,
+                    paddingTop: thisRowSticky
+                      ? `${tableControlsSpacing}px`
+                      : undefined,
+                  }}
+                >
+                  <button
+                    aria-label={formatMessage(messages.rowControl)}
+                    type="button"
+                    className={`${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`}
+                    onClick={(event) =>
+                      this.props.selectRow(startIndex, event.shiftKey)
+                    }
+                    onMouseOver={() => this.props.hoverRows([startIndex])}
+                    onMouseOut={this.clearHoverSelection}
+                    data-start-index={startIndex}
+                    data-end-index={endIndex}
+                  />
+
+                  <div className={ClassName.CONTROLS_INSERT_MARKER} />
+                </div>
+              );
+            },
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  private clearHoverSelection = () => {
+    const { state, dispatch } = this.props.editorView;
+    clearHoverSelection()(state, dispatch);
+  };
+}
+
+export const RowControls = injectIntl(RowControlsComponent);

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

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import { injectIntl } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
+
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+import type { CellHoverCoordinates } from '../../../types';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getRowHeights } from '../../../utils';
+import { DragHandle } from '../../DragHandle';
+
+type DragControlsProps = {
+  editorView: EditorView;
+  tableRef: HTMLTableElement;
+  tableActive?: boolean;
+  hoveredCell?: CellHoverCoordinates;
+  hoverRows?: (rows: number[], danger?: boolean) => void;
+  selectRow?: (row: number, expand: boolean) => void;
+};
+
+const DragControlsComponent = ({
+  tableRef,
+  hoveredCell,
+  hoverRows,
+  selectRow,
+  tableActive,
+  editorView,
+}: DragControlsProps & WrappedComponentProps) => {
+  const rowHeights = getRowHeights(tableRef);
+  const heights = rowHeights.map((height) => `${height - 1}px`).join(' ');
+
+  const onClick = (
+    index: number,
+    event: React.MouseEvent<Element, MouseEvent>,
+  ) => {};
+
+  const onMouseOver = () => {};
+  const onMouseOut = () => {};
+
+  const rowIndex = hoveredCell?.rowIndex;
+
+  const getLocalId = () => {
+    const tableNode = findTable(editorView.state.selection);
+    return tableNode?.node?.attrs?.localId || '';
+  };
+
+  return (
+    <div
+      className={ClassName.ROW_CONTROLS_WITH_DRAG}
+      style={{
+        gridTemplateRows: heights,
+      }}
+    >
+      {Number.isFinite(rowIndex) && (
+        <div
+          style={{
+            gridRow: `${(rowIndex as number) + 1} / span 1`,
+          }}
+        >
+          <DragHandle
+            onClick={(event) => onClick(rowIndex as number, event)}
+            onMouseOver={onMouseOver}
+            onMouseOut={onMouseOut}
+            tableLocalId={getLocalId()}
+            indexes={[]}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const DragControls = injectIntl(DragControlsComponent);

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

@@ -1,135 +1,2 @@
-import React, { Component } from 'react';
-
-import type { WrappedComponentProps } from 'react-intl-next';
-import { defineMessages, injectIntl } from 'react-intl-next';
-
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-
-import { clearHoverSelection } from '../../../commands';
-import { TableCssClassName as ClassName } from '../../../types';
-import {
-  getRowClassNames,
-  getRowHeights,
-  getRowsParams,
-  RowParams,
-} from '../../../utils';
-import { tableControlsSpacing, tableToolbarSize } from '../../consts';
-
-const messages = defineMessages({
-  rowControl: {
-    id: 'fabric.editor.rowControl',
-    defaultMessage: 'Highlight row',
-    description:
-      'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.',
-  },
-});
-
-export interface Props {
-  editorView: EditorView;
-  tableRef: HTMLTableElement;
-  selectRow: (row: number, expand: boolean) => void;
-  hoverRows: (rows: number[], danger?: boolean) => void;
-  hoveredRows?: number[];
-  isInDanger?: boolean;
-  isResizing?: boolean;
-  insertRowButtonIndex?: number;
-  stickyTop?: number;
-}
-
-class RowControlsComponent extends Component<Props & WrappedComponentProps> {
-  render() {
-    const {
-      editorView,
-      tableRef,
-      hoveredRows,
-      isInDanger,
-      isResizing,
-      intl: { formatMessage },
-    } = this.props;
-    if (!tableRef) {
-      return null;
-    }
-    const { selection } = editorView.state;
-    const rowHeights = getRowHeights(tableRef);
-    const rowsParams = getRowsParams(rowHeights);
-
-    const firstRow = tableRef.querySelector('tr');
-    const hasHeaderRow = firstRow
-      ? firstRow.getAttribute('data-header-row')
-      : false;
-
-    return (
-      <div className={ClassName.ROW_CONTROLS}>
-        <div className={ClassName.ROW_CONTROLS_INNER}>
-          {rowsParams.map(
-            ({ startIndex, endIndex, height }: RowParams, index) => {
-              // if previous row was header row, add its height to our margin
-              let marginTop = -1;
-              if (
-                index === 1 &&
-                hasHeaderRow &&
-                this.props.stickyTop !== undefined
-              ) {
-                marginTop += rowHeights[index - 1] + tableToolbarSize;
-              }
-
-              const thisRowSticky =
-                this.props.stickyTop !== undefined &&
-                index === 0 &&
-                hasHeaderRow;
-
-              return (
-                <div
-                  className={`${
-                    ClassName.ROW_CONTROLS_BUTTON_WRAP
-                  } ${getRowClassNames(
-                    startIndex,
-                    selection,
-                    hoveredRows,
-                    isInDanger,
-                    isResizing,
-                  )} ${thisRowSticky ? 'sticky' : ''}`}
-                  key={startIndex}
-                  style={{
-                    height: height,
-                    marginTop: `${marginTop}px`,
-                    top: thisRowSticky
-                      ? `${this.props.stickyTop! + 3}px`
-                      : undefined,
-                    paddingTop: thisRowSticky
-                      ? `${tableControlsSpacing}px`
-                      : undefined,
-                  }}
-                >
-                  <button
-                    aria-label={formatMessage(messages.rowControl)}
-                    type="button"
-                    className={`${ClassName.ROW_CONTROLS_BUTTON}
-                  ${ClassName.CONTROLS_BUTTON}
-                `}
-                    onClick={(event) =>
-                      this.props.selectRow(startIndex, event.shiftKey)
-                    }
-                    onMouseOver={() => this.props.hoverRows([startIndex])}
-                    onMouseOut={this.clearHoverSelection}
-                    data-start-index={startIndex}
-                    data-end-index={endIndex}
-                  />
-
-                  <div className={ClassName.CONTROLS_INSERT_MARKER} />
-                </div>
-              );
-            },
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  private clearHoverSelection = () => {
-    const { state, dispatch } = this.props.editorView;
-    clearHoverSelection()(state, dispatch);
-  };
-}
-
-export const RowControls = injectIntl(RowControlsComponent);
+export { RowControls } from './ClassicControls';
+export { DragControls } from './DragControls';

package/src/plugins/table/ui/TableFloatingControls/index.tsx

@@ -1,22 +1,21 @@
 import React, { Component } from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import { hoverRows, selectRow } from '../../commands';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+import type { CellHoverCoordinates } from '../../types';
 import { isSelectionUpdated } from '../../utils';
 
 import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
-import { RowControls } from './RowControls';
+import { DragControls, RowControls } from './RowControls';
 
 export interface Props {
   editorView: EditorView;
-  getEditorFeatureFlags: GetEditorFeatureFlags;
   selection?: Selection;
   tableRef?: HTMLTableElement;
   tableActive?: boolean;
@@ -25,9 +24,11 @@ export interface Props {
   isHeaderRowEnabled?: boolean;
   isHeaderColumnEnabled?: boolean;
   isNumberColumnEnabled?: boolean;
+  isDragAndDropEnabled?: boolean;
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
+  hoveredCell?: CellHoverCoordinates;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
 }
@@ -77,6 +78,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       ordering,
       headerRowHeight,
       stickyHeader,
+      hoveredCell,
     } = this.props;
     const tableHeight = this.state?.tableHeight;
     const nextTableHeight = nextState?.tableHeight;
@@ -93,7 +95,8 @@ export default class TableFloatingControls extends Component<Props, State> {
       isNumberColumnEnabled !== nextProps.isNumberColumnEnabled ||
       isSelectionUpdated(selection!, nextProps.selection) ||
       headerRowHeight !== nextProps.headerRowHeight ||
-      stickyHeader !== nextProps.stickyHeader
+      stickyHeader !== nextProps.stickyHeader ||
+      hoveredCell !== nextProps.hoveredCell
     );
   }
 
@@ -116,6 +119,8 @@ export default class TableFloatingControls extends Component<Props, State> {
       hasHeaderRow,
       hoveredRows,
       stickyHeader,
+      isDragAndDropEnabled,
+      hoveredCell,
     } = this.props;
 
     if (!tableRef) {
@@ -126,6 +131,7 @@ export default class TableFloatingControls extends Component<Props, State> {
       stickyHeader && stickyHeader.sticky && hasHeaderRow
         ? stickyHeader.top
         : undefined;
+
     return (
       <div onMouseDown={(e) => e.preventDefault()}>
         {isNumberColumnEnabled ? (
@@ -140,31 +146,44 @@ export default class TableFloatingControls extends Component<Props, State> {
             isResizing={isResizing}
             selectRow={this.selectRow}
             stickyTop={stickyTop}
+            isDragAndDropEnabled={isDragAndDropEnabled}
           />
         ) : null}
 
         {tableActive && (
           <>
-            <CornerControls
-              editorView={editorView}
-              tableRef={tableRef}
-              isInDanger={isInDanger}
-              isResizing={isResizing}
-              isHeaderRowEnabled={isHeaderRowEnabled}
-              isHeaderColumnEnabled={isHeaderColumnEnabled}
-              hoveredRows={hoveredRows}
-              stickyTop={tableActive ? stickyTop : undefined}
-            />
-            <RowControls
-              editorView={editorView}
-              tableRef={tableRef}
-              hoverRows={this.hoverRows}
-              hoveredRows={hoveredRows}
-              isInDanger={isInDanger}
-              isResizing={isResizing}
-              selectRow={this.selectRow}
-              stickyTop={tableActive ? stickyTop : undefined}
-            />
+            {isDragAndDropEnabled ? (
+              <DragControls
+                tableRef={tableRef}
+                hoveredCell={hoveredCell}
+                editorView={editorView}
+                hoverRows={this.hoverRows}
+                selectRow={this.selectRow}
+              />
+            ) : (
+              <>
+                <CornerControls
+                  editorView={editorView}
+                  tableRef={tableRef}
+                  isInDanger={isInDanger}
+                  isResizing={isResizing}
+                  isHeaderRowEnabled={isHeaderRowEnabled}
+                  isHeaderColumnEnabled={isHeaderColumnEnabled}
+                  hoveredRows={hoveredRows}
+                  stickyTop={tableActive ? stickyTop : undefined}
+                />
+                <RowControls
+                  editorView={editorView}
+                  tableRef={tableRef}
+                  hoverRows={this.hoverRows}
+                  hoveredRows={hoveredRows}
+                  isInDanger={isInDanger}
+                  isResizing={isResizing}
+                  selectRow={this.selectRow}
+                  stickyTop={tableActive ? stickyTop : undefined}
+                />
+              </>
+            )}
           </>
         )}
       </div>