@atlaskit/editor-plugin-quick-insert
Version:
Quick insert plugin for @atlaskit/editor-core
89 lines (88 loc) • 5.98 kB
JavaScript
/* RegistryElementBrowserCategories.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.RegistryElementBrowserCategories = void 0;
require("./RegistryElementBrowserCategories.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
var _keys = require("@atlaskit/editor-common/quick-insert/keys");
var _messages = require("@atlaskit/editor-common/quick-insert/messages");
var _text = require("@atlaskit/primitives/compiled/text");
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 sectionMessages = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys.BLOCK_TEMPLATES_SECTION.key, _messages.messages.categoryBlockTemplates), _keys.CREATE_SECTION.key, _messages.messages.categoryCreate), _keys.DATA_AND_CHARTS_SECTION.key, _messages.messages.categoryDataAndCharts), _keys.EMBED_SECTION.key, _messages.messages.categoryEmbed), _keys.MEDIA_SECTION.key, _messages.messages.categoryMedia), _keys.OTHER_SECTION.key, _messages.messages.categoryOther), _keys.ROVO_SECTION.key, _messages.messages.categoryRovo), _keys.STRUCTURE_SECTION.key, _messages.messages.categoryStructure), _keys.TEXT_FORMATTING_SECTION.key, _messages.messages.categoryTextFormatting);
var categoryGridStyles = null;
var RegistryElementBrowserCategories = exports.RegistryElementBrowserCategories = function RegistryElementBrowserCategories(_ref) {
var section = _ref.section,
sections = _ref.sections,
onSectionClick = _ref.onSectionClick,
selectedButtonRef = _ref.selectedButtonRef;
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var isAllSelected = section === undefined;
var onCategoryKeyDown = (0, _react.useCallback)(function (event) {
var _event$currentTarget$, _event$currentTarget$2, _event$currentTarget$3, _event$currentTarget$4;
if (!['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
return;
}
var isForward = event.key === 'ArrowDown' || event.key === 'ArrowRight';
var nextButton = isForward ? (_event$currentTarget$ = event.currentTarget.nextElementSibling) !== null && _event$currentTarget$ !== void 0 ? _event$currentTarget$ : (_event$currentTarget$2 = event.currentTarget.parentElement) === null || _event$currentTarget$2 === void 0 ? void 0 : _event$currentTarget$2.firstElementChild : (_event$currentTarget$3 = event.currentTarget.previousElementSibling) !== null && _event$currentTarget$3 !== void 0 ? _event$currentTarget$3 : (_event$currentTarget$4 = event.currentTarget.parentElement) === null || _event$currentTarget$4 === void 0 ? void 0 : _event$currentTarget$4.lastElementChild;
if (nextButton) {
event.preventDefault();
nextButton.focus();
nextButton.click();
}
}, []);
return /*#__PURE__*/_react.default.createElement("div", {
"aria-label": formatMessage({
defaultMessage: 'Element categories',
id: 'editor.quick-insert.categories-label'
}),
"data-testid": "registry-element-browser-categories",
role: "group",
className: (0, _runtime.ax)(["_zulpu2gc _1rjc1b66 _18zr1b66 _ae4vv2br _1wpzv2br _1e0c11p5 _yv0ei47z _1ul9idpf _kqsw1if8 _154iidpf _j6eb1bhr _1vkb1ris _ttrw1bp4 _1ikaglyw _jtyui47z _ysu51wug _1hmw15vq _1g771osq _lmrjkb7n"])
}, /*#__PURE__*/_react.default.createElement(_button.default, {
appearance: 'subtle',
"aria-pressed": isAllSelected,
"data-section": "",
onClick: onSectionClick,
onKeyDown: onCategoryKeyDown,
ref: isAllSelected ? selectedButtonRef : undefined,
isSelected: isAllSelected,
shouldFitContainer: true,
tabIndex: isAllSelected ? 0 : -1
}, /*#__PURE__*/_react.default.createElement(_text.Text, {
align: "start",
color: "inherit",
maxLines: 1,
weight: "medium"
}, formatMessage({
defaultMessage: 'All',
id: 'editor.quick-insert.all'
}))), sections.map(function (entry) {
var _sectionMessages2;
return /*#__PURE__*/_react.default.createElement(_button.default, {
appearance: 'subtle',
"aria-pressed": section === entry.key,
"data-section": entry.key,
key: entry.key,
onClick: onSectionClick,
onKeyDown: onCategoryKeyDown,
ref: section === entry.key ? selectedButtonRef : undefined,
isSelected: section === entry.key,
shouldFitContainer: true,
tabIndex: section === entry.key ? 0 : -1
}, /*#__PURE__*/_react.default.createElement(_text.Text, {
align: "start",
color: "inherit",
maxLines: 1,
weight: "medium"
}, formatMessage((_sectionMessages2 = sectionMessages[entry.key]) !== null && _sectionMessages2 !== void 0 ? _sectionMessages2 : _messages.messages.categoryOther)));
}));
};