crazycharge-app/component/global/phone_input.tsx

// import React, { useState } from "react";
// import { View, Text, TextInput, StyleSheet, ViewStyle, StyleProp } from "react-native";
// import { HandleSignUpFormDataChange } from "../../types/signup";
// interface PhoneInputProps {
// 	placeholder: string;
// 	extendedStyle?: StyleProp<ViewStyle>;
// 	handleFormDataChange?: HandleSignUpFormDataChange;
// 	editable?: boolean;
// }

// const PhoneInput: React.FC<PhoneInputProps> = ({ placeholder, extendedStyle, handleFormDataChange, editable }) => {
// 	const [error, setError] = useState("");
// 	const handleTextChange = (text: string) => {
// 		if (text.length >= 8) {
// 			setError("");
// 			handleFormDataChange?.("phone", text);
// 			handleFormDataChange?.("phoneVerificationStatus", true);
// 		} else {
// 			setError("Please enter at least 8 digits");
// 			handleFormDataChange?.("phone", text);
// 			handleFormDataChange?.("phoneVerificationStatus", false);
// 		}
// 	};

// 	return (
// 		<View>
// 			<View style={[styles.inputContainer, extendedStyle]}>
// 				<Text style={styles.prefix}>+852</Text>
// 				<View style={styles.horizontalLine} />
// 				<TextInput
// 					keyboardType="numeric"
// 					onChangeText={handleTextChange}
// 					placeholder={placeholder}
// 					style={[styles.input]}
// 					placeholderTextColor="#888888"
// 					editable={editable}
// 				/>
// 			</View>
// 			{error && <Text style={styles.errorMessage}>{error}</Text>}
// 		</View>
// 	);
// };

// const styles = StyleSheet.create({
// 	inputContainer: {
// 		maxWidth: "100%",
// 		flexDirection: "row",
// 		alignItems: "center",
// 		justifyContent: "center",
// 		borderWidth: 1,
// 		borderColor: "#bbbbbb",
// 		borderRadius: 12,
// 		padding: 20,
// 	},
// 	prefix: {
// 		marginRight: 5,
// 		fontSize: 16,
// 	},
// 	horizontalLine: {
// 		width: 24,
// 		borderColor: "#bbbbbb",
// 		borderWidth: 0.5,
// 		transform: [{ rotate: "90deg" }],
// 	},
// 	input: {
// 		flex: 1,
// 		marginLeft: 5,
// 		fontSize: 16,
// 	},
// 	errorMessage: {
// 		fontSize: 14,
// 		color: "#ff0033",
// 		fontWeight: "400",
// 		marginLeft: 10,
// 		marginTop: 10,
// 	},
// });
// export default PhoneInput;

// import React, { useState } from "react";
// import { View, Text, TextInput, StyleSheet, ViewStyle, StyleProp } from "react-native";
// import { SignUpFormData } from "../../types/signUpFormData";

// interface PhoneInputProps {
// 	placeholder: string;
// 	extendedStyle?: StyleProp<ViewStyle>;
// 	editable?: boolean;
// 	signUpFormData?: SignUpFormData;
// 	setSignUpFormData?: (newFormData: Partial<SignUpFormData>) => void;
// }

// const PhoneInput: React.FC<PhoneInputProps> = ({
// 	placeholder,
// 	extendedStyle,
// 	editable,
// 	signUpFormData,
// 	setSignUpFormData,
// }) => {
// 	const [error, setError] = useState("");

// 	const handleTextChange = (text: string) => {
// 		if (text.length >= 8) {
// 			setError("");
// 			setSignUpFormData({
// 				...signUpFormData,
// 				phone: text,
// 				phoneVerificationStatus: true,
// 			});
// 		} else {
// 			setError("Please enter at least 8 digits");
// 			setSignUpFormData({
// 				...signUpFormData,
// 				phone: text,
// 				phoneVerificationStatus: false,
// 			});
// 		}
// 	};

// 	return (
// 		<View>
// 			<View style={[styles.inputContainer, extendedStyle]}>
// 				<Text style={styles.prefix}>+852</Text>
// 				<View style={styles.horizontalLine} />
// 				<TextInput
// 					value={signUpFormData?.phone}
// 					keyboardType="numeric"
// 					onChangeText={handleTextChange}
// 					placeholder={placeholder}
// 					style={[styles.input]}
// 					placeholderTextColor="#888888"
// 					editable={editable}
// 				/>
// 			</View>
// 			{error && <Text style={styles.errorMessage}>{error}</Text>}
// 		</View>
// 	);
// };

// const styles = StyleSheet.create({
// 	inputContainer: {
// 		maxWidth: "100%",
// 		flexDirection: "row",
// 		alignItems: "center",
// 		justifyContent: "center",
// 		borderWidth: 1,
// 		borderColor: "#bbbbbb",
// 		borderRadius: 12,
// 		padding: 20,
// 	},
// 	prefix: {
// 		marginRight: 5,
// 		fontSize: 16,
// 	},
// 	horizontalLine: {
// 		width: 24,
// 		borderColor: "#bbbbbb",
// 		borderWidth: 0.5,
// 		transform: [{ rotate: "90deg" }],
// 	},
// 	input: {
// 		flex: 1,
// 		marginLeft: 5,
// 		fontSize: 16,
// 	},
// 	errorMessage: {
// 		fontSize: 14,
// 		color: "#ff0033",
// 		fontWeight: "400",
// 		marginLeft: 10,
// 		marginTop: 10,
// 	},
// });
// export default PhoneInput;

import React from "react";
import { View, Text, TextInput, StyleSheet, ViewStyle, StyleProp } from "react-native";

interface PhoneInputProps {
	value: string | undefined;
	onChangeText: (text: string) => void;
	placeholder: string;
	extendedStyle?: StyleProp<ViewStyle>;
	editable?: boolean;
}

const PhoneInput: React.FC<PhoneInputProps> = ({ value, onChangeText, placeholder, extendedStyle, editable }) => {
	return (
		<View>
			<View style={[styles.inputContainer, extendedStyle]}>
				<Text style={styles.prefix}>+852</Text>
				<View style={styles.horizontalLine} />
				<TextInput
					value={value}
					onChangeText={onChangeText}
					keyboardType="numeric"
					placeholder={placeholder}
					style={[styles.input]}
					placeholderTextColor="#888888"
					editable={editable}
				/>
			</View>
		</View>
	);
};

const styles = StyleSheet.create({
    inputContainer: {
        maxWidth: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 1,
        borderColor: '#bbbbbb',
        borderRadius: 12,
        padding: 20
    },
    prefix: {
        marginRight: 5,
        fontSize: 16
    },
    horizontalLine: {
        width: 24,
        borderColor: '#bbbbbb',
        borderWidth: 0.5,
        transform: [{ rotate: '90deg' }]
    },
    input: {
        flex: 1,
        marginLeft: 5,
        fontSize: 16
    },
    errorMessage: {
        fontSize: 14,
        color: '#ff0033',
        fontWeight: '400',
        marginLeft: 10,
        marginTop: 10
    }
});
export default PhoneInput;