Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed issue 6: Added functionality to show only specific countries to select #9

Merged
merged 6 commits into from
Jul 29, 2024
Merged

Fixed issue 6: Added functionality to show only specific countries to select #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c49f9fa
Added length for each country
ahmed-gelemli Jul 26, 2024
53efb28
Corrected some max length
ahmed-gelemli Jul 26, 2024
0a1a9ea
Added maxLength
ahmed-gelemli Jul 26, 2024
dd017e3
Added functionality for specifying a list of countries to show on top…
ahmed-gelemli Jul 26, 2024
511691c
Updated README.md to communicate latest additions
ahmed-gelemli Jul 26, 2024
0bf7f9b
Removed updates that are not directly related to this branch
ahmed-gelemli Jul 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -60,6 +61,7 @@ export default function App() {
setCode={setCountryCode}
phoneNumber={phoneNumber}
setPhoneNumber={setPhoneNumber}
onlyCountries={['AZ', 'BD', 'CA', 'GB', 'IN', 'NZ', 'US', 'TR']}
/>
);
}
Expand All @@ -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

Expand Down
1 change: 1 addition & 0 deletions example/src/application.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
14 changes: 10 additions & 4 deletions src/PhoneNumberInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) => ({
Expand All @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion src/data/countries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1521,4 +1521,4 @@ export const countriesMap: CountriesMap = {
export const coentryLongestDialCodeLength = countries.reduce(
(longest, country) => Math.max(longest, country.dialCode.length),
0
);
);
2 changes: 2 additions & 0 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}
Expand All @@ -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>;
Expand Down