From 1ea047cd92a3ee712ee921c94d02ac8cce24d7cc Mon Sep 17 00:00:00 2001
From: gtomitsuka <g@gtomitsuka.com>
Date: Sat, 15 Apr 2023 10:54:22 +0200
Subject: [PATCH] feat: implement i18n

---
 package.json                |  1 +
 src/CountryPickerModal.tsx  |  3 +++
 src/usePhoneNumberInput.tsx | 37 +++++++++++++++++++++++++++++++++++--
 yarn.lock                   | 12 ++++++++++++
 4 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 06de830..0a7b459 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "@types/react": "17.0.21"
   },
   "dependencies": {
+    "i18n-iso-countries": "^7.6.0",
     "libphonenumber-js": "^1.10.24"
   },
   "peerDependencies": {
diff --git a/src/CountryPickerModal.tsx b/src/CountryPickerModal.tsx
index be8678b..91e1de9 100644
--- a/src/CountryPickerModal.tsx
+++ b/src/CountryPickerModal.tsx
@@ -9,12 +9,14 @@ import NativeToolbar from './NativeToolbar.ios';
 
 interface CountryPickerProps {
   manager: InputManager;
+  doneButtonText: string;
   toolbarStyles?: ViewStyle;
   pickerStyles?: ViewStyle;
 }
 
 const CountryPickerModal = ({
   manager,
+  doneButtonText,
   toolbarStyles,
   pickerStyles,
 }: CountryPickerProps) => {
@@ -50,6 +52,7 @@ const CountryPickerModal = ({
       <NativeToolbar
         darkMode={state.darkMode}
         onClick={() => dispatch({ type: 'setHidden', payload: true })}
+        doneButtonText={doneButtonText}
         style={toolbarStyles}
       />
       {/* TODO: Android support  */}
diff --git a/src/usePhoneNumberInput.tsx b/src/usePhoneNumberInput.tsx
index eb896be..98a3de5 100644
--- a/src/usePhoneNumberInput.tsx
+++ b/src/usePhoneNumberInput.tsx
@@ -1,4 +1,4 @@
-import { Reducer, Dispatch, useReducer } from 'react';
+import { Reducer, Dispatch, useReducer, useMemo } from 'react';
 import type { Country } from './types';
 import { countries } from './countries';
 import { Keyboard } from 'react-native';
@@ -9,6 +9,7 @@ import {
   PhoneNumber,
   isValidPhoneNumber,
 } from 'libphonenumber-js/max';
+import { default as i18nCountries } from 'i18n-iso-countries';
 
 interface PhoneNumberInputOptions {
   // specify a default country using its ISO-3601 code (e.g., "GB")
@@ -16,6 +17,7 @@ interface PhoneNumberInputOptions {
   darkMode?: boolean;
   // optional! we provide a default set of countries
   customCountries?: Country[];
+  locale?: string;
 }
 
 interface InputState {
@@ -64,6 +66,34 @@ const usePhoneNumberInput = (
     return tel;
   };
 
+  const localizedCountries = useMemo(() => {
+    if (
+      options.locale == null ||
+      options.locale === '' ||
+      options.locale === 'en'
+    )
+      return [];
+
+    const locale = options.locale;
+    const list = options.customCountries
+      ? [...options.customCountries]
+      : [...countries];
+    const isSupported =
+      i18nCountries
+        .getSupportedLanguages()
+        .findIndex((lang) => locale === lang) !== -1;
+
+    if (!isSupported) return [];
+
+    list.map((country) => {
+      return { ...country, name: i18nCountries.getName(country.code, locale) };
+    });
+
+    list.sort((a, b) => a.name.localeCompare(b.name));
+
+    return list;
+  }, [options.locale, options.customCountries]);
+
   const [managerState, managerDispatch] = useReducer<
     Reducer<InputState, InputAction>
   >(
@@ -130,7 +160,10 @@ const usePhoneNumberInput = (
       countryCode: options.defaultCountry || 'US',
       pickerHidden: true,
       darkMode: options.darkMode || false,
-      customCountries: options.customCountries,
+      customCountries:
+        localizedCountries.length > 0
+          ? localizedCountries
+          : options.customCountries,
       inputText: '',
       formattedText: '',
     }
diff --git a/yarn.lock b/yarn.lock
index 3918c95..4b0afea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3875,6 +3875,11 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
+diacritics@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/diacritics/-/diacritics-1.3.0.tgz#3efa87323ebb863e6696cebb0082d48ff3d6f7a1"
+  integrity sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==
+
 diff-sequences@^28.1.1:
   version "28.1.1"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-28.1.1.tgz#9989dc731266dc2903457a70e996f3a041913ac6"
@@ -5163,6 +5168,13 @@ human-signals@^4.3.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.0.tgz#2095c3cd5afae40049403d4b811235b03879db50"
   integrity sha512-zyzVyMjpGBX2+6cDVZeFPCdtOtdsxOeseRhB9tkQ6xXmGUNrcnBzdEKPy3VPNYz+4gy1oukVOXcrJCunSyc6QQ==
 
+i18n-iso-countries@^7.6.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/i18n-iso-countries/-/i18n-iso-countries-7.6.0.tgz#4e2eac7043210a5552e7fd116b74d4f36a90b960"
+  integrity sha512-HPKjOUKS0BkjiY4ayrsuFbu7Ock++pXLs+FAOYl4WfTL5L0ploEH68fiRAP6Zev5g/jvMFt54KcPGJcb942wbg==
+  dependencies:
+    diacritics "1.3.0"
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"