abstract picker component; added small buttons; visual tweaks
This commit is contained in:
David Westgate
parent
e720e2e010
commit
2e5efda69a
@ -15,8 +15,9 @@ import {
|
||||
import styles, { COLORS } from "@/styles/styles";
|
||||
import Section from "@/containers/Section";
|
||||
import AppContext from "@/util/context";
|
||||
import { Picker } from "@react-native-picker/picker";
|
||||
import i18n from "@/i18n/i18n";
|
||||
import { Picker, PickerItem } from "@/containers/Picker";
|
||||
import { ItemValue } from "@react-native-picker/picker/typings/Picker";
|
||||
|
||||
const IndexScreen: React.FC = () => {
|
||||
const [playerCount, setPlayerCount] = useState(2);
|
||||
@ -84,9 +85,9 @@ const IndexScreen: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleLanguageChange = (language: string) => {
|
||||
setSelectedLanguage(language);
|
||||
i18n.changeLanguage(language);
|
||||
const handleLanguageChange = (language: ItemValue, _: any) => {
|
||||
setSelectedLanguage(language.toString());
|
||||
i18n.changeLanguage(language.toString());
|
||||
};
|
||||
|
||||
return (
|
||||
@ -121,25 +122,9 @@ const IndexScreen: React.FC = () => {
|
||||
<Picker
|
||||
selectedValue={selectedLanguage}
|
||||
onValueChange={handleLanguageChange}
|
||||
style={[styles.picker, { color: colors.TEXT }]}
|
||||
dropdownIconColor={colors.TEXT}
|
||||
>
|
||||
<Picker.Item
|
||||
label={i18n.t("english")}
|
||||
value="en"
|
||||
style={{
|
||||
color: colors.TEXT,
|
||||
backgroundColor: colors.PRIMARY,
|
||||
}}
|
||||
/>
|
||||
<Picker.Item
|
||||
label={i18n.t("spanish")}
|
||||
value="es"
|
||||
style={{
|
||||
color: colors.TEXT,
|
||||
backgroundColor: colors.PRIMARY,
|
||||
}}
|
||||
/>
|
||||
<PickerItem label={i18n.t("english")} value="en" />
|
||||
<PickerItem label={i18n.t("spanish")} value="es" />
|
||||
</Picker>
|
||||
</Section>
|
||||
|
||||
@ -227,19 +212,23 @@ const IndexScreen: React.FC = () => {
|
||||
title={i18n.t("save_slot_1")}
|
||||
onPress={() => handleSave("SLOT1")}
|
||||
disabled={buyInAmount === null}
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
title={i18n.t("save_slot_2")}
|
||||
onPress={() => handleSave("SLOT2")}
|
||||
disabled={buyInAmount === null}
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
title={i18n.t("load_slot_1")}
|
||||
onPress={() => handleLoad("SLOT1")}
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
title={i18n.t("load_slot_2")}
|
||||
onPress={() => handleLoad("SLOT2")}
|
||||
size="small"
|
||||
/>
|
||||
</>
|
||||
</Section>
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import React, { useMemo } from "react";
|
||||
import { Picker } from "@react-native-picker/picker";
|
||||
import styles, { COLORS } from "@/styles/styles";
|
||||
import React from "react";
|
||||
import i18n from "@/i18n/i18n";
|
||||
import { useColorScheme } from "react-native";
|
||||
import { Picker, PickerItem } from "@/containers/Picker";
|
||||
|
||||
interface CurrencySelectorProps {
|
||||
selectedCurrency: string;
|
||||
@ -13,53 +11,17 @@ const CurrencySelector: React.FC<CurrencySelectorProps> = ({
|
||||
selectedCurrency,
|
||||
setSelectedCurrency,
|
||||
}) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
() => (darkMode ? COLORS.DARK : COLORS.LIGHT),
|
||||
[darkMode]
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Picker
|
||||
selectedValue={selectedCurrency}
|
||||
onValueChange={(itemValue) => setSelectedCurrency(itemValue)}
|
||||
style={[styles.picker, { color: colors.TEXT }]}
|
||||
dropdownIconColor={colors.TEXT}
|
||||
onValueChange={(itemValue) => setSelectedCurrency(itemValue.toString())}
|
||||
testID="currency-picker" // ✅ Add testID here
|
||||
>
|
||||
<Picker.Item
|
||||
label={i18n.t("usd")}
|
||||
value="$"
|
||||
style={{
|
||||
color: colors.TEXT,
|
||||
backgroundColor: colors.PRIMARY,
|
||||
}}
|
||||
/>
|
||||
<Picker.Item
|
||||
label={i18n.t("euro")}
|
||||
value="€"
|
||||
style={{
|
||||
color: colors.TEXT,
|
||||
backgroundColor: colors.PRIMARY,
|
||||
}}
|
||||
/>
|
||||
<Picker.Item
|
||||
label={i18n.t("pound")}
|
||||
value="£"
|
||||
style={{
|
||||
color: colors.TEXT,
|
||||
backgroundColor: colors.PRIMARY,
|
||||
}}
|
||||
/>
|
||||
<Picker.Item
|
||||
label={i18n.t("inr")}
|
||||
value="₹"
|
||||
style={{
|
||||
color: colors.TEXT,
|
||||
backgroundColor: colors.PRIMARY,
|
||||
}}
|
||||
/>
|
||||
<PickerItem label={i18n.t("usd")} value="$" />
|
||||
<PickerItem label={i18n.t("euro")} value="€" />
|
||||
<PickerItem label={i18n.t("pound")} value="£" />
|
||||
<PickerItem label={i18n.t("inr")} value="₹" />
|
||||
</Picker>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -11,9 +11,15 @@ interface ButtonProps {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
disabled?: boolean;
|
||||
size?: "normal" | "small";
|
||||
}
|
||||
|
||||
const Button: React.FC<ButtonProps> = ({ title, onPress, disabled }) => {
|
||||
const Button: React.FC<ButtonProps> = ({
|
||||
title,
|
||||
onPress,
|
||||
disabled,
|
||||
size = "normal",
|
||||
}) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
@ -26,12 +32,19 @@ const Button: React.FC<ButtonProps> = ({ title, onPress, disabled }) => {
|
||||
disabled={disabled}
|
||||
accessibilityRole="button"
|
||||
style={[
|
||||
styles.button,
|
||||
size == "normal" ? styles.button : styles.buttonSmall,
|
||||
{ backgroundColor: colors.PRIMARY },
|
||||
disabled && styles.disabled,
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.buttonText, { color: colors.TEXT }]}>{title}</Text>
|
||||
<Text
|
||||
style={[
|
||||
size == "normal" ? styles.buttonText : styles.buttonTextSmall,
|
||||
{ color: colors.TEXT },
|
||||
]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
@ -44,22 +57,22 @@ const styles = StyleSheet.create({
|
||||
marginHorizontal: 5,
|
||||
marginVertical: 5,
|
||||
},
|
||||
darkButton: {
|
||||
backgroundColor: "#333333",
|
||||
},
|
||||
lightButton: {
|
||||
backgroundColor: "#DDDDDD",
|
||||
},
|
||||
buttonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
},
|
||||
darkText: {
|
||||
color: "#FFFFFF",
|
||||
buttonSmall: {
|
||||
paddingVertical: 5,
|
||||
paddingHorizontal: 10,
|
||||
borderRadius: 8,
|
||||
marginHorizontal: 2,
|
||||
marginVertical: 2,
|
||||
},
|
||||
lightText: {
|
||||
color: "#000000",
|
||||
buttonTextSmall: {
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
},
|
||||
disabled: {
|
||||
opacity: 0.5,
|
||||
|
||||
49
containers/Picker.tsx
Normal file
49
containers/Picker.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import styles, { COLORS } from "@/styles/styles";
|
||||
import { PickerItemProps, PickerProps } from "@react-native-picker/picker";
|
||||
import { useMemo } from "react";
|
||||
import { useColorScheme, View } from "react-native";
|
||||
import { Picker as RNPicker } from "@react-native-picker/picker";
|
||||
|
||||
export const PickerItem: React.FC<PickerItemProps> = (props) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
() => (darkMode ? COLORS.DARK : COLORS.LIGHT),
|
||||
[darkMode]
|
||||
);
|
||||
|
||||
return (
|
||||
<RNPicker.Item
|
||||
style={[
|
||||
styles.pickerItem,
|
||||
{ color: colors.TEXT, backgroundColor: colors.PRIMARY },
|
||||
]}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Picker: React.FC<PickerProps> = (props) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
() => (darkMode ? COLORS.DARK : COLORS.LIGHT),
|
||||
[darkMode]
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.pickerWrapper}>
|
||||
<RNPicker
|
||||
style={[
|
||||
styles.picker,
|
||||
{
|
||||
color: colors.TEXT,
|
||||
backgroundColor: colors.PRIMARY,
|
||||
},
|
||||
]}
|
||||
dropdownIconColor={colors.TEXT}
|
||||
{...props}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@ -32,7 +32,7 @@ const GlobalStyles = StyleSheet.create({
|
||||
gap: 10,
|
||||
},
|
||||
|
||||
h1: { fontSize: 20, fontWeight: "bold" },
|
||||
h1: { fontSize: 19, fontWeight: "bold" },
|
||||
h2: { fontSize: 18, fontWeight: "normal" },
|
||||
p: {
|
||||
fontSize: 16,
|
||||
@ -63,6 +63,10 @@ const GlobalStyles = StyleSheet.create({
|
||||
width: 150,
|
||||
},
|
||||
pickerItem: {},
|
||||
pickerWrapper: {
|
||||
borderRadius: 10,
|
||||
overflow: "hidden",
|
||||
},
|
||||
});
|
||||
|
||||
export default GlobalStyles;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user