@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
110 lines (109 loc) • 6.24 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CellMenuPopup = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _ui = require("@atlaskit/editor-common/ui");
var _uiReact = require("@atlaskit/editor-common/ui-react");
var _userIntent = require("@atlaskit/editor-common/user-intent");
var _commands = require("../../pm-plugins/commands");
var _pluginFactory = require("../../pm-plugins/plugin-factory");
var _types = require("../../types");
var _consts = require("../consts");
var _keys = require("../TableMenu/cell/keys");
var _consts2 = require("../TableMenu/shared/consts");
var _TableMenu = require("../TableMenu/shared/TableMenu");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2.default)(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; }
var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
var NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
var CELL_MENU_TRIGGER_SELECTOR = ".".concat(_types.TableCssClassName.CONTEXTUAL_MENU_BUTTON);
var CELL_MENU_TRIGGER_CLEARANCE = [6, 0];
var CellMenuPopup = exports.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 = (0, _react.useRef)(null);
var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
var handlePopupRef = (0, _react.useCallback)(function (el) {
popupContentRef.current = el;
setOutsideClickTargetRef === null || setOutsideClickTargetRef === void 0 || setOutsideClickTargetRef(el);
}, [setOutsideClickTargetRef]);
var closeCellMenu = (0, _react.useCallback)(function () {
var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
isCellMenuOpenByKeyboard = _getPluginState.isCellMenuOpenByKeyboard;
api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)(api));
if (isCellMenuOpenByKeyboard) {
(0, _commands.setFocusToCellMenu)(false)(editorView.state, editorView.dispatch);
}
}, [api, editorView]);
var isEventInsideCellMenu = (0, _react.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 = (0, _react.useRef)(undefined);
var handlePlacementChanged = (0, _react.useCallback)(function (_ref2) {
var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
horizontalPlacement = _ref3[1];
horizontalPlacementRef.current = horizontalPlacement;
}, []);
var handlePositionCalculated = (0, _react.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 = (0, _react.useCallback)(function (event) {
if (isEventInsideCellMenu(event)) {
return;
}
closeCellMenu();
}, [closeCellMenu, isEventInsideCellMenu]);
return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
alignX: "end",
alignY: "start",
target: target,
mountTo: mountPoint,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
fitHeight: _consts.tablePopupMenuFitHeight,
fitWidth: _consts2.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.default.createElement("div", {
ref: handlePopupRef
}, /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
api: api,
userIntent: "tableContextualMenuPopupOpen"
}, /*#__PURE__*/_react.default.createElement(_TableMenu.TableMenu, {
api: api,
editorView: editorView,
surface: _keys.CELL_MENU
}))));
};