@atlaskit/editor-plugin-table/dist/esm/ui/FloatingDragMenu/index.js

Table plugin for the @atlaskit/editor

import React from 'react';
import { Popup } from '@atlaskit/editor-common/ui';
import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
import { fg } from '@atlaskit/platform-feature-flags';
import { TableCssClassName as ClassName } from '../../types';
import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
import DragMenu from './DragMenu';
var FloatingDragMenu = function FloatingDragMenu(_ref) {
  var _getEditorFeatureFlag;
  var mountPoint = _ref.mountPoint,
    boundariesElement = _ref.boundariesElement,
    scrollableElement = _ref.scrollableElement,
    editorView = _ref.editorView,
    isOpen = _ref.isOpen,
    tableNode = _ref.tableNode,
    direction = _ref.direction,
    index = _ref.index,
    targetCellPosition = _ref.targetCellPosition,
    getEditorContainerWidth = _ref.getEditorContainerWidth,
    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
    stickyHeaders = _ref.stickyHeaders,
    pluginConfig = _ref.pluginConfig,
    isTableScalingEnabled = _ref.isTableScalingEnabled,
    getEditorFeatureFlags = _ref.getEditorFeatureFlags,
    ariaNotifyPlugin = _ref.ariaNotifyPlugin,
    api = _ref.api,
    isCommentEditor = _ref.isCommentEditor,
    tableWrapper = _ref.tableWrapper;
  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
    return null;
  }
  var inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW)) && fg('platform_editor_table_sticky_header_patch_7');
  var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
  var offset = direction === 'row' ? [-9, 0] : [0, -7];
  if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
    return null;
  }
  var _ref2 = (_getEditorFeatureFlag = getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) !== null && _getEditorFeatureFlag !== void 0 ? _getEditorFeatureFlag : {},
    _ref2$tableWithFixedC = _ref2.tableWithFixedColumnWidthsOption,
    tableWithFixedColumnWidthsOption = _ref2$tableWithFixedC === void 0 ? false : _ref2$tableWithFixedC;
  var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (tableWithFixedColumnWidthsOption || isCommentEditor);
  return /*#__PURE__*/React.createElement(Popup, {
    alignX: direction === 'row' ? 'right' : undefined,
    alignY: direction === 'row' ? 'start' : undefined
    // Ignored via go/ees005
    // eslint-disable-next-line @atlaskit/editor/no-as-casting
    ,
    target: targetHandleRef,
    mountTo: mountPoint,
    boundariesElement: boundariesElement,
    scrollableElement: scrollableElement,
    fitWidth: dragMenuDropdownWidth,
    fitHeight: tablePopupMenuFitHeight
    // z-index value below is to ensure that this menu is above other floating menu
    // in table, but below floating dialogs like typeaheads, pickers, etc.
    // In sticky mode, we want to show the menu above the sticky header
    ,
    zIndex: inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
    forcePlacement: true,
    offset: offset,
    stick: true
  }, /*#__PURE__*/React.createElement(DragMenu, {
    editorView: editorView,
    isOpen: isOpen,
    tableNode: tableNode,
    direction: direction,
    index: index,
    target: targetHandleRef || undefined,
    targetCellPosition: targetCellPosition,
    getEditorContainerWidth: getEditorContainerWidth,
    editorAnalyticsAPI: editorAnalyticsAPI,
    pluginConfig: pluginConfig,
    fitWidth: dragMenuDropdownWidth,
    fitHeight: tablePopupMenuFitHeight,
    mountPoint: mountPoint,
    boundariesElement: boundariesElement,
    scrollableElement: scrollableElement,
    isTableScalingEnabled: isTableScalingEnabled,
    shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
    isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
    ariaNotifyPlugin: ariaNotifyPlugin,
    api: api,
    isCommentEditor: isCommentEditor || false
  }));
};
FloatingDragMenu.displayName = 'FloatingDragMenu';
export default FloatingDragMenu;