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 && ) : (
{listTitle && (
{listTitle}
)}
{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 (
e.key === 'Enter' && onClick()} key={`searchable-item-list-item-${i}`} > {(iconUrl || primaryLabel) && ( )} {!(iconUrl || primaryLabel) && identiconAddress && (
)} {IconComponent && }
{primaryLabel && ( {primaryLabel} )} {secondaryLabel && ( {secondaryLabel} )}
{!hideRightLabels && (rightPrimaryLabel || rightSecondaryLabel) && (
{rightPrimaryLabel && ( {rightPrimaryLabel} )} {rightSecondaryLabel && ( {rightSecondaryLabel} )}
)}
); })}
); } 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, };