@atlaskit/editor-plugin-table 7.16.11 → 7.16.12

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

@@ -12,137 +12,124 @@ import { getRowHeights } from '../../../utils';
 import { tableBorderColor } from '../../consts';
 
 export interface Props {
-  editorView: EditorView;
-  tableRef: HTMLTableElement;
-  tableActive?: boolean;
-  hoverRows: (rows: number[], danger?: boolean) => void;
-  hoveredRows?: number[];
-  selectRow: (row: number, expand: boolean) => void;
-  updateCellHoverLocation: (rowIndex: number) => void;
-  hasHeaderRow?: boolean;
-  isInDanger?: boolean;
-  isResizing?: boolean;
-  stickyTop?: number;
-  isDragAndDropEnabled?: boolean;
+	editorView: EditorView;
+	tableRef: HTMLTableElement;
+	tableActive?: boolean;
+	hoverRows: (rows: number[], danger?: boolean) => void;
+	hoveredRows?: number[];
+	selectRow: (row: number, expand: boolean) => void;
+	updateCellHoverLocation: (rowIndex: number) => void;
+	hasHeaderRow?: boolean;
+	isInDanger?: boolean;
+	isResizing?: boolean;
+	stickyTop?: number;
+	isDragAndDropEnabled?: boolean;
 }
 
 export default class NumberColumn extends Component<Props, any> {
-  render() {
-    const {
-      tableRef,
-      hasHeaderRow,
-      isDragAndDropEnabled,
-      tableActive,
-      updateCellHoverLocation,
-    } = this.props;
-    const rowHeights = getRowHeights(tableRef);
+	render() {
+		const { tableRef, hasHeaderRow, isDragAndDropEnabled, tableActive, updateCellHoverLocation } =
+			this.props;
+		const rowHeights = getRowHeights(tableRef);
 
-    return (
-      <div
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className={ClassName.NUMBERED_COLUMN}
-        style={{
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          marginTop:
-            hasHeaderRow && this.props.stickyTop !== undefined
-              ? rowHeights[0]
-              : undefined,
-          borderLeft:
-            isDragAndDropEnabled && tableActive
-              ? `1px solid ${tableBorderColor}`
-              : undefined,
-        }}
-        contentEditable={false}
-      >
-        {rowHeights.map((rowHeight, index) =>
-          isDragAndDropEnabled ? (
-            <div
-              key={`wrapper-${index}`}
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-              className={this.getClassNames(index, true)}
-              data-index={index}
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-              style={this.getCellStyles(index, rowHeight)}
-              onMouseOver={() => updateCellHoverLocation(index)}
-            >
-              {hasHeaderRow ? (index > 0 ? index : null) : index + 1}
-            </div>
-          ) : (
-            <div
-              key={`wrapper-${index}`}
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-              className={this.getClassNames(index)}
-              data-index={index}
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-              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>
-    );
-  }
+		return (
+			<div
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+				className={ClassName.NUMBERED_COLUMN}
+				style={{
+					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+					marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
+					borderLeft:
+						isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined,
+				}}
+				contentEditable={false}
+			>
+				{rowHeights.map((rowHeight, index) =>
+					isDragAndDropEnabled ? (
+						<div
+							key={`wrapper-${index}`}
+							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+							className={this.getClassNames(index, true)}
+							data-index={index}
+							// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+							style={this.getCellStyles(index, rowHeight)}
+							onMouseOver={() => updateCellHoverLocation(index)}
+						>
+							{hasHeaderRow ? (index > 0 ? index : null) : index + 1}
+						</div>
+					) : (
+						<div
+							key={`wrapper-${index}`}
+							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+							className={this.getClassNames(index)}
+							data-index={index}
+							// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+							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>
+		);
+	}
 
-  private hoverRows = (index: number) => {
-    return this.props.tableActive ? this.props.hoverRows([index]) : null;
-  };
-  private selectRow = (
-    index: number,
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-  ) => {
-    const { tableActive, editorView, selectRow } = this.props;
-    // If selection is outside the table then first reset the selection inside table
-    if (!tableActive && event.target && event.target instanceof Node) {
-      const { doc, selection, tr } = editorView.state;
-      const pos = editorView.posAtDOM(event.target, 1);
-      const $pos = doc.resolve(pos);
-      const newPos =
-        selection.head > pos
-          ? // Selection is after table
-            // nodeSize - 3 will move the position inside last table cell
-            Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1)
-          : // Selection is before table
-            Selection.near($pos);
-      editorView.dispatch(tr.setSelection(newPos));
-    }
-    selectRow(index, event.shiftKey);
-  };
+	private hoverRows = (index: number) => {
+		return this.props.tableActive ? this.props.hoverRows([index]) : null;
+	};
+	private selectRow = (index: number, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+		const { tableActive, editorView, selectRow } = this.props;
+		// If selection is outside the table then first reset the selection inside table
+		if (!tableActive && event.target && event.target instanceof Node) {
+			const { doc, selection, tr } = editorView.state;
+			const pos = editorView.posAtDOM(event.target, 1);
+			const $pos = doc.resolve(pos);
+			const newPos =
+				selection.head > pos
+					? // Selection is after table
+						// nodeSize - 3 will move the position inside last table cell
+						Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1)
+					: // Selection is before table
+						Selection.near($pos);
+			editorView.dispatch(tr.setSelection(newPos));
+		}
+		selectRow(index, event.shiftKey);
+	};
 
-  private clearHoverSelection = () => {
-    const { tableActive, editorView } = this.props;
-    if (tableActive) {
-      const { state, dispatch } = editorView;
-      clearHoverSelection()(state, dispatch);
-    }
-  };
+	private clearHoverSelection = () => {
+		const { tableActive, editorView } = this.props;
+		if (tableActive) {
+			const { state, dispatch } = editorView;
+			clearHoverSelection()(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 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);
+	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 classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
-      [ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
-      [ClassName.HOVERED_CELL_IN_DANGER]: isActive && isInDanger,
-      [ClassName.HOVERED_CELL_ACTIVE]: isActive,
-    });
-  };
+		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/ui/TableFloatingControls/RowControls/ClassicControls.tsx

@@ -14,120 +14,101 @@ import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
 import { tableControlsSpacing, tableToolbarSize } from '../../consts';
 
 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;
-  selection?: Selection;
+	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;
+	selection?: Selection;
 }
 
 class RowControlsComponent extends Component<Props & WrappedComponentProps> {
-  render() {
-    const {
-      editorView,
-      tableRef,
-      hoveredRows,
-      isInDanger,
-      isResizing,
-      intl: { formatMessage },
-      selection: selectionState,
-    } = this.props;
-    if (!tableRef) {
-      return null;
-    }
-    const { selection } = editorView.state;
-    const rowHeights = getRowHeights(tableRef);
-    const rowsParams = getRowsParams(rowHeights);
+	render() {
+		const {
+			editorView,
+			tableRef,
+			hoveredRows,
+			isInDanger,
+			isResizing,
+			intl: { formatMessage },
+			selection: selectionState,
+		} = 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;
+		const firstRow = tableRef.querySelector('tr');
+		const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
 
-    return (
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      <div className={ClassName.ROW_CONTROLS}>
-{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
-        <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;
-              }
+		return (
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+			<div className={ClassName.ROW_CONTROLS}>
+				{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
+				<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;
+						const thisRowSticky = this.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
 
-              return (
-                <div
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-                  className={`${
-                    ClassName.ROW_CONTROLS_BUTTON_WRAP
-                  } ${getRowClassNames(
-                    startIndex,
-                    selectionState || selection,
-                    hoveredRows,
-                    isInDanger,
-                    isResizing,
-                  )} ${thisRowSticky ? 'sticky' : ''}`}
-                  key={startIndex}
-                  style={{
-                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-                    height: height,
-                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-                    marginTop: `${marginTop}px`,
-                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-                    top: thisRowSticky
-                      ? `${this.props.stickyTop! + 3}px`
-                      : undefined,
-                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-                    paddingTop: thisRowSticky
-                      ? `${tableControlsSpacing}px`
-                      : undefined,
-                  }}
-                >
-                  <button
-                    aria-label={formatMessage(messages.rowControl)}
-                    type="button"
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-                    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}
-                  />
+						return (
+							<div
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+								className={`${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(
+									startIndex,
+									selectionState || selection,
+									hoveredRows,
+									isInDanger,
+									isResizing,
+								)} ${thisRowSticky ? 'sticky' : ''}`}
+								key={startIndex}
+								style={{
+									// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+									height: height,
+									// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+									marginTop: `${marginTop}px`,
+									// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+									top: thisRowSticky ? `${this.props.stickyTop! + 3}px` : undefined,
+									// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+									paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined,
+								}}
+							>
+								<button
+									aria-label={formatMessage(messages.rowControl)}
+									type="button"
+									// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+									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}
+								/>
 
-{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
-                  <div className={ClassName.CONTROLS_INSERT_MARKER} />
-                </div>
-              );
-            },
-          )}
-        </div>
-      </div>
-    );
-  }
+								{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
+								<div className={ClassName.CONTROLS_INSERT_MARKER} />
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		);
+	}
 
-  private clearHoverSelection = () => {
-    const { state, dispatch } = this.props.editorView;
-    clearHoverSelection()(state, dispatch);
-  };
+	private clearHoverSelection = () => {
+		const { state, dispatch } = this.props.editorView;
+		clearHoverSelection()(state, dispatch);
+	};
 }
 
 export const RowControls = injectIntl(RowControlsComponent);