@atlaskit/editor-plugin-table/dist/esm/ui/FloatingContextualMenu/CellMenuPopup.js

Table plugin for the @atlaskit/editor

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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';
var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
var NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
var CELL_MENU_TRIGGER_SELECTOR = ".".concat(ClassName.CONTEXTUAL_MENU_BUTTON);
var CELL_MENU_TRIGGER_CLEARANCE = [6, 0];
export var CellMenuPopup = function CellMenuPopup(_ref) {
  var api = _ref.api,
    boundariesElement = _ref.boundariesElement,
    editorView = _ref.editorView,
    mountPoint = _ref.mountPoint,
    scrollableElement = _ref.scrollableElement,
    target = _ref.target,
    zIndex = _ref.zIndex;
  var popupContentRef = useRef(null);
  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
  var handlePopupRef = useCallback(function (el) {
    popupContentRef.current = el;
    setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
  }, [setOutsideClickTargetRef]);
  var closeCellMenu = useCallback(function () {
    var _getPluginState = getPluginState(editorView.state),
      isCellMenuOpenByKeyboard = _getPluginState.isCellMenuOpenByKeyboard;
    api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
    if (isCellMenuOpenByKeyboard) {
      setFocusToCellMenu(false)(editorView.state, editorView.dispatch);
    }
  }, [api, editorView]);
  var isEventInsideCellMenu = useCallback(function (event) {
    var _popupContentRef$curr;
    var 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));
  }, []);
  var horizontalPlacementRef = useRef(undefined);
  var handlePlacementChanged = useCallback(function (_ref2) {
    var _ref3 = _slicedToArray(_ref2, 2),
      horizontalPlacement = _ref3[1];
    horizontalPlacementRef.current = horizontalPlacement;
  }, []);
  var handlePositionCalculated = useCallback(function (position) {
    if (horizontalPlacementRef.current !== 'left' || position.left === undefined) {
      return position;
    }
    return _objectSpread(_objectSpread({}, position), {}, {
      left: position.left + target.getBoundingClientRect().width
    });
  }, [target]);
  var handleCellMenuClickOutside = useCallback(function (event) {
    if (isEventInsideCellMenu(event)) {
      return;
    }
    closeCellMenu();
  }, [closeCellMenu, isEventInsideCellMenu]);
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
    alignX: "end",
    alignY: "start",
    target: target,
    mountTo: mountPoint,
    boundariesElement: boundariesElement,
    scrollableElement: scrollableElement,
    fitHeight: tablePopupMenuFitHeight,
    fitWidth: TABLE_MENU_WIDTH,
    zIndex: zIndex,
    forcePlacement: true,
    preventOverflow: true,
    onPlacementChanged: handlePlacementChanged,
    onPositionCalculated: handlePositionCalculated,
    offset: CELL_MENU_TRIGGER_CLEARANCE,
    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
  }))));
};