Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 27x 27x 27x 17x 17x 17x 17x 17x 17x 1x 16x 48x 48x 48x 14x 48x 27x | import React, { memo, FunctionComponent } from 'react';
import './PopoverList.scss';
export interface PopoverListProps {
menuProps?: any;
highlightedIndex?: number;
getItemProps?: any;
items: PopoverListItem[];
testId?: string;
}
export interface PopoverListItem {
id: string;
content: React.ReactChild[] | React.ReactChild;
}
const PopoverList: FunctionComponent<PopoverListProps> = ({
highlightedIndex = -1,
testId,
getItemProps = (props: any) => props,
menuProps = {},
items,
}) => {
if (!items || !items.length) {
return null;
}
return (
<ul
className="popoverList"
data-test={ testId } { ...menuProps }
>
{ items
.map((item, index) => (
<li
className={ getItemClassName(highlightedIndex, index) }
data-test={ testId && `${testId}-item` }
{ ...getItemProps({
key: item.id,
index,
item,
}) }
key={ index }
>
{ item.content }
</li>
)) }
</ul>
);
};
function getItemClassName(highlightedIndex: number, index: number): string {
const classes = ['popoverList-item'];
if (highlightedIndex === index) {
classes.push('is-active');
}
return classes.join(' ');
}
export default memo(PopoverList);
|