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.
87 lines
2.4 KiB
87 lines
2.4 KiB
import { ESport, Sports } from "@/model/enums/Enums";
|
|
import React, {
|
|
forwardRef,
|
|
ReactElement,
|
|
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 SportQuestionRef {
|
|
getAnswer: () => ESport;
|
|
}
|
|
|
|
export default forwardRef<SportQuestionRef, QuestionChildProps>(
|
|
(props, ref): ReactElement => {
|
|
const [checkedItems, setCheckedItems] = useState([
|
|
true,
|
|
...Array(8).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 Sports[selected];
|
|
},
|
|
}));
|
|
|
|
interface IData {
|
|
label: string;
|
|
commIcon?: CommunityIconNames;
|
|
antIcon?: AntDesignIconNames;
|
|
entypoIcon?: EntypoIconNames;
|
|
fontAwesomeIcon?: FontAwesome6IconNames;
|
|
}
|
|
|
|
const data: IData[] = [
|
|
{ label: "Course", fontAwesomeIcon: "person-running" },
|
|
{ label: "Marche", fontAwesomeIcon: "person-walking" },
|
|
{ label: "Rando", fontAwesomeIcon: "person-hiking" },
|
|
{ label: "Skate", commIcon: "skateboarding" },
|
|
{ label: "Cyclisme", commIcon: "bike" },
|
|
{ label: "Basket", fontAwesomeIcon: "basketball" },
|
|
{ label: "Cardio", antIcon: "heart" },
|
|
{ label: "Yoga", commIcon: "yoga" },
|
|
{ label: "Autre", entypoIcon: "dots-three-horizontal" },
|
|
];
|
|
|
|
return (
|
|
<Question question="Quel sport pratiquez-vous ?" {...ref} {...props}>
|
|
<View className="flex-row justify-center flex-wrap gap-2">
|
|
{data.map((item, index) => (
|
|
<CheckBox
|
|
key={index}
|
|
label={item.label}
|
|
value={checkedItems[index]}
|
|
onChange={() => handleChange(index)}
|
|
fontAwesome6Icon={item.fontAwesomeIcon}
|
|
communityIcon={item.commIcon}
|
|
antIcon={item.antIcon}
|
|
entypoIcon={item.entypoIcon}
|
|
direction="col"
|
|
/>
|
|
))}
|
|
</View>
|
|
</Question>
|
|
);
|
|
}
|
|
);
|