From f7e1718a86ab1bf6e9eeb0e54032d40e133fc292 Mon Sep 17 00:00:00 2001 From: Janne Date: Wed, 17 Jan 2024 14:07:59 +0100 Subject: [PATCH 1/4] Create DismissKeyboard.tsx --- src/components/DismissKeyboard.tsx | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/components/DismissKeyboard.tsx diff --git a/src/components/DismissKeyboard.tsx b/src/components/DismissKeyboard.tsx new file mode 100644 index 0000000..aafa784 --- /dev/null +++ b/src/components/DismissKeyboard.tsx @@ -0,0 +1,7 @@ +import { Keyboard, TouchableWithoutFeedback } from "react-native"; + +export const DismissKeyboard = ({ children }: any) => ( + Keyboard.dismiss()}> + {children} + +); From 9619d66c3619c73f0228039ce9f86b2ec4af9107 Mon Sep 17 00:00:00 2001 From: Janne Date: Wed, 17 Jan 2024 14:26:44 +0100 Subject: [PATCH 2/4] Add keyboard dismiss to login page --- src/components/auth/Login.tsx | 119 ++++++++++++++++++---------------- 1 file changed, 63 insertions(+), 56 deletions(-) diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx index 86c33e3..38b2c6b 100644 --- a/src/components/auth/Login.tsx +++ b/src/components/auth/Login.tsx @@ -1,11 +1,16 @@ -import { useState } from "react"; -import { TextInput, View, StyleSheet, Text } from "react-native"; +import { + TextInput, + View, + StyleSheet, + Text, + Keyboard, + TouchableWithoutFeedback, +} from "react-native"; import FormStyles from "../../styles/Forms"; import Button from "../Button"; import TextStyles from "../../styles/Text"; import { Formik } from "formik"; import * as Yup from "yup"; -import { login } from "../../services/auth"; import useAuth from "../../hooks/useAuth"; const LoginSchema = Yup.object().shape({ @@ -17,64 +22,66 @@ const Login = () => { const { fetchingLogin, errorLogin, login } = useAuth(); return ( - - Welcome to Resty - - Please authenticate to access the platform - + Keyboard.dismiss()}> + + Welcome to Resty + + Please authenticate to access the platform + - - login(values.email, values.password)} - > - {({ handleChange, handleBlur, handleSubmit, errors, values }) => ( - <> - - {errors.email && ( - {errors.email} - )} + + login(values.email, values.password)} + > + {({ handleChange, handleBlur, handleSubmit, errors, values }) => ( + <> + + {errors.email && ( + {errors.email} + )} - - {errors.password && ( - - {errors.password} - - )} + + {errors.password && ( + + {errors.password} + + )} - {errorLogin && ( - - Invalid email or password - - )} + {errorLogin && ( + + Invalid email or password + + )} - - - )} - - + + + )} + + + ); }; diff --git a/src/components/products/Product.tsx b/src/components/products/Product.tsx index 660defd..0bad5b6 100644 --- a/src/components/products/Product.tsx +++ b/src/components/products/Product.tsx @@ -1,7 +1,14 @@ import Text from "../Text"; import { ProductProps } from "../../types/stack/ProductStack"; import { formatPrice } from "../../config/helpers"; -import { View, StyleSheet, Pressable, TextInput } from "react-native"; +import { + View, + StyleSheet, + Pressable, + TextInput, + Keyboard, + TouchableWithoutFeedback, +} from "react-native"; import ContainerStyle from "../../styles/Containers"; import Header from "../headers/Header"; import Divider from "../Divider"; @@ -68,102 +75,104 @@ const Product = ({ navigation, route }: ProductProps) => { }; return ( - -
- {loading ? ( - - ) : ( - - )} - - } - goBack={() => navigation.navigate("Products")} - /> + Keyboard.dismiss()}> + +
+ {loading ? ( + + ) : ( + + )} + + } + goBack={() => navigation.navigate("Products")} + /> - + - - - Name: - - {editing ? ( - - setProductDetails((prevDetails) => ({ - ...prevDetails, - editedName: text, - })) - } - style={{ fontSize: 16 }} - /> - ) : ( - - {productDetails.currentName} + + + Name: - )} - - - - - - - Price: - - {editing ? ( - { - const cleanedText = text.replace(",", "."); - const validated = cleanedText.match(/^(\d*\.{0,1}\d{0,2}$)/); - if (validated) { + {editing ? ( + setProductDetails((prevDetails) => ({ ...prevDetails, - editedPrice: cleanedText, - })); + editedName: text, + })) } - }} - style={{ fontSize: 16 }} - keyboardType="numeric" - /> - ) : ( - - {formatPrice(productDetails.currentPrice)} + style={{ fontSize: 16 }} + /> + ) : ( + + {productDetails.currentName} + + )} + + + + + + + Price: - )} - + {editing ? ( + { + const cleanedText = text.replace(",", "."); + const validated = cleanedText.match(/^(\d*\.{0,1}\d{0,2}$)/); + if (validated) { + setProductDetails((prevDetails) => ({ + ...prevDetails, + editedPrice: cleanedText, + })); + } + }} + style={{ fontSize: 16 }} + keyboardType="numeric" + /> + ) : ( + + {formatPrice(productDetails.currentPrice)} + + )} + - + - - - Category: - - - {categoryName} - - + + + Category: + + + {categoryName} + + - + - - + + + ); }; From d4296a0aa83366ff9d7e19abd2c85c94a41437d9 Mon Sep 17 00:00:00 2001 From: Janne Date: Wed, 17 Jan 2024 14:48:40 +0100 Subject: [PATCH 4/4] Limit price to 2 decimals in NewProduct.tsx --- src/components/products/NewProduct.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/products/NewProduct.tsx b/src/components/products/NewProduct.tsx index 74b54ba..9f822e0 100644 --- a/src/components/products/NewProduct.tsx +++ b/src/components/products/NewProduct.tsx @@ -113,8 +113,10 @@ const NewProduct = ({ navigation, route }: NewProductProps) => { placeholder="Price in euros (€)" onChangeText={(text) => { const cleanedText = text.replace(",", "."); - setFieldValue("price", cleanedText); - handleChange("price")(cleanedText); + const decimalRegex = /^\d*\.?\d{0,2}$/; + if (decimalRegex.test(cleanedText)) { + setFieldValue("price", cleanedText); + } }} onBlur={handleBlur("price")} value={values.price}