mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-20 16:33:21 +01:00
108 lines
4.0 KiB
JavaScript
108 lines
4.0 KiB
JavaScript
|
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 {
|
||
|
iconUrl,
|
||
|
identiconAddress,
|
||
|
selected,
|
||
|
disabled,
|
||
|
primaryLabel,
|
||
|
secondaryLabel,
|
||
|
rightPrimaryLabel,
|
||
|
rightSecondaryLabel,
|
||
|
IconComponent,
|
||
|
} = result
|
||
|
return (
|
||
|
<div
|
||
|
className={classnames('searchable-item-list__item', {
|
||
|
'searchable-item-list__item--selected': selected,
|
||
|
'searchable-item-list__item--disabled': disabled,
|
||
|
})}
|
||
|
onClick={() => onClickItem && onClickItem(result)}
|
||
|
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,
|
||
|
}
|