@atlaskit/editor-plugin-table 7.16.11 → 7.16.12

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 
 import {
-  attachClosestEdge,
-  type Edge,
+	attachClosestEdge,
+	type Edge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
@@ -10,105 +10,96 @@ import { getDragBehaviour } from '../../../pm-plugins/drag-and-drop/utils/getDra
 import type { DraggableSourceData } from '../../../types';
 
 export interface Props {
-  index: number;
-  localId?: string;
-  width?: number;
-  height?: number;
-  marginTop?: number;
+	index: number;
+	localId?: string;
+	width?: number;
+	height?: number;
+	marginTop?: number;
 }
 
-export const ColumnDropTarget = ({
-  index,
-  localId,
-  width,
-  height,
-  marginTop,
-}: Props) => {
-  const dropTargetRef = useRef<HTMLDivElement | null>(null);
+export const ColumnDropTarget = ({ index, localId, width, height, marginTop }: Props) => {
+	const dropTargetRef = useRef<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    if (!dropTargetRef.current) {
-      return;
-    }
+	useEffect(() => {
+		if (!dropTargetRef.current) {
+			return;
+		}
 
-    return dropTargetForElements({
-      element: dropTargetRef.current,
-      canDrop({ source, input }) {
-        const data = source.data as DraggableSourceData;
-        const behaviour = getDragBehaviour(input);
+		return dropTargetForElements({
+			element: dropTargetRef.current,
+			canDrop({ source, input }) {
+				const data = source.data as DraggableSourceData;
+				const behaviour = getDragBehaviour(input);
 
-        // A move drop is limited too where it can go, however a clone can drop can go anywhere.
-        const isDropValid =
-          behaviour === 'move'
-            ? data.indexes?.indexOf(index) === -1
-            : behaviour === 'clone';
+				// A move drop is limited too where it can go, however a clone can drop can go anywhere.
+				const isDropValid =
+					behaviour === 'move' ? data.indexes?.indexOf(index) === -1 : behaviour === 'clone';
 
-        return (
-          // Only draggables of row type can be dropped on this target
-          data.type === 'table-column' &&
-          // Only draggables which came from the same table can be dropped on this target
-          data.localId === localId &&
-          // Only draggables which DO NOT include this drop targets index can be dropped
-          !!data.indexes?.length &&
-          isDropValid
-        );
-      },
-      getDropEffect: ({ input }) =>
-        getDragBehaviour(input) === 'clone' ? 'copy' : 'move',
-      getIsSticky: () => true,
-      getData({ source, input, element }) {
-        const data = {
-          localId,
-          type: 'table-column',
-          targetIndex: index,
-        };
-        const srcData = source.data as DraggableSourceData;
-        const behaviour = getDragBehaviour(input);
+				return (
+					// Only draggables of row type can be dropped on this target
+					data.type === 'table-column' &&
+					// Only draggables which came from the same table can be dropped on this target
+					data.localId === localId &&
+					// Only draggables which DO NOT include this drop targets index can be dropped
+					!!data.indexes?.length &&
+					isDropValid
+				);
+			},
+			getDropEffect: ({ input }) => (getDragBehaviour(input) === 'clone' ? 'copy' : 'move'),
+			getIsSticky: () => true,
+			getData({ source, input, element }) {
+				const data = {
+					localId,
+					type: 'table-column',
+					targetIndex: index,
+				};
+				const srcData = source.data as DraggableSourceData;
+				const behaviour = getDragBehaviour(input);
 
-        // During a move op there's no point in allowing edges to be dropped on which result in no change/move to occur.
-        const allowedEdges: Edge[] =
-          behaviour === 'move'
-            ? srcData.indexes?.reduce(
-                (acc, v) => {
-                  if (v - index === -1) {
-                    acc.shift();
-                  }
-                  if (v - index === 1) {
-                    acc.pop();
-                  }
-                  return acc;
-                },
-                ['left', 'right'],
-              )
-            : ['left', 'right'];
+				// During a move op there's no point in allowing edges to be dropped on which result in no change/move to occur.
+				const allowedEdges: Edge[] =
+					behaviour === 'move'
+						? srcData.indexes?.reduce(
+								(acc, v) => {
+									if (v - index === -1) {
+										acc.shift();
+									}
+									if (v - index === 1) {
+										acc.pop();
+									}
+									return acc;
+								},
+								['left', 'right'],
+							)
+						: ['left', 'right'];
 
-        return attachClosestEdge(data, {
-          input,
-          element,
-          allowedEdges,
-        });
-      },
-    });
-  }, [index, localId]);
+				return attachClosestEdge(data, {
+					input,
+					element,
+					allowedEdges,
+				});
+			},
+		});
+	}, [index, localId]);
 
-  return (
-    <div
-      ref={dropTargetRef}
-      style={{
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-        width: width && `${width - 1}px`,
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-        height: height && `${height}px`,
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-        marginTop: marginTop && `${marginTop}px`,
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        pointerEvents: 'auto',
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        flexShrink: 0,
-      }}
-      data-drop-target-index={index}
-      data-drop-target-localid={localId}
-      data-testid="table-floating-column-controls-drop-target"
-    />
-  );
+	return (
+		<div
+			ref={dropTargetRef}
+			style={{
+				// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+				width: width && `${width - 1}px`,
+				// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+				height: height && `${height}px`,
+				// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+				marginTop: marginTop && `${marginTop}px`,
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+				pointerEvents: 'auto',
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+				flexShrink: 0,
+			}}
+			data-drop-target-index={index}
+			data-drop-target-localid={localId}
+			data-testid="table-floating-column-controls-drop-target"
+		/>
+	);
 };

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx

