@atlaskit/editor-common/dist/es2019/link/LinkSearch/LinkSearchList.js

A package that contains common classes and components for editor and renderer

/** @jsx jsx */
import { PureComponent } from 'react';
import { css, jsx } from '@emotion/react';
import Spinner from '@atlaskit/spinner';
import { N30 } from '@atlaskit/theme/colors';
import LinkSearchListItem from './LinkSearchListItem';
const listContainer = css({
  paddingTop: 0,
  marginTop: "var(--ds-space-150, 12px)",
  borderTop: `1px solid ${`var(--ds-border, ${N30})`}`
});
const spinnerContainer = css({
  textAlign: 'center',
  minHeight: '80px',
  marginTop: "var(--ds-space-400, 32px)"
});
export const linkSearchList = css({
  padding: 0,
  listStyle: 'none'
});
export default class LinkSearchList extends PureComponent {
  render() {
    const {
      onSelect,
      onMouseMove,
      onMouseEnter,
      onMouseLeave,
      items,
      selectedIndex,
      isLoading,
      ariaControls,
      role,
      id
    } = this.props;
    let itemsContent;
    let loadingContent;
    if (items && items.length > 0) {
      itemsContent = jsx("ul", {
        css: linkSearchList,
        id: id,
        role: role,
        "aria-controls": ariaControls
      }, items.map((item, index) => jsx(LinkSearchListItem, {
        id: `link-search-list-item-${index}`,
        role: role && 'option',
        item: item,
        selected: selectedIndex === index,
        onMouseMove: onMouseMove,
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave,
        onSelect: onSelect,
        key: item.objectId
      })));
    }
    if (isLoading) {
      loadingContent = jsx("div", {
        "data-testid": `${id}-loading`,
        css: spinnerContainer
      }, jsx(Spinner, {
        size: "medium"
      }));
    }
    return jsx("div", {
      css: listContainer
    }, itemsContent, loadingContent);
  }
}