diff --git a/example/index.html b/example/index.html index 1b36a1e35..0fe63d1f6 100644 --- a/example/index.html +++ b/example/index.html @@ -107,11 +107,12 @@

Validation callback

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(<IntlTelInput onPhoneNumberChange={changeHandler} +ReactDOM.render(<IntlTelInput onPhoneNumberChange={handler} + onPhoneNumberBlur={handler} css={['intl-tel-input', 'form-control']} utilsScript={'libphonenumber.js'} />, document.getElementById('content')); @@ -243,7 +244,12 @@

Props

onPhoneNumberChange null - Validation callback function. It returns validation status, input box value and selected country data. + Optional validation callback function. It returns validation status, input box value and selected country data. + + + onPhoneNumberBlur + null + Optional validation callback function. It returns validation status, input box value and selected country data. diff --git a/src/containers/IntlTelInputApp.js b/src/containers/IntlTelInputApp.js index 5aabb23b5..ee9d3f287 100644 --- a/src/containers/IntlTelInputApp.js +++ b/src/containers/IntlTelInputApp.js @@ -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, }; @@ -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, @@ -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() { @@ -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()); } } diff --git a/src/example.js b/src/example.js index 667d535ec..a25782105 100644 --- a/src/example.js +++ b/src/example.js @@ -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); @@ -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 (
Validation callback 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(<IntlTelInput onPhoneNumberChange={changeHandler} +ReactDOM.render(<IntlTelInput onPhoneNumberChange={handler} + onPhoneNumberBlur={handler} css={['intl-tel-input', 'form-control']} utilsScript={'libphonenumber.js'} />, document.getElementById('content')); @@ -243,7 +244,12 @@

Props

onPhoneNumberChange null - Validation callback function. It returns validation status, input box value and selected country data. + Optional validation callback function. It returns validation status, input box value and selected country data. + + + onPhoneNumberBlur + null + Optional validation callback function. It returns validation status, input box value and selected country data. diff --git a/tests/TelInput-test.js b/tests/TelInput-test.js index 1116b4825..8c7544a1e 100644 --- a/tests/TelInput-test.js +++ b/tests/TelInput-test.js @@ -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( + + ); + + 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(