@@ -5,57 +5,57 @@ import { TableCssClassName as ClassName } from '../../../types';
 import { ColumnDropTarget } from './ColumnDropTarget';
 
 export interface Props {
-  tableRef: HTMLTableElement;
-  tableHeight?: number;
-  localId?: string;
-  colWidths?: (number | undefined)[];
-  isHeaderSticky?: boolean;
-  getScrollOffset?: () => number;
+	tableRef: HTMLTableElement;
+	tableHeight?: number;
+	localId?: string;
+	colWidths?: (number | undefined)[];
+	isHeaderSticky?: boolean;
+	getScrollOffset?: () => number;
 }
 
 export const ColumnDropTargets = ({
-  tableRef,
-  tableHeight,
-  localId,
-  colWidths,
-  isHeaderSticky,
-  getScrollOffset,
+	tableRef,
+	tableHeight,
+	localId,
+	colWidths,
+	isHeaderSticky,
+	getScrollOffset,
 }: Props) => {
-  const dropTargetRef = useRef<HTMLDivElement>(null);
+	const dropTargetRef = useRef<HTMLDivElement>(null);
 
-  if (!tableRef) {
-    return null;
-  }
+	if (!tableRef) {
+		return null;
+	}
 
-  if (isHeaderSticky && dropTargetRef.current) {
-    dropTargetRef.current.style.marginLeft = `-${getScrollOffset?.() ?? 0}px`;
-  }
+	if (isHeaderSticky && dropTargetRef.current) {
+		dropTargetRef.current.style.marginLeft = `-${getScrollOffset?.() ?? 0}px`;
+	}
 
-  return (
-    <div
-      ref={dropTargetRef}
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className={ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS}
-      contentEditable={false}
-    >
-      <div
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className={ClassName.DRAG_COLUMN_CONTROLS_INNER}
-        data-testid="table-floating-column-controls-drop-targets"
-      >
-        {colWidths?.map((width, index) => {
-          return (
-            <ColumnDropTarget
-              key={index}
-              index={index}
-              localId={localId}
-              width={width}
-              height={tableHeight}
-              marginTop={0}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
+	return (
+		<div
+			ref={dropTargetRef}
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+			className={ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS}
+			contentEditable={false}
+		>
+			<div
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+				className={ClassName.DRAG_COLUMN_CONTROLS_INNER}
+				data-testid="table-floating-column-controls-drop-targets"
+			>
+				{colWidths?.map((width, index) => {
+					return (
+						<ColumnDropTarget
+							key={index}
+							index={index}
+							localId={localId}
+							width={width}
+							height={tableHeight}
+							marginTop={0}
+						/>
+					);
+				})}
+			</div>
+		</div>
+	);
 };

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -9,159 +9,139 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type {
-  CellHoverMeta,
-  DraggableSourceData,
-  PluginInjectionAPI,
-} from '../../types';
+import type { CellHoverMeta, DraggableSourceData, PluginInjectionAPI } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
-import {
-  containsHeaderColumn,
-  getColumnsWidths,
-  getRowHeights,
-} from '../../utils';
+import { containsHeaderColumn, getColumnsWidths, getRowHeights } from '../../utils';
 
 import { ColumnControls } from './ColumnControls';
 import { ColumnDropTargets } from './ColumnDropTargets';
 
 export interface Props {
-  editorView: EditorView;
-  getEditorFeatureFlags: GetEditorFeatureFlags;
-  selection?: Selection;
-  tableRef?: HTMLTableElement;
-  getNode: () => PmNode;
-  tableActive?: boolean;
-  isInDanger?: boolean;
-  hasHeaderRow?: boolean;
-  headerRowHeight?: number;
-  hoveredRows?: number[];
-  hoveredCell?: CellHoverMeta;
-  isResizing?: boolean;
-  ordering?: TableColumnOrdering;
-  stickyHeader?: RowStickyState;
-  isTableHovered?: boolean;
-  tableContainerWidth?: number;
-  isNumberColumnEnabled?: boolean;
-  getScrollOffset?: () => number;
-  tableWrapperHeight?: number;
-  api?: PluginInjectionAPI;
+	editorView: EditorView;
+	getEditorFeatureFlags: GetEditorFeatureFlags;
+	selection?: Selection;
+	tableRef?: HTMLTableElement;
+	getNode: () => PmNode;
+	tableActive?: boolean;
+	isInDanger?: boolean;
+	hasHeaderRow?: boolean;
+	headerRowHeight?: number;
+	hoveredRows?: number[];
+	hoveredCell?: CellHoverMeta;
+	isResizing?: boolean;
+	ordering?: TableColumnOrdering;
+	stickyHeader?: RowStickyState;
+	isTableHovered?: boolean;
+	tableContainerWidth?: number;
+	isNumberColumnEnabled?: boolean;
+	getScrollOffset?: () => number;
+	tableWrapperHeight?: number;
+	api?: PluginInjectionAPI;
 }
 
 export const TableFloatingColumnControls = ({
-  editorView,
-  tableRef,
-  getNode,
-  tableActive,
-  hasHeaderRow,
-  hoveredCell,
-  isResizing,
-  stickyHeader,
-  selection,
-  isInDanger,
-  isTableHovered,
-  tableContainerWidth,
-  isNumberColumnEnabled,
-  getScrollOffset,
-  tableWrapperHeight,
-  api,
+	editorView,
+	tableRef,
+	getNode,
+	tableActive,
+	hasHeaderRow,
+	hoveredCell,
+	isResizing,
+	stickyHeader,
+	selection,
+	isInDanger,
+	isTableHovered,
+	tableContainerWidth,
+	isNumberColumnEnabled,
+	getScrollOffset,
+	tableWrapperHeight,
+	api,
 }: Props) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
+	const [isDragging, setIsDragging] = useState(false);
+	const containerRef = useRef<HTMLDivElement>(null);
 
-  const node = getNode();
-  const currentNodeLocalId = node?.attrs.localId;
-  const hasHeaderColumn = containsHeaderColumn(node);
-  const stickyTop =
-    stickyHeader && stickyHeader.sticky && hasHeaderRow
-      ? stickyHeader.top
-      : undefined;
+	const node = getNode();
+	const currentNodeLocalId = node?.attrs.localId;
+	const hasHeaderColumn = containsHeaderColumn(node);
+	const stickyTop =
+		stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
 
-  useEffect(() => {
-    return monitorForElements({
-      canMonitor({ source }) {
-        const { type, localId, indexes } =
-          source.data as Partial<DraggableSourceData>;
-        return (
-          type === 'table-column' &&
-          !!indexes?.length &&
-          localId === currentNodeLocalId
-        );
-      },
-      onDragStart() {
-        setIsDragging(true);
-      },
-      onDrop() {
-        setIsDragging(false);
-      },
-    });
-  }, [editorView, currentNodeLocalId]);
+	useEffect(() => {
+		return monitorForElements({
+			canMonitor({ source }) {
+				const { type, localId, indexes } = source.data as Partial<DraggableSourceData>;
+				return type === 'table-column' && !!indexes?.length && localId === currentNodeLocalId;
+			},
+			onDragStart() {
+				setIsDragging(true);
+			},
+			onDrop() {
+				setIsDragging(false);
+			},
+		});
+	}, [editorView, currentNodeLocalId]);
 
-  const rowHeights = useMemo(() => {
-    // NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
-    if (tableRef && !!tableWrapperHeight) {
-      return getRowHeights(tableRef);
-    }
-    return [0];
-  }, [tableRef, tableWrapperHeight]);
+	const rowHeights = useMemo(() => {
+		// NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
+		if (tableRef && !!tableWrapperHeight) {
+			return getRowHeights(tableRef);
+		}
+		return [0];
+	}, [tableRef, tableWrapperHeight]);
 
-  if (!tableRef || !tableActive || isResizing) {
-    return null;
-  }
+	if (!tableRef || !tableActive || isResizing) {
+		return null;
+	}
 
-  const colWidths = getColumnsWidths(editorView);
+	const colWidths = getColumnsWidths(editorView);
 
-  if (stickyTop) {
-    const headerRowHeight =
-      hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
-    containerRef?.current?.style.setProperty(
-      'top',
-      `${stickyTop! - headerRowHeight + 33}px`, // 33px is padding and margin applied on tr.sticky
-    );
-  } else {
-    containerRef?.current?.style.removeProperty('top');
-  }
+	if (stickyTop) {
+		const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
+		containerRef?.current?.style.setProperty(
+			'top',
+			`${stickyTop! - headerRowHeight + 33}px`, // 33px is padding and margin applied on tr.sticky
+		);
+	} else {
+		containerRef?.current?.style.removeProperty('top');
+	}
 
-  return (
-    <div
-      ref={containerRef}
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className={ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}
-      data-testid="table-floating-column-controls-wrapper"
-    >
-      <ColumnControls
-        editorView={editorView}
-        hoveredCell={hoveredCell}
-        tableRef={tableRef}
-        tableActive={tableActive}
-        isTableHovered={isTableHovered}
-        stickyTop={tableActive ? stickyTop : undefined}
-        localId={currentNodeLocalId}
-        isInDanger={isInDanger}
-        rowHeights={rowHeights}
-        colWidths={colWidths}
-        hasHeaderColumn={hasHeaderColumn}
-        tableContainerWidth={tableContainerWidth}
-        isNumberColumnEnabled={isNumberColumnEnabled}
-        isDragging={isDragging}
-        getScrollOffset={getScrollOffset}
-        api={
-          getBooleanFF('platform.editor.table.use-shared-state-hook')
-            ? api
-            : undefined
-        }
-      />
-      {isDragging && (
-        <ColumnDropTargets
-          tableRef={tableRef}
-          isHeaderSticky={stickyHeader?.sticky && hasHeaderRow}
-          tableHeight={tableWrapperHeight}
-          localId={currentNodeLocalId}
-          colWidths={colWidths}
-          getScrollOffset={getScrollOffset}
-        />
-      )}
-    </div>
-  );
+	return (
+		<div
+			ref={containerRef}
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+			className={ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}
+			data-testid="table-floating-column-controls-wrapper"
+		>
+			<ColumnControls
+				editorView={editorView}
+				hoveredCell={hoveredCell}
+				tableRef={tableRef}
+				tableActive={tableActive}
+				isTableHovered={isTableHovered}
+				stickyTop={tableActive ? stickyTop : undefined}
+				localId={currentNodeLocalId}
+				isInDanger={isInDanger}
+				rowHeights={rowHeights}
+				colWidths={colWidths}
+				hasHeaderColumn={hasHeaderColumn}
+				tableContainerWidth={tableContainerWidth}
+				isNumberColumnEnabled={isNumberColumnEnabled}
+				isDragging={isDragging}
+				getScrollOffset={getScrollOffset}
+				api={getBooleanFF('platform.editor.table.use-shared-state-hook') ? api : undefined}
+			/>
+			{isDragging && (
+				<ColumnDropTargets
+					tableRef={tableRef}
+					isHeaderSticky={stickyHeader?.sticky && hasHeaderRow}
+					tableHeight={tableWrapperHeight}
+					localId={currentNodeLocalId}
+					colWidths={colWidths}
+					getScrollOffset={getScrollOffset}
+				/>
+			)}
+		</div>
+	);
 };
 
 export default TableFloatingColumnControls;