@atlaskit/editor-plugin-selection-extension
Version:
editor-plugin-selection-extension plugin for @atlaskit/editor-core
83 lines • 3.88 kB
JavaScript
/* SelectionExtensionNestedDropdownMenu.tsx generated by @compiled/babel-plugin v2.0.0 */
import "./SelectionExtensionNestedDropdownMenu.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { EXTENSION_MENU_ITEM_TEST_ID } from '@atlaskit/editor-common/block-menu';
import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
import Lozenge from '@atlaskit/lozenge';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box } from '@atlaskit/primitives/compiled';
import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
const BLOCK_MENU_TEMPLATES_SPOTLIGHT_PORTAL_SELECTOR = '[data-test-id="block-menu-templates-spotlight-portal-container"]';
const shouldIgnoreBlockMenuTemplatesSpotlightCloseEvent = event => event.target instanceof Element && event.target.closest(BLOCK_MENU_TEMPLATES_SPOTLIGHT_PORTAL_SELECTOR) !== null;
const styles = {
lozenge: "_18u012x7"
};
const ChildItems = ({
nestedDropdownMenu
}) => {
const childItems = nestedDropdownMenu.getMenuItems();
return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, childItems.map(dropdownItem => /*#__PURE__*/React.createElement(SelectionExtensionDropdownItem, {
key: dropdownItem.key || dropdownItem.label,
dropdownItem: dropdownItem
})));
};
export const SelectionExtensionNestedDropdownMenu = ({
nestedDropdownMenu
}) => {
var _nestedDropdownMenu$l;
const IconComponent = nestedDropdownMenu.icon;
const {
api,
extensionKey,
extensionSource,
extensionLocation
} = useSelectionExtensionComponentContext();
const handleClick = () => {
var _api$analytics;
(_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
action: ACTION.CLICKED,
actionSubject: ACTION_SUBJECT.BUTTON,
actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_DROPDOWN,
eventType: EVENT_TYPE.TRACK,
attributes: {
extensionKey,
extensionSource,
extensionLocation,
extensionElement: 'nested-dropdown',
extensionItemKey: nestedDropdownMenu.key
}
});
};
const lozengeLabel = (_nestedDropdownMenu$l = nestedDropdownMenu.lozenge) === null || _nestedDropdownMenu$l === void 0 ? void 0 : _nestedDropdownMenu$l.label;
const elemAfterText = lozengeLabel && fg('platform_editor_block_menu_v2_patch_2') ? /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: styles.lozenge
}, /*#__PURE__*/React.createElement(Lozenge, {
appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
}, lozengeLabel)) : undefined;
return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
testId: EXTENSION_MENU_ITEM_TEST_ID,
text: nestedDropdownMenu.label,
elemAfterText: elemAfterText,
elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
label: "",
size: "small"
}) : undefined,
elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
label: "",
size: "small"
}),
onClick: handleClick,
dropdownTestId: "editor-selection-extension-menu",
shouldTitleWrap: false,
tooltipContent: nestedDropdownMenu.label,
"data-extension-item-key": nestedDropdownMenu.key,
shouldIgnoreCloseEvent: fg('cc_blocks_changeboarding') ? shouldIgnoreBlockMenuTemplatesSpotlightCloseEvent : undefined
}, /*#__PURE__*/React.createElement(ChildItems, {
nestedDropdownMenu: nestedDropdownMenu
}));
};