fix: progress bar issue (#2771)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
This commit is contained in:
Dhruwang Jariwala
2024-06-19 13:34:11 +05:30
committed by GitHub
parent 5d468b4420
commit cd40e655fb
2 changed files with 11 additions and 23 deletions

View File

@@ -29,7 +29,6 @@ test.describe("JS Package Test", async () => {
await expect(page.locator("#howToSendCardOption-website")).toBeVisible();
await page.locator("#howToSendCardOption-website").click();
await page.locator("#howToSendCardOption-website").click();
await page.locator("#whenToSendCardTrigger").click();
await page.getByRole("button", { name: "Add action" }).click();
await page.getByText("New SessionGets fired when a").click();

View File

@@ -10,34 +10,23 @@ interface ProgressBarProps {
export const ProgressBar = ({ survey, questionId }: ProgressBarProps) => {
const currentQuestionIdx = useMemo(
() => survey.questions.findIndex((e) => e.id === questionId),
() => survey.questions.findIndex((q) => q.id === questionId),
[survey, questionId]
);
const calculateProgress = useCallback((questionId: string, survey: TSurvey, progress: number) => {
if (survey.questions.length === 0) return 0;
let currentQustionIdx = survey.questions.findIndex((e) => e.id === questionId);
if (currentQustionIdx === -1) currentQustionIdx = 0;
const elementIdx = calculateElementIdx(survey, currentQustionIdx);
const calculateProgress = useCallback(
(index: number, questionsLength: number) => {
if (questionsLength === 0) return 0;
if (index === -1) index = 0;
const newProgress = elementIdx / survey.questions.length;
let updatedProgress = progress;
if (newProgress > progress) {
updatedProgress = newProgress;
} else if (newProgress <= progress && progress + 0.1 <= 1) {
updatedProgress = progress + 0.1;
}
return updatedProgress;
}, []);
const elementIdx = calculateElementIdx(survey, index);
return elementIdx / questionsLength;
},
[survey]
);
const progressArray = useMemo(() => {
let progress = 0;
let progressArrayTemp: number[] = [];
survey.questions.forEach((question) => {
progress = calculateProgress(question.id, survey, progress);
progressArrayTemp.push(progress);
});
return progressArrayTemp;
return survey.questions.map((_, index) => calculateProgress(index, survey.questions.length));
}, [calculateProgress, survey]);
return <Progress progress={questionId === "end" ? 1 : progressArray[currentQuestionIdx]} />;