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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 95x 743x 95x 743x 4553x 743x 95x 743x 743x | import {
Accordion,
AccordionProps,
AccordionSummary,
AccordionSummaryProps,
Stack,
SxProps,
} from "@mui/material";
import { CaretDownIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { styled } from "@theme/v2/Provider";
import { ReactNode } from "react";
type Props = {
children: ReactNode | JSX.Element;
icon?: ReactNode;
title: string | ReactNode;
sx?: SxProps;
withExpandIcon?: boolean;
isFirst?: boolean;
isLast?: boolean;
testId?: string;
defaultExpanded?: boolean;
};
const GiveCollapsableComponent = ({
children,
icon,
title,
sx,
withExpandIcon = true,
isFirst,
isLast,
testId,
defaultExpanded,
}: Props) => {
return (
<Stack position="relative" sx={sx}>
<CustomAccordion
isFirst={isFirst}
isLast={isLast}
slotProps={{ transition: { unmountOnExit: true } }}
data-testid={testId}
defaultExpanded={defaultExpanded}
>
<CustomSummary withExpandIcon={withExpandIcon}>
{typeof title === "string" ? (
<Stack direction="row" sx={{ gap: "8px" }} alignItems="center">
{icon}
<GiveText
fontSize="18px"
color="primary"
sx={{
lineHeight: "120%",
}}
>
{title}
</GiveText>
</Stack>
) : (
<>{title}</>
)}
</CustomSummary>
{children}
</CustomAccordion>
</Stack>
);
};
interface CustomAccordionProps extends AccordionProps {
isFirst?: boolean;
isLast?: boolean;
}
const CustomAccordion = styled(
(props: CustomAccordionProps) => (
<Accordion elevation={0} disableGutters {...props} />
),
{
shouldForwardProp: (prop) => prop !== "isFirst" && prop !== "isLast",
},
)(({ theme, isFirst, isLast }) => ({
borderBottom: "1px solid",
borderColor: theme.palette.border?.primary,
borderRadius:
isFirst && isLast
? `${theme.customs?.radius.medium}px !important`
: isFirst
? `${theme.customs?.radius.medium}px ${theme.customs?.radius.medium}px 0 0 !important`
: isLast
? `0 0 ${theme.customs?.radius.medium}px ${theme.customs?.radius.medium}px !important`
: "0",
"& .MuiPaper-root": {},
"&:before": {
display: "none",
},
position: "initial",
...(isLast && {
border: "none",
boxShadow: "none",
}),
}));
const CustomSummary = styled(
({
withExpandIcon,
...props
}: AccordionSummaryProps & { withExpandIcon?: boolean }) => (
<AccordionSummary
expandIcon={withExpandIcon ? <CaretDownIcon size={20} /> : null}
{...props}
/>
),
)(({ withExpandIcon }) => ({
flexDirection: "row",
"& .MuiAccordionSummary-content": {
margin: "0 !important",
paddingBlock: "16px",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
"& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
transform: "rotate(180deg)",
},
...(!withExpandIcon && {
"& .MuiAccordionSummary-expandIconWrapper": {
display: "none",
},
}),
}));
export default GiveCollapsableComponent;
|