@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
83 lines • 3.5 kB
JavaScript
import React, { useCallback, useContext, useRef } from 'react';
import { Popup } from '@atlaskit/editor-common/ui';
import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
import { closeActiveTableMenu, setFocusToCellMenu } from '../../pm-plugins/commands';
import { getPluginState } from '../../pm-plugins/plugin-factory';
import { TableCssClassName as ClassName } from '../../types';
import { tablePopupMenuFitHeight } from '../consts';
import { CELL_MENU } from '../TableMenu/cell/keys';
import { TABLE_MENU_WIDTH } from '../TableMenu/shared/consts';
import { TableMenu } from '../TableMenu/shared/TableMenu';
const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
const NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
const CELL_MENU_TRIGGER_SELECTOR = `.${ClassName.CONTEXTUAL_MENU_BUTTON}`;
export const CellMenuPopup = ({
api,
boundariesElement,
editorView,
mountPoint,
scrollableElement,
targetCellRef,
zIndex
}) => {
const popupContentRef = useRef(null);
const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
const handlePopupRef = useCallback(el => {
popupContentRef.current = el;
setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 ? void 0 : setOutsideClickTargetRef(el);
}, [setOutsideClickTargetRef]);
const closeCellMenu = useCallback(() => {
const {
isCellMenuOpenByKeyboard
} = getPluginState(editorView.state);
api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu());
if (isCellMenuOpenByKeyboard) {
setFocusToCellMenu(false)(editorView.state, editorView.dispatch);
}
}, [api === null || api === void 0 ? void 0 : api.core.actions, editorView]);
const isEventInsideCellMenu = useCallback(event => {
var _popupContentRef$curr;
const target = event.target;
if (!(target instanceof Node)) {
return false;
}
if ((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(target)) {
return true;
}
return target instanceof Element && Boolean(target.closest(NESTED_DROPDOWN_SELECTOR) || target.closest(CELL_MENU_TRIGGER_SELECTOR));
}, []);
const handleCellMenuClickOutside = useCallback(event => {
if (isEventInsideCellMenu(event)) {
return;
}
closeCellMenu();
}, [closeCellMenu, isEventInsideCellMenu]);
return /*#__PURE__*/React.createElement(PopupWithListeners, {
alignX: "right",
alignY: "top",
target: targetCellRef,
mountTo: mountPoint,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
fitHeight: tablePopupMenuFitHeight,
fitWidth: TABLE_MENU_WIDTH,
zIndex: zIndex,
forcePlacement: true
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [-7, 0],
stick: true,
handleClickOutside: handleCellMenuClickOutside,
handleEscapeKeydown: closeCellMenu
}, /*#__PURE__*/React.createElement("div", {
ref: handlePopupRef
}, /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
api: api,
userIntent: "tableContextualMenuPopupOpen"
}, /*#__PURE__*/React.createElement(TableMenu, {
api: api,
editorView: editorView,
surface: CELL_MENU
}))));
};