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 | 9x 256x 256x 256x 256x 134x 133x 256x 3x 1x 256x 144x 9x 1033x 256x 256x 9x 597x 196x | import { useState, useEffect } from "react";
import StepItem from "./StepItem";
import { Box } from "@mui/material";
import { styled } from "@theme/v2/Provider";
import { StepRecord } from "../../types";
import { CheckSvg } from "./CheckSvg";
import GiveText from "@shared/Text/GiveText";
type Props = {
subSteps: StepRecord;
number?: number;
persistFormData: () => void;
};
const SectionTab = ({ subSteps, number, persistFormData }: Props) => {
const parentLabel = subSteps.steps[0].label.split("-")[0];
const { completed, isActive } = subSteps;
const [isExpanded, setIsExpanded] = useState(false);
useEffect(() => {
if (!isExpanded) {
setIsExpanded(isActive);
}
}, [isActive]);
const handleToggle = () => {
if (!isActive) {
setIsExpanded((prev) => !prev);
}
};
return (
<>
<SectionItem
isActive={isActive}
isExpanded={isExpanded}
onClick={handleToggle}
>
{completed ? (
<CheckSvg />
) : (
<SectionNumber isActive={isActive} isCompleted={completed}>
{number}
</SectionNumber>
)}
<GiveText variant="bodyS" color={completed ? "success" : undefined}>
{parentLabel}
</GiveText>
</SectionItem>
{isExpanded &&
subSteps.steps.map((item, i) => (
<StepItem item={item} key={i} persistFormData={persistFormData} />
))}
</>
);
};
export default SectionTab;
const SectionItem = styled(Box, {
shouldForwardProp: (prop) =>
prop !== "isActive" && prop !== "isCompleted" && prop !== "isExpanded",
})<{
isActive: boolean;
isExpanded: boolean;
}>(({ theme, isActive, isExpanded }) => {
const borderSecondaryColor = theme.palette.border?.secondary;
return {
gap: "8px",
fontSize: 14,
fontWeight: 350,
padding: "12px",
marginBottom: isExpanded ? "10px" : "0",
display: "flex",
alignItems: "center",
flexDirection: "row",
textDecoration: "none",
cursor: "pointer", // Ensure it's clickable
backgroundColor: isActive ? borderSecondaryColor : "transparent",
borderRadius: "8px",
};
});
const SectionNumber = styled(Box, {
shouldForwardProp: (prop) => prop !== "isActive" && prop !== "isCompleted",
})<{
isActive: boolean;
isCompleted?: boolean;
}>(({ isActive, isCompleted, theme }) => ({
fontSize: 14,
display: "flex",
color: !isActive
? theme.palette.text?.secondary
: isCompleted
? theme.palette.primitive?.success[50]
: theme.palette.common.white,
borderRadius: isActive ? "50%" : "0",
backgroundColor: isActive ? theme.palette.primitive?.blue[50] : "none",
width: "20px",
height: "20px",
alignItems: "center",
justifyContent: "center",
padding: "4px 6px 3px 6px",
}));
|