Skip to content

Commit

Permalink
Added on blur callback handler
Browse files Browse the repository at this point in the history
  • Loading branch information
@mantoci984
mantoci984 committed Aug 29, 2016
1 parent 911e004 commit 5aaef6e
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 14 deletions.
12 changes: 9 additions & 3 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,11 +107,12 @@ <h3>Validation callback</h3>
import 'file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js';
import './node_modules/react-intl-tel-input/dist/main.css';

const changeHandler = (status, value, countryData, number, id) => {
const handler = (status, value, countryData, number, id) => {
console.log(status, value, countryData, number, id);
};

ReactDOM.render(&lt;IntlTelInput onPhoneNumberChange={changeHandler}
ReactDOM.render(&lt;IntlTelInput onPhoneNumberChange={handler}
onPhoneNumberBlur={handler}
css={['intl-tel-input', 'form-control']}
utilsScript={'libphonenumber.js'} /&gt;, document.getElementById('content'));
</code></pre>
Expand Down Expand Up @@ -243,7 +244,12 @@ <h2>Props</h2>
<tr>
<th scope="row">onPhoneNumberChange</th>
<td><code>null</code></td>
<td>Validation callback function. It returns validation status, input box value and selected country data.</td>
<td>Optional validation callback function. It returns validation status, input box value and selected country data.</td>
</tr>
<tr>
<th scope="row">onPhoneNumberBlur</th>
<td><code>null</code></td>
<td>Optional validation callback function. It returns validation status, input box value and selected country data.</td>
</tr>
</tbody>
</table>
Expand Down
24 changes: 19 additions & 5 deletions src/containers/IntlTelInputApp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export default class IntlTelInputApp extends Component {
// specify the path to the libphonenumber script to enable validation/formatting
utilsScript: '',
onPhoneNumberChange: null,
onPhoneNumberBlur: null,
onSelectFlag: null,
disabled: false,
};
Expand All @@ -74,6 +75,7 @@ export default class IntlTelInputApp extends Component {
preferredCountries: PropTypes.arrayOf(PropTypes.string),
utilsScript: PropTypes.string,
onPhoneNumberChange: PropTypes.func,
onPhoneNumberBlur: PropTypes.func,
onSelectFlag: PropTypes.func,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
Expand Down Expand Up @@ -778,6 +780,14 @@ export default class IntlTelInputApp extends Component {

handleOnBlur() {
this.removeEmptyDialCode();
if (typeof this.props.onPhoneNumberBlur === 'function') {
const value = this.state.value;
const isValid = this.isValidNumber(value);
const fullNumber = this.formatFullNumber(value);
this.props.onPhoneNumberBlur(
isValid, value, this.selectedCountryData,
fullNumber, this.getExtension());
}
}

bindDocumentClick() {
Expand Down Expand Up @@ -920,14 +930,18 @@ export default class IntlTelInputApp extends Component {
return false;
}

formatFullNumber(number) {
return window.intlTelInputUtils
? this.getNumber(window.intlTelInputUtils.numberFormat.INTERNATIONAL)
: number;
}

notifyPhoneNumberChange(newNumber) {
if (typeof this.props.onPhoneNumberChange === 'function') {
const result = this.isValidNumber(newNumber);
const fullNumber = window.intlTelInputUtils ?
this.getNumber(window.intlTelInputUtils.numberFormat.INTERNATIONAL) :
newNumber;
const isValid = this.isValidNumber(newNumber);
const fullNumber = this.formatFullNumber(newNumber);
this.props.onPhoneNumberChange(
result, newNumber, this.selectedCountryData,
isValid, newNumber, this.selectedCountryData,
fullNumber, this.getExtension());
}
}
Expand Down
16 changes: 13 additions & 3 deletions src/example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ const lookup = (callback) => {
};
};

function log(...args) {
/* eslint-disable */
console.log(args);
/* eslint-enable */
}

class DemoComponent extends React.Component {
constructor(props) {
super(props);
Expand All @@ -38,19 +44,22 @@ class DemoComponent extends React.Component {
}

changeHandler(name, isValid, value, countryData, number, ext) {
/* eslint-disable */
console.log(isValid, value, countryData, number, ext);
/* eslint-enable */
log(isValid, value, countryData, number, ext);
this.setState({
[name]: value,
});
}

blurHandler(isValid, value, countryData, number, ext) {
log(isValid, value, countryData, number, ext);
}

render() {
return (
<div>
<IntlTelInput
onPhoneNumberChange={this.changePhone1}
onPhoneNumberBlur={this.blurHandler}
defaultCountry={'auto'}
value={this.state.phone1}
geoIpLookup={lookup}
Expand All @@ -61,6 +70,7 @@ class DemoComponent extends React.Component {

<IntlTelInput
onPhoneNumberChange={this.changePhone2}
onPhoneNumberBlur={this.blurHandler}
defaultCountry={'jp'}
value={this.state.phone2}
css={['intl-tel-input', 'form-control']}
Expand Down
12 changes: 9 additions & 3 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,11 +107,12 @@ <h3>Validation callback</h3>
import 'file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js';
import './node_modules/react-intl-tel-input/dist/main.css';

const changeHandler = (status, value, countryData, number, id) => {
const handler = (status, value, countryData, number, id) => {
console.log(status, value, countryData, number, id);
};

ReactDOM.render(&lt;IntlTelInput onPhoneNumberChange={changeHandler}
ReactDOM.render(&lt;IntlTelInput onPhoneNumberChange={handler}
onPhoneNumberBlur={handler}
css={['intl-tel-input', 'form-control']}
utilsScript={'libphonenumber.js'} /&gt;, document.getElementById('content'));
</code></pre>
Expand Down Expand Up @@ -243,7 +244,12 @@ <h2>Props</h2>
<tr>
<th scope="row">onPhoneNumberChange</th>
<td><code>null</code></td>
<td>Validation callback function. It returns validation status, input box value and selected country data.</td>
<td>Optional validation callback function. It returns validation status, input box value and selected country data.</td>
</tr>
<tr>
<th scope="row">onPhoneNumberBlur</th>
<td><code>null</code></td>
<td>Optional validation callback function. It returns validation status, input box value and selected country data.</td>
</tr>
</tbody>
</table>
Expand Down
30 changes: 30 additions & 0 deletions tests/TelInput-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,36 @@ describe('TelInput', () => {
assert(parent.state.value === '');
});

it('onPhoneNumberBlur', () => {
requests[0].respond(200,
{ 'Content-Type': 'text/javascript' },
libphonenumberUtils);
window.eval(getScript().text);

let expected = '';
const onPhoneNumberBlur = (isValid, newNumber, countryData, fullNumber, ext) => {
expected = `${isValid},${newNumber},${countryData.iso2},${fullNumber},${ext}`;
};

const parent = ReactTestUtils.renderIntoDocument(
<IntlTelInput css={['intl-tel-input', 'form-control phoneNumber']}
fieldName={'telephone'}
defaultCountry={'tw'}
utilsScript={'../example/assets/libphonenumber.js'}
onPhoneNumberBlur={onPhoneNumberBlur}
/>
);

const input = ReactTestUtils.findRenderedComponentWithType(
parent,
TelInput
);

ReactTestUtils.Simulate.change(findDOMNode(input), { target: { value: '+886911222333' } });
ReactTestUtils.Simulate.blur(findDOMNode(input));
assert(expected === 'true,+886911222333,tw,+886 911 222 333,null');
});

it('has empty value and not nationalMode, not autoHideDialCode and not separateDialCode', () => {
const parent = ReactTestUtils.renderIntoDocument(
<IntlTelInput css={['intl-tel-input', 'form-control phoneNumber']}
Expand Down

0 comments on commit 5aaef6e

Please sign in to comment.