Merge pull request #9 from ahmed-gelemli/issue-6-add-country-selection

Fixed issue 6: Added functionality to show only specific countries to select
kuasha420 · Jul 29, 2024 · eda28fb · eda28fb
2 parents ff2eb42 + 0bf7f9b
commit eda28fb
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@
 - Looks and feels consistent with React Native Paper.
 - Allows specifying default country.
 - Allows specifying a list of countries to show on top of the list.
+- Allows user to specify which countries to show.
 - Exposes imperative methods to open and close the country code picker.
 - Supports light and dark themes.
 - Works well on Android, iOS and Web.
@@ -60,6 +61,7 @@ export default function App() {
       setCode={setCountryCode}
       phoneNumber={phoneNumber}
       setPhoneNumber={setPhoneNumber}
+      onlyCountries={['AZ', 'BD', 'CA', 'GB', 'IN', 'NZ', 'US', 'TR']}
     />
   );
 }
@@ -73,16 +75,17 @@ A more complete example can be found in the `example` directory.
 
 #### Props
 
-| Prop                  | Type                            | Description                                                                               | Notes                                                                            |
-| --------------------- | ------------------------------- | ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| `code`                | `string`                        | The country code.                                                                         | Optional. By default, the country code is set to `##` whicch shows a world icon. |
-| `setCode`             | `(code: string) => void`        | A function that sets the country code.                                                    | Required.                                                                        |
-| `phoneNumber`         | `string`                        | The phone number.                                                                         | Optional. By default, no phone number is set.                                    |
-| `setPhoneNumber`      | `(phoneNumber: string) => void` | A function that sets the phone number.                                                    | Required.                                                                        |
-| `showFirstOnList`     | `string[]`                      | A list of country codes that should be shown on top of the list.                          | Optional. By default, countries are shown alphabetically.                        |
-| `modalStyle`          | `StyleProp<ViewStyle>`          | The style of the modal that shows the country code picker.                                | Optional.                                                                        |
-| `modalContainerStyle` | `StyleProp<ViewStyle>`          | The style of the container of the modal that shows the country code picker.               | Optional.                                                                        |
-| `...rest`             | `...TextInputProps`             | Any other props that you want to pass to the `TextInput` component of React Native Paper. | Optional.                                                                        |
+| Prop                  | Type                            | Description                                                                               | Notes                                                                           |
+| --------------------- | ------------------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| `code`                | `string`                        | The country code.                                                                         | Optional. By default, the country code is set to `##` which shows a world icon. |
+| `setCode`             | `(code: string) => void`        | A function that sets the country code.                                                    | Required.                                                                       |
+| `phoneNumber`         | `string`                        | The phone number.                                                                         | Optional. By default, no phone number is set.                                   |
+| `setPhoneNumber`      | `(phoneNumber: string) => void` | A function that sets the phone number.                                                    | Required.                                                                       |
+| `showFirstOnList`     | `string[]`                      | A list of country codes that should be shown on top of the list.                          | Optional. By default, countries are shown alphabetically.                       |
+| `modalStyle`          | `StyleProp<ViewStyle>`          | The style of the modal that shows the country code picker.                                | Optional.                                                                       |
+| `modalContainerStyle` | `StyleProp<ViewStyle>`          | The style of the container of the modal that shows the country code picker.               | Optional.                                                                       |
+| `onlyCountries`       | `string[]`                      | A list of country codes that specifies which countries can be selected.                   | Optional.                                                                       |
+| `...rest`             | `...TextInputProps`             | Any other props that you want to pass to the `TextInput` component of React Native Paper. | Optional.                                                                       |
 
 #### Ref Methods
 

diff --git a/example/src/application.tsx b/example/src/application.tsx
@@ -42,6 +42,7 @@ const Application: React.FC = () => {
             phoneNumber={phoneNumber}
             setPhoneNumber={setPhoneNumber}
             showFirstOnList={countriesToShowFirst}
+            onlyCountries={["AZ", "BD", "CA", "GB", "IN", "NZ", "US", "TR", "AU"]}
             modalStyle={Platform.OS === 'web' ? styles.web : undefined}
           />
           <Surface elevation={5} style={styles.country}>

diff --git a/src/PhoneNumberInput.tsx b/src/PhoneNumberInput.tsx
@@ -27,7 +27,8 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputRef, PhoneNumberInput
       phoneNumber = '',
       setPhoneNumber,
       showFirstOnList,
-      // Prpos from TextInput that needs special handling
+      onlyCountries = [], // Add the new prop
+      // Props from TextInput that needs special handling
       disabled,
       editable = true,
       keyboardType,
@@ -76,8 +77,13 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputRef, PhoneNumberInput
     }));
 
     const countriesList = useMemo(() => {
+      let filteredCountries = countries;
+      if (onlyCountries.length > 0) {
+        filteredCountries = countries.filter((country) => onlyCountries.includes(country.code));
+      }
+
       if (!showFirstOnList?.length) {
-        return countries;
+        return filteredCountries;
       }
 
       const countriesToShowOnTop = showFirstOnList.map((code) => ({
@@ -87,11 +93,11 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputRef, PhoneNumberInput
 
       return [
         ...countriesToShowOnTop,
-        ...countries.filter(
+        ...filteredCountries.filter(
           (country) => !countriesToShowOnTop.some((c) => c.code === country.code)
         ),
       ];
-    }, [showFirstOnList]);
+    }, [showFirstOnList, onlyCountries]);
 
     const searchResult = useMemo(() => {
       if (!debouncedSearchQuery) {

diff --git a/src/data/countries.ts b/src/data/countries.ts
@@ -1521,4 +1521,4 @@ export const countriesMap: CountriesMap = {
 export const coentryLongestDialCodeLength = countries.reduce(
   (longest, country) => Math.max(longest, country.dialCode.length),
   0
-);
+);
diff --git a/src/types.ts b/src/types.ts
@@ -17,6 +17,7 @@ export interface PhoneNumberInputProps extends Omit<TextInputProps, 'value' | 'o
   phoneNumber?: string;
   setPhoneNumber: React.Dispatch<React.SetStateAction<string | undefined>>;
   showFirstOnList?: string[];
+  onlyCountries? : string[];
   modalStyle?: StyleProp<ViewStyle>;
   modalContainerStyle?: StyleProp<ViewStyle>;
 }
@@ -29,6 +30,7 @@ export interface CountryPickerRef {
 export interface CountryPickerProps extends Omit<TextInputProps, 'value' | 'onChangeText'> {
   country?: string;
   setCountry: React.Dispatch<React.SetStateAction<string>>;
+  onlyCountries? : string[];
   showFirstOnList?: string[];
   modalStyle?: StyleProp<ViewStyle>;
   modalContainerStyle?: StyleProp<ViewStyle>;