@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
202 lines (193 loc) • 8.13 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.menuItemDimensions = exports.DropdownMenuItem = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _checkMark = _interopRequireDefault(require("@atlaskit/icon/core/check-mark"));
var _menu = require("@atlaskit/menu");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _floatingToolbar = require("../floating-toolbar");
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
var menuItemDimensions = exports.menuItemDimensions = {
width: 175,
height: 32
};
var labelStyles = (0, _react2.css)({
display: 'inline-block',
width: '100%'
});
var spacerStyles = (0, _react2.css)({
display: 'flex',
flex: 1,
padding: "var(--ds-space-100, 8px)"
});
// Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check
var DropdownButtonItem = _menu.ButtonItem;
var SelectedIconBefore = function SelectedIconBefore(_ref) {
var itemSelected = _ref.itemSelected,
intl = _ref.intl,
showSelected = _ref.showSelected;
if (showSelected && itemSelected) {
return (0, _react2.jsx)("span", {
"aria-hidden": "true"
}, (0, _react2.jsx)(_checkMark.default, {
label: intl.formatMessage(_floatingToolbar.messages.confirmModalOK),
spacing: "none"
}));
}
return (0, _react2.jsx)("span", {
css: spacerStyles
});
};
var DropdownMenuItem = exports.DropdownMenuItem = function DropdownMenuItem(props) {
var item = props.item,
hide = props.hide,
dispatchCommand = props.dispatchCommand,
editorView = props.editorView,
showSelected = props.showSelected,
intl = props.intl;
var itemSelected = item.selected;
var iconBefore = (0, _react.useMemo)(function () {
if (item.icon) {
return item.icon;
} else {
return (0, _react2.jsx)(SelectedIconBefore, {
itemSelected: itemSelected,
showSelected: showSelected,
intl: intl
});
}
}, [itemSelected, showSelected, intl, item.icon]);
var _useState = (0, _react.useState)(item.tooltip || ''),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
tooltipContent = _useState2[0],
setTooltipContent = _useState2[1];
var handleItemMouseOut = (0, _react.useCallback)(function () {
setTooltipContent('');
if (item.onMouseOut) {
dispatchCommand(item.onMouseOut);
}
}, [item.onMouseOut, dispatchCommand]);
var handleItemMouseDown = (0, _react.useCallback)(function (e) {
e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
if (item.onMouseDown) {
dispatchCommand(item.onMouseDown);
}
}, [item.onMouseDown, dispatchCommand]);
var handleItemMouseOver = (0, _react.useCallback)(function () {
setTooltipContent(item.tooltip || '');
if (item.onMouseOver) {
dispatchCommand(item.onMouseOver);
}
}, [item.tooltip, item.onMouseOver, dispatchCommand]);
var handleItemMouseEnter = (0, _react.useCallback)(function (e) {
if (item.onMouseEnter) {
e.preventDefault();
dispatchCommand(item.onMouseEnter);
}
}, [item.onMouseEnter, dispatchCommand]);
var handleItemMouseLeave = (0, _react.useCallback)(function (e) {
if (item.onMouseLeave) {
e.preventDefault();
dispatchCommand(item.onMouseLeave);
}
}, [item.onMouseLeave, dispatchCommand]);
var handleItemOnFocus = (0, _react.useCallback)(function (e) {
if (item.onFocus) {
e.preventDefault();
dispatchCommand(item.onFocus);
}
}, [item.onFocus, dispatchCommand]);
var handleItemOnBlur = (0, _react.useCallback)(function (e) {
if (item.onBlur) {
e.preventDefault();
dispatchCommand(item.onBlur);
}
}, [item.onBlur, dispatchCommand]);
var handleItemClick = (0, _react.useCallback)(function () {
/**
* The order of dispatching the event and hide() is important, because
* the ClickAreaBlock will be relying on the element to calculate the
* click coordinate.
* For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
*/
dispatchCommand(item.onClick);
hide();
if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
editorView === null || editorView === void 0 || editorView.focus();
}
}, [dispatchCommand, item.onClick, hide, editorView]);
/* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
var labelRef = (0, _react.useRef)(null);
var handleTitleWrapperMouseEvent = (0, _react.useCallback)(
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function (e) {
if (item.disabled) {
e.stopPropagation();
e.preventDefault();
}
}, [item.disabled]);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var isAriaChecked = function isAriaChecked(item) {
var selected = item.selected,
domItemOptions = item.domItemOptions;
return (domItemOptions === null || domItemOptions === void 0 ? void 0 : domItemOptions.type) === 'item-checkbox' ? selected : undefined;
};
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var hasRole = function hasRole(item) {
var _item$domItemOptions;
// Always return proper menu roles to fix aria-required-children violations
return ((_item$domItemOptions = item.domItemOptions) === null || _item$domItemOptions === void 0 ? void 0 : _item$domItemOptions.type) === 'item-checkbox' ? 'menuitemcheckbox' : 'menuitem';
};
(0, _react.useEffect)(function () {
var labelRefCurrent = labelRef.current;
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
return function () {
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
};
});
var itemContent = (0, _react2.jsx)(DropdownButtonItem, {
isSelected: itemSelected,
iconBefore: iconBefore,
iconAfter: item.elemAfter,
onClick: handleItemClick,
"data-testid": item.testId,
isDisabled: item.disabled,
onMouseDown: handleItemMouseDown,
onMouseOver: handleItemMouseOver,
onMouseEnter: handleItemMouseEnter,
onMouseLeave: handleItemMouseLeave,
onMouseOut: handleItemMouseOut,
onFocus: handleItemOnFocus,
onBlur: handleItemOnBlur,
role: hasRole(item),
"aria-checked": isAriaChecked(item)
}, (0, _react2.jsx)("span", {
ref: labelRef,
css: labelStyles
}, item.title));
if (tooltipContent) {
return (0, _react2.jsx)(_tooltip.default, {
content: tooltipContent
}, itemContent);
}
return itemContent;
};