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 && hideItemIf(result)) { return null } const onClick = () => onClickItem && 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, }