@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 from 'react';
import { useIntl } from 'react-intl';
import Button from '@atlaskit/button/default/button';
import { BLOCK_TEMPLATES_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,
  [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
}) => {
  const {
    formatMessage
  } = useIntl();
  const isAllSelected = section === undefined;
  return /*#__PURE__*/React.createElement("div", {
    "aria-label": formatMessage({
      defaultMessage: 'Element categories',
      id: 'editor.quick-insert.categories-label'
    }),
    "data-testid": "registry-element-browser-categories",
    className: ax(["_zulpu2gc _ae4vv2br _1wpzv2br _1e0c11p5 _yv0ei47z _kqsw1if8 _154iv77o _qs0g1bhr _1w2e1ris _1ato1bp4 _lk4jglyw _1cgyi47z _1s8e1wug _pevy15vq _zvu9kb7n"])
  }, /*#__PURE__*/React.createElement(Button, {
    appearance: 'subtle',
    "aria-pressed": isAllSelected,
    "data-section": "",
    onClick: onSectionClick,
    isSelected: isAllSelected,
    shouldFitContainer: true
  }, /*#__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,
      isSelected: section === entry.key,
      shouldFitContainer: true
    }, /*#__PURE__*/React.createElement(Text, {
      align: "start",
      color: "inherit",
      maxLines: 1,
      weight: "medium"
    }, formatMessage((_sectionMessages = sectionMessages[entry.key]) !== null && _sectionMessages !== void 0 ? _sectionMessages : messages.categoryOther)));
  }));
};