@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
131 lines (126 loc) • 6.26 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = _default;
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _reactIntlNext = require("react-intl-next");
var _analytics = require("@atlaskit/editor-common/analytics");
var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _ui = require("@atlaskit/editor-common/ui");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
var _commands = require("../../pm-plugins/commands");
var _types = require("../../types");
var _FixedButton = _interopRequireDefault(require("./FixedButton"));
var _styles = require("./styles");
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); }
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
// Ignored via go/ees005
// eslint-disable-next-line import/no-named-as-default
var BUTTON_OFFSET = 3;
var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (props) {
var editorView = props.editorView,
isContextualMenuOpen = props.isContextualMenuOpen,
mountPoint = props.mountPoint,
scrollableElement = props.scrollableElement,
stickyHeader = props.stickyHeader,
tableWrapper = props.tableWrapper,
targetCellPosition = props.targetCellPosition,
isCellMenuOpenByKeyboard = props.isCellMenuOpenByKeyboard,
formatMessage = props.intl.formatMessage; // : Props & WrappedComponentProps
var handleClick = function handleClick() {
var state = editorView.state,
dispatch = editorView.dispatch;
// Clicking outside the dropdown handles toggling the menu closed
// (otherwise these two toggles combat each other).
// In the event a user clicks the chevron button again
// That will count as clicking outside the dropdown and
// will be toggled appropriately
if (!isContextualMenuOpen) {
(0, _commands.toggleContextualMenu)()(state, dispatch);
}
};
var domAtPos = editorView.domAtPos.bind(editorView);
var targetCellRef = (0, _utils.findDomRefAtPos)(targetCellPosition, domAtPos);
(0, _react.useEffect)(function () {
if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
var state = editorView.state,
dispatch = editorView.dispatch;
// open the menu when the keyboard shortcut is pressed
(0, _commands.toggleContextualMenu)()(state, dispatch);
}
}, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
return null;
}
var labelCellOptions = formatMessage(_messages.tableMessages.cellOptions);
var button = (0, _react2.jsx)("div", {
css: [
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
(0, _styles.tableFloatingCellButtonStyles)(),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
isContextualMenuOpen && (0, _styles.tableFloatingCellButtonSelectedStyles)()]
}, (0, _react2.jsx)(_uiMenu.ToolbarButton
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
, {
className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
selected: isContextualMenuOpen,
title: labelCellOptions,
keymap: _keymaps.focusToContextMenuTrigger,
onClick: handleClick,
iconBefore: (0, _react2.jsx)(_chevronDown.default, {
label: "",
color: "currentColor",
size: "small"
}),
"aria-label": labelCellOptions,
"aria-expanded": isContextualMenuOpen
}));
var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
if (stickyHeader && parentSticky && tableWrapper) {
return (0, _react2.jsx)(_FixedButton.default, {
offset: BUTTON_OFFSET,
stickyHeader: stickyHeader,
tableWrapper: tableWrapper,
targetCellPosition: targetCellPosition,
targetCellRef: targetCellRef,
mountTo: tableWrapper,
isContextualMenuOpen: isContextualMenuOpen
}, button);
}
return (0, _react2.jsx)(_ui.Popup, {
alignX: "right",
alignY: "start",
target: targetCellRef,
mountTo: tableWrapper || mountPoint,
boundariesElement: targetCellRef,
scrollableElement: scrollableElement,
offset: [BUTTON_OFFSET, -BUTTON_OFFSET],
forcePlacement: true,
allowOutOfBounds: true,
zIndex: _editorSharedStyles.akEditorSmallZIndex
}, button);
});
var FloatingContextualButton = (0, _reactIntlNext.injectIntl)(FloatingContextualButtonInner);
function _default(props) {
return (0, _react2.jsx)(_errorBoundary.ErrorBoundary, {
component: _analytics.ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
fallbackComponent: null
}, (0, _react2.jsx)(FloatingContextualButton
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, props));
}