@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
105 lines (104 loc) • 4.54 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["onClick", "triggerRef"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useCallback } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { useIntl } from 'react-intl-next';
import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
import { cardMessages as messages } from '../../messages';
import { StyledButton } from './StyledButton';
import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
var SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
var Dropdown = function Dropdown(_ref) {
var onConfigureClickCallback = _ref.onConfigureClick,
onOpenLinkClickCallback = _ref.onOpenLinkClick,
onDropdownChange = _ref.onDropdownChange,
editorView = _ref.editorView,
testId = _ref.testId;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var configureLinkLabel = formatMessage(messages.inlineConfigureLink);
var goToLinkLabel = formatMessage(messages.inlineGoToLink);
var _useLinkOverlayAnalyt = useLinkOverlayAnalyticsEvents(),
fireActionClickEvent = _useLinkOverlayAnalyt.fireActionClickEvent,
fireLinkClickEvent = _useLinkOverlayAnalyt.fireLinkClickEvent,
fireToolbarViewEvent = _useLinkOverlayAnalyt.fireToolbarViewEvent;
var focusEditor = useCallback(function () {
// Fix dropdown giving focus back to the trigger async which is then unmounted and losing focus
// this is happening deep within atlaskit dropdown as a result of this code: https://github.com/focus-trap/focus-trap/blob/master/index.js#L987
// use setTimeout to run this async after that call
setTimeout(function () {
return editorView.focus();
}, 0);
}, [editorView]);
var onOpenChange = useCallback(function (_ref2) {
var isOpen = _ref2.isOpen,
event = _ref2.event;
onDropdownChange === null || onDropdownChange === void 0 || onDropdownChange(isOpen);
if (isOpen) {
fireToolbarViewEvent();
}
if (!isOpen && event instanceof KeyboardEvent) {
focusEditor();
}
}, [fireToolbarViewEvent, focusEditor, onDropdownChange]);
var onGoToLinkClick = useCallback(function (event) {
fireActionClickEvent('goToLink');
onOpenLinkClickCallback === null || onOpenLinkClickCallback === void 0 || onOpenLinkClickCallback(event);
focusEditor();
}, [fireActionClickEvent, focusEditor, onOpenLinkClickCallback]);
var onConfigureClick = useCallback(function () {
fireActionClickEvent('configureLink');
onConfigureClickCallback === null || onConfigureClickCallback === void 0 || onConfigureClickCallback();
focusEditor();
}, [fireActionClickEvent, focusEditor, onConfigureClickCallback]);
return jsx(DropdownMenu, {
trigger: function trigger(_ref3) {
var _onClick = _ref3.onClick,
triggerRef = _ref3.triggerRef,
props = _objectWithoutProperties(_ref3, _excluded);
return jsx(StyledButton, _extends({
innerRef: triggerRef
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, props, {
iconBefore: jsx(ChevronDownIcon, {
label: configureLinkLabel,
size: 'small'
}),
onClick: function onClick(e) {
_onClick === null || _onClick === void 0 || _onClick(e);
fireLinkClickEvent();
}
}));
},
testId: "".concat(testId, "-dropdown"),
onOpenChange: onOpenChange
}, jsx(DropdownItemGroup, null, jsx(DropdownItem, {
elemBefore: jsx(ShortcutIcon, {
label: goToLinkLabel,
size: 'medium'
}),
testId: "".concat(testId, "-dropdown-item-open-link"),
onClick: onGoToLinkClick
}, goToLinkLabel), jsx(DropdownItem, {
elemBefore: jsx(PreferencesIcon, {
label: configureLinkLabel,
size: 'medium'
}),
onClick: onConfigureClick,
testId: "".concat(testId, "-dropdown-item-configure")
}, configureLinkLabel)));
};
export default withAnalyticsContext({
source: SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE
})(Dropdown);