diff --git a/README.md b/README.md index 5f38724..367abce 100644 --- 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` | The style of the modal that shows the country code picker. | Optional. | -| `modalContainerStyle` | `StyleProp` | 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` | The style of the modal that shows the country code picker. | Optional. | +| `modalContainerStyle` | `StyleProp` | 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 index bda7bee..5b37838 100644 --- 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} /> diff --git a/src/PhoneNumberInput.tsx b/src/PhoneNumberInput.tsx index 4321c49..5fc9452 100644 --- a/src/PhoneNumberInput.tsx +++ b/src/PhoneNumberInput.tsx @@ -27,7 +27,8 @@ export const PhoneNumberInput = forwardRef { + 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 !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 index d5ffca9..5b52698 100644 --- 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 -); +); \ No newline at end of file diff --git a/src/types.ts b/src/types.ts index 744f526..4549689 100644 --- a/src/types.ts +++ b/src/types.ts @@ -17,6 +17,7 @@ export interface PhoneNumberInputProps extends Omit>; showFirstOnList?: string[]; + onlyCountries? : string[]; modalStyle?: StyleProp; modalContainerStyle?: StyleProp; } @@ -29,6 +30,7 @@ export interface CountryPickerRef { export interface CountryPickerProps extends Omit { country?: string; setCountry: React.Dispatch>; + onlyCountries? : string[]; showFirstOnList?: string[]; modalStyle?: StyleProp; modalContainerStyle?: StyleProp;