139 lines
3.4 KiB
TypeScript
139 lines
3.4 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
Image,
|
|
StyleSheet,
|
|
} from "react-native";
|
|
|
|
interface BuyInSelectorProps {
|
|
setBuyInAmount: React.Dispatch<React.SetStateAction<number | null>>;
|
|
}
|
|
|
|
const defaultBuyInOptions = [10, 25, 50]; // Default buy-in values
|
|
|
|
const BuyInSelector: React.FC<BuyInSelectorProps> = ({ setBuyInAmount }) => {
|
|
const [customAmount, setCustomAmount] = useState("");
|
|
const [buyInAmount, setBuyInAmountState] = useState<number | null>(null); // Store the selected amount locally
|
|
|
|
const handleCustomAmountChange = (value: string) => {
|
|
const numericValue = parseFloat(value);
|
|
if (!isNaN(numericValue) && numericValue >= 0) {
|
|
setCustomAmount(value);
|
|
setBuyInAmountState(numericValue); // Update buy-in amount
|
|
setBuyInAmount(numericValue); // Pass it back to parent component
|
|
} else {
|
|
setCustomAmount("");
|
|
setBuyInAmountState(null); // Reset if invalid
|
|
setBuyInAmount(null);
|
|
}
|
|
};
|
|
|
|
const handleBuyInSelection = (amount: number) => {
|
|
setBuyInAmountState(amount);
|
|
setCustomAmount("");
|
|
setBuyInAmount(amount); // Pass it back to parent component
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* Title with Money Icon */}
|
|
<View style={styles.header}>
|
|
<Image
|
|
source={{
|
|
uri: "https://png.pngtree.com/png-vector/20191128/ourmid/pngtree-coin-money-icon-png-image_2049478.jpg",
|
|
}}
|
|
style={styles.icon}
|
|
/>
|
|
<Text style={styles.title}>Select Buy-in Amount:</Text>
|
|
</View>
|
|
|
|
{/* Default Buy-In Options */}
|
|
<View style={styles.optionsContainer}>
|
|
{defaultBuyInOptions.map((amount) => (
|
|
<TouchableOpacity
|
|
key={amount}
|
|
style={[
|
|
styles.buyInButton,
|
|
buyInAmount === amount ? styles.selectedButton : null,
|
|
]}
|
|
onPress={() => handleBuyInSelection(amount)}
|
|
>
|
|
<Text style={styles.buttonText}>{amount}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
{/* Custom Amount Input */}
|
|
<Text style={styles.orText}>Or enter a custom amount:</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={customAmount}
|
|
onChangeText={handleCustomAmountChange}
|
|
placeholder="Enter custom buy-in"
|
|
keyboardType="numeric"
|
|
/>
|
|
|
|
{/* Display the selected buy-in amount */}
|
|
<Text style={styles.selectionText}>
|
|
Selected Buy-in: {buyInAmount !== null ? buyInAmount : "None"}
|
|
</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 20,
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 10,
|
|
},
|
|
icon: {
|
|
width: 50,
|
|
height: 50,
|
|
marginRight: 15,
|
|
},
|
|
title: {
|
|
fontSize: 22,
|
|
},
|
|
optionsContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
marginVertical: 10,
|
|
},
|
|
buyInButton: {
|
|
backgroundColor: "#ddd",
|
|
padding: 10,
|
|
borderRadius: 5,
|
|
},
|
|
selectedButton: {
|
|
backgroundColor: "#4caf50",
|
|
},
|
|
buttonText: {
|
|
fontSize: 16,
|
|
},
|
|
orText: {
|
|
marginTop: 10,
|
|
textAlign: "center",
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderColor: "#ccc",
|
|
padding: 8,
|
|
marginVertical: 10,
|
|
borderRadius: 5,
|
|
},
|
|
selectionText: {
|
|
marginTop: 15,
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
},
|
|
});
|
|
|
|
export default BuyInSelector;
|