ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2026-03-10 20:21:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

edit todos

Browse Source
This commit is contained in:
ivic00
2024-09-05 22:09:28 +02:00
parent f08b6ea997
commit 8d85cbdaad
1 changed files with 110 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
components/pages/todos/AddChore.tsx
View File

@ -9,18 +9,28 @@ import {
TextField,
Dialog,
Slider,
NumberInput,
NumberInputData,
DateTimePicker,
} from "react-native-ui-lib";
import { AntDesign } from "@expo/vector-icons";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import LinearGradient from "react-native-linear-gradient";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
const AddChore = () => {
const [isVisible, setIsVisible] = useState<boolean>(false);
const [points, setPoints] = useState<number>(10);
const [choreDate, setChoreDate] = useState<Date>(new Date());
useEffect(() => {
console.log(points);
}, [points]);
const handleChange = (text: string) => {
const numericValue = parseInt(text, 10);
if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
setPoints(numericValue);
} else if (text === "") {
setPoints(0);
}
};
return (
<LinearGradient
@ -47,6 +57,7 @@ const AddChore = () => {
panDirection={PanningDirectionsEnum.DOWN}
onDismiss={() => setIsVisible(false)}
containerStyle={{
borderRadius: 10,
backgroundColor: "white",
width: "100%",
alignSelf: "stretch",
@ -60,20 +71,104 @@ const AddChore = () => {
placeholderTextColor="#2d2d30"
text60R
marginT-15
marginL-30
/>
<View style={styles.divider} />
<View marginH-30>
<Slider
value={points}
onValueChange={(value) => setPoints(value)}
minimumValue={0}
step={10}
maximumValue={100}
<View marginL-30 centerV>
<View row marginB-10>
<Feather name="calendar" size={28} color="#919191" />
<DateTimePicker
value={choreDate}
text70
marginL-10
onChange={(date) => {
setChoreDate(date);
}}
/>
</View>
<View row>
<AntDesign name="clockcircleo" size={28} color="#919191" />
</View>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-10 row centerV>
<Ionicons name="person-circle-outline" size={30} color="#919191" />
<Text text60R marginL-10>
Assignees
</Text>
<Button
size={ButtonSize.small}
paddingH-8
iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c" />
)}
style={{
marginLeft: "auto",
borderRadius: 8,
backgroundColor: "#ffe8f1",
borderColor: "#ea156c",
borderWidth: 1,
}}
color="#ea156c"
label="Assign"
/>
<View row spread>
<Text>0</Text>
<Text>50</Text>
<Text>100</Text>
</View>
<View row>
<View
marginL-30
style={{
aspectRatio: 1,
width: 60,
backgroundColor: "red",
borderRadius: 50,
}}
/>
<View
marginL-30
style={{
aspectRatio: 1,
width: 60,
backgroundColor: "red",
borderRadius: 50,
}}
/>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-10 row centerV>
<Ionicons name="gift-outline" size={30} color="#919191" />
<Text text60R marginL-10>
Reward Points
</Text>
</View>
<View marginH-30 row spread>
<View width={"85%"}>
<Slider
value={points}
onValueChange={(value) => setPoints(value)}
minimumValue={0}
step={10}
maximumValue={100}
/>
<View row spread>
<Text>0</Text>
<Text>50</Text>
<Text>100</Text>
</View>
</View>
<View style={{ marginLeft: "auto" }}>
<TextField
value={points.toString()}
onChangeText={(text) => {
handleChange(text);
}}
containerStyle={{
borderWidth: 1,
borderColor: "#d9d9d9",
width: 45,
borderRadius: 5,
}}
/>
</View>
</View>
</Dialog>