@atlaskit/editor-plugin-quick-insert/dist/esm/ui/ModalElementBrowser/ModalElementBrowser.js

Quick insert plugin for @atlaskit/editor-core

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useCallback, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl, useIntl } from 'react-intl';
import Button from '@atlaskit/button';
import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
import { messages } from '@atlaskit/editor-common/quick-insert';
import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
import Modal, { CloseButton, ModalTransition, useModal } from '@atlaskit/modal-dialog';
import { getCategories } from './categories';
export var MODAL_WRAPPER_PADDING = 16;
var actionsStyles = css({
  display: 'inline-flex',
  margin: "0 ".concat("var(--ds-space-negative-050, -4px)")
});
var actionItemStyles = css({
  flex: '1 0 auto',
  margin: "0 ".concat("var(--ds-space-050, 4px)")
});
var wrapperStyles = css({
  display: 'flex',
  flex: '1 1 auto',
  boxSizing: 'border-box',
  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0 10px"),
  overflow: 'hidden',
  backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
  borderRadius: "var(--ds-radius-small, 3px)"
});
var modalFooterStyles = css({
  display: 'flex',
  padding: "var(--ds-space-200, 16px)",
  position: 'relative',
  alignItems: 'center',
  justifyContent: 'space-between'
});
var modalCloseButtonStyles = css({
  display: 'flex',
  justifyContent: 'flex-end',
  paddingBlockStart: "var(--ds-space-200, 16px)",
  paddingInline: "var(--ds-space-200, 16px)"
});
var ModalElementBrowser = function ModalElementBrowser(props) {
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    selectedItem = _useState2[0],
    setSelectedItem = _useState2[1];
  var helpUrl = props.helpUrl,
    intl = props.intl,
    onInsertItemFn = props.onInsertItem;
  var onSelectItem = useCallback(function (item) {
    setSelectedItem(item);
  }, [setSelectedItem]);
  var onInsertItem = useCallback(function (item) {
    onInsertItemFn(item);
  }, [onInsertItemFn]);
  var RenderFooter = useCallback(function () {
    return jsx(Footer
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    , {
      onInsert: function onInsert() {
        return onInsertItem(selectedItem);
      },
      beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(messages.help)) : undefined
    });
  }, [onInsertItem, selectedItem, helpUrl, intl]);
  var RenderBody = useCallback(function () {
    return jsx("div", {
      css: wrapperStyles
    }, jsx(ElementBrowser, {
      categories: getCategories(props.intl),
      getItems: props.getItems,
      showSearch: true,
      showCategories: true,
      mode: "full",
      onSelectItem: onSelectItem,
      onInsertItem: onInsertItem,
      emptyStateHandler: props.emptyStateHandler,
      autoFocusSearch: false
    }));
  }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
  var label = intl.formatMessage(messages.browse);
  return jsx("div", {
    "data-editor-popup": true
  }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
    label: label,
    testId: "element-browser-modal-dialog",
    stackIndex: 0,
    key: "element-browser-modal",
    onClose: props.onClose,
    onCloseComplete: props.onCloseComplete,
    height: "664px",
    width: "x-large",
    shouldReturnFocus: props.shouldReturnFocus
  }, jsx("div", {
    css: modalCloseButtonStyles
  }, jsx(CloseButton, {
    onClick: props.onClose
  })), jsx(RenderBody, null), jsx(RenderFooter, null))));
};
ModalElementBrowser.displayName = 'ModalElementBrowser';
var Footer = function Footer(_ref) {
  var onInsert = _ref.onInsert,
    beforeElement = _ref.beforeElement;
  var intl = useIntl();
  var _useModal = useModal(),
    onClose = _useModal.onClose;
  return jsx("div", {
    css: modalFooterStyles
  }, beforeElement ? beforeElement : jsx("span", null), jsx("div", {
    css: actionsStyles
  }, jsx("div", {
    css: actionItemStyles
  }, jsx(Button, {
    appearance: "primary",
    onClick: onInsert,
    testId: "ModalElementBrowser__insert-button"
  }, intl.formatMessage(messages.insert))), jsx("div", {
    css: actionItemStyles
  }, jsx(Button, {
    appearance: "subtle",
    onClick: onClose,
    testId: "ModalElementBrowser__close-button"
  }, intl.formatMessage(messages.close)))));
};
var HelpLink = function HelpLink(url, helpText) {
  return jsx(Button, {
    iconBefore: jsx(QuestionCircleIcon, {
      label: ""
    }),
    appearance: "subtle-link",
    href: url,
    target: "_blank",
    testId: "ModalElementBrowser__help-button"
  }, helpText);
};
var _default_1 = injectIntl(ModalElementBrowser);
export default _default_1;