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 && hideItemIf(result)) {
                  return null
                }

                const onClick = () => onClickItem && 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,
}