ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-16 18:16:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui changes

Browse Source
This commit is contained in:
Milan Paunovic
2024-10-13 11:37:44 +02:00
parent f4be82587c
commit 36329dc2f2
3 changed files with 76 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
components/pages/grocery/EditGroceryItem.tsx
View File

@ -1,68 +1,66 @@
import { View, Text } from "react-native"; import {Text, View} from "react-native";
import React, { RefObject, useEffect, useRef, useState } from "react"; import React, {useEffect, useRef} from "react";
import { TextField, TextFieldRef } from "react-native-ui-lib"; import {TextField, TextFieldRef} from "react-native-ui-lib";
import { import {GroceryCategory, IGrocery, useGroceryContext,} from "@/contexts/GroceryContext";
GroceryCategory,
IGrocery,
useGroceryContext,
} from "@/contexts/GroceryContext";
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
interface IEditGrocery { interface IEditGrocery {
id?: number; id?: number;
title: string; title: string;
setTitle: (value: string) => void; setTitle: (value: string) => void;
setCategory?: (category: GroceryCategory) => void; setCategory?: (category: GroceryCategory) => void;
category: GroceryCategory; category: GroceryCategory;
setSubmit?: (value: boolean) => void; setSubmit?: (value: boolean) => void;
updateCategory?: (id: number, changes: Partial<IGrocery>) => void; updateCategory?: (id: number, changes: Partial<IGrocery>) => void;
closeEdit?: (value: boolean) => void; closeEdit?: (value: boolean) => void;
} }
const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => { const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
const { fuzzyMatchGroceryCategory } = useGroceryContext(); const {fuzzyMatchGroceryCategory} = useGroceryContext();
const inputRef = useRef<TextFieldRef>(null); const inputRef = useRef<TextFieldRef>(null);
useEffect(() => { useEffect(() => {
if (editGrocery.setCategory) if (editGrocery.setCategory)
editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title)); editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
}, [editGrocery.title]); }, [editGrocery.title]);
useEffect(() => { useEffect(() => {
if (inputRef.current) { if (inputRef.current) {
inputRef.current.focus(); // Focus on the TextField inputRef.current.focus(); // Focus on the TextField
} }
}, []); }, []);
return ( return (
<View <View
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
width: "100%", width: "100%",
borderRadius: 25, borderRadius: 25,
padding: 15, padding: 15,
}} marginTop: 10
> }}
<TextField >
ref={inputRef} <TextField
placeholder="Grocery" text70T
value={editGrocery.title} style={{fontWeight: "400"}}
onChangeText={(value) => { ref={inputRef}
editGrocery.setTitle(value); placeholder="Grocery"
}} value={editGrocery.title}
onSubmitEditing={() => { onChangeText={(value) => {
if (editGrocery.setSubmit) editGrocery.setSubmit(true); editGrocery.setTitle(value);
if (editGrocery.closeEdit) editGrocery.closeEdit(false); }}
if (editGrocery.updateCategory && editGrocery.id) onSubmitEditing={() => {
editGrocery.updateCategory(editGrocery.id, { if (editGrocery.setSubmit) editGrocery.setSubmit(true);
category: fuzzyMatchGroceryCategory(editGrocery.title), title: editGrocery.title if (editGrocery.closeEdit) editGrocery.closeEdit(false);
}); if (editGrocery.updateCategory && editGrocery.id)
}} editGrocery.updateCategory(editGrocery.id, {
maxLength={25} category: fuzzyMatchGroceryCategory(editGrocery.title), title: editGrocery.title
/> });
<Text>{editGrocery.category}</Text> }}
</View> maxLength={25}
); />
<Text>{editGrocery.category}</Text>
</View>
);
}; };
export default EditGroceryItem; export default EditGroceryItem;

2
components/pages/grocery/GroceryItem.tsx
View File

@ -75,7 +75,7 @@ const GroceryItem = ({
{!isEditingTitle ? ( {!isEditingTitle ? (
<View> <View>
<TouchableOpacity onPress={() => setIsEditingTitle(true)}> <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text text70T>{item.title}</Text> <Text text70T black style={{fontWeight: "400"}}>{item.title}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) : ( ) : (

38
components/pages/grocery/GroceryList.tsx
View File

@ -178,29 +178,29 @@ const GroceryList = () => {
{/* Approved Section */} {/* Approved Section */}
<View row spread marginT-40 marginB-0 centerV> <View row spread marginT-40 marginB-0 centerV>
<View row centerV> <View row centerV>
<Text text70BL>Shopping List</Text>
{approvedVisible && ( {approvedVisible && (
<AntDesign <AntDesign
name="down" name="down"
size={17} size={17}
style={styles.dropIcon} style={styles.dropIcon}
color="#9f9f9f" color="#9f9f9f"
onPress={() => { onPress={() => {
setApprovedVisible(false); setApprovedVisible(false);
}} }}
/> />
)} )}
{!approvedVisible && ( {!approvedVisible && (
<AntDesign <AntDesign
name="right" name="right"
size={15} size={15}
style={styles.dropIcon} style={styles.dropIcon}
color="#9f9f9f" color="#9f9f9f"
onPress={() => { onPress={() => {
setApprovedVisible(true); setApprovedVisible(true);
}} }}
/> />
)} )}
<Text text70BL>Shopping List</Text>
</View> </View>
<View <View
centerV centerV