@atlaskit/editor-plugin-table/dist/es2019/ui/TableFloatingControls/index.js

Table plugin for the @atlaskit/editor

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { Fragment, useCallback } from 'react';

/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
import { jsx } from '@emotion/react';
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
import { TableCssClassName as ClassName } from '../../types';
import NumberColumn from './NumberColumn';
import { DragControlsWithSelection } from './RowControls/DragControls';
// Row controls
export const TableFloatingControls = ({
  editorView,
  tableRef,
  tableNode,
  isInDanger,
  isResizing,
  isNumberColumnEnabled,
  isDragAndDropEnabled,
  tableActive,
  hasHeaderRow,
  hoveredRows,
  stickyHeader,
  hoveredCell,
  isTableHovered,
  tableWrapperWidth,
  api,
  isChromelessEditor
}) => {
  const _selectRow = useCallback((row, expand) => {
    const {
      state,
      dispatch
    } = editorView;
    const browser = getBrowserInfo();
    if (browser.ie_version === 11) {
      // Ignored via go/ees005
      // eslint-disable-next-line @atlaskit/editor/no-as-casting
      editorView.dom.blur();
    }
    selectRow(row, expand)(state, dispatch);
  }, [editorView]);
  const _selectRows = useCallback(rowIndexes => {
    const {
      state,
      dispatch
    } = editorView;
    const browser = getBrowserInfo();
    if (browser.ie_version === 11) {
      // Ignored via go/ees005
      // eslint-disable-next-line @atlaskit/editor/no-as-casting
      editorView.dom.blur();
    }
    selectRows(rowIndexes)(state, dispatch);
  }, [editorView]);
  const _hoverRows = useCallback((rows, danger) => {
    const {
      state,
      dispatch
    } = editorView;
    hoverRows(rows, danger)(state, dispatch);
  }, [editorView]);

  // re-use across numbered columns and row controls
  const updateCellHoverLocation = useCallback(rowIndex => {
    const {
      state,
      dispatch
    } = editorView;
    if (tableActive) {
      // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
      // of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
      // also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
      // current column index. We can just force it to 0.
      hoverCell(rowIndex, 0)(state, dispatch);
    }
  }, [editorView, tableActive]);
  if (!tableRef) {
    return null;
  }
  const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
  const wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.TABLE_CHROMELESS : ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
  return jsx("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: wrapperClassName
  }, jsx("div", {
    role: "none",
    onMouseDown: e => !isDragAndDropEnabled && e.preventDefault()
  }, isNumberColumnEnabled ? jsx(NumberColumn, {
    editorView: editorView,
    hoverRows: _hoverRows,
    tableRef: tableRef,
    tableActive: tableActive,
    hoveredRows: hoveredRows,
    hasHeaderRow: hasHeaderRow,
    isInDanger: isInDanger,
    isResizing: isResizing,
    selectRow: _selectRow,
    updateCellHoverLocation: updateCellHoverLocation,
    stickyTop: stickyTop,
    isDragAndDropEnabled: isDragAndDropEnabled
  }) : null, tableActive && jsx(Fragment, null, jsx(DragControlsWithSelection, {
    tableRef: tableRef,
    tableNode: tableNode,
    hoveredCell: hoveredCell,
    isTableHovered: isTableHovered,
    editorView: editorView,
    tableActive: tableActive,
    isInDanger: isInDanger,
    isResizing: isResizing
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    ,
    tableWidth: tableWrapperWidth,
    hoverRows: _hoverRows,
    selectRow: _selectRow,
    selectRows: _selectRows,
    updateCellHoverLocation: updateCellHoverLocation,
    api: api
  }))));
};
export default TableFloatingControls;