PillList index.tsx

100% Statements 3/3

100% Branches 6/6

100% Functions 2/2

100% Lines 3/3

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
1x
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
  import React from 'react';
import Pill from '../Pill';
import './styles.scss';
 
export type PillListItem<IdType> = {
  id: IdType;
  label?: string;
  value: string;
  onClick?: (id: IdType) => void;
  onRemove?: (id: IdType) => void;
  className?: string;
};
 
export type PillListProps<IdType> = {
  data: PillListItem<IdType>[];
  onClick?: (id: IdType) => void;
  onRemove?: (id: IdType) => void;
  className?: string;
};
 
export default function PillList<IdType>(props: PillListProps<IdType>): JSX.Element {
  const { data, onClick, onRemove, className } = props;
 
  return (
    <div className='pill-list'>
      {data.map((item, index) => (
        <Pill
          key={index}
          id={item.id}
          label={item.label}
          value={item.value}
          onClick={item.onClick || onClick}
          onRemove={item.onRemove || onRemove}
          className={item.className || className}
        />
      ))}
    </div>
  );
}