parent
f13417f2b8
commit
dbb9c3d22a
@ -0,0 +1,82 @@
|
||||
import React from "react";
|
||||
import { View, Text, TouchableOpacity } from "react-native";
|
||||
import {
|
||||
AntDesign,
|
||||
Entypo,
|
||||
FontAwesome6,
|
||||
MaterialCommunityIcons,
|
||||
} from "@expo/vector-icons";
|
||||
import {
|
||||
AntDesignIconNames,
|
||||
CommunityIconNames,
|
||||
EntypoIconNames,
|
||||
FontAwesomeIconNames,
|
||||
} from "./Icons";
|
||||
|
||||
interface CheckButtonProps {
|
||||
label: string;
|
||||
value: boolean;
|
||||
onChange: () => void;
|
||||
antIcon?: AntDesignIconNames;
|
||||
entypoIcon?: EntypoIconNames;
|
||||
fontAwesomeIcon?: FontAwesomeIconNames;
|
||||
communityIcon?: CommunityIconNames;
|
||||
}
|
||||
|
||||
const CheckButton: React.FC<CheckButtonProps> = ({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
antIcon,
|
||||
entypoIcon,
|
||||
fontAwesomeIcon,
|
||||
communityIcon,
|
||||
}) => {
|
||||
return (
|
||||
<View style={{ flexBasis: "33.33%" }}>
|
||||
<TouchableOpacity
|
||||
onPress={onChange}
|
||||
className={`p-5 m-1 rounded-3xl ${
|
||||
value
|
||||
? "bg-orange-600 border-4 border-orange-300"
|
||||
: "bg-gray-300 border-4 border-gray-300"
|
||||
} items-center`}
|
||||
>
|
||||
{antIcon ? (
|
||||
<AntDesign
|
||||
name={antIcon}
|
||||
size={30}
|
||||
color={value ? "white" : "black"}
|
||||
/>
|
||||
) : null}
|
||||
{entypoIcon ? (
|
||||
<Entypo
|
||||
name={entypoIcon}
|
||||
size={30}
|
||||
color={value ? "white" : "black"}
|
||||
/>
|
||||
) : null}
|
||||
{communityIcon ? (
|
||||
<MaterialCommunityIcons
|
||||
name={communityIcon}
|
||||
size={30}
|
||||
color={value ? "white" : "black"}
|
||||
/>
|
||||
) : null}
|
||||
{fontAwesomeIcon ? (
|
||||
<FontAwesome6
|
||||
name={fontAwesomeIcon}
|
||||
size={30}
|
||||
color={value ? "white" : "black"}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Text className={`${value ? "text-white" : "text-black"}`}>
|
||||
{label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckButton;
|
||||
@ -0,0 +1,35 @@
|
||||
import React from "react";
|
||||
import Question, { QuestionChildProps } from "./Question";
|
||||
import Text from "../ui/Text";
|
||||
import SegmentedControl from "../ui/SegmentedControl";
|
||||
import { View } from "react-native";
|
||||
|
||||
export interface FrequencyQuestionProps extends QuestionChildProps {
|
||||
isMale: boolean;
|
||||
}
|
||||
|
||||
export default React.forwardRef<any, FrequencyQuestionProps>(
|
||||
(props, ref): React.ReactElement => {
|
||||
const { isMale, ...rest } = props;
|
||||
const ANSWERS = ["1", "2", "3", "4", "5"];
|
||||
const [answer, setAnswer] = React.useState("1");
|
||||
return (
|
||||
<Question question="Nombre de séance(s) par semaine ?" {...ref} {...rest}>
|
||||
<View className="items-center">
|
||||
<Text size="2xl">
|
||||
Je suis {isMale ? "prêt" : "prête"} à m'entraîner
|
||||
</Text>
|
||||
<Text size="9xl" weight="bold">
|
||||
{answer}
|
||||
</Text>
|
||||
<Text size="2xl">fois par semaine !</Text>
|
||||
</View>
|
||||
<SegmentedControl
|
||||
values={ANSWERS}
|
||||
selectedIndex={ANSWERS.indexOf(answer)}
|
||||
onValueChange={setAnswer}
|
||||
/>
|
||||
</Question>
|
||||
);
|
||||
}
|
||||
);
|
||||
@ -0,0 +1,200 @@
|
||||
import React from "react";
|
||||
import Question, { QuestionChildProps } from "./Question";
|
||||
import CheckButton from "../CheckboxComponent";
|
||||
import { View } from "react-native";
|
||||
|
||||
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 className={`flex-wrap flex-row`}>
|
||||
<CheckButton
|
||||
label="Course"
|
||||
value={checkedOne}
|
||||
onChange={handleChangeOne}
|
||||
fontAwesomeIcon={"person-running"}
|
||||
/>
|
||||
<CheckButton
|
||||
label="Marche"
|
||||
value={checkedTwo}
|
||||
onChange={handleChangeTwo}
|
||||
fontAwesomeIcon={"person-walking"}
|
||||
/>
|
||||
<CheckButton
|
||||
label="Rando"
|
||||
value={checkedThree}
|
||||
onChange={handleChangeThree}
|
||||
fontAwesomeIcon={"person-hiking"}
|
||||
/>
|
||||
|
||||
<CheckButton
|
||||
label="Skate"
|
||||
value={checkedFour}
|
||||
onChange={handleChangeFour}
|
||||
communityIcon={"skateboarding"}
|
||||
/>
|
||||
<CheckButton
|
||||
label="Cyclisme"
|
||||
value={checkedFive}
|
||||
onChange={handleChangeFive}
|
||||
communityIcon={"bike"}
|
||||
/>
|
||||
<CheckButton
|
||||
label="Basket"
|
||||
value={checkedSix}
|
||||
onChange={handleChangeSix}
|
||||
fontAwesomeIcon={"basketball"}
|
||||
/>
|
||||
|
||||
<CheckButton
|
||||
label="Cardio"
|
||||
value={checkedSeven}
|
||||
onChange={handleChangeSeven}
|
||||
antIcon={"heart"}
|
||||
/>
|
||||
<CheckButton
|
||||
label="Yoga"
|
||||
value={checkedEight}
|
||||
onChange={handleChangeEight}
|
||||
communityIcon={"yoga"}
|
||||
/>
|
||||
<CheckButton
|
||||
label="Autre"
|
||||
value={checkedNine}
|
||||
onChange={handleChangeNine}
|
||||
antIcon={"setting"}
|
||||
/>
|
||||
</View>
|
||||
</Question>
|
||||
);
|
||||
}
|
||||
);
|
||||
Loading…
Reference in new issue