65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
"use client";
|
||
|
||
import { cn } from "@/lib/utils";
|
||
import {
|
||
MainButton,
|
||
MainButtonProps,
|
||
} from "@/components/ui/MainButton/MainButton";
|
||
import { useEffect, useState, useRef } from "react";
|
||
|
||
export interface RadioAnswersListProps extends React.ComponentProps<"div"> {
|
||
answers: MainButtonProps[];
|
||
activeAnswer: MainButtonProps | null;
|
||
onAnswerClick?: (answer: MainButtonProps | null) => void;
|
||
onChangeSelectedAnswer?: (answer: MainButtonProps | null) => void;
|
||
}
|
||
|
||
function RadioAnswersList({
|
||
className,
|
||
answers,
|
||
activeAnswer,
|
||
onAnswerClick,
|
||
onChangeSelectedAnswer,
|
||
...props
|
||
}: RadioAnswersListProps) {
|
||
const [selectedAnswer, setSelectedAnswer] = useState<MainButtonProps | null>(
|
||
activeAnswer
|
||
);
|
||
const isInitialMount = useRef(true);
|
||
|
||
useEffect(() => {
|
||
setSelectedAnswer(activeAnswer ?? null);
|
||
}, [activeAnswer]);
|
||
|
||
const handleAnswerClick = (answer: MainButtonProps) => {
|
||
setSelectedAnswer(answer);
|
||
onAnswerClick?.(answer);
|
||
};
|
||
|
||
useEffect(() => {
|
||
// НЕ вызываем callback при первоначальной загрузке компонента
|
||
if (isInitialMount.current) {
|
||
isInitialMount.current = false;
|
||
return;
|
||
}
|
||
|
||
onChangeSelectedAnswer?.(selectedAnswer);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [selectedAnswer]);
|
||
|
||
return (
|
||
<div className={cn("flex flex-col gap-3 w-full", className)} {...props}>
|
||
{answers.map((answer) => (
|
||
<MainButton
|
||
key={answer.id}
|
||
{...answer}
|
||
onClick={() => handleAnswerClick(answer)}
|
||
active={selectedAnswer?.id === answer.id}
|
||
/>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export { RadioAnswersList };
|