113 lines
3.0 KiB
TypeScript
113 lines
3.0 KiB
TypeScript
import { IStep } from "@/data";
|
|
import styles from "./styles.module.css";
|
|
import { useEffect, useState } from "react";
|
|
import { useDynamicSize } from "@/hooks/useDynamicSize";
|
|
import CircleArrow from "../../ui/CircleArrow";
|
|
|
|
interface IStepperProps {
|
|
steps: IStep[];
|
|
currentStep: number;
|
|
currentQuestion: number;
|
|
}
|
|
|
|
function Stepper({ steps, currentStep, currentQuestion }: IStepperProps) {
|
|
const [filterSteps, setFilterSteps] = useState(steps);
|
|
const [currentStepIndex, setCurrentStepIndex] = useState(currentStep);
|
|
const { width, elementRef } = useDynamicSize<HTMLDivElement>({});
|
|
|
|
useEffect(() => {
|
|
if (
|
|
![
|
|
"relationship_pattern",
|
|
"relationships",
|
|
"personalityTraits",
|
|
"partnerProfile",
|
|
].includes(steps[currentStep].id)
|
|
) {
|
|
return setFilterSteps(
|
|
steps.filter(
|
|
(item) =>
|
|
!["relationship_pattern", "personalityTraits"].includes(item.id)
|
|
)
|
|
);
|
|
}
|
|
if (steps[currentStep].id === "personalityTraits") {
|
|
return setFilterSteps(
|
|
steps.filter(
|
|
(item) =>
|
|
!["relationship_pattern", "partnerProfile"].includes(item.id)
|
|
)
|
|
);
|
|
}
|
|
if (steps[currentStep].id === "partnerProfile") {
|
|
return setFilterSteps(
|
|
steps.filter(
|
|
(item) => !["relationships", "personalityTraits"].includes(item.id)
|
|
)
|
|
);
|
|
}
|
|
if (steps[currentStep].id === "relationship_pattern") {
|
|
return setFilterSteps(
|
|
steps.filter(
|
|
(item) => !["relationships", "personalityTraits"].includes(item.id)
|
|
)
|
|
);
|
|
}
|
|
if (steps[currentStep].id === "relationships") {
|
|
return setFilterSteps(
|
|
steps.filter(
|
|
(item) =>
|
|
!["relationship_pattern", "personalityTraits"].includes(item.id)
|
|
)
|
|
);
|
|
}
|
|
}, [currentStep, steps]);
|
|
|
|
useEffect(() => {
|
|
const idCurrentStep = steps[currentStep].id;
|
|
setCurrentStepIndex(
|
|
filterSteps.findIndex((step) => step.id === idCurrentStep)
|
|
);
|
|
}, [currentStep, filterSteps, steps]);
|
|
|
|
const getLinePercent = (index: number) => {
|
|
if (index < currentStepIndex) {
|
|
return 1;
|
|
} else if (index === currentStepIndex) {
|
|
const percent = currentQuestion / filterSteps[index].questions.length;
|
|
if (percent > 1) {
|
|
return 1;
|
|
}
|
|
return percent;
|
|
} else {
|
|
return 0;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={styles.container}
|
|
style={{ gridTemplateColumns: `repeat(${filterSteps.length}, 1fr)` }}
|
|
ref={elementRef}
|
|
>
|
|
{filterSteps.map((step, index) => {
|
|
return (
|
|
<div className={styles["step-container"]} key={index}>
|
|
<CircleArrow
|
|
width={
|
|
width / filterSteps.length -
|
|
(15 * (filterSteps.length - 1)) / filterSteps.length
|
|
}
|
|
value={getLinePercent(index)}
|
|
color={step.color}
|
|
uniqueKey={index}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Stepper;
|