@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
92 lines (91 loc) • 4.37 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _ui = require("@atlaskit/editor-common/ui");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
var _consts = require("../consts");
var _DragMenu = _interopRequireDefault(require("./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;
if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
return null;
}
var inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
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.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.default.createElement(_ui.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: _consts.dragMenuDropdownWidth,
fitHeight: _consts.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 ? _editorSharedStyles.akEditorFloatingDialogZIndex : _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
forcePlacement: true,
offset: offset,
stick: true
}, /*#__PURE__*/_react.default.createElement(_DragMenu.default, {
editorView: editorView,
isOpen: isOpen,
tableNode: tableNode,
direction: direction,
index: index,
target: targetHandleRef || undefined,
targetCellPosition: targetCellPosition,
getEditorContainerWidth: getEditorContainerWidth,
editorAnalyticsAPI: editorAnalyticsAPI,
pluginConfig: pluginConfig,
fitWidth: _consts.dragMenuDropdownWidth,
fitHeight: _consts.tablePopupMenuFitHeight,
mountPoint: mountPoint,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
isTableScalingEnabled: isTableScalingEnabled,
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
ariaNotifyPlugin: ariaNotifyPlugin,
api: api,
isCommentEditor: isCommentEditor || false
}));
};
FloatingDragMenu.displayName = 'FloatingDragMenu';
var _default = exports.default = FloatingDragMenu;