metamask-extension/ui/app/pages/swaps/searchable-item-list/item-list/item-list.component.js

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Identicon from '../../../../components/ui/identicon';
import UrlIcon from '../../../../components/ui/url-icon';

export default function ItemList({
  results = [],
  onClickItem,
  Placeholder,
  listTitle,
  maxListItems = 6,
  searchQuery = '',
  containerRef,
  hideRightLabels,
  hideItemIf,
  listContainerClassName,
}) {
  return results.length === 0 ? (
    Placeholder && <Placeholder searchQuery={searchQuery} />
  ) : (
    <div className="searchable-item-list">
      {listTitle && (
        <div className="searchable-item-list__title">{listTitle}</div>
      )}
      <div
        className={classnames(
          'searchable-item-list__list-container',
          listContainerClassName,
        )}
        ref={containerRef}
      >
        {results.slice(0, maxListItems).map((result, i) => {
          if (hideItemIf?.(result)) {
            return null;
          }

          const onClick = () => onClickItem?.(result);
          const {
            iconUrl,
            identiconAddress,
            selected,
            disabled,
            primaryLabel,
            secondaryLabel,
            rightPrimaryLabel,
            rightSecondaryLabel,
            IconComponent,
          } = result;
          return (
            <div
              tabIndex="0"
              className={classnames('searchable-item-list__item', {
                'searchable-item-list__item--selected': selected,
                'searchable-item-list__item--disabled': disabled,
              })}
              onClick={onClick}
              onKeyUp={(e) => e.key === 'Enter' && onClick()}
              key={`searchable-item-list-item-${i}`}
            >
              {(iconUrl || primaryLabel) && (
                <UrlIcon url={iconUrl} name={primaryLabel} />
              )}
              {!(iconUrl || primaryLabel) && identiconAddress && (
                <div className="searchable-item-list__identicon">
                  <Identicon address={identiconAddress} diameter={24} />
                </div>
              )}
              {IconComponent && <IconComponent />}
              <div className="searchable-item-list__labels">
                <div className="searchable-item-list__item-labels">
                  {primaryLabel && (
                    <span className="searchable-item-list__primary-label">
                      {primaryLabel}
                    </span>
                  )}
                  {secondaryLabel && (
                    <span className="searchable-item-list__secondary-label">
                      {secondaryLabel}
                    </span>
                  )}
                </div>
                {!hideRightLabels &&
                  (rightPrimaryLabel || rightSecondaryLabel) && (
                    <div className="searchable-item-list__right-labels">
                      {rightPrimaryLabel && (
                        <span className="searchable-item-list__right-primary-label">
                          {rightPrimaryLabel}
                        </span>
                      )}
                      {rightSecondaryLabel && (
                        <span className="searchable-item-list__right-secondary-label">
                          {rightSecondaryLabel}
                        </span>
                      )}
                    </div>
                  )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

ItemList.propTypes = {
  results: PropTypes.arrayOf(
    PropTypes.shape({
      iconUrl: PropTypes.string,
      selected: PropTypes.bool,
      disabled: PropTypes.bool,
      primaryLabel: PropTypes.string,
      secondaryLabel: PropTypes.string,
      rightPrimaryLabel: PropTypes.string,
      rightSecondaryLabel: PropTypes.string,
    }),
  ),
  onClickItem: PropTypes.func,
  Placeholder: PropTypes.func,
  listTitle: PropTypes.string,
  maxListItems: PropTypes.number,
  searchQuery: PropTypes.string,
  containerRef: PropTypes.shape({
    current: PropTypes.instanceOf(window.Element),
  }),
  hideRightLabels: PropTypes.bool,
  hideItemIf: PropTypes.func,
  listContainerClassName: PropTypes.string,
};