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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 16133x 16133x 14894x 14884x 14877x 14848x 16133x 154x 167909x 16133x | import { Chip, ChipProps } from "@mui/material";
import { CheckCircleIcon, CircleIcon, XIcon } from "@phosphor-icons/react";
import { styled } from "@theme/v2/Provider";
export type TChipColors =
| "default"
| "success"
| "warning"
| "blue"
| "error"
| "warning2"
| "darken5"
| "purple"
| "primitiveblue10"
| "errorDark";
export interface IChipProps extends Omit<ChipProps, "color"> {
color?: TChipColors;
elementRef?: React.RefObject<any>;
withCheckStartIcon?: boolean;
isSelected?: boolean;
checkIconProps?: {
checkedColor?: string;
unCheckedColor?: string;
};
}
export default function GiveChip({
color,
size = "small",
elementRef,
withCheckStartIcon = false,
isSelected,
checkIconProps,
...rest
}: IChipProps) {
//MUI does not handle colors as we handle them in our theme,
//passing down `blue` directly causes an error.To overcome this,
//we can use a color variant, like`info` under the hood, while still using`blue` as a styling value
//when we use this component, to follow our figma design system.
const usedColor = (() => {
if (color === "blue" || color === "primitiveblue10") return "info";
if (color === "warning2") return "warning";
if (color === "darken5") return "default";
if (color === "purple") return "default";
else return color;
})();
return (
<StyledChip
version="two"
size={size}
ref={elementRef}
color={usedColor}
customColor={color}
deleteIcon={<XIcon weight="bold" size={14} data-testid="give-chip-x-icon" />}
icon={
withCheckStartIcon ? (
isSelected ? (
<CheckCircleIcon
size={16}
color={checkIconProps?.checkedColor}
weight="fill"
/>
) : (
<CircleIcon
size={16}
weight="bold"
color={checkIconProps?.unCheckedColor}
/>
)
) : undefined
}
{...rest}
/>
);
}
const StyledChip = styled(Chip, {
shouldForwardProp: (prop) => prop !== "customColor",
})<{ customColor?: TChipColors }>(({ theme, customColor }) => ({
"& span": { padding: 0, lineHeight: "20px" },
"&.MuiChip-root": {
gap: "12px",
...(customColor === "warning2" && {
backgroundColor: theme?.palette?.primitive?.warning[25],
color: theme?.palette?.primitive?.warning[100],
}),
...(customColor === "purple" && {
backgroundColor: "#EEEAFF",
color: theme?.palette?.primitive?.["moon-purple"][100],
}),
...(customColor === "darken5" && {
backgroundColor: theme?.palette?.primitive?.transparent["darken-5"],
color: theme?.palette?.text.primary,
}),
...(customColor === "primitiveblue10" && {
backgroundColor: theme?.palette?.primitive?.blue[10],
color: theme?.palette?.primitive?.blue[100],
}),
},
}));
|