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 | 4x 4x 4x 4x 4x | import React from "react";
import { palette } from "@palette";
// mui
import { Box, styled } from "@mui/material";
type ExpandedRowContainerProps = {
children: React.ReactNode;
pinkBorder?: boolean;
};
export const ExpandedRowContainer: React.FC<ExpandedRowContainerProps> = ({
children,
pinkBorder,
}) => {
return (
<StyledExpandedContainer pinkBorder={pinkBorder}>
<StyledMainContainer pinkBorder={pinkBorder}>
{children}
</StyledMainContainer>
{!pinkBorder && (
<Box
sx={{ height: "24px", borderRadius: "0 0 8px 8px", border: "none" }}
/>
)}
</StyledExpandedContainer>
);
};
const StyledExpandedContainer = styled(Box, {
shouldForwardProp: (prop) => prop !== "pinkBorder", // Prevents pinkBorder from being passed to DOM
})<{ pinkBorder?: boolean }>(({ theme, pinkBorder }) => ({
display: "block",
position: "relative",
borderRadius: pinkBorder ? "inherit" : "0 0 8px 8px",
zIndex: 0,
backgroundColor: pinkBorder ? "rgba(0, 0, 0, 0.87)" : palette.neutral[5],
...(pinkBorder && {
"&::after": {
content: "''",
pointerEvents: "none",
display: "block",
height: "100%",
position: "absolute",
borderRadius: "inherit",
top: 0,
zIndex: 1,
width: "100%",
},
}),
}));
const StyledMainContainer = styled(Box, {
shouldForwardProp: (prop) => prop !== "pinkBorder",
})<{ pinkBorder?: boolean }>(({ pinkBorder }) => ({
margin: pinkBorder ? "0px 0px 0px 0px" : "0 16px 0",
background: pinkBorder ? "#fff" : "inherit",
position: "relative",
...(pinkBorder && {
boxShadow: "none",
borderRadius: "0px 0px 8px 8px",
border: "none",
borderTop: "none",
}),
}));
|