From 913c4348968fe4e732d71eff131d232abea6a911 Mon Sep 17 00:00:00 2001
From: helloitsme <seanlengws@gmail.com>
Date: Sat, 15 Aug 2020 12:25:08 +0800
Subject: [PATCH] Added placeholder props to display placeholder text and
 destructuring all props values

---
 lib/index.js | 78 ++++++++++++++++++++++++++++++++++------------------
 1 file changed, 51 insertions(+), 27 deletions(-)

diff --git a/lib/index.js b/lib/index.js
index db864957..23f4296b 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -78,7 +78,7 @@ export default class PhoneInput extends Component {
       image: Flags.get(country.iso2),
       label: country.name,
       dialCode: `+${country.dialCode}`,
-      iso2: country.iso2
+      iso2: country.iso2,
     }));
   }
 
@@ -100,7 +100,7 @@ export default class PhoneInput extends Component {
   }
 
   getValue() {
-    return this.state.formattedNumber.replace(/\s/g,'');
+    return this.state.formattedNumber.replace(/\s/g, "");
   }
 
   getNumberType() {
@@ -121,10 +121,10 @@ export default class PhoneInput extends Component {
         this.setState(
           {
             iso2,
-            formattedNumber: `+${countryData.dialCode}`
+            formattedNumber: `+${countryData.dialCode}`,
           },
           () => {
-            this.updateFlagAndFormatNumber(this.state.inputValue)
+            this.updateFlagAndFormatNumber(this.state.inputValue);
             if (this.props.onSelectCountry) this.props.onSelectCountry(iso2);
           }
         );
@@ -153,14 +153,18 @@ export default class PhoneInput extends Component {
     if (number) {
       const countryCode = this.getCountryCode();
       if (formattedPhoneNumber[0] !== "+" && countryCode !== null) {
-        formattedPhoneNumber = '+' + countryCode.toString() + formattedPhoneNumber.toString();
+        formattedPhoneNumber =
+          "+" + countryCode.toString() + formattedPhoneNumber.toString();
       }
       formattedPhoneNumber = allowZeroAfterCountryCode
         ? formattedPhoneNumber
         : this.possiblyEliminateZeroAfterCountryCode(formattedPhoneNumber);
       iso2 = PhoneNumber.getCountryCodeOfNumber(formattedPhoneNumber);
     }
-    this.setState({ iso2, formattedNumber: formattedPhoneNumber, inputValue: number }, actionAfterSetState);
+    this.setState(
+      { iso2, formattedNumber: formattedPhoneNumber, inputValue: number },
+      actionAfterSetState
+    );
   }
 
   possiblyEliminateZeroAfterCountryCode(number) {
@@ -180,53 +184,73 @@ export default class PhoneInput extends Component {
 
   render() {
     const { iso2, inputValue, disabled } = this.state;
+    const {
+      style,
+      flagStyle,
+      offset,
+      textStyle,
+      textProps,
+      pickerButtonColor,
+      pickerButtonTextStyle,
+      cancelText,
+      cancelTextStyle,
+      confirmText,
+      confirmTextStyle,
+      pickerBackgroundColor,
+      pickerItemStyle,
+      onPressCancel,
+      onPressConfirm,
+      placeholder,
+    } = this.props;
     const TextComponent = this.props.textComponent || TextInput;
+
     return (
-      <View style={[styles.container, this.props.style]}>
+      <View style={[styles.container, style]}>
         <TouchableWithoutFeedback
           onPress={this.onPressFlag}
           disabled={disabled}
         >
           <Image
             source={Flags.get(iso2)}
-            style={[styles.flag, this.props.flagStyle]}
+            style={[styles.flag, flagStyle]}
             onPress={this.onPressFlag}
           />
         </TouchableWithoutFeedback>
-        <View style={{ flex: 1, marginLeft: this.props.offset || 10 }}>
+        <View style={{ flex: 1, marginLeft: offset || 10 }}>
           <TextComponent
-            ref={ref => {
+            ref={(ref) => {
               this.inputPhone = ref;
             }}
             editable={!disabled}
             autoCorrect={false}
-            style={[styles.text, this.props.textStyle]}
-            onChangeText={text => {
+            style={[styles.text, textStyle]}
+            onChangeText={(text) => {
               this.onChangePhoneNumber(text);
             }}
+            placeholder={placeholder}
             keyboardType="phone-pad"
             underlineColorAndroid="rgba(0,0,0,0)"
             value={inputValue}
-            {...this.props.textProps}
+            {...textProps}
           />
         </View>
 
         <CountryPicker
-          ref={ref => {
+          ref={(ref) => {
             this.picker = ref;
           }}
           selectedCountry={iso2}
           onSubmit={this.selectCountry}
-          buttonColor={this.props.pickerButtonColor}
-          buttonTextStyle={this.props.pickerButtonTextStyle}
-          cancelText={this.props.cancelText}
-          cancelTextStyle={this.props.cancelTextStyle}
-          confirmText={this.props.confirmText}
-          confirmTextStyle={this.props.confirmTextStyle}
-          pickerBackgroundColor={this.props.pickerBackgroundColor}
-          itemStyle={this.props.pickerItemStyle}
-          onPressCancel={this.props.onPressCancel}
-          onPressConfirm={this.props.onPressConfirm}
+          buttonColor={pickerButtonColor}
+          buttonTextStyle={pickerButtonTextStyle}
+          cancelText={cancelText}
+          cancelTextStyle={cancelTextStyle}
+          confirmText={confirmText}
+          confirmTextStyle={confirmTextStyle}
+          pickerBackgroundColor={pickerBackgroundColor}
+          itemStyle={pickerItemStyle}
+          onPressCancel={onPressCancel}
+          onPressConfirm={onPressConfirm}
         />
       </View>
     );
@@ -257,7 +281,7 @@ PhoneInput.propTypes = {
       iso2: PropTypes.string,
       dialCode: PropTypes.string,
       priority: PropTypes.number,
-      areaCodes: PropTypes.arrayOf(PropTypes.string)
+      areaCodes: PropTypes.arrayOf(PropTypes.string),
     })
   ),
   cancelText: PropTypes.string,
@@ -265,11 +289,11 @@ PhoneInput.propTypes = {
   confirmText: PropTypes.string,
   confirmTextTextStyle: styleType,
   disabled: PropTypes.bool,
-  allowZeroAfterCountryCode: PropTypes.bool
+  allowZeroAfterCountryCode: PropTypes.bool,
 };
 
 PhoneInput.defaultProps = {
   initialCountry: "us",
   disabled: false,
-  allowZeroAfterCountryCode: true
+  allowZeroAfterCountryCode: true,
 };