fix import

trooperandz · Oct 24, 2019 · 7364f3d · 7364f3d
1 parent 2202ddb
commit 7364f3d
Show file tree

Hide file tree

Showing 15 changed files with 237 additions and 6,957 deletions.
diff --git a/.npmignore b/.npmignore
@@ -30,4 +30,5 @@ __tests__/
 .expo/
 .github/
 .vscode/
-web-build/
+web-build/
+lib/assets/data/countries-image.json
diff --git a/App.tsx b/App.tsx
@@ -5,7 +5,8 @@ import {
   PixelRatio,
   Switch,
   Button,
-  ScrollView
+  ScrollView,
+  Platform
 } from 'react-native'
 import CountryPicker from './src/'
 import { CountryCode, Country } from './src/types'
@@ -96,11 +97,13 @@ export default function App() {
         onValueChange={setWithCallingCodeButton}
       />
       <Option title="With flag" value={withFlag} onValueChange={setWithFlag} />
-      <Option
-        title="With emoji"
-        value={withEmoji}
-        onValueChange={setWithEmoji}
-      />
+      {Platform.OS !== 'web' && (
+        <Option
+          title="With emoji"
+          value={withEmoji}
+          onValueChange={setWithEmoji}
+        />
+      )}
       <Option
         title="With filter"
         value={withFilter}
@@ -133,7 +136,7 @@ export default function App() {
         onValueChange={setWithFlagButton}
       />
       <CountryPicker
-        theme={dark ? DARK_THEME : undefined}
+        theme={dark ? DARK_THEME : { flagSizeButton: 30, flagSize: 15 }}
         {...{
           countryCode,
           withFilter,
@@ -155,8 +158,6 @@ export default function App() {
           onOpen: () => setVisible(true)
         }}
       />
-      {/* <CountryPicker countryCode="FR" /> */}
-
       <Text style={styles.instructions}>Press on the flag to open modal</Text>
       <Button
         title={'Open modal from outside using visible props'}

diff --git a/README.md b/README.md
@@ -132,6 +132,9 @@ export default function App() {
 - `onSelect`(country: Country): void ([Country](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L263))
 - `onOpen`(): void
 - `onClose`(): void
+- `closeButtonImage?`: [ImageSourcePropType](https://facebook.github.io/react-native/docs/image#props)
+- `closeButtonStyle?`: StyleProp<ViewStyle>
+- `closeButtonImageStyle?`: StyleProp<ImageStyle>
 
 ## Dark theme example
 

diff --git a/__tests__/__snapshots__/CountryPicker.test.tsx.snap b/__tests__/__snapshots__/CountryPicker.test.tsx.snap
@@ -41,25 +41,12 @@ Array [
           }
         }
       >
-        <Text
-          allowFontScaling={false}
-          style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
-              "borderColor": "transparent",
-              "borderWidth": 0.5,
-              "fontSize": 30,
-              "justifyContent": "center",
-            }
-          }
-        >
-          <Text
-            allowFontScaling={false}
-          >
-            🇺🇸
-          </Text>
-        </Text>
+        <ActivityIndicator
+          animating={true}
+          color="#999999"
+          hidesWhenStopped={true}
+          size="small"
+        />
       </View>
     </View>
   </View>,
@@ -165,7 +152,7 @@ Array [
           getItemCount={[Function]}
           getItemLayout={[Function]}
           horizontal={false}
-          initialNumToRender={12}
+          initialNumToRender={14}
           keyExtractor={[Function]}
           keyboardShouldPersistTaps="handled"
           maxToRenderPerBatch={10}

diff --git a/package.json b/package.json
@@ -13,8 +13,7 @@
     "start:web": "yarn config:dev && expo start -w --dev",
     "tsc": "node_modules/.bin/tsc --noEmit",
     "build": "rm -rf lib/ && node_modules/.bin/tsc && cp -rf ./src/assets ./lib && yarn minify",
-    "minify": "yarn minify:image && yarn minify:emoji",
-    "minify:image": "./scripts/minify.js ./lib/assets/data/countries-image.json",
+    "minify": "yarn minify:emoji",
     "minify:emoji": "./scripts/minify.js ./lib/assets/data/countries-emoji.json",
     "config:dev": "json -I -f package.json -e 'this.main=\"node_modules/expo/AppEntry.js\"'",
     "config:npm": "json -I -f package.json -e 'this.main=\"lib/index.js\"'",

diff --git a/scripts/transform-world-countries.js b/scripts/transform-world-countries.js
@@ -8,7 +8,7 @@ const isCca2 = process.argv.includes('--cca2')
 const isRegion = process.argv.includes('--regions')
 const isSubRegion = process.argv.includes('--subregions')
 
-const getCountryNames = (common, translations) =>
+const getCountryNameAsyncs = (common, translations) =>
   Object.keys(translations)
     .filter(k => k !== 'common')
     .map(key => ({ [key]: translations[key].common }))
@@ -37,7 +37,7 @@ const newcountries = countries
         region,
         subregion,
         flag: isEmoji ? `flag-${cca2.toLowerCase()}` : flags[cca2],
-        name: { common, ...getCountryNames(common, translations) }
+        name: { common, ...getCountryNameAsyncs(common, translations) }
       }
     })
   )

