@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
114 lines • 6.79 kB
JavaScript
import React from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { Popup } from '@atlaskit/editor-common/ui';
import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { TableCssClassName as ClassName } from '../../types';
import { dragMenuDropdownWidth, dragTableInsertColumnButtonSize, tablePopupMenuFitHeight } from '../consts';
import { COLUMN_MENU } from '../TableMenu/column/keys';
import { ROW_MENU } from '../TableMenu/row/keys';
import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
import { TableMenu } from '../TableMenu/shared/TableMenu';
import DragMenu from './DragMenu';
var TABLE_MENU_OFFSET = dragTableInsertColumnButtonSize + 4;
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;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table'], function (states) {
var _states$tableState;
return {
activeTableMenu: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.activeTableMenu
};
}),
activeTableMenu = _useSharedPluginState.activeTableMenu;
var isActiveTableMenuDragMenu = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
var hasActiveTableMenuState = activeTableMenu !== undefined;
var isDragMenuOpen = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu : isOpen;
var dragMenuDirection = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu ? activeTableMenu.type : undefined : direction;
var dragMenuIndex = expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) && hasActiveTableMenuState ? isActiveTableMenuDragMenu ? activeTableMenu.index : undefined : index;
if (!isDragMenuOpen || !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 = dragMenuDirection === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
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: dragMenuDirection === 'row' ? 'right' : undefined,
alignY: dragMenuDirection === '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: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? TABLE_MENU_WIDTH : 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: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
stick: true
}, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
api: api,
userIntent: "tableDragMenuPopupOpen"
}, /*#__PURE__*/React.createElement(TableMenu, {
api: api,
editorView: editorView,
surface: dragMenuDirection === 'row' ? ROW_MENU : COLUMN_MENU
})) : /*#__PURE__*/React.createElement(DragMenu, {
editorView: editorView,
isOpen: isDragMenuOpen,
tableNode: tableNode,
direction: dragMenuDirection,
index: dragMenuIndex,
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;