@atlaskit/editor-plugin-quick-insert
Version:
Quick insert plugin for @atlaskit/editor-core
235 lines • 10.8 kB
JavaScript
/* RegistryElementBrowser.tsx generated by @compiled/babel-plugin v3.0.2 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./RegistryElementBrowser.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useIntl } from 'react-intl';
import IconButton from '@atlaskit/button/icon/button';
import { MENU, RECOMMENDED_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
import { getMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-get-menu-footer-section-key';
import { getSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-get-section-overflow-item-key';
import Heading from '@atlaskit/heading/heading';
import CrossIcon from '@atlaskit/icon/core/cross';
import ModalBody from '@atlaskit/modal-dialog/modal-body';
import Modal from '@atlaskit/modal-dialog/modal-dialog';
import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
import ModalHeader from '@atlaskit/modal-dialog/modal-header';
import ModalTitle from '@atlaskit/modal-dialog/modal-title';
import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import Textfield from '@atlaskit/textfield/text-field';
import { createRegistryElementBrowserModel, getInitialRegistryElementBrowserSection, getRegistryElementBrowserItems } from './model';
import { RegistryElementBrowserCategories } from './RegistryElementBrowserCategories';
import { RegistryElementBrowserFooter } from './RegistryElementBrowserFooter';
import { RegistryElementBrowserSearchResults } from './RegistryElementBrowserSearchResults';
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';
export var 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 = useIntl(),
formatMessage = _useIntl.formatMessage;
var model = useMemo(function () {
return createRegistryElementBrowserModel(components, {
footerKey: getMenuFooterSectionKey(MENU.key),
overflowKeys: new Set(components.filter(function (component) {
return component.type === 'menu-section';
}).map(function (component) {
return getSectionOverflowItemKey(component.key);
})),
recommendedSectionKey: RECOMMENDED_SECTION.key,
rootKey: MENU.key
});
}, [components]);
var _useState = useState(''),
_useState2 = _slicedToArray(_useState, 2),
query = _useState2[0],
setQuery = _useState2[1];
var _useState3 = useState(function () {
return getInitialRegistryElementBrowserSection(model, defaultSection);
}),
_useState4 = _slicedToArray(_useState3, 2),
section = _useState4[0],
setSection = _useState4[1];
var _useState5 = useState(),
_useState6 = _slicedToArray(_useState5, 2),
selectedKey = _useState6[0],
setSelectedKey = _useState6[1];
var searchInputRef = useRef(null);
var wasOpen = useRef(false);
var previousIsOffline = useRef(isOffline);
useEffect(function () {
if (isOpen && !wasOpen.current) {
setQuery('');
setSection(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 = useMemo(function () {
return 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);
useEffect(function () {
if (previousIsOffline.current !== isOffline) {
setSelectedKey(undefined);
onClearSelection();
}
previousIsOffline.current = isOffline;
}, [isOffline, onClearSelection]);
var onSearchChange = useCallback(function (event) {
setQuery(event.currentTarget.value);
setSelectedKey(undefined);
onClearSelection();
}, [onClearSelection]);
var onSectionClick = useCallback(function (event) {
setQuery('');
setSection(event.currentTarget.dataset.section || undefined);
setSelectedKey(undefined);
onClearSelection();
}, [onClearSelection]);
var onClearSearch = useCallback(function () {
var _searchInputRef$curre;
setQuery('');
setSelectedKey(undefined);
onClearSelection();
(_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
}, [onClearSelection]);
var onRegistrySelect = useCallback(function (key, handler) {
setSelectedKey(key);
onSelect(handler);
}, [onSelect]);
var onModalOpenComplete = 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 = 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.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
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.createElement(ModalHeader, null, /*#__PURE__*/React.createElement("div", {
className: ax(["_zulp1fka _1e0c11p5 _yv0e1xuv _1bsb1osq _lk4ji47z"])
}, fg('platform_dst_modal-dialog-use-modal-title') ? /*#__PURE__*/React.createElement(ModalTitle, null, formatMessage({
defaultMessage: 'Insert elements',
id: 'editor.quick-insert.title'
})) : /*#__PURE__*/React.createElement(Heading, {
size: "medium"
}, formatMessage({
defaultMessage: 'Insert elements',
id: 'editor.quick-insert.title'
})), /*#__PURE__*/React.createElement("div", {
className: ax(["_zulp1ejb _4cvr1h6o _1e0c11p5 _yv0ehpfy _1bsb1osq"])
}, /*#__PURE__*/React.createElement(Textfield, {
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.createElement(IconButton, {
appearance: "subtle",
icon: CrossIcon,
label: formatMessage({
defaultMessage: 'Clear search',
id: 'editor.quick-insert.clear-search'
}),
onClick: onClearSearch,
spacing: "compact"
})))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
className: ax(["_zulp1fka _1e0c11p5 _yv0e1xuv _lk4ji47z"])
}, /*#__PURE__*/React.createElement(RegistryElementBrowserCategories, {
section: section,
sections: model.sections,
onSectionClick: onSectionClick
}), /*#__PURE__*/React.createElement(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.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(RegistryElementBrowserFooter, {
helpUrl: helpUrl,
isInsertEnabled: Boolean(selectedKey),
onClose: onClose,
onConfirmInsert: onConfirmInsert,
resultCount: resultCount
}))));
};