From b44e64b2f960247a4bab8b8f1521c809e762db5c Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Thu, 12 Apr 2018 08:32:51 +0200 Subject: [PATCH 1/6] Handle placeholder and customPlaceholder change --- src/components/IntlTelInputApp.js | 35 ++++++++++++++++++------------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/src/components/IntlTelInputApp.js b/src/components/IntlTelInputApp.js index 1f395bc7b..c550a2e0f 100644 --- a/src/components/IntlTelInputApp.js +++ b/src/components/IntlTelInputApp.js @@ -103,8 +103,6 @@ class IntlTelInputApp extends Component { } componentDidMount() { - this.initialPlaceholder = this.props.placeholder; - this.autoHideDialCode = this.props.autoHideDialCode; this.allowDropdown = this.props.allowDropdown; this.nationalMode = this.props.nationalMode; @@ -171,6 +169,13 @@ class IntlTelInputApp extends Component { placeholder: nextProps.placeholder, }); } + + if ( + typeof nextProps.customPlaceholder === 'function' && + this.props.customPlaceholder !== nextProps.customPlaceholder + ) { + this.updatePlaceholder(nextProps); + } } componentWillUpdate(nextProps, nextState) { @@ -293,7 +298,7 @@ class IntlTelInputApp extends Component { dialCode, }, () => { // and the input's placeholder - this.updatePlaceholder(); + this.updatePlaceholder(this.props); // update the active list item this.wrapperClass.active = false; @@ -788,21 +793,17 @@ class IntlTelInputApp extends Component { // update the input placeholder to an // example number from the currently selected country - updatePlaceholder() { - if (this.initialPlaceholder) { - this.setState({ - placeholder: this.initialPlaceholder, - }); - } else if (window.intlTelInputUtils && this.props.autoPlaceholder && this.selectedCountryData) { - const numberType = window.intlTelInputUtils.numberType[this.props.numberType]; + updatePlaceholder(props = this.props) { + if (window.intlTelInputUtils && props.autoPlaceholder && this.selectedCountryData) { + const numberType = window.intlTelInputUtils.numberType[props.numberType]; let placeholder = this.selectedCountryData.iso2 ? window.intlTelInputUtils.getExampleNumber(this.selectedCountryData.iso2, this.nationalMode, numberType) : ''; - placeholder = this.beforeSetNumber(placeholder); + placeholder = this.beforeSetNumber(placeholder, props); - if (typeof this.props.customPlaceholder === 'function') { - placeholder = this.props.customPlaceholder(placeholder, this.selectedCountryData); + if (typeof props.customPlaceholder === 'function') { + placeholder = props.customPlaceholder(placeholder, this.selectedCountryData); } this.setState({ @@ -961,7 +962,7 @@ class IntlTelInputApp extends Component { } // remove the dial code if separateDialCode is enabled - beforeSetNumber(number) { + beforeSetNumber(number, props = this.props) { if (this.props.separateDialCode) { let dialCode = this.getDialCode(number); @@ -1160,7 +1161,11 @@ class IntlTelInputApp extends Component { fieldName={ this.props.fieldName } fieldId={ this.props.fieldId } value={ value } - placeholder={ this.state.placeholder } + placeholder={ + this.props.placeholder !== undefined + ? this.props.placeholder + : this.state.placeholder + } autoFocus={ this.props.autoFocus } autoComplete={ this.props.autoComplete } inputProps={ this.props.telInputProps } From 2d6f2eacb31cb519d28f92501831e7ddb6828538 Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Thu, 12 Apr 2018 08:48:31 +0200 Subject: [PATCH 2/6] fix placeholder prop duplication in state --- src/components/IntlTelInputApp.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/IntlTelInputApp.js b/src/components/IntlTelInputApp.js index c550a2e0f..b4cc40e9e 100644 --- a/src/components/IntlTelInputApp.js +++ b/src/components/IntlTelInputApp.js @@ -163,12 +163,6 @@ class IntlTelInputApp extends Component { disabled: nextProps.disabled, }); } - - if (this.props.placeholder !== nextProps.placeholder) { - this.setState({ - placeholder: nextProps.placeholder, - }); - } if ( typeof nextProps.customPlaceholder === 'function' && From 72eeae33b0044a29d5748fece1a6f2d4c63f7ecc Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Sun, 15 Apr 2018 13:15:02 +0200 Subject: [PATCH 3/6] fix first lint errors --- src/components/IntlTelInputApp.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/IntlTelInputApp.js b/src/components/IntlTelInputApp.js index b4cc40e9e..3f5721982 100644 --- a/src/components/IntlTelInputApp.js +++ b/src/components/IntlTelInputApp.js @@ -163,7 +163,7 @@ class IntlTelInputApp extends Component { disabled: nextProps.disabled, }); } - + if ( typeof nextProps.customPlaceholder === 'function' && this.props.customPlaceholder !== nextProps.customPlaceholder @@ -957,7 +957,7 @@ class IntlTelInputApp extends Component { // remove the dial code if separateDialCode is enabled beforeSetNumber(number, props = this.props) { - if (this.props.separateDialCode) { + if (props.separateDialCode) { let dialCode = this.getDialCode(number); if (dialCode) { From 432c586b2ae33b86aee670ff7ac7dd46c7980844 Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Sun, 15 Apr 2018 13:17:27 +0200 Subject: [PATCH 4/6] Update IntlTelInputApp.js --- src/components/IntlTelInputApp.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/IntlTelInputApp.js b/src/components/IntlTelInputApp.js index 3f5721982..862bb7050 100644 --- a/src/components/IntlTelInputApp.js +++ b/src/components/IntlTelInputApp.js @@ -1178,6 +1178,7 @@ IntlTelInputApp.propTypes = { countriesData: PropTypes.arrayOf(PropTypes.array), allowDropdown: PropTypes.bool, autoHideDialCode: PropTypes.bool, + // eslint-disable-next-line react/no-unused-prop-types autoPlaceholder: PropTypes.bool, customPlaceholder: PropTypes.func, excludeCountries: PropTypes.arrayOf(PropTypes.string), @@ -1186,6 +1187,7 @@ IntlTelInputApp.propTypes = { defaultCountry: PropTypes.string, geoIpLookup: PropTypes.func, nationalMode: PropTypes.bool, + // eslint-disable-next-line react/no-unused-prop-types numberType: PropTypes.string, noCountryDataHandler: PropTypes.func, onlyCountries: PropTypes.arrayOf(PropTypes.string), From 1e9d2e01a51a23e6782ba2e649307b6470b521e6 Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Sun, 15 Apr 2018 13:37:21 +0200 Subject: [PATCH 5/6] Try to set up tests --- __tests__/TelInput.test.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/__tests__/TelInput.test.js b/__tests__/TelInput.test.js index 9eaabd234..519e450b0 100644 --- a/__tests__/TelInput.test.js +++ b/__tests__/TelInput.test.js @@ -478,6 +478,20 @@ describe('TelInput', function () { // eslint-disable-line func-names expect(subject.find(TelInput).props().placeholder).toBe('Your phone'); }); + + it('should change input placeholder on customPlaceholder prop change', () => { + const subject = this.makeSubject(); + + subject.setProps({ customPlaceholder: () => 'Phone number' }); + subject.update(); + + expect(subject.find(TelInput).props().placeholder).toBe('Phone number'); + + subject.setProps({ customPlaceholder: () => 'Your phone' }); + subject.update(); + + expect(subject.find(TelInput).props().placeholder).toBe('Your phone'); + }); }); describe('uncontrolled', () => { From 16de58c8023fee46cb994ae09bac2c85b61eec92 Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Sun, 15 Apr 2018 16:24:03 +0200 Subject: [PATCH 6/6] update test --- __tests__/TelInput.test.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/__tests__/TelInput.test.js b/__tests__/TelInput.test.js index 519e450b0..e8521c78f 100644 --- a/__tests__/TelInput.test.js +++ b/__tests__/TelInput.test.js @@ -482,6 +482,11 @@ describe('TelInput', function () { // eslint-disable-line func-names it('should change input placeholder on customPlaceholder prop change', () => { const subject = this.makeSubject(); + requests[0].respond(200, + { 'Content-Type': 'text/javascript' }, + libphonenumberUtils); + window.eval(getScript().text); + subject.setProps({ customPlaceholder: () => 'Phone number' }); subject.update();