diff --git a/src/CountryContext.ts b/src/CountryContext.ts
@@ -1,35 +1,35 @@
 import * as React from 'react'
 import { TranslationLanguageCode } from './types'
 import {
-  getEmojiFlag,
-  getImageFlag,
-  getCountryName,
-  getCountries,
+  getEmojiFlagAsync,
+  getImageFlagAsync,
+  getCountryNameAsync,
+  getCountriesAsync,
   getLetters,
-  getCountryCallingCode,
-  getCountryCurrency,
+  getCountryCallingCodeAsync,
+  getCountryCurrencyAsync,
   search
 } from './CountryService'
 
 export interface CountryContextParam {
   translation?: TranslationLanguageCode
-  getCountryName: typeof getCountryName
-  getImageFlag: typeof getImageFlag
-  getEmojiFlag: typeof getEmojiFlag
-  getCountries: typeof getCountries
+  getCountryNameAsync: typeof getCountryNameAsync
+  getImageFlagAsync: typeof getImageFlagAsync
+  getEmojiFlagAsync: typeof getEmojiFlagAsync
+  getCountriesAsync: typeof getCountriesAsync
   getLetters: typeof getLetters
-  getCountryCallingCode: typeof getCountryCallingCode
-  getCountryCurrency: typeof getCountryCurrency
+  getCountryCallingCodeAsync: typeof getCountryCallingCodeAsync
+  getCountryCurrencyAsync: typeof getCountryCurrencyAsync
   search: typeof search
 }
 export const DEFAULT_COUNTRY_CONTEXT = {
   translation: 'common' as TranslationLanguageCode,
-  getCountryName,
-  getImageFlag,
-  getEmojiFlag,
-  getCountries,
-  getCountryCallingCode,
-  getCountryCurrency,
+  getCountryNameAsync,
+  getImageFlagAsync,
+  getEmojiFlagAsync,
+  getCountriesAsync,
+  getCountryCallingCodeAsync,
+  getCountryCurrencyAsync,
   search,
   getLetters
 }

diff --git a/src/CountryList.tsx b/src/CountryList.tsx
@@ -7,7 +7,8 @@ import {
   TouchableOpacity,
   ListRenderItemInfo,
   PixelRatio,
-  FlatListProps
+  FlatListProps,
+  Dimensions
 } from 'react-native'
 import { useTheme } from './CountryTheme'
 import { Country, Omit } from './types'
