@atlaskit/editor-plugin-quick-insert/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowserCategories.js

Quick insert plugin for @atlaskit/editor-core

/* RegistryElementBrowserCategories.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./RegistryElementBrowserCategories.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback } from 'react';
import { useIntl } from 'react-intl';
import Button from '@atlaskit/button/default/button';
import { BLOCK_TEMPLATES_SECTION, CREATE_SECTION, DATA_AND_CHARTS_SECTION, EMBED_SECTION, MEDIA_SECTION, OTHER_SECTION, ROVO_SECTION, STRUCTURE_SECTION, TEXT_FORMATTING_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
import { messages } from '@atlaskit/editor-common/quick-insert/messages';
import { Text } from '@atlaskit/primitives/compiled/text';
const sectionMessages = {
  [BLOCK_TEMPLATES_SECTION.key]: messages.categoryBlockTemplates,
  [CREATE_SECTION.key]: messages.categoryCreate,
  [DATA_AND_CHARTS_SECTION.key]: messages.categoryDataAndCharts,
  [EMBED_SECTION.key]: messages.categoryEmbed,
  [MEDIA_SECTION.key]: messages.categoryMedia,
  [OTHER_SECTION.key]: messages.categoryOther,
  [ROVO_SECTION.key]: messages.categoryRovo,
  [STRUCTURE_SECTION.key]: messages.categoryStructure,
  [TEXT_FORMATTING_SECTION.key]: messages.categoryTextFormatting
};
const categoryGridStyles = null;
export const RegistryElementBrowserCategories = ({
  section,
  sections,
  onSectionClick,
  selectedButtonRef
}) => {
  const {
    formatMessage
  } = useIntl();
  const isAllSelected = section === undefined;
  const onCategoryKeyDown = useCallback(event => {
    var _event$currentTarget$, _event$currentTarget$2, _event$currentTarget$3, _event$currentTarget$4;
    if (!['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
      return;
    }
    const isForward = event.key === 'ArrowDown' || event.key === 'ArrowRight';
    const 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.createElement("div", {
    "aria-label": formatMessage({
      defaultMessage: 'Element categories',
      id: 'editor.quick-insert.categories-label'
    }),
    "data-testid": "registry-element-browser-categories",
    role: "group",
    className: ax(["_zulpu2gc _1rjc1b66 _18zr1b66 _ae4vv2br _1wpzv2br _1e0c11p5 _yv0ei47z _1ul9idpf _kqsw1if8 _154iidpf _j6eb1bhr _1vkb1ris _ttrw1bp4 _1ikaglyw _jtyui47z _ysu51wug _1hmw15vq _1g771osq _lmrjkb7n"])
  }, /*#__PURE__*/React.createElement(Button, {
    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.createElement(Text, {
    align: "start",
    color: "inherit",
    maxLines: 1,
    weight: "medium"
  }, formatMessage({
    defaultMessage: 'All',
    id: 'editor.quick-insert.all'
  }))), sections.map(entry => {
    var _sectionMessages;
    return /*#__PURE__*/React.createElement(Button, {
      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.createElement(Text, {
      align: "start",
      color: "inherit",
      maxLines: 1,
      weight: "medium"
    }, formatMessage((_sectionMessages = sectionMessages[entry.key]) !== null && _sectionMessages !== void 0 ? _sectionMessages : messages.categoryOther)));
  }));
};