You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Mobile/components/quiz/ActivityQuestion.tsx

79 lines
2.2 KiB

import { ESportLevel, SportLevels } from "@/model/enums/Enums";
import React, { useImperativeHandle, useState } from "react";
import { View } from "react-native";
import Checkbox from "../CheckBox";
import {
AntDesignIconNames,
CommunityIconNames,
EntypoIconNames,
FontAwesome6IconNames,
} from "../Icons";
import Question, { QuestionChildProps } from "./Question";
export interface ActivityQuestionRef {
getAnswer: () => ESportLevel;
}
export default React.forwardRef<ActivityQuestionRef, QuestionChildProps>(
({ ...props }, ref): React.ReactElement => {
const [checkedItems, setCheckedItems] = useState([
true,
...Array(4).fill(false),
]);
const handleChange = (index: number) => {
const newCheckedState = checkedItems.map((_, i) => i === index);
setCheckedItems(newCheckedState);
};
useImperativeHandle(ref, () => ({
getAnswer: () => {
let selected = 0;
checkedItems.forEach((item, index) => {
if (item) {
selected = index;
}
});
return SportLevels[SportLevels.length - 1 - selected];
},
}));
interface IData {
label: string;
commIcon?: CommunityIconNames;
antIcon?: AntDesignIconNames;
entypoIcon?: EntypoIconNames;
fontAwesomeIcon?: FontAwesome6IconNames;
}
const data: IData[] = [
{ label: "Athlète", antIcon: "smile-circle" },
{ label: "Très sportif", antIcon: "smileo" },
{ label: "Un peu sportif", antIcon: "meh" },
{ label: "Peu sportif", antIcon: "frowno" },
{ label: "Pas du tout sportif", antIcon: "frown" },
];
return (
<Question
question="Comment estimez-vous votre niveau d'activité ?"
{...ref}
{...props}
>
<View className="gap-2">
{data.map((item, index) => (
<Checkbox
key={index}
label={item.label}
value={checkedItems[index]}
onChange={() => handleChange(index)}
antIcon={item.antIcon}
endText={(data.length - index).toString()}
/>
))}
</View>
</Question>
);
}
);