Merge e0af43d into ea1c29f

patw0929 · Feb 6, 2019 · 8c1f2c7 · 8c1f2c7
2 parents ea1c29f + e0af43d
commit 8c1f2c7
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 14 deletions.
diff --git a/example/example.js b/example/example.js
diff --git a/example/index.html b/example/index.html
diff --git a/example/main.js b/example/main.js
diff --git a/src/components/IntlTelInputApp.js b/src/components/IntlTelInputApp.js
@@ -1239,8 +1239,8 @@ class IntlTelInputApp extends Component {
   };
 
   render() {
-    this.wrapperClass[this.props.css[0]] = true;
-    const inputClass = this.props.css[1];
+    this.wrapperClass[this.props.containerClassName] = true;
+    const inputClass = this.props.inputClassName;
     const wrapperStyle = Object.assign({}, this.props.style || {});
 
     this.wrapperClass.expanded = this.state.showDropdown;
@@ -1304,7 +1304,8 @@ class IntlTelInputApp extends Component {
 }
 
 IntlTelInputApp.propTypes = {
-  css: PropTypes.arrayOf(PropTypes.string),
+  containerClassName: PropTypes.string,
+  inputClassName: PropTypes.string,
   fieldName: PropTypes.string,
   fieldId: PropTypes.string,
   value: PropTypes.string,
@@ -1341,7 +1342,8 @@ IntlTelInputApp.propTypes = {
 };
 
 IntlTelInputApp.defaultProps = {
-  css: ['intl-tel-input', ''],
+  containerClassName: 'intl-tel-input',
+  inputClassName: '',
   fieldName: '',
   fieldId: '',
   defaultValue: '',

diff --git a/src/components/__tests__/FlagDropDown.test.js b/src/components/__tests__/FlagDropDown.test.js
@@ -14,7 +14,8 @@ describe('FlagDropDown', function() {
     jest.resetModules();
 
     this.params = {
-      css: ['intl-tel-input', 'form-control phoneNumber'],
+      containerClassName: 'intl-tel-input',
+      inputClassName: 'form-control phoneNumber',
       fieldName: 'telephone',
       defaultCountry: 'tw',
     };

diff --git a/src/components/__tests__/TelInput.test.js b/src/components/__tests__/TelInput.test.js
@@ -13,7 +13,8 @@ describe('TelInput', function() {
     document.body.innerHTML = '<div id="root"></div>';
 
     this.params = {
-      css: ['intl-tel-input', 'form-control phoneNumber'],
+      containerClassName: 'intl-tel-input',
+      inputClassName: 'form-control phoneNumber',
       fieldName: 'telephone',
       fieldId: 'telephone-id',
       defaultCountry: 'tw',

diff --git a/src/example.js b/src/example.js
@@ -74,7 +74,8 @@ class DemoComponent extends Component {
           defaultCountry="auto"
           value={this.state.phone1}
           geoIpLookup={lookup}
-          css={['intl-tel-input', 'form-control']}
+          containerClassName="intl-tel-input"
+          inputClassName="form-control"
           format
         />
         <div>
@@ -88,7 +89,8 @@ class DemoComponent extends Component {
           onSelectFlag={this.selectFlagHandler2}
           defaultCountry="jp"
           value={this.state.phone2}
-          css={['intl-tel-input', 'form-control']}
+          containerClassName="intl-tel-input"
+          inputClassName="form-control"
         />
         <div>
           Phone Number:

diff --git a/src/index.html b/src/index.html
@@ -89,9 +89,14 @@ <h2>Props</h2>
             </thead>
             <tbody>
               <tr>
-                <th scope="row">css</th>
-                <td><code>['intl-tel-input', '']</code></td>
-                <td>CSS classnames. First one is for the component wrapper, and second one is for text input.</td>
+                <th scope="row">containerClassName</th>
+                <td><code>'intl-tel-input'</code></td>
+                <td>Container CSS class name.</td>
+              </tr>
+              <tr>
+                <th scope="row">inputClassName</th>
+                <td><code>''</code></td>
+                <td>Text input CSS class name.</td>
               </tr>
               <tr>
                 <th scope="row">style</th>