@@ -90,7 +91,7 @@ interface CountryItemProps {
   onSelect(country: Country): void
 }
 const CountryItem = (props: CountryItemProps) => {
-  const { activeOpacity, itemHeight } = useTheme()
+  const { activeOpacity, itemHeight, flagSize } = useTheme()
   const {
     country,
     onSelect,
@@ -118,7 +119,11 @@ const CountryItem = (props: CountryItemProps) => {
       {...{ activeOpacity }}
     >
       <View style={[styles.itemCountry, { height: itemHeight }]}>
-        {withFlag && <Flag {...{ withEmoji, countryCode: country.cca2 }} />}
+        {withFlag && (
+          <Flag
+            {...{ withEmoji, countryCode: country.cca2, flagSize: flagSize! }}
+          />
+        )}
         <View style={styles.itemCountryName}>
           <CountryText
             allowFontScaling={false}
@@ -167,6 +172,8 @@ const ItemSeparatorComponent = () => {
   )
 }
 
+const { height } = Dimensions.get('window')
+
 export const CountryList = (props: CountryListProps) => {
   const {
     data,
@@ -212,14 +219,15 @@ export const CountryList = (props: CountryListProps) => {
       scrollTo(letters[0], false)
     }
   }, [filterFocus])
+
+  const initialNumToRender = Math.round(height / (itemHeight || 1))
   return (
     <View style={[styles.container, { backgroundColor }]}>
       <FlatList
         onScrollToIndexFailed
         ref={flatListRef}
         testID="list-countries"
         keyboardShouldPersistTaps="handled"
-        initialNumToRender={12}
         automaticallyAdjustContentInsets={false}
         scrollEventThrottle={1}
         getItemLayout={(_data: any, index) => ({
@@ -238,7 +246,8 @@ export const CountryList = (props: CountryListProps) => {
           data: search(filter, data),
           keyExtractor,
           onScrollToIndexFailed,
-          ItemSeparatorComponent
+          ItemSeparatorComponent,
+          initialNumToRender
         }}
         {...flatListProps}
       />

diff --git a/src/CountryPicker.tsx b/src/CountryPicker.tsx
@@ -1,5 +1,12 @@
 import React, { ReactNode, useState, useEffect } from 'react'
-import { ModalProps, FlatListProps, StyleProp, ViewStyle } from 'react-native'
+import {
+  ModalProps,
+  FlatListProps,
+  StyleProp,
+  ViewStyle,
+  ImageSourcePropType,
+  ImageStyle
+} from 'react-native'
 import { CountryModal } from './CountryModal'
 import { HeaderModal } from './HeaderModal'
 import { Country, CountryCode, FlagType, Region, Subregion } from './types'
@@ -21,17 +28,17 @@ const renderFlagButton = (
   props.renderFlagButton ? (
     props.renderFlagButton(props)
   ) : (
-      <FlagButton {...props} />
-    )
+    <FlagButton {...props} />
+  )
 
 const renderFilter = (
   props: CountryFilter['props'] & CountryPickerProps['renderCountryFilter']
 ): ReactNode =>
   props.renderCountryFilter ? (
     props.renderCountryFilter(props)
   ) : (
-      <CountryFilter {...props} />
-    )
+    <CountryFilter {...props} />
+  )
 
 interface CountryPickerProps {
   countryCode: CountryCode
@@ -55,6 +62,9 @@ interface CountryPickerProps {
   withModal?: boolean
   visible?: boolean
   containerButtonStyle?: StyleProp<ViewStyle>
+  closeButtonImage?: ImageSourcePropType
+  closeButtonStyle?: StyleProp<ViewStyle>
+  closeButtonImageStyle?: StyleProp<ImageStyle>
   renderFlagButton?(props: FlagButton['props']): ReactNode
   renderCountryFilter?(props: CountryFilter['props']): ReactNode
   onSelect(country: Country): void
@@ -88,15 +98,18 @@ export const CountryPicker = (props: CountryPickerProps) => {
     withModal,
     withFlagButton,
     onClose: handleClose,
-    onOpen: handleOpen
+    onOpen: handleOpen,
+    closeButtonImage,
+    closeButtonStyle,
+    closeButtonImageStyle
   } = props
   const [state, setState] = useState<State>({
     visible: props.visible || false,
     countries: [],
     filter: '',
     filterFocus: false
   })
-  const { translation, getCountries } = useContext()
+  const { translation, getCountriesAsync } = useContext()
   const { visible, filter, countries, filterFocus } = state
   const onOpen = () => {
     setState({ ...state, visible: true })
@@ -119,7 +132,6 @@ export const CountryPicker = (props: CountryPickerProps) => {
   }
   const onFocus = () => setState({ ...state, filterFocus: true })
   const onBlur = () => setState({ ...state, filterFocus: false })
-
   const flagProp = {
     withEmoji,
     withCountryNameButton,
@@ -132,14 +144,15 @@ export const CountryPicker = (props: CountryPickerProps) => {
     containerButtonStyle
   }
   useEffect(() => {
-    const countries = getCountries(
+    getCountriesAsync(
       withEmoji ? FlagType.EMOJI : FlagType.FLAT,
       translation,
       region,
       subregion,
       countryCodes
     )
-    setCountries(countries)
+      .then(setCountries)
+      .catch(console.error)
   }, [translation, withEmoji])
 
   return (
@@ -150,7 +163,13 @@ export const CountryPicker = (props: CountryPickerProps) => {
         onRequestClose={onClose}
       >
         <HeaderModal
-          {...{ withFilter, withCloseButton, onClose }}
+          {...{
+            withFilter,
+            onClose,
+            closeButtonImage,
+            closeButtonImageStyle,
+            closeButtonStyle
+          }}
           renderFilter={(props: CountryFilter['props']) =>
             renderFilter({
               ...props,