Files
cally/components/pages/todos/RepeatFreq.tsx
2024-10-24 20:35:42 +02:00

57 lines
2.0 KiB
TypeScript

import { View, Text, TouchableOpacity, Picker } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import {DAYS_OF_WEEK_ENUM} from "@/hooks/firebase/types/todoData";
const RepeatFreq = ({ handleRepeatDaysChange }: { handleRepeatDaysChange: Function }) => {
const [weeks, setWeeks] = useState<number>(1);
const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1);
useEffect(() => {}, [weeks]);
return (
<View row centerV spread marginR-30>
<RepeatOption value={DAYS_OF_WEEK_ENUM.MONDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={DAYS_OF_WEEK_ENUM.TUESDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={DAYS_OF_WEEK_ENUM.WEDNESDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={DAYS_OF_WEEK_ENUM.THURSDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={DAYS_OF_WEEK_ENUM.FRIDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={DAYS_OF_WEEK_ENUM.SATURDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
<RepeatOption value={DAYS_OF_WEEK_ENUM.SUNDAY} handleRepeatDaysChange={handleRepeatDaysChange} />
</View>
);
};
export default RepeatFreq;
const RepeatOption = ({ value, handleRepeatDaysChange }: { value: string, handleRepeatDaysChange: Function }) => {
const [isSet, setisSet] = useState(false);
useEffect(() => {
handleRepeatDaysChange(value, isSet);
}, [isSet])
return (
<TouchableOpacity onPress={() => setisSet(!isSet)}>
<View
center
marginT-8
marginB-4
width={28}
height={28}
style={{
backgroundColor: isSet ? "#fd1575" : "white",
borderRadius: 100,
}}
>
<Text
style={{
fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
color: isSet ? "white" : "gray",
}}
>
{value.at(0)}
</Text>
</View>
</TouchableOpacity>
);
};