ui changes

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

View File

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