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

Quick insert plugin for @atlaskit/editor-core

/**
 * @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 const MODAL_WRAPPER_PADDING = 16;
const actionsStyles = css({
  display: 'inline-flex',
  margin: `0 ${"var(--ds-space-negative-050, -4px)"}`
});
const actionItemStyles = css({
  flex: '1 0 auto',
  margin: `0 ${"var(--ds-space-050, 4px)"}`
});
const wrapperStyles = css({
  display: 'flex',
  flex: '1 1 auto',
  boxSizing: 'border-box',
  padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0 10px`,
  overflow: 'hidden',
  backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
  borderRadius: "var(--ds-radius-small, 3px)"
});
const modalFooterStyles = css({
  display: 'flex',
  padding: `${"var(--ds-space-200, 16px)"}`,
  position: 'relative',
  alignItems: 'center',
  justifyContent: 'space-between'
});
const modalCloseButtonStyles = css({
  display: 'flex',
  justifyContent: 'flex-end',
  paddingBlockStart: "var(--ds-space-200, 16px)",
  paddingInline: "var(--ds-space-200, 16px)"
});
const ModalElementBrowser = props => {
  const [selectedItem, setSelectedItem] = useState();
  const {
    helpUrl,
    intl,
    onInsertItem: onInsertItemFn
  } = props;
  const onSelectItem = useCallback(item => {
    setSelectedItem(item);
  }, [setSelectedItem]);
  const onInsertItem = useCallback(item => {
    onInsertItemFn(item);
  }, [onInsertItemFn]);
  const RenderFooter = useCallback(() => 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: () => onInsertItem(selectedItem),
    beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(messages.help)) : undefined
  }), [onInsertItem, selectedItem, helpUrl, intl]);
  const RenderBody = useCallback(() => 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]);
  const 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';
const Footer = ({
  onInsert,
  beforeElement
}) => {
  const intl = useIntl();
  const {
    onClose
  } = useModal();
  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)))));
};
const HelpLink = (url, helpText) => jsx(Button, {
  iconBefore: jsx(QuestionCircleIcon, {
    label: ""
  }),
  appearance: "subtle-link",
  href: url,
  target: "_blank",
  testId: "ModalElementBrowser__help-button"
}, helpText);
const _default_1 = injectIntl(ModalElementBrowser);
export default _default_1;