components ListItem.tsx

0% Statements 0/4

0% Branches 0/2

0% Functions 0/2

0% Lines 0/4

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { MenuItem } from "@mui/material";
import { CheckIcon } from "@phosphor-icons/react";
import { useAppTheme } from "@theme/v2/Provider";
//TODO fix types
export function ListItem({
  option,
  isSelected,
  handleMenuItemClick,
  listItemContent,
  menuItemSx,
}: any) {
  const theme = useAppTheme();
 
  return (
    <MenuItem
      disableRipple
      disableTouchRipple
      key={option.label}
      selected={isSelected}
      onMouseDown={(e) => {
        e.preventDefault();
        handleMenuItemClick(option);
      }}
      sx={{
        display: "flex",
        alignItems: "center",
        "&.Mui-selected": {
          backgroundColor: "transparent",
          borderRadius: "8px",
        },
        "&:hover": {
          borderRadius: "8px",
        },
        ...menuItemSx,
      }}
    >
      {listItemContent(option)}
      {isSelected && (
        <div style={{ marginLeft: "auto" }}>
          <CheckIcon fill={theme.palette.primitive?.neutral[100]} />
        </div>
      )}
    </MenuItem>
  );
}