react-native-country-select 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -28
- package/lib/components/CountryItem/index.tsx +1 -1
- package/lib/components/CountrySelect/index.tsx +25 -1
- package/lib/components/styles.js +11 -0
- package/lib/constants/countries.json +1078 -4020
- package/lib/interface/countrySelectProps.ts +1 -0
- package/lib/interface/countrySelectStyles.ts +2 -0
- package/lib/utils/getTranslation.ts +37 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -248,34 +248,35 @@ export default function App() {
|
|
|
248
248
|
|
|
249
249
|
## CountrySelect Props
|
|
250
250
|
|
|
251
|
-
| Prop | Type | Required | Default
|
|
252
|
-
| ---------------------------- | ----------------------------------------------------------------------- | -------- |
|
|
253
|
-
| visible | boolean | Yes | false
|
|
254
|
-
| onClose | () => void | Yes | -
|
|
255
|
-
| onSelect | (country: [ICountry](lib/interfaces/country.ts)) => void | Yes | -
|
|
256
|
-
| modalType | 'bottomSheet' \| 'popup' | No | 'bottomSheet'
|
|
257
|
-
| countrySelectStyle | [ICountrySelectStyle](lib/interfaces/countrySelectStyles.ts) | No | -
|
|
258
|
-
| isFullScreen | boolean | No | false
|
|
259
|
-
| popularCountries | string[] | No | []
|
|
260
|
-
| visibleCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | []
|
|
261
|
-
| hiddenCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | []
|
|
262
|
-
| theme | 'light' \| 'dark' | No | 'light'
|
|
263
|
-
| language | [ICountrySelectLanguages](lib/interfaces/countrySelectLanguages.ts) | No | 'eng'
|
|
264
|
-
| showSearchInput | boolean | No | true
|
|
265
|
-
| searchPlaceholder | string | No | 'Search country...'
|
|
266
|
-
| minBottomsheetHeight | number \| string | No | 30%
|
|
267
|
-
| maxBottomsheetHeight | number \| string | No | 80%
|
|
268
|
-
| initialBottomsheetHeight | number \| string | No | 50%
|
|
269
|
-
| disabledBackdropPress | boolean | No | false
|
|
270
|
-
| removedBackdrop | boolean | No | false
|
|
271
|
-
| onBackdropPress | () => void | No | -
|
|
272
|
-
| countryItemComponent | (item: [ICountry](lib/interfaces/country.ts)) => ReactElement | No | -
|
|
273
|
-
| sectionTitleComponent | (item: [ISectionTitle](lib/interfaces/sectionTitle.ts)) => ReactElement | No | -
|
|
274
|
-
| closeButtonComponent | () => ReactElement | No | -
|
|
275
|
-
| showCloseButton | boolean | No | false
|
|
276
|
-
| popularCountriesTitle | string | No | 'Popular Countries'
|
|
277
|
-
| allCountriesTitle | string | No | 'All Countries'
|
|
278
|
-
| showsVerticalScrollIndicator | boolean | No | false
|
|
251
|
+
| Prop | Type | Required | Default | Description |
|
|
252
|
+
| ---------------------------- | ----------------------------------------------------------------------- | -------- | -------------------- | ---------------------------------------------------------- |
|
|
253
|
+
| visible | boolean | Yes | false | Controls the visibility of the country picker modal |
|
|
254
|
+
| onClose | () => void | Yes | - | Callback function called when the modal is closed |
|
|
255
|
+
| onSelect | (country: [ICountry](lib/interfaces/country.ts)) => void | Yes | - | Callback function called when a country is selected |
|
|
256
|
+
| modalType | 'bottomSheet' \| 'popup' | No | 'bottomSheet' | Type of modal to display |
|
|
257
|
+
| countrySelectStyle | [ICountrySelectStyle](lib/interfaces/countrySelectStyles.ts) | No | - | Custom styles for the country picker |
|
|
258
|
+
| isFullScreen | boolean | No | false | Whether the modal should be full screen |
|
|
259
|
+
| popularCountries | string[] | No | [] | Array of country codes to show in popular section |
|
|
260
|
+
| visibleCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | [] | Array of country codes to show (whitelist) |
|
|
261
|
+
| hiddenCountries | [ICountryCca2[]](lib/interfaces/countryCca2.ts) | No | [] | Array of country codes to hide (blacklist) |
|
|
262
|
+
| theme | 'light' \| 'dark' | No | 'light' | Theme for the country picker |
|
|
263
|
+
| language | [ICountrySelectLanguages](lib/interfaces/countrySelectLanguages.ts) | No | 'eng' | Language for country names (see supported languages below) |
|
|
264
|
+
| showSearchInput | boolean | No | true | Whether to show the search input field |
|
|
265
|
+
| searchPlaceholder | string | No | 'Search country...' | Placeholder text for search input |
|
|
266
|
+
| minBottomsheetHeight | number \| string | No | 30% | Minimum height for bottom sheet modal |
|
|
267
|
+
| maxBottomsheetHeight | number \| string | No | 80% | Maximum height for bottom sheet modal |
|
|
268
|
+
| initialBottomsheetHeight | number \| string | No | 50% | Initial height for bottom sheet modal |
|
|
269
|
+
| disabledBackdropPress | boolean | No | false | Whether to disable backdrop press to close |
|
|
270
|
+
| removedBackdrop | boolean | No | false | Whether to remove the backdrop completely |
|
|
271
|
+
| onBackdropPress | () => void | No | - | Custom callback for backdrop press |
|
|
272
|
+
| countryItemComponent | (item: [ICountry](lib/interfaces/country.ts)) => ReactElement | No | - | Custom component for country items |
|
|
273
|
+
| sectionTitleComponent | (item: [ISectionTitle](lib/interfaces/sectionTitle.ts)) => ReactElement | No | - | Custom component for section titles |
|
|
274
|
+
| closeButtonComponent | () => ReactElement | No | - | Custom component for closeButton |
|
|
275
|
+
| showCloseButton | boolean | No | false | Whether to show the close button |
|
|
276
|
+
| popularCountriesTitle | string | No | 'Popular Countries' | Popular Countries section title |
|
|
277
|
+
| allCountriesTitle | string | No | 'All Countries' | All Countries section title |
|
|
278
|
+
| showsVerticalScrollIndicator | boolean | No | false | Displays a horizontal scroll indicator |
|
|
279
|
+
| countryNotFoundMessage | string | No | "No countries found" | Country not found in search |
|
|
279
280
|
|
|
280
281
|
<br>
|
|
281
282
|
|
|
@@ -65,6 +65,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
|
|
|
65
65
|
popularCountriesTitle,
|
|
66
66
|
allCountriesTitle,
|
|
67
67
|
showsVerticalScrollIndicator = false,
|
|
68
|
+
countryNotFoundMessage,
|
|
68
69
|
...props
|
|
69
70
|
}) => {
|
|
70
71
|
const {height: windowHeight} = useWindowDimensions();
|
|
@@ -296,7 +297,6 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
|
|
|
296
297
|
);
|
|
297
298
|
});
|
|
298
299
|
|
|
299
|
-
// Ordenar os países filtrados alfabeticamente
|
|
300
300
|
return sortCountriesAlphabetically(filteredCountries);
|
|
301
301
|
}
|
|
302
302
|
|
|
@@ -432,6 +432,30 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
|
|
|
432
432
|
};
|
|
433
433
|
|
|
434
434
|
const renderFlatList = () => {
|
|
435
|
+
if (getCountries.length === 0) {
|
|
436
|
+
return (
|
|
437
|
+
<View
|
|
438
|
+
style={[
|
|
439
|
+
styles.countryNotFoundContainer,
|
|
440
|
+
modalType === 'popup'
|
|
441
|
+
? countrySelectStyle?.popup?.countryNotFoundContainer
|
|
442
|
+
: countrySelectStyle?.bottomSheet?.countryNotFoundContainer,
|
|
443
|
+
]}>
|
|
444
|
+
<Text
|
|
445
|
+
style={[
|
|
446
|
+
styles.countryNotFoundMessage,
|
|
447
|
+
modalType === 'popup'
|
|
448
|
+
? countrySelectStyle?.popup?.countryNotFoundMessage
|
|
449
|
+
: countrySelectStyle?.bottomSheet?.countryNotFoundMessage,
|
|
450
|
+
]}>
|
|
451
|
+
{countryNotFoundMessage ||
|
|
452
|
+
translations.searchNotFoundMessage[
|
|
453
|
+
language as ICountrySelectLanguages
|
|
454
|
+
]}
|
|
455
|
+
</Text>
|
|
456
|
+
</View>
|
|
457
|
+
);
|
|
458
|
+
}
|
|
435
459
|
return (
|
|
436
460
|
<FlatList
|
|
437
461
|
testID="countrySelectList"
|
package/lib/components/styles.js
CHANGED
|
@@ -88,8 +88,10 @@ export const createStyles = theme =>
|
|
|
88
88
|
},
|
|
89
89
|
flag: {
|
|
90
90
|
flex: 0.1,
|
|
91
|
+
marginRight: 10,
|
|
91
92
|
fontSize: 16,
|
|
92
93
|
color: theme === 'dark' ? '#FFFFFF' : '#000000',
|
|
94
|
+
textAlign: 'center',
|
|
93
95
|
fontFamily:
|
|
94
96
|
Platform.OS === 'web'
|
|
95
97
|
? typeof navigator !== 'undefined' &&
|
|
@@ -135,4 +137,13 @@ export const createStyles = theme =>
|
|
|
135
137
|
lineHeight: 28,
|
|
136
138
|
color: theme === 'dark' ? '#FFFFFF' : '#000000',
|
|
137
139
|
},
|
|
140
|
+
countryNotFoundContainer: {
|
|
141
|
+
flex: 1,
|
|
142
|
+
justifyContent: 'center',
|
|
143
|
+
alignItems: 'center',
|
|
144
|
+
},
|
|
145
|
+
countryNotFoundMessage: {
|
|
146
|
+
fontSize: 16,
|
|
147
|
+
color: theme === 'dark' ? '#FFFFFF' : '#000000',
|
|
148
|
+
},
|
|
138
149
|
});
|