@atlaskit/editor-plugin-quick-insert
Version:
Quick insert plugin for @atlaskit/editor-core
244 lines (243 loc) • 12.7 kB
JavaScript
/* RegistryElementBrowser.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RegistryElementBrowser = void 0;
require("./RegistryElementBrowser.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
var _keys = require("@atlaskit/editor-common/quick-insert/keys");
var _typeAheadGetMenuFooterSectionKey = require("@atlaskit/editor-common/type-ahead-get-menu-footer-section-key");
var _typeAheadGetSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-get-section-overflow-item-key");
var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
var _modalBody = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-body"));
var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
var _modalFooter = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-footer"));
var _modalHeader = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-header"));
var _modalTitle = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-title"));
var _modalTransition = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-transition"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _textField = _interopRequireDefault(require("@atlaskit/textfield/text-field"));
var _model = require("./model");
var _RegistryElementBrowserCategories = require("./RegistryElementBrowserCategories");
var _RegistryElementBrowserFooter = require("./RegistryElementBrowserFooter");
var _RegistryElementBrowserSearchResults = require("./RegistryElementBrowserSearchResults");
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 browserGridTemplateColumns = '182px minmax(0, 1fr)';
var categoryColumnGap = "calc(".concat("var(--ds-space-200, 16px)", " + ", "var(--ds-space-150, 12px)", ")");
var browserLayoutStyles = null;
var headerContentStyles = null;
var headerSearchStyles = null;
var resultsId = 'registry-element-browser-results';
var modalTestId = 'registry-element-browser-modal';
var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryElementBrowser(_ref) {
var _model$fallbackItems$, _model$fallbackItems;
var components = _ref.components,
emptyStateHandler = _ref.emptyStateHandler,
defaultSection = _ref.defaultSection,
helpUrl = _ref.helpUrl,
editorView = _ref.editorView,
_ref$isLoading = _ref.isLoading,
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
isOffline = _ref.isOffline,
isOpen = _ref.isOpen,
onClearSelection = _ref.onClearSelection,
onClose = _ref.onClose,
onCloseComplete = _ref.onCloseComplete,
onConfirmInsert = _ref.onConfirmInsert,
onSelect = _ref.onSelect;
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var model = (0, _react.useMemo)(function () {
return (0, _model.createRegistryElementBrowserModel)(components, {
footerKey: (0, _typeAheadGetMenuFooterSectionKey.getMenuFooterSectionKey)(_keys.MENU.key),
overflowKeys: new Set(components.filter(function (component) {
return component.type === 'menu-section';
}).map(function (component) {
return (0, _typeAheadGetSectionOverflowItemKey.getSectionOverflowItemKey)(component.key);
})),
recommendedSectionKey: _keys.RECOMMENDED_SECTION.key,
rootKey: _keys.MENU.key
});
}, [components]);
var _useState = (0, _react.useState)(''),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
query = _useState2[0],
setQuery = _useState2[1];
var _useState3 = (0, _react.useState)(function () {
return (0, _model.getInitialRegistryElementBrowserSection)(model, defaultSection);
}),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
section = _useState4[0],
setSection = _useState4[1];
var _useState5 = (0, _react.useState)(),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
selectedKey = _useState6[0],
setSelectedKey = _useState6[1];
var searchInputRef = (0, _react.useRef)(null);
var wasOpen = (0, _react.useRef)(false);
var previousIsOffline = (0, _react.useRef)(isOffline);
(0, _react.useEffect)(function () {
if (isOpen && !wasOpen.current) {
setQuery('');
setSection((0, _model.getInitialRegistryElementBrowserSection)(model, defaultSection));
// This clears local visual state and the parent-held insertion handler together.
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates
setSelectedKey(undefined);
onClearSelection();
}
wasOpen.current = isOpen;
}, [defaultSection, isOpen, model, onClearSelection]);
var items = (0, _react.useMemo)(function () {
return (0, _model.getRegistryElementBrowserItems)({
formatMessage: formatMessage,
model: model,
query: query,
section: section
});
}, [formatMessage, model, query, section]);
var resultCount = items.length || (!isLoading && query.trim() ? (_model$fallbackItems$ = (_model$fallbackItems = model.fallbackItems) === null || _model$fallbackItems === void 0 ? void 0 : _model$fallbackItems.length) !== null && _model$fallbackItems$ !== void 0 ? _model$fallbackItems$ : 0 : 0);
(0, _react.useEffect)(function () {
if (previousIsOffline.current !== isOffline) {
setSelectedKey(undefined);
onClearSelection();
}
previousIsOffline.current = isOffline;
}, [isOffline, onClearSelection]);
var onSearchChange = (0, _react.useCallback)(function (event) {
setQuery(event.currentTarget.value);
setSelectedKey(undefined);
onClearSelection();
}, [onClearSelection]);
var onSectionClick = (0, _react.useCallback)(function (event) {
setQuery('');
setSection(event.currentTarget.dataset.section || undefined);
setSelectedKey(undefined);
onClearSelection();
}, [onClearSelection]);
var onClearSearch = (0, _react.useCallback)(function () {
var _searchInputRef$curre;
setQuery('');
setSelectedKey(undefined);
onClearSelection();
(_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
}, [onClearSelection]);
var onRegistrySelect = (0, _react.useCallback)(function (key, handler) {
setSelectedKey(key);
onSelect(handler);
}, [onSelect]);
var onModalOpenComplete = (0, _react.useCallback)(function (node) {
node.style.borderRadius = "var(--ds-radius-large, 8px)";
var footer = node.querySelector("[data-testid=\"".concat(modalTestId, "--footer\"]"));
footer === null || footer === void 0 || footer.style.setProperty('box-sizing', 'border-box');
footer === null || footer === void 0 || footer.style.setProperty('height', '64px');
footer === null || footer === void 0 || footer.style.setProperty('padding-block', "var(--ds-space-200, 16px)");
var scrollableBody = node.querySelector("[data-testid=\"".concat(modalTestId, "--scrollable\"]"));
scrollableBody === null || scrollableBody === void 0 || scrollableBody.style.setProperty('border-block-start', 'none');
scrollableBody === null || scrollableBody === void 0 || scrollableBody.style.setProperty('border-block-end', 'none');
}, []);
var onKeyDown = (0, _react.useCallback)(function (event) {
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
var _resultCollection$que;
var resultCollection = event.currentTarget.ownerDocument.getElementById(resultsId);
var options = Array.from((_resultCollection$que = resultCollection === null || resultCollection === void 0 ? void 0 : resultCollection.querySelectorAll('[role="option"]:not([aria-disabled="true"]):not([disabled])')) !== null && _resultCollection$que !== void 0 ? _resultCollection$que : []);
var currentIndex = options.findIndex(function (option) {
return option === event.currentTarget.ownerDocument.activeElement;
});
var nextIndex = event.key === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
var nextOption = options.at(nextIndex);
if (nextOption) {
event.preventDefault();
nextOption.focus();
}
return;
}
if (event.key === 'Escape') {
event.preventDefault();
onClose();
return;
}
if (event.key === 'Enter' && selectedKey) {
event.preventDefault();
onConfirmInsert();
}
}, [onClose, onConfirmInsert, selectedKey]);
return /*#__PURE__*/_react.default.createElement(_modalTransition.default, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
label: formatMessage({
defaultMessage: 'Insert elements',
id: 'editor.quick-insert.title'
}),
height: "664px",
onClose: onClose,
onCloseComplete: onCloseComplete,
onOpenComplete: onModalOpenComplete,
testId: modalTestId,
width: "min(968px, calc(100vw - 32px))"
}, /*#__PURE__*/_react.default.createElement(_modalHeader.default, null, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _runtime.ax)(["_zulp1fka _1e0c11p5 _yv0e1xuv _1bsb1osq _lk4ji47z"])
}, (0, _fg.fg)('platform_dst_modal-dialog-use-modal-title') ? /*#__PURE__*/_react.default.createElement(_modalTitle.default, null, formatMessage({
defaultMessage: 'Insert elements',
id: 'editor.quick-insert.title'
})) : /*#__PURE__*/_react.default.createElement(_heading.default, {
size: "medium"
}, formatMessage({
defaultMessage: 'Insert elements',
id: 'editor.quick-insert.title'
})), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _runtime.ax)(["_zulp1ejb _4cvr1h6o _1e0c11p5 _yv0ehpfy _1bsb1osq"])
}, /*#__PURE__*/_react.default.createElement(_textField.default, {
autoFocus: true,
"aria-controls": resultsId,
"aria-label": formatMessage({
defaultMessage: 'Search elements',
id: 'editor.quick-insert.search'
}),
isCompact: true,
name: "registry-element-browser-search",
onChange: onSearchChange,
onKeyDown: onKeyDown,
ref: searchInputRef,
value: query
}), /*#__PURE__*/_react.default.createElement(_button.default, {
appearance: "subtle",
icon: _cross.default,
label: formatMessage({
defaultMessage: 'Clear search',
id: 'editor.quick-insert.clear-search'
}),
onClick: onClearSearch,
spacing: "compact"
})))), /*#__PURE__*/_react.default.createElement(_modalBody.default, null, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _runtime.ax)(["_zulp1fka _1e0c11p5 _yv0e1xuv _lk4ji47z"])
}, /*#__PURE__*/_react.default.createElement(_RegistryElementBrowserCategories.RegistryElementBrowserCategories, {
section: section,
sections: model.sections,
onSectionClick: onSectionClick
}), /*#__PURE__*/_react.default.createElement(_RegistryElementBrowserSearchResults.RegistryElementBrowserSearchResults, {
editorView: editorView,
emptyStateHandler: emptyStateHandler,
isLoading: isLoading,
isOffline: isOffline,
items: items,
fallbackItems: model.fallbackItems,
query: query,
resultsId: resultsId,
section: section,
selectedKey: selectedKey,
onKeyDown: onKeyDown,
onSelect: onRegistrySelect
}))), /*#__PURE__*/_react.default.createElement(_modalFooter.default, null, /*#__PURE__*/_react.default.createElement(_RegistryElementBrowserFooter.RegistryElementBrowserFooter, {
helpUrl: helpUrl,
isInsertEnabled: Boolean(selectedKey),
onClose: onClose,
onConfirmInsert: onConfirmInsert,
resultCount: resultCount
}))));
};