début du composant checkButton

4 months ago · 8c948ef59b
parent f13417f2b8
commit 8c948ef59b
4 changed files with 191 additions and 2 deletions
--- a/app/(quiz)/quiz.tsx
+++ b/app/(quiz)/quiz.tsx
@ -15,6 +15,7 @@ import LvlQuestion from "@/components/quiz/LvlQuestion";
 import GenderQuestion from "@/components/quiz/GenderQuestion";
 import ActivityQuestion from "@/components/quiz/ActivityQuestion";
 import SleepQuestion from "@/components/quiz/SleepQuestion";
+import SportQuestion from "@/components/quiz/SportQuestion";

 export default function Quiz() {
  const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0);
@ -29,7 +30,8 @@ export default function Quiz() {
    AgeQuestion,
    BeginnerQuestion,
    ActivityQuestion,
-    SleepQuestion
+    SleepQuestion,
+    SportQuestion
  ];

  const goBack = () => {
--- a/components/CheckButtonComponent.tsx
+++ b/components/CheckButtonComponent.tsx
@ -0,0 +1,30 @@
+import React, {Component} from "react";
+import {View, Text, TouchableOpacity, Image} from "react-native";
+import {AntDesign, FontAwesome6} from "@expo/vector-icons";
+import {AntDesignIconNames} from "./Icons";
+
+interface CheckButtonProps {
+    label: string;
+    value: boolean;
+    onChange: () => void;
+    icon: AntDesignIconNames | string;
+}
+
+const CheckButton: React.FC<CheckButtonProps> = ({ label, value, onChange, icon }) => {
+    let AwesomIconList = ["weight-scale", "beer"];
+    return (
+        <TouchableOpacity onPress={onChange} className={`p-5 m-5 rounded-3xl ${value ? 'bg-orange-600 border-4 border-orange-300' : 'bg-gray-300 border-4 border-gray-300'} flex-row items-center`}>
+            <View className="mr-2.5">
+                {AwesomIconList.includes(icon) ? (
+                    <FontAwesome6 name={icon} size={30} color={value ? "white" : "black"}/>
+                ) : (
+                    <AntDesign name={icon ?? "arrowleft"} size={30} color={value ? "white" : "black"}/>
+                )}
+            </View>
+
+            <Text className={`${value ? 'text-white' : 'text-black'} flex-1`}>{label}</Text>
+        </TouchableOpacity>
+    );
+};
+
+export default CheckButton;
--- a/components/CheckboxComponent.tsx
+++ b/components/CheckboxComponent.tsx
@ -2,7 +2,6 @@ import React, {Component} from "react";
 import {View, Text, TouchableOpacity, Image} from "react-native";
 import {AntDesign, FontAwesome6} from "@expo/vector-icons";
 import {AntDesignIconNames} from "./Icons";
-import PropTypes, {string} from "prop-types";

 interface CheckBoxProps {
    label: string;
--- a/components/quiz/SportQuestion.tsx
+++ b/components/quiz/SportQuestion.tsx
@ -0,0 +1,158 @@
+import React from "react";
+import Question, { QuestionChildProps } from "./Question";
+import CheckButton from "../CheckboxComponent";
+import {View} from "react-native";
+import {FontAwesome6} from "@expo/vector-icons";
+
+export default React.forwardRef<any, QuestionChildProps>(
+    (props, ref): React.ReactElement => {
+        const { ...rest } = props;
+
+        const [checkedOne, setCheckedOne] = React.useState(true);
+        const [checkedTwo, setCheckedTwo] = React.useState(false);
+        const [checkedThree, setCheckedThree] = React.useState(false);
+        const [checkedFour, setCheckedFour] = React.useState(false);
+        const [checkedFive, setCheckedFive] = React.useState(false);
+        const [checkedSix, setCheckedSix] = React.useState(false);
+        const [checkedSeven, setCheckedSeven] = React.useState(false);
+        const [checkedEight, setCheckedEight] = React.useState(false);
+        const [checkedNine, setCheckedNine] = React.useState(false);
+        const handleChangeOne = () => {
+            if(!checkedOne) {
+                setCheckedOne(!checkedOne);
+                setCheckedTwo(false);
+                setCheckedThree(false);
+                setCheckedFour(false);
+                setCheckedFive(false);
+                setCheckedSix(false);
+                setCheckedSeven(false);
+                setCheckedEight(false);
+                setCheckedNine(false);
+            }
+        };
+        const handleChangeTwo = () => {
+            if(!checkedTwo) {
+                setCheckedOne(false);
+                setCheckedTwo(!checkedTwo);
+                setCheckedThree(false);
+                setCheckedFour(false);
+                setCheckedFive(false);
+                setCheckedSix(false);
+                setCheckedSeven(false);
+                setCheckedEight(false);
+                setCheckedNine(false);
+            }
+        };
+        const handleChangeThree = () => {
+            if(!checkedThree) {
+                setCheckedOne(false);
+                setCheckedTwo(false);
+                setCheckedThree(!checkedThree);
+                setCheckedFour(false);
+                setCheckedFive(false);
+                setCheckedSix(false);
+                setCheckedSeven(false);
+                setCheckedEight(false);
+                setCheckedNine(false);
+            }
+        };
+        const handleChangeFour = () => {
+            if(!checkedFour) {
+                setCheckedOne(false);
+                setCheckedTwo(false);
+                setCheckedThree(false);
+                setCheckedFour(!checkedFour);
+                setCheckedFive(false);
+                setCheckedSix(false);
+                setCheckedSeven(false);
+                setCheckedEight(false);
+                setCheckedNine(false);
+            }
+        };
+        const handleChangeFive = () => {
+            if(!checkedFive) {
+                setCheckedOne(false);
+                setCheckedTwo(false);
+                setCheckedThree(false);
+                setCheckedFour(false);
+                setCheckedFive(!checkedFive);
+                setCheckedSix(false);
+                setCheckedSeven(false);
+                setCheckedEight(false);
+                setCheckedNine(false);
+            }
+        };
+        const handleChangeSix = () => {
+            if(!checkedFive) {
+                setCheckedOne(false);
+                setCheckedTwo(false);
+                setCheckedThree(false);
+                setCheckedFour(false);
+                setCheckedFive(false);
+                setCheckedSix(!checkedSix);
+                setCheckedSeven(false);
+                setCheckedEight(false);
+                setCheckedNine(false);
+            }
+        };
+        const handleChangeSeven = () => {
+            if(!checkedFive) {
+                setCheckedOne(false);
+                setCheckedTwo(false);
+                setCheckedThree(false);
+                setCheckedFour(false);
+                setCheckedFive(false);
+                setCheckedSix(false);
+                setCheckedSeven(!checkedSeven);
+                setCheckedEight(false);
+                setCheckedNine(false);
+            }
+        };
+        const handleChangeEight = () => {
+            if(!checkedFive) {
+                setCheckedOne(false);
+                setCheckedTwo(false);
+                setCheckedThree(false);
+                setCheckedFour(false);
+                setCheckedFive(false);
+                setCheckedSix(false);
+                setCheckedSeven(false);
+                setCheckedEight(!checkedEight);
+                setCheckedNine(false);
+            }
+        };
+        const handleChangeNine = () => {
+            if(!checkedFive) {
+                setCheckedOne(false);
+                setCheckedTwo(false);
+                setCheckedThree(false);
+                setCheckedFour(false);
+                setCheckedFive(false);
+                setCheckedSix(false);
+                setCheckedSeven(false);
+                setCheckedEight(false);
+                setCheckedNine(!checkedNine);
+            }
+        };
+
+        return (
+            <Question
+                question="Quel sport  ?"
+                {...ref}
+                {...rest}
+            >
+                <View>
+                    <CheckButton label="Course" value={checkedOne} onChange={handleChangeOne} icon={"smile-circle"} />
+                    <CheckButton label="Marche" value={checkedTwo} onChange={handleChangeTwo} icon={"smileo"} />
+                    <CheckButton label="Rando" value={checkedThree} onChange={handleChangeThree} icon={"meh"} />
+                    <CheckButton label="Skate" value={checkedFour} onChange={handleChangeFour} icon={"frowno"} />
+                    <CheckButton label="Cyclisme" value={checkedFive} onChange={handleChangeFive} icon={"frown"} />
+                    <CheckButton label="Basket" value={checkedSix} onChange={handleChangeSix} icon={"frown"} />
+                    <CheckButton label="Cardio" value={checkedSeven} onChange={handleChangeSeven} icon={"frown"} />
+                    <CheckButton label="Yoga" value={checkedEight} onChange={handleChangeEight} icon={"frown"} />
+                    <CheckButton label="Autre" value={checkedNine} onChange={handleChangeNine} icon={"frown"} />
+                </View>
+            </Question>
+        );
+    }
+);