From 6dcb3e72b4e53cd3e563b336c73bea34df69863c Mon Sep 17 00:00:00 2001
From: boris-cleo <boris.szelcsanyi@cleoag.ch>
Date: Fri, 14 Jun 2024 14:25:10 +0200
Subject: [PATCH] feat: add option to hide dial code in CountryButton component

---
 components/CountryButton.tsx | 87 ++++++++++++++++++++----------------
 1 file changed, 48 insertions(+), 39 deletions(-)

diff --git a/components/CountryButton.tsx b/components/CountryButton.tsx
index 0728a6a..1409e87 100644
--- a/components/CountryButton.tsx
+++ b/components/CountryButton.tsx
@@ -1,47 +1,56 @@
-import React from 'react';
-import { Text, TouchableOpacity, ViewStyle } from "react-native";
-import { ItemTemplateProps } from "../types/Types";
+import React from "react";
+import {ItemTemplateProps} from "../types/Types";
+import { Text, TouchableOpacity, ViewStyle, StyleProp, TextStyle } from "react-native";
 
+interface CountryButtonProps extends ItemTemplateProps {
+  showDialCode?: boolean;
+  style?: {
+    countryButtonStyles?: StyleProp<ViewStyle>;
+    flag?: StyleProp<TextStyle>;
+    dialCode?: StyleProp<TextStyle>;
+    countryName?: StyleProp<TextStyle>;
+  };
+}
 
-export const CountryButton = ({ item, name, style, ...rest }: ItemTemplateProps) => (
-    <TouchableOpacity
-        style={[styles.countryButton, style?.countryButtonStyles]}
-        testID="countryCodesPickerCountryButton"
-        {...rest}
-    >
-        <Text style={[
-            {
-                flex: 0.2
-            },
-            style?.flag
-        ]}>
-            {item?.flag}
-        </Text>
-        <Text style={[{
-            flex: 0.3,
-        }, style?.dialCode]}>
-            {item?.dial_code}
-        </Text>
-        <Text style={[{
-            flex: 1
-        }, style?.countryName]}>
-            {name}
-        </Text>
-    </TouchableOpacity>
+export const CountryButton = ({item, name, style, showDialCode = true, ...rest}: CountryButtonProps) => (
+  <TouchableOpacity
+    style={[styles.countryButton, style?.countryButtonStyles]}
+    testID="countryCodesPickerCountryButton"
+    {...rest}
+  >
+    <Text style={[
+      {
+        flex: 0.2
+      },
+      style?.flag
+    ]}>
+      {item?.flag}
+    </Text>
+    {showDialCode && (
+      <Text style={[{flex: 0.3}, style?.dialCode]}>
+        {item?.dial_code}
+      </Text>
+    )}
+    <Text style={[{
+      flex: 1
+    }, style?.countryName]}>
+      {name}
+    </Text>
+  </TouchableOpacity>
 );
 
 type StyleKeys = 'countryButton';
 
 const styles: { [key in StyleKeys]: ViewStyle } = {
-    countryButton: {
-        paddingVertical: 10,
-        backgroundColor: '#f5f5f5',
-        width: '100%',
-        height: 50,
-        paddingHorizontal: 25,
-        alignItems: 'center',
-        marginVertical: 2,
-        flexDirection: 'row',
-        borderRadius: 10,
-    },
+  countryButton: {
+    paddingVertical: 10,
+    backgroundColor: '#f5f5f5',
+    width: '100%',
+    height: 50,
+    paddingHorizontal: 25,
+    alignItems: 'center',
+    marginVertical: 2,
+    flexDirection: 'row',
+    borderRadius: 10,
+  },
 };