Skip to content

Commit

Permalink
chore: bump version, add contributor names
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrflip
mrflip committed Sep 22, 2022
1 parent d4c6a07 commit 601ac5a
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 202 deletions.
311 changes: 115 additions & 196 deletions App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,27 @@
import React, { useState } from 'react'
import {
Text,
StyleSheet,
PixelRatio,
Switch,
Button,
Pressable,
ScrollView,
TextInput,
View
} from 'react-native'
import { Text, StyleSheet, PixelRatio, Switch, Button, Pressable, ScrollView, TextInput, View } from 'react-native'
import CountryPicker, { CountryModalProvider, TranslationLanguageCodeList } from './src/'
import { CountryCode, Country } from './src/types'
import { Row } from './src/Row'
import { DARK_THEME } from './src/CountryTheme'

const styles = StyleSheet.create({
mainBox: {
paddingVertical: 10,
justifyContent: 'space-between',
alignItems: 'center',
flex: 1,
},
container: {
paddingVertical: 10,
justifyContent: 'space-between',
alignItems: 'center',
},
welcome: {
fontSize: 17,
textAlign: 'center',
marginHorizontal: 5,
marginVertical: 10
},
heading: {
fontSize: 17,
textAlign: 'center',
marginHorizontal: 5,
marginVertical: 10
},
instructions: {
fontSize: 10,
textAlign: 'center',
color: '#888',
marginBottom: 5,
paddingHorizontal: 15
},
data: {
// maxWidth: 250,
padding: 10,
marginTop: 7,
backgroundColor: '#ddd',
borderColor: '#888',
borderWidth: 1 / PixelRatio.get(),
color: '#777',
},
button: {
paddingVertical: 5,
paddingHorizontal: 10,
backgroundColor: '#cfd4e7',
marginHorizontal: 4
},
mainBox: { paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center', flex: 1, },
container: { paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center', },
button: { paddingVertical: 5, paddingHorizontal: 10, marginHorizontal: 4, backgroundColor: '#cfd4e7' },
countryPickerBox: { maxHeight: '30%', paddingVertical: 5, paddingHorizontal: 10, backgroundColor: '#eee' },
optionsBox: { maxHeight: '30%', marginVertical: 10, borderColor: '#abc', borderWidth: 1 / PixelRatio.get() },
dataBox: { flex: 1, width: '90%', marginHorizontal: 5, borderWidth: 1 / PixelRatio.get() },
textEntryBox: { flex: 1, padding: 5, marginLeft: 20, flexDirection: 'row', justifyContent: 'flex-start' },
buttonsBox: { flexDirection: 'row', marginTop: 2 },
//
textEntryLabel: { flex: 2, width: "25%" },
textEntryBox: { flex: 1, flexDirection: 'row', justifyContent: 'flex-start', padding: 5, marginLeft: 20 },
textEntryInput: { flex: 3, marginLeft: 2 },
welcome: { fontSize: 17, textAlign: 'center', marginHorizontal: 5, marginVertical: 10, },
heading: { fontSize: 17, textAlign: 'center', marginHorizontal: 5, marginVertical: 10, },
instructions: { fontSize: 10, textAlign: 'center', color: '#888', marginBottom: 5, paddingHorizontal: 15, },
data: { padding: 10, marginTop: 7, backgroundColor: '#ddd', borderColor: '#888', borderWidth: 1 / PixelRatio.get(), color: '#777' },
//
countryPickerBox: { paddingVertical: 5, paddingHorizontal: 10, backgroundColor: '#eee', maxHeight: "30%" },
optionsBox: { maxHeight: "30%", marginVertical: 10, borderColor: '#abc', borderWidth: 1 },
dataBox: { flex: 1, width: "90%", marginHorizontal: 5, borderWidth: 1 },
buttonsBox: { flexDirection: 'row', marginTop: 2 }
textEntryLabel: { flex: 2, width: '25%' },
textEntryInput: { flex: 3, marginLeft: 2 },
//
})

Expand Down Expand Up @@ -105,156 +57,123 @@ export default function App() {
const [fontScaling, setFontScaling] = useState<boolean>(true)
const [disableNativeModal, setDisableNativeModal] = useState<boolean>(false)

const [preferredCountriesStr, setPreferredCountriesStr] = useState<string>('UA')
const [excludeCountriesStr, setExcludeCountriesStr] = useState<string>('RU')
const [preferredCountriesStr, setPreferredCountriesStr] = useState<string>('UA')
const [excludeCountriesStr, setExcludeCountriesStr] = useState<string>('RU')
const [translation, setTranslation] = useState<string>(null)

const resetCountry = () => { setCountry(null); setCountryCode(null) }
const resetCountry = () => {
setCountry(null)
setCountryCode(null)
}
const onSelect = (country: Country) => {
setCountryCode(country.cca2)
setCountry(country)
}
const switchVisible = () => setVisible(!visible)

const excludeCountries = excludeCountriesStr.toUpperCase().trim().split(/\W+/)
const excludeCountries = excludeCountriesStr.toUpperCase().trim().split(/\W+/)
const preferredCountries = preferredCountriesStr.toUpperCase().trim().split(/\W+/)

return (
<CountryModalProvider>
<View style={styles.mainBox}>
<Text style={styles.welcome}>Welcome to Country Picker !</Text>
<Text style={styles.instructions}>Press on the flag/placeholder to open modal:</Text>

<View style={styles.countryPickerBox}>
<CountryPicker
theme={dark ? DARK_THEME : {}}
{...{
allowFontScaling: fontScaling,
countryCode,
withFilter,
excludeCountries,
withFlag,
withCurrencyButton,
withCallingCodeButton,
withCountryNameButton,
withLetterScroller,
withCallingCode,
withCurrency,
withEmoji,
withModal,
withFlagButton,
onSelect,
disableNativeModal,
preferredCountries,
translation,
modalProps: {
visible,
},
onClose: () => setVisible(false),
onOpen: () => setVisible(true),
placeholder: '(-country-)',
}}
/>
</View>
<View style={styles.mainBox}>
<Text style={styles.welcome}>Welcome to Country Picker !</Text>
<Text style={styles.instructions}>Press on the flag/placeholder to open modal:</Text>

<View style={styles.optionsBox}>
<ScrollView>
<Text style={styles.heading}>Options:</Text>
<View style={styles.textEntryBox}>
<Text style={styles.textEntryLabel}>Preferred Countries: </Text>
<TextInput style={styles.textEntryInput}value={preferredCountriesStr} onChangeText={setPreferredCountriesStr} />
<View style={styles.countryPickerBox}>
<CountryPicker
theme={dark ? DARK_THEME : {}}
{...{
allowFontScaling: fontScaling,
countryCode,
withFilter,
excludeCountries,
withFlag,
withCurrencyButton,
withCallingCodeButton,
withCountryNameButton,
withLetterScroller,
withCallingCode,
withCurrency,
withEmoji,
withModal,
withFlagButton,
onSelect,
disableNativeModal,
preferredCountries,
translation,
modalProps: {
visible,
},
onClose: () => setVisible(false),
onOpen: () => setVisible(true),
placeholder: '(-country-)',
}}
/>
</View>
<View style={styles.textEntryBox}>
<Text style={styles.textEntryLabel}>Exclude Countries: </Text>
<TextInput style={styles.textEntryInput}value={excludeCountriesStr} onChangeText={setExcludeCountriesStr} />
</View>
<View style={styles.textEntryBox}>
<Text style={styles.textEntryLabel}>Translation:</Text>
<TextInput style={styles.textEntryInput} autoCorrect={false} value={translation} onChangeText={setTranslation} />

<View style={styles.optionsBox}>
<ScrollView>
<Text style={styles.heading}>Options:</Text>
<View style={styles.textEntryBox}>
<Text style={styles.textEntryLabel}>Preferred Countries: </Text>
<TextInput
style={styles.textEntryInput}
value={preferredCountriesStr}
onChangeText={setPreferredCountriesStr}
autoCapitalize='characters'
/>
</View>
<View style={styles.textEntryBox}>
<Text style={styles.textEntryLabel}>Exclude Countries: </Text>
<TextInput
style={styles.textEntryInput}
value={excludeCountriesStr}
onChangeText={setExcludeCountriesStr}
autoCapitalize='characters'
/>
</View>
<View style={styles.textEntryBox}>
<Text style={styles.textEntryLabel}>Translation:</Text>
<TextInput style={styles.textEntryInput} autoCorrect={false} value={translation} onChangeText={setTranslation} autoCapitalize='none' />
</View>
<Text style={styles.instructions}>{TranslationLanguageCodeList.join(' / ')}</Text>
<Text style={styles.instructions}>
ex: {excludeCountries.join('|')} pr: {preferredCountries.join('|')}
</Text>
<Option title='Show country name on button' value={withCountryNameButton} onValueChange={setWithCountryNameButton} />
<Option title='Show currency on button' value={withCurrencyButton} onValueChange={setWithCurrencyButton} />
<Option title='Show calling code on button' value={withCallingCodeButton} onValueChange={setWithCallingCodeButton} />
<Option title='Show flag on button' value={withFlagButton} onValueChange={setWithFlagButton} />
<Option title='With font scaling' value={fontScaling} onValueChange={setFontScaling} />
<Option title='Use emoji (not image) flags' value={withEmoji} onValueChange={setWithEmoji} />
<Option title='Provide type-to-filter entry' value={withFilter} onValueChange={setWithFilter} />
<Option title='Show flag in picker' value={withFlag} onValueChange={setWithFlag} />
<Option title='Show calling code in picker' value={withCallingCode} onValueChange={setWithCallingCode} />
<Option title='Show currency in picker' value={withCurrency} onValueChange={setWithCurrency} />
<Option title='Show letter scroller on right' value={withLetterScroller} onValueChange={setWithLetterScroller} />
<Option title='Without native modal' value={disableNativeModal} onValueChange={setDisableNativeModal} />
<Option title='With modal' value={withModal} onValueChange={setWithModal} />
<Option title='With dark theme' value={dark} onValueChange={setDark} />
</ScrollView>
</View>
<Text style={styles.instructions}>One of: {TranslationLanguageCodeList.join(' / ')}</Text>
<Text style={styles.instructions}>ex: {excludeCountries.join('|')} pr: {preferredCountries.join('|')}</Text>
<Option
title='Show country name on button'
value={withCountryNameButton}
onValueChange={setWithCountryNameButton}
/>
<Option
title='Show currency on button'
value={withCurrencyButton}
onValueChange={setWithCurrencyButton}
/>
<Option
title='Show calling code on button'
value={withCallingCodeButton}
onValueChange={setWithCallingCodeButton}
/>
<Option
title='Show flag on button'
value={withFlagButton}
onValueChange={setWithFlagButton}
/>
<Option
title='With font scaling'
value={fontScaling}
onValueChange={setFontScaling}
/>
<Option
title='Use emoji (not image) flags'
value={withEmoji}
onValueChange={setWithEmoji}
/>
<Option
title='Provide type-to-filter entry'
value={withFilter}
onValueChange={setWithFilter}
/>
<Option
title='Show flag in picker'
value={withFlag}
onValueChange={setWithFlag}
/>
<Option
title='Show calling code in picker'
value={withCallingCode}
onValueChange={setWithCallingCode}
/>
<Option
title='Show currency in picker'
value={withCurrency}
onValueChange={setWithCurrency}
/>
<Option
title='Show letter scroller on right'
value={withLetterScroller}
onValueChange={setWithLetterScroller}
/>
<Option
title='Without native modal'
value={disableNativeModal}
onValueChange={setDisableNativeModal}
/>
<Option
title='With modal'
value={withModal}
onValueChange={setWithModal}
/>
<Option title='With dark theme' value={dark} onValueChange={setDark} />
</ScrollView>
</View>

<View style={styles.dataBox}>
<ScrollView>
<Text style={styles.heading}>Result:</Text>
<Text style={styles.data}>{JSON.stringify(country, null, 2)}</Text>
</ScrollView>
</View>
<View style={styles.dataBox}>
<ScrollView>
<Text style={styles.heading}>Result:</Text>
<Text style={styles.data}>{JSON.stringify(country, null, 2)}</Text>
</ScrollView>
</View>

<View style={styles.buttonsBox}>
<Pressable onPress={resetCountry} style={styles.button}><Text>Reset Country</Text></Pressable>
<Pressable onPress={switchVisible} style={styles.button}><Text>Open Modal Picker</Text></Pressable>
</View>
</View>
<View style={styles.buttonsBox}>
<Pressable onPress={resetCountry} style={styles.button}>
<Text>Reset Country</Text>
</Pressable>
<Pressable onPress={switchVisible} style={styles.button}>
<Text>Open Modal Picker</Text>
</Pressable>
</View>
</View>
</CountryModalProvider>
)
}
16 changes: 13 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,11 +140,19 @@ export default function App() {
- `disableNativeModal?`: boolean (you have to wrap your all app with CountryModalProvider)
- `preferredCountries`: [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L254) preferred countries they appear first (`withAlphaFilter` must be false)

### Caveats

Dynamically changing the translation, excludeCountries, and some other
props that affect the country list may give inconsistent results. In
particular, the search index is only calculated on first use and so
the changes to new language or different excluded countries will be
inconsistent.

## Dark theme example

<p align="center">
<img alt="react-native-country-picker-modal-dark" src="https://user-images.githubusercontent.com/2692166/40585272-094f817a-61b0-11e8-9668-abff0aeddb0e.png" width=150>
</p>
<p align="center"> <img alt="react-native-country-picker-modal-dark"
src="https://user-images.githubusercontent.com/2692166/40585272-094f817a-61b0-11e8-9668-abff0aeddb0e.png"
width=150> </p>

A simple example to display a `CountryPicker` component with a dark theme.

Expand Down Expand Up @@ -181,6 +189,8 @@ YES : It used the world-countries package and image is stored into json and base
## Contribution

- [@xcapentier](mailto:[email protected]) The main author.
- [@kanimetov](https://github.com/kanimetov) -- Arabic and Hebrew translations.
- [@mrflip](https://github.com/mrflip) -- updated to Expo 46 and minor fixes.

## Questions

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-country-picker-modal",
"version": "2.0.0",
"version": "2.1.0",
"description": "react-native country picker",
"main": "node_modules/expo/AppEntry.js",
"types": "lib/index.d.ts",
Expand Down
2 changes: 1 addition & 1 deletion src/CountryPicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
.catch(console.warn)

return (() => { cancel = true })
}, [translation, withEmoji])
}, [translation, withEmoji, countryCodes, excludeCountries, preferredCountries])

const searchResult = search(filter, countries) as Country[]
const thwarted = (searchResult.length === 0)
Expand Down
Loading

0 comments on commit 601ac5a

Please sign in to comment.