@atlaskit/editor-plugin-quick-insert
Version:
Quick insert plugin for @atlaskit/editor-core
130 lines (129 loc) • 6.07 kB
JavaScript
/* ToolbarQuickInsertMenu.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ToolbarQuickInsertMenu = void 0;
require("./ToolbarQuickInsertMenu.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireWildcard(require("react"));
var _list = require("@atlaskit/editor-common/registered-menu/list");
var _box = require("@atlaskit/primitives/compiled/box");
var _getQuickInsertMenuItemId = require("./getQuickInsertMenuItemId");
var _QuickInsertEmptyState = require("./QuickInsertEmptyState");
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); }
var MENU_FOOTER_HEIGHT = 45;
var LIST_WIDTH = 350;
var styles = {
content: "_1e0c1txw _2lx21bp4 _1tkeidpf",
scrollable: "_16jlkb7n _1tkeidpf _18m91wug",
footer: "_1o9zidpf",
externalControls: "_1i531l7x _15a5nqa1 _uwhke4h9 _1q51u2gc _85i5u2gc",
footerDivider: "_1i531l7x _15a5nqa1 _uwhke4h9 _1o9zidpf"
};
var ToolbarQuickInsertMenu = exports.ToolbarQuickInsertMenu = function ToolbarQuickInsertMenu(_ref) {
var Item = _ref.Item,
model = _ref.model,
emptyStateHandler = _ref.emptyStateHandler,
listLabel = _ref.listLabel,
activePreviewItemKey = _ref.activePreviewItemKey,
itemCount = _ref.itemCount,
listId = _ref.listId,
maxHeight = _ref.maxHeight,
rows = _ref.rows,
onItemBlur = _ref.onItemBlur,
onItemFocus = _ref.onItemFocus,
onItemHover = _ref.onItemHover,
onItemLeave = _ref.onItemLeave,
onItemVisibilityChange = _ref.onItemVisibilityChange,
onRenderedItemsChange = _ref.onRenderedItemsChange,
query = _ref.query,
selectedItemIndex = _ref.selectedItemIndex,
selectionSource = _ref.selectionSource;
var footerItemIndex = itemCount - 1;
var footerItemId = (0, _getQuickInsertMenuItemId.getQuickInsertMenuItemId)(listId, footerItemIndex);
var isEmptySearch = query !== '' && model.sections.length === 0;
var hasNoSearchResults = model.sections.length === 0 && model.fallbackItems.length === 0;
var externalControls = isEmptySearch ? emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
mode: 'inline',
searchTerm: query,
showNoResultsMessage: false
}) : null;
var onFooterItemFocus = (0, _react.useCallback)(function () {
return onItemFocus(footerItemIndex);
}, [footerItemIndex, onItemFocus]);
var onFooterItemHover = (0, _react.useCallback)(function () {
return onItemHover(footerItemIndex);
}, [footerItemIndex, onItemHover]);
var listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
var contentStyle = {
maxHeight: maxHeight
};
var getItemId = (0, _react.useCallback)(function (_ref2) {
var itemIndex = _ref2.itemIndex;
return (0, _getQuickInsertMenuItemId.getQuickInsertMenuItemId)(listId, itemIndex);
}, [listId]);
var onScrollableContentScroll = (0, _react.useCallback)(function (event) {
if (event.target === event.currentTarget && activePreviewItemKey) {
onItemVisibilityChange(activePreviewItemKey, false);
}
}, [activePreviewItemKey, onItemVisibilityChange]);
if (!model.root) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_box.Box, {
xcss: styles.content,
style: contentStyle
}, /*#__PURE__*/_react.default.createElement(_box.Box, {
xcss: styles.scrollable,
onScroll: onScrollableContentScroll
}, /*#__PURE__*/_react.default.createElement(_box.Box, {
"aria-label": listLabel,
"aria-owns": model.footer ? footerItemId : undefined,
id: listId,
role: "listbox"
}, rows.length > 0 && /*#__PURE__*/_react.default.createElement(_list.RegisteredMenuList, {
rows: rows,
Item: Item,
width: LIST_WIDTH,
maxHeight: listMaxHeight,
getItemId: getItemId,
activeItemKey: activePreviewItemKey,
selectedItemIndex: selectedItemIndex,
selectionSource: selectionSource,
scrollResetKey: query,
onItemHover: onItemHover,
onItemFocus: onItemFocus,
onItemBlur: onItemBlur,
onItemLeave: onItemLeave,
onItemVisibilityChange: onItemVisibilityChange,
onRenderedItemsChange: onRenderedItemsChange,
role: "group",
tabIndex: null,
omitAriaReadonly: true,
lastRowPadding: "space.100",
scrollTo: "top-on-reset"
})), query !== '' && hasNoSearchResults && /*#__PURE__*/_react.default.createElement(_QuickInsertEmptyState.QuickInsertEmptyState, {
mode: "inline"
}), externalControls && /*#__PURE__*/_react.default.createElement(_box.Box, {
testId: "registered-insert-menu-external-controls",
xcss: styles.externalControls
}, externalControls)), model.footer && /*#__PURE__*/_react.default.createElement(_box.Box, {
xcss: styles.footer
}, /*#__PURE__*/_react.default.createElement(_box.Box, {
testId: "registered-insert-menu-footer",
xcss: styles.footer
}, !isEmptySearch || !hasNoSearchResults || Boolean(externalControls) ? /*#__PURE__*/_react.default.createElement(_box.Box, {
"aria-hidden": "true",
xcss: styles.footerDivider
}) : null, /*#__PURE__*/_react.default.createElement(_box.Box, {
onFocus: onFooterItemFocus,
onMouseMove: onFooterItemHover
}, /*#__PURE__*/_react.default.createElement(Item, {
id: footerItemId,
isSelected: selectedItemIndex === footerItemIndex,
isActive: false,
registration: model.footer
})))));
};