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

Table plugin for the @atlaskit/editor

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.TableFloatingControls = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _browser = require("@atlaskit/editor-common/browser");
var _utils = require("@atlaskit/editor-tables/utils");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _commands = require("../../pm-plugins/commands");
var _nodes = require("../../pm-plugins/utils/nodes");
var _types = require("../../types");
var _DragCornerControls = require("./CornerControls/DragCornerControls");
var _FloatingControlsWithSelection = require("./FloatingControlsWithSelection");
var _NumberColumn = _interopRequireDefault(require("./NumberColumn"));
var _DragControls = require("./RowControls/DragControls");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var styles = (0, _react2.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
  '&:has(~ .pm-table-wrapper-no-overflow)': {
    marginTop: 0
  }
});

// Row controls
var TableFloatingControls = exports.TableFloatingControls = function TableFloatingControls(_ref) {
  var _findTable;
  var editorView = _ref.editorView,
    tableRef = _ref.tableRef,
    tableNode = _ref.tableNode,
    isInDanger = _ref.isInDanger,
    isResizing = _ref.isResizing,
    isNumberColumnEnabled = _ref.isNumberColumnEnabled,
    isHeaderRowEnabled = _ref.isHeaderRowEnabled,
    isHeaderColumnEnabled = _ref.isHeaderColumnEnabled,
    tableActive = _ref.tableActive,
    hasHeaderRow = _ref.hasHeaderRow,
    hoveredRows = _ref.hoveredRows,
    stickyHeader = _ref.stickyHeader,
    isDragAndDropEnabled = _ref.isDragAndDropEnabled,
    hoveredCell = _ref.hoveredCell,
    isTableHovered = _ref.isTableHovered,
    tableWrapperWidth = _ref.tableWrapperWidth,
    api = _ref.api,
    isChromelessEditor = _ref.isChromelessEditor;
  var _selectRow = (0, _react.useCallback)(function (row, expand) {
    var state = editorView.state,
      dispatch = editorView.dispatch;
    var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
    if (browser.ie_version === 11) {
      // Ignored via go/ees005
      // eslint-disable-next-line @atlaskit/editor/no-as-casting
      editorView.dom.blur();
    }
    (0, _commands.selectRow)(row, expand)(state, dispatch);
  }, [editorView]);
  var _selectRows = (0, _react.useCallback)(function (rowIndexes) {
    var state = editorView.state,
      dispatch = editorView.dispatch;
    var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
    if (browser.ie_version === 11) {
      // Ignored via go/ees005
      // eslint-disable-next-line @atlaskit/editor/no-as-casting
      editorView.dom.blur();
    }
    (0, _commands.selectRows)(rowIndexes)(state, dispatch);
  }, [editorView]);
  var _hoverRows = (0, _react.useCallback)(function (rows, danger) {
    var state = editorView.state,
      dispatch = editorView.dispatch;
    (0, _commands.hoverRows)(rows, danger)(state, dispatch);
  }, [editorView]);

  // re-use across numbered columns and row controls
  var updateCellHoverLocation = (0, _react.useCallback)(function (rowIndex) {
    var state = editorView.state,
      dispatch = editorView.dispatch;
    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.
      (0, _commands.hoverCell)(rowIndex, 0)(state, dispatch);
    }
  }, [editorView, tableActive]);
  if (!tableRef) {
    return null;
  }
  var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
  var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + _types.TableCssClassName.TABLE_CHROMELESS : _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
  var tablePos = (_findTable = (0, _utils.findTable)(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  var isNested = tablePos !== undefined && (0, _nodes.isTableNested)(editorView.state, tablePos);
  var shouldShowCornerControls = isNested && !(0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes');
  return (0, _react2.jsx)("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: wrapperClassName,
    css: [(0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && !(0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7') && styles]
  }, (0, _react2.jsx)("div", {
    role: "none",
    onMouseDown: function onMouseDown(e) {
      return !isDragAndDropEnabled && e.preventDefault();
    }
  }, isNumberColumnEnabled ? (0, _react2.jsx)(_NumberColumn.default, {
    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 && (0, _react2.jsx)(_react.Fragment, null, isDragAndDropEnabled ? (0, _react2.jsx)(_react.Fragment, null, shouldShowCornerControls && (0, _react2.jsx)(_DragCornerControls.DragCornerControlsWithSelection, {
    editorView: editorView,
    tableRef: tableRef,
    isInDanger: isInDanger,
    isResizing: isResizing,
    api: api
  }), (0, _react2.jsx)(_DragControls.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
  })) : (0, _react2.jsx)(_FloatingControlsWithSelection.FloatingControlsWithSelection, {
    editorView: editorView,
    tableRef: tableRef,
    isInDanger: isInDanger,
    isResizing: isResizing,
    isHeaderRowEnabled: isHeaderRowEnabled,
    isHeaderColumnEnabled: isHeaderColumnEnabled,
    hoveredRows: hoveredRows,
    stickyTop: tableActive ? stickyTop : undefined,
    tableActive: tableActive,
    hoverRows: _hoverRows,
    selectRow: _selectRow,
    api: api
  }))));
};
var _default = exports.default = TableFloatingControls;