remove material-ui selector, add specialLabel, close bl00mber#218

Author: bl00mber

README.md

@@ -391,6 +391,10 @@ If `enableAreaCodeStretch` is added, the part of the mask with the area code wil
     <td> defaultErrorMessage </td>
     <td> string </td>
   </tr>
+  <tr>
+    <td> specialLabel </td>
+    <td> string </td>
+  </tr>
   <tr>
     <td> disableInitialCountryGuess </td>
     <td> false </td>

src/index.js

@@ -96,6 +96,7 @@ class PhoneInput extends React.Component {
       PropTypes.func,
     ]),
     defaultErrorMessage: PropTypes.string,
+    specialLabel: PropTypes.string,
   }
 
   static defaultProps = {
@@ -160,6 +161,7 @@ class PhoneInput extends React.Component {
 
     isValid: true, // (value, selectedCountry, onlyCountries, hiddenAreaCodes) => true | false | 'Message'
     defaultErrorMessage: '',
+    specialLabel: 'Phone',
 
     onEnterKeyPress: null, // null or function
 
@@ -892,7 +894,7 @@ class PhoneInput extends React.Component {
 
   render() {
     const { onlyCountries, selectedCountry, showDropdown, formattedNumber, hiddenAreaCodes } = this.state;
-    const { disableDropdown, renderStringAsFlag, isValid, defaultErrorMessage } = this.props;
+    const { disableDropdown, renderStringAsFlag, isValid, defaultErrorMessage, specialLabel } = this.props;
 
     let isValidValue, errorMessage;
     if (typeof isValid === 'boolean') {
@@ -936,6 +938,7 @@ class PhoneInput extends React.Component {
         className={containerClasses}
         style={this.props.style || this.props.containerStyle}
         onKeyDown={this.handleKeydown}>
+        {specialLabel && <div className='special-label'>{specialLabel}</div>}
         {errorMessage && <div className='invalid-number-message'>{errorMessage}</div>}
         <input
           className={inputClasses}

src/style/bootstrap.less

@@ -172,4 +172,15 @@
     padding: 0 5px;
     color: #de0000;
   }
+  .special-label {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    font-size: 13px;
+    left: 25px;
+    top: -7px;
+    background: #fff;
+    padding: 0 5px;
+    white-space: nowrap;
+  }
 }

src/style/high-res.less

@@ -157,4 +157,15 @@
       opacity: .7;
     }
   }
+  .special-label {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    font-size: 13px;
+    left: 46px;
+    top: -8px;
+    background: #fff;
+    padding: 0 2px;
+    white-space: nowrap;
+  }
 }

src/style/material.less

@@ -33,17 +33,6 @@
         width: 27px;
       }
     }
-    &+div:before {
-      content: 'Phone input';
-      position: absolute;
-      top: -7px;
-      left: 25px;
-      display: block;
-      background: white;
-      padding: 0 5px;
-      font-size: 13px;
-      white-space: nowrap;
-    }
   }
   .flag-dropdown {
     position: absolute;
@@ -186,4 +175,15 @@
     padding: 0 5px;
     color: #de0000;
   }
+  .special-label {
+    position: absolute;
+    z-index: 1;
+    top: -7px;
+    left: 25px;
+    display: block;
+    background: white;
+    padding: 0 5px;
+    font-size: 13px;
+    white-space: nowrap;
+  }
 }

src/style/plain.less

@@ -158,4 +158,15 @@
     padding: 0 2px;
     color: #de0000;
   }
+  .special-label {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    font-size: 13px;
+    left: 46px;
+    top: -8px;
+    background: #fff;
+    padding: 0 2px;
+    white-space: nowrap;
+  }
 }

src/style/semantic-ui.less

@@ -179,4 +179,15 @@
     padding: 0 2px;
     color: #de0000;
   }
+  .special-label {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    font-size: 13px;
+    left: 46px;
+    top: -8px;
+    background: #fff;
+    padding: 0 2px;
+    white-space: nowrap;
+  }
 }

src/style/style.less

@@ -165,4 +165,15 @@
     padding: 0 2px;
     color: #de0000;
   }
+  .special-label {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    font-size: 13px;
+    left: 46px;
+    top: -8px;
+    background: #fff;
+    padding: 0 2px;
+    white-space: nowrap;
+  }
 }