Merge branch 'dev' into create-components-8-9

app/(tabs)/settings/index.tsx

@@ -1,54 +1,18 @@
-import React, { useEffect, useState } from "react";
-import PhoneInput from "../../../component/global/phone_input";
-import NumberInput from "../../../component/global/number_input";
-import DateModal from "../../../component/global/date_input";
-export default function Index() {
-	/**********************************狀態管理**********************************/
-	/**********************************狀態管理**********************************/
-	/**********************************組件初始化**********************************/
-	/**********************************組件初始化**********************************/
-	/**********************************異步函數**********************************/
-	/**********************************異步函數**********************************/
-
-	//see if phone input is valid (enter at least 8 digits)
-	const [phoneInputValidationStatus, setPhoneInputValidationStatus] = useState(false);
-	const handleValidationStatus = (inputValidationStatus: boolean) => {
-		setPhoneInputValidationStatus(inputValidationStatus);
-	};
-
-	//testing to see if parent component receives the value from child component
-	const [phoneValue, setPhoneValue] = useState<string>("");
-	const updateParentPhoneValue = (value: string) => {
-		setPhoneValue(value);
-	};
-	const [numberValue, setNumberValue] = useState<string>("");
-	const updateParentNumberValue = (value: string) => {
-		setNumberValue(value);
-	};
+import React from "react";
+import { Text } from "react-native";
 
-	const [dateValue, setDateValue] = useState<string>("");
-	const updateParentDateValue = (date: string) => {
-		setDateValue(date);
-	};
-
-	//console loggin to see if parent component receives the value from child component
-	useEffect(() => {
-		console.log(`Received inputValidationStatus value: ${phoneInputValidationStatus}`);
-		console.log(`Received phone value: ${phoneValue}`);
-		console.log(`Received number value :${numberValue}`);
-		console.log(`Received date value :${dateValue}`);
-	}, [phoneValue, numberValue, dateValue]);
+export default function Index() {
+  /**********************************狀態管理**********************************/
+  /**********************************狀態管理**********************************/
+  /**********************************組件初始化**********************************/
+  /**********************************組件初始化**********************************/
+  /**********************************異步函數**********************************/
+  /**********************************異步函數**********************************/
 
-	return (
-		////testing component here
-		<>
-			<PhoneInput
-				placeholder="電話號碼"
-				onChangeText={updateParentPhoneValue}
-				onValidationStatusChange={handleValidationStatus}
-			/>
-			<NumberInput placeholder="OTP驗證碼" onChangeText={updateParentNumberValue} />
-			<DateModal onDateChange={updateParentDateValue} />
-		</>
-	);
+  return (
+    ////testing component here
+    <>
+      <Text>Test Here</Text>
+    </>
+  );
 }

component/global/normal_button.tsx

@@ -0,0 +1,36 @@
+import React, { ReactElement } from "react";
+import { Pressable, Text, StyleSheet, ViewStyle, StyleProp } from "react-native";
+
+interface NormalButtonProps {
+	title: ReactElement;
+	extendedStyle?: StyleProp<ViewStyle>;
+	onPress: () => void;
+}
+
+const NormalButton: React.FC<NormalButtonProps> = ({ title, extendedStyle, onPress }) => {
+	return (
+		<Pressable
+			onPress={onPress}
+			style={({ pressed }) => [styles.button, pressed ? styles.buttonPressed : null, extendedStyle]}
+		>
+			{title}
+		</Pressable>
+	);
+};
+
+const styles = StyleSheet.create({
+	button: {
+		maxWidth: "100%",
+		padding: 15,
+		margin: 10,
+		backgroundColor: "#025c72",
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: 10,
+	},
+	buttonPressed: {
+		backgroundColor: "#28495c",
+	},
+});
+
+export default NormalButton;

component/global/normal_input.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { TextInput, StyleSheet, StyleProp, ViewStyle, KeyboardTypeOptions } from "react-native";
+
+interface NormalInputProps {
+	placeholder: string;
+	extendedStyle?: StyleProp<ViewStyle>;
+	onChangeText: (text: string) => void;
+	type?: KeyboardTypeOptions;
+	secureTextEntry?: boolean;
+}
+
+const NormalInput: React.FC<NormalInputProps> = ({
+	placeholder,
+	extendedStyle,
+	type,
+	onChangeText,
+	secureTextEntry = false,
+}) => {
+	return (
+		<TextInput
+			style={[styles.textInput, extendedStyle]}
+			placeholder={placeholder}
+			keyboardType={type ? type : "default"}
+			onChangeText={onChangeText}
+			secureTextEntry={secureTextEntry}
+		/>
+	);
+};
+
+const styles = StyleSheet.create({
+	textInput: {
+		maxWidth: "100%",
+		height: 60,
+		borderWidth: 1,
+		margin: 10,
+		padding: 20,
+		borderRadius: 8,
+		borderColor: "#bbbbbb",
+	},
+});
+
+export default NormalInput;

component/global/secondary_button.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from "react";
+import { Pressable, StyleSheet, ViewStyle, StyleProp } from "react-native";
+
+interface SecondaryButtonProps {
+	title: ReactElement;
+	extendedStyle?: StyleProp<ViewStyle>;
+	onPress: () => void;
+}
+
+const SecondaryButton: React.FC<SecondaryButtonProps> = ({ title, extendedStyle, onPress }) => {
+	return (
+		<Pressable
+			onPress={onPress}
+			style={({ pressed }) => [styles.button, pressed ? styles.buttonPressed : null, extendedStyle]}
+		>
+			{title}
+		</Pressable>
+	);
+};
+
+const styles = StyleSheet.create({
+	button: {
+		maxWidth: "100%",
+		padding: 15,
+		margin: 10,
+		backgroundColor: "#e7f2f8",
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: 10,
+	},
+	buttonPressed: {
+		backgroundColor: "#d0e1e8",
+	},
+});
+export default SecondaryButton;