@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
187 lines (182 loc) • 10.1 kB
JavaScript
"use strict";
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 _reactIntl = require("react-intl");
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/chevron-down"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _commands = require("../../pm-plugins/commands");
var _stickyHeader = require("../../pm-plugins/utils/sticky-header");
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 CONTEXTUAL_MENU_BUTTON_Z_INDEX = 2;
var anchorStyles = (0, _react2.css)({
position: 'absolute',
positionVisibility: 'anchors-visible',
zIndex: CONTEXTUAL_MENU_BUTTON_Z_INDEX
});
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,
isDragAndDropEnabled = props.isDragAndDropEnabled,
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;
var parentStickyNative = targetCellRef.parentElement && ((0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4') ? tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW) : targetCellRef.parentElement.classList.contains(_types.TableCssClassName.NATIVE_STICKY));
if (parentStickyNative && targetCellRef.nodeName === 'TH' && (0, _stickyHeader.isNativeStickySupported)(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
var _targetCellRef$parent;
/* We need to default to checking the anchor style because there may be a conflict with the block controls
plugin not using the data attribute value and setting the `anchor-name` style property independently of the data attribute.
*/
var rowAnchorName = (_targetCellRef$parent = targetCellRef.parentElement) === null || _targetCellRef$parent === void 0 ? void 0 : _targetCellRef$parent.style.getPropertyValue('anchor-name');
var colAnchorName = targetCellRef.style.getPropertyValue('anchor-name');
if (rowAnchorName === '') {
var _targetCellRef$parent2;
rowAnchorName = (_targetCellRef$parent2 = targetCellRef.parentElement) === null || _targetCellRef$parent2 === void 0 ? void 0 : _targetCellRef$parent2.dataset.nodeAnchor;
}
if (colAnchorName === '') {
colAnchorName = targetCellRef === null || targetCellRef === void 0 ? void 0 : targetCellRef.dataset.nodeAnchor;
}
if (!(0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_9', 'isEnabled', true)) {
return (0, _react2.jsx)("div", {
css: anchorStyles,
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
top: "calc(".concat(BUTTON_OFFSET, "px + anchor(").concat(rowAnchorName, " top))"),
right: "calc(".concat(BUTTON_OFFSET, "px + anchor(").concat(colAnchorName, " right))"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
positionAnchor: colAnchorName
} // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
,
"data-testid": "table-cell-options-anchor-wrapper"
}, button);
}
if (rowAnchorName && colAnchorName) {
return (0, _react2.jsx)("div", {
css: anchorStyles,
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
top: "calc(".concat(BUTTON_OFFSET, "px + anchor(").concat(rowAnchorName, " top))"),
right: "calc(".concat(BUTTON_OFFSET, "px + anchor(").concat(colAnchorName, " right))"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
positionAnchor: colAnchorName
} // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
,
"data-testid": "table-cell-options-anchor-wrapper"
}, button);
}
}
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
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [BUTTON_OFFSET, -BUTTON_OFFSET],
forcePlacement: true,
allowOutOfBounds: true,
zIndex: _editorSharedStyles.akEditorSmallZIndex
}, button);
});
var FloatingContextualButton = (0, _reactIntl.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));
}