84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { TemplateLayout } from "./TemplateLayout";
|
|
import CircularProgressbarsList from "@/components/widgets/CircularProgressbarsList/CircularProgressbarsList";
|
|
import type { LoadersScreenDefinition } from "@/lib/funnel/types";
|
|
|
|
interface LoadersTemplateProps {
|
|
screen: LoadersScreenDefinition;
|
|
onContinue: () => void;
|
|
canGoBack: boolean;
|
|
onBack: () => void;
|
|
screenProgress?: { current: number; total: number };
|
|
defaultTexts?: { nextButton?: string; continueButton?: string };
|
|
}
|
|
|
|
export function LoadersTemplate({
|
|
screen,
|
|
onContinue,
|
|
canGoBack,
|
|
onBack,
|
|
screenProgress,
|
|
defaultTexts,
|
|
}: LoadersTemplateProps) {
|
|
const [isVisibleButton, setIsVisibleButton] = useState(false);
|
|
|
|
const onAnimationEnd = () => {
|
|
setIsVisibleButton(true);
|
|
};
|
|
|
|
const progressbarsListProps = {
|
|
progressbarItems: screen.progressbars?.items?.map((item: unknown, index: number) => {
|
|
const typedItem = item as {
|
|
title?: string;
|
|
processingTitle?: string;
|
|
processingSubtitle?: string;
|
|
completedTitle?: string;
|
|
completedSubtitle?: string;
|
|
};
|
|
|
|
return {
|
|
circularProgressbarProps: {
|
|
text: { children: typedItem.title || `Step ${index + 1}` },
|
|
},
|
|
processing: typedItem.processingTitle ? {
|
|
title: { children: typedItem.processingTitle },
|
|
subtitle: typedItem.processingSubtitle ? { children: typedItem.processingSubtitle } : undefined,
|
|
} : undefined,
|
|
completed: typedItem.completedTitle ? {
|
|
title: { children: typedItem.completedTitle },
|
|
subtitle: typedItem.completedSubtitle ? { children: typedItem.completedSubtitle } : undefined,
|
|
} : undefined,
|
|
};
|
|
}) || [],
|
|
transitionDurationItem: screen.progressbars?.transitionDuration || 3000, // Как в оригинале
|
|
onAnimationEnd,
|
|
};
|
|
|
|
return (
|
|
<TemplateLayout
|
|
screen={screen}
|
|
onContinue={onContinue}
|
|
canGoBack={canGoBack}
|
|
onBack={onBack}
|
|
screenProgress={screenProgress}
|
|
defaultTexts={defaultTexts}
|
|
titleDefaults={{ font: "manrope", weight: "bold", align: "center", size: "2xl", color: "default" }}
|
|
subtitleDefaults={{ font: "manrope", weight: "medium", color: "default", align: "center", size: "lg" }}
|
|
actionButtonOptions={{
|
|
defaultText: defaultTexts?.nextButton || "Continue",
|
|
disabled: !isVisibleButton,
|
|
onClick: onContinue,
|
|
}}
|
|
>
|
|
<div className="w-full flex flex-col items-center gap-[22px] mt-[22px]">
|
|
<CircularProgressbarsList
|
|
{...progressbarsListProps}
|
|
showDividers={false}
|
|
/>
|
|
</div>
|
|
</TemplateLayout>
|
|
);
|
|
}
|