proxy-item.tsx 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. import {
  2. Box,
  3. IconButton,
  4. ListItem,
  5. ListItemText,
  6. alpha,
  7. styled,
  8. } from "@mui/material";
  9. import { DeleteForeverRounded, UndoRounded } from "@mui/icons-material";
  10. import { useSortable } from "@dnd-kit/sortable";
  11. import { CSS } from "@dnd-kit/utilities";
  12. interface Props {
  13. type: "prepend" | "original" | "delete" | "append";
  14. proxy: IProxyConfig;
  15. onDelete: () => void;
  16. }
  17. export const ProxyItem = (props: Props) => {
  18. let { type, proxy, onDelete } = props;
  19. const sortable = type === "prepend" || type === "append";
  20. const { attributes, listeners, setNodeRef, transform, transition } = sortable
  21. ? useSortable({ id: proxy.name })
  22. : {
  23. attributes: {},
  24. listeners: {},
  25. setNodeRef: null,
  26. transform: null,
  27. transition: null,
  28. };
  29. return (
  30. <ListItem
  31. dense
  32. sx={({ palette }) => ({
  33. background:
  34. type === "original"
  35. ? palette.mode === "dark"
  36. ? alpha(palette.background.paper, 0.3)
  37. : alpha(palette.grey[400], 0.3)
  38. : type === "delete"
  39. ? alpha(palette.error.main, 0.3)
  40. : alpha(palette.success.main, 0.3),
  41. height: "100%",
  42. margin: "8px 0",
  43. borderRadius: "8px",
  44. transform: CSS.Transform.toString(transform),
  45. transition,
  46. })}
  47. >
  48. <ListItemText
  49. {...attributes}
  50. {...listeners}
  51. ref={setNodeRef}
  52. sx={{ cursor: sortable ? "move" : "" }}
  53. primary={
  54. <StyledPrimary
  55. sx={{ textDecoration: type === "delete" ? "line-through" : "" }}
  56. >
  57. {proxy.name}
  58. </StyledPrimary>
  59. }
  60. secondary={
  61. <ListItemTextChild
  62. sx={{
  63. overflow: "hidden",
  64. display: "flex",
  65. alignItems: "center",
  66. pt: "2px",
  67. }}
  68. >
  69. <Box sx={{ marginTop: "2px" }}>
  70. <StyledTypeBox>{proxy.type}</StyledTypeBox>
  71. </Box>
  72. </ListItemTextChild>
  73. }
  74. secondaryTypographyProps={{
  75. sx: {
  76. display: "flex",
  77. alignItems: "center",
  78. color: "#ccc",
  79. },
  80. }}
  81. />
  82. <IconButton onClick={onDelete}>
  83. {type === "delete" ? <UndoRounded /> : <DeleteForeverRounded />}
  84. </IconButton>
  85. </ListItem>
  86. );
  87. };
  88. const StyledPrimary = styled("div")`
  89. font-size: 15px;
  90. font-weight: 700;
  91. line-height: 1.5;
  92. overflow: hidden;
  93. text-overflow: ellipsis;
  94. white-space: nowrap;
  95. `;
  96. const ListItemTextChild = styled("span")`
  97. display: block;
  98. `;
  99. const StyledTypeBox = styled(ListItemTextChild)(({ theme }) => ({
  100. display: "inline-block",
  101. border: "1px solid #ccc",
  102. borderColor: alpha(theme.palette.primary.main, 0.5),
  103. color: alpha(theme.palette.primary.main, 0.8),
  104. borderRadius: 4,
  105. fontSize: 10,
  106. padding: "0 4px",
  107. lineHeight: 1.5,
  108. marginRight: "8px",
  109. }));