update

* add preferredCountries check according to #492
* clear search field after selection, close #388
* integrate i18n fix for title, close #462
* add className to work with styled-components, close #477
* Update README, CHANGELOG

Co-authored-by: Dávid Barbora <[email protected]>
Co-authored-by: Wiston Coronell <[email protected]>
Co-authored-by: Taras Semenyuk <[email protected]>
Co-authored-by: Alice <[email protected]>
Co-authored-by: rubenofen <[email protected]>

Author: 6 people

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 2.15.0 (February 3, 2022)
+* Hungarian, Polish, Korean translation
+* numerous fixes
+
+
 ## 2.13.8 (August 25, 2020)
 * `specialLabel`, `disableCountryGuess`
 * Add some missing flags to css

README.md

@@ -296,11 +296,11 @@ Country data object not returns from onKeyDown event
 />
 ```
 
-### Predefined localizations
+### Predefined localization
 `es` Spanish, `de` Deutsch, `ru` Russian, `fr` French<br/>
 `jp` Japanese, `cn` Chinese, `pt` Portuguese, `it` Italian<br/>
 `ir` Iranian, `ar` Arabic, `tr` Turkish, `id` Indonesian<br/>
-`hu` Hungarian
+`hu` Hungarian, `pl` Polish, `ko` Korean
 
 ```jsx
 import es from 'react-phone-input-2/lang/es.json'
@@ -469,6 +469,31 @@ import startsWith from 'lodash.startswith';
 ### Clear country
 To clear `country`, pass `null` as `value`.
 
+### Dynamic placeholder
+<details>
+  <summary>Show</summary>
+
+```jsx
+const phoneCountryFormat = useMemo(() => phoneCountry?.format || undefined, [phoneCountry]);
+const placeholder = useMemo(() => {
+  if (phoneCountryFormat) {
+    const words = phoneCountryFormat.split(' ');
+    words.shift(); // I'm using only local numbers so here I remove the country code from the format
+    let text = words.join(' ');
+     // first digit is special on french numbers, these 3 lines could be removed
+    if (country === 'fr') {
+      text = text.replace('.', '6');
+    }
+    while (text.indexOf('.') > -1) {
+      text = text.replace('.', `${Math.min(9, Math.max(1, Math.floor(Math.random() * 10)))}`);
+    }
+    return text;
+  }
+  return '';
+}, [phoneCountryFormat, country]);
+```
+</details>
+
 ### CDN
 ```html
 <script src="https://unpkg.com/[email protected]/dist/lib.js"></script>

src/index.js

@@ -37,6 +37,8 @@ class PhoneInput extends React.Component {
     buttonClass: PropTypes.string,
     dropdownClass: PropTypes.string,
     searchClass: PropTypes.string,
+    // for styled-components
+    className: PropTypes.string,
 
     autoFormat: PropTypes.bool,
 
@@ -125,6 +127,7 @@ class PhoneInput extends React.Component {
     buttonClass: '',
     dropdownClass: '',
     searchClass: '',
+    className: '',
 
     autoFormat: true,
     enableAreaCodes: false,
@@ -486,11 +489,13 @@ class PhoneInput extends React.Component {
     }
   }
 
+
+
   handleFlagDropdownClick = (e) => {
     e.preventDefault();
     if (!this.state.showDropdown && this.props.disabled) return;
-    const { preferredCountries, selectedCountry } = this.state
-    const allCountries =  [...new Set(preferredCountries.concat(this.state.onlyCountries))];
+    const { preferredCountries, onlyCountries, selectedCountry } = this.state
+    const allCountries = this.concatPreferredCountries(preferredCountries, onlyCountries);
 
     const highlightCountryIndex = allCountries.findIndex(o =>
       o.dialCode === selectedCountry.dialCode && o.iso2 === selectedCountry.iso2);
@@ -620,7 +625,8 @@ class PhoneInput extends React.Component {
       showDropdown: false,
       selectedCountry: newSelectedCountry,
       freezeSelection: true,
-      formattedNumber
+      formattedNumber,
+      searchValue: ''
     }, () => {
       this.cursorToEnd();
       if (this.props.onChange) this.props.onChange(formattedNumber.replace(/[^0-9]+/g,''), this.getCountryData(), e, formattedNumber);
@@ -756,21 +762,26 @@ class PhoneInput extends React.Component {
 
     if (searchValue === '' && selectedCountry) {
       const { onlyCountries } = this.state
-      highlightCountryIndex = preferredCountries.concat(onlyCountries).findIndex(o => o == selectedCountry);
+      highlightCountryIndex = this.concatPreferredCountries(preferredCountries, onlyCountries).findIndex(o => o == selectedCountry);
       // wait asynchronous search results re-render, then scroll
       setTimeout(() => this.scrollTo(this.getElement(highlightCountryIndex)), 100)
     }
     this.setState({ searchValue, highlightCountryIndex });
   }
 
+  concatPreferredCountries = (preferredCountries, onlyCountries) => {
+    if (preferredCountries.length > 0) { return [...new Set(preferredCountries.concat(onlyCountries))] }
+    else { return onlyCountries }
+  }
+
   getDropdownCountryName = (country) => {
     return country.localName || country.name;
   }
 
   getSearchFilteredCountries = () => {
     const { preferredCountries, onlyCountries, searchValue } = this.state
     const { enableSearch } = this.props
-    const allCountries = [...new Set(preferredCountries.concat(onlyCountries))];
+    const allCountries = this.concatPreferredCountries(preferredCountries, onlyCountries);
     const sanitizedSearchValue = searchValue.trim().toLowerCase().replace('+','');
     if (enableSearch && sanitizedSearchValue) {
       // [...new Set()] to get rid of duplicates
@@ -942,7 +953,7 @@ class PhoneInput extends React.Component {
 
     return (
       <div
-        className={containerClasses}
+        className={`${containerClasses} ${this.props.className}`}
         style={this.props.style || this.props.containerStyle}
         onKeyDown={this.handleKeydown}>
         {specialLabel && <div className='special-label'>{specialLabel}</div>}
@@ -983,7 +994,7 @@ class PhoneInput extends React.Component {
           <div
             onClick={disableDropdown ? undefined : this.handleFlagDropdownClick}
             className={selectedFlagClasses}
-            title={selectedCountry ? `${selectedCountry.name}: + ${selectedCountry.dialCode}` : ''}
+            title={selectedCountry ? `${selectedCountry.localName || selectedCountry.name}: + ${selectedCountry.dialCode}` : ''}
             tabIndex={disableDropdown ? '-1' : '0'}
             role='button'
             aria-haspopup="listbox"