From 10825ef10771ed2f7bd1f91764cff3485040627d Mon Sep 17 00:00:00 2001 From: Evan Louden Date: Fri, 11 Oct 2019 16:42:31 -0400 Subject: [PATCH 1/5] [FEATURE] Add allowDropdown option --- addon/components/phone-input.js | 15 +++++++++++++++ .../phone-input/all-options/component.js | 1 + .../phone-input/all-options/template.hbs | 13 +++++++++++++ tests/integration/components/phone-input-test.js | 16 ++++++++++++++++ 4 files changed, 45 insertions(+) diff --git a/addon/components/phone-input.js b/addon/components/phone-input.js index 1e8c38f8..b5b7646c 100644 --- a/addon/components/phone-input.js +++ b/addon/components/phone-input.js @@ -2,6 +2,7 @@ import Component from '@ember/component' import { assert } from '@ember/debug' +import { isPresent } from '@ember/utils'; const { intlTelInput } = window @@ -11,6 +12,7 @@ const PHONE_NUMBER_FORMAT = 'E164' // https://en.wikipedia.org/wiki/E.164 A phone-input component. Usage: ```hbs {{phone-input + allowDropdown=false autoPlaceholder='aggressive' initialCountry='fr' number='123' @@ -44,6 +46,17 @@ export default Component.extend({ */ this.number = this.number || null + /** + Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also we display the selected flag on the right instead because it is just a marker of state. + + @argument allowDropdown + @type {boolean} + */ + + this.allowDropdown = isPresent(this.allowDropdown) + ? this.allowDropdown + : false + /** Add or remove input placeholder with an example number for the selected country. Possible values are 'polite', 'aggressive' and 'off'. Defaults to @@ -135,6 +148,7 @@ export default Component.extend({ this._super(...arguments) const { + allowDropdown, autoPlaceholder, initialCountry, onlyCountries, @@ -146,6 +160,7 @@ export default Component.extend({ var _iti = intlTelInput(input, { autoHideDialCode: true, nationalMode: true, + allowDropdown, autoPlaceholder, initialCountry, onlyCountries, diff --git a/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js b/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js index 0df6a5e3..974bf985 100644 --- a/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js +++ b/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js @@ -1,6 +1,7 @@ import Component from '@ember/component' export default Component.extend({ + allowDropdown: null, number: null, separateDialNumber: null, diff --git a/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs b/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs index 664b1fb3..2d190136 100644 --- a/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs +++ b/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs @@ -31,3 +31,16 @@ {{demo.snippet "phone-input-separate-dial-option.hbs"}} {{/docs-demo}} + +

`allowDropdown` option

+{{#docs-demo as |demo|}} + {{#demo.example name="phone-input-allow-dropdown-option.hbs"}} + +

{{phone-input allowDropdown=false initialCountry="fr" update=(action "handleUpdate")}}

+ +

The dropdown can be disabled.

+ + {{/demo.example}} + + {{demo.snippet "phone-input-allow-dropdown-option.hbs"}} +{{/docs-demo}} diff --git a/tests/integration/components/phone-input-test.js b/tests/integration/components/phone-input-test.js index c2bf8678..b8509838 100644 --- a/tests/integration/components/phone-input-test.js +++ b/tests/integration/components/phone-input-test.js @@ -110,4 +110,20 @@ module('Integration | Component | phone-input', function(hooks) { this.set('country', 'pt') }) + + test('can prevent the dropdown', async function(assert) { + assert.expect(1) + + await this.owner.lookup('service:phone-input').load() + + this.set('update', value => { + this.set('allowDropdown', value) + }) + + await render( + hbs`{{phone-input allowDropdown=false update=(action update)}}` + ) + + assert.dom('ul.country-list').doesNotExist() + }) }) From 904a2762a6fd19065935ce6c4fc2d57baa1de107 Mon Sep 17 00:00:00 2001 From: Evan Louden Date: Fri, 11 Oct 2019 17:41:08 -0400 Subject: [PATCH 2/5] remove semicolon --- addon/components/phone-input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/components/phone-input.js b/addon/components/phone-input.js index b5b7646c..d84b5704 100644 --- a/addon/components/phone-input.js +++ b/addon/components/phone-input.js @@ -2,7 +2,7 @@ import Component from '@ember/component' import { assert } from '@ember/debug' -import { isPresent } from '@ember/utils'; +import { isPresent } from '@ember/utils' const { intlTelInput } = window From f05ccee85df40e7c5bb89694ae79351a005bf165 Mon Sep 17 00:00:00 2001 From: Evan Louden Date: Sat, 23 Nov 2019 21:38:07 -0500 Subject: [PATCH 3/5] Update allowDropdown to default to true --- addon/components/phone-input.js | 2 +- .../docs/components/phone-input/all-options/component.js | 6 +++++- .../docs/components/phone-input/all-options/template.hbs | 4 +++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/addon/components/phone-input.js b/addon/components/phone-input.js index d84b5704..a29e81be 100644 --- a/addon/components/phone-input.js +++ b/addon/components/phone-input.js @@ -55,7 +55,7 @@ export default Component.extend({ this.allowDropdown = isPresent(this.allowDropdown) ? this.allowDropdown - : false + : true /** Add or remove input placeholder with an example number for the selected diff --git a/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js b/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js index 974bf985..7814dfab 100644 --- a/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js +++ b/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js @@ -1,7 +1,7 @@ import Component from '@ember/component' export default Component.extend({ - allowDropdown: null, + allowDropdownNumber: null, number: null, separateDialNumber: null, @@ -11,6 +11,10 @@ export default Component.extend({ this.setProperties(metaData) }, + updateAllowDropdownNumber(allowDropdownNumber) { + this.set('allowDropdownNumber', allowDropdownNumber) + }, + updateSeparateDialOption(separateDialNumber, metaData) { this.set('separateDialNumber', separateDialNumber) this.setProperties(metaData) diff --git a/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs b/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs index 2d190136..19021ac2 100644 --- a/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs +++ b/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs @@ -36,10 +36,12 @@ {{#docs-demo as |demo|}} {{#demo.example name="phone-input-allow-dropdown-option.hbs"}} -

{{phone-input allowDropdown=false initialCountry="fr" update=(action "handleUpdate")}}

+

{{phone-input allowDropdown=false number=allowDropdownNumber initialCountry="fr" update=(action "updateAllowDropdownNumber")}}

The dropdown can be disabled.

+

The internal phone number you'll want to persist on your backend is \{{allowDropdownNumber}}: {{allowDropdownNumber}}

+ {{/demo.example}} {{demo.snippet "phone-input-allow-dropdown-option.hbs"}} From 9aa208afc3838d9768458197287f5f13d09e7057 Mon Sep 17 00:00:00 2001 From: Evan Louden Date: Sat, 23 Nov 2019 22:00:51 -0500 Subject: [PATCH 4/5] add semicolon at the end of line 15 in all-options/component.js --- .../pods/docs/components/phone-input/all-options/component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js b/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js index 38786dd5..f8818498 100644 --- a/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js +++ b/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js @@ -12,7 +12,7 @@ export default Component.extend({ }, updateAllowDropdownNumber(allowDropdownNumber) { - this.set('allowDropdownNumber', allowDropdownNumber) + this.set('allowDropdownNumber', allowDropdownNumber); }, updateSeparateDialOption(separateDialNumber, metaData) { From a04320d08a13e7fbde76ac3be579b1a1b31d9590 Mon Sep 17 00:00:00 2001 From: Evan Louden Date: Wed, 27 Nov 2019 07:15:51 -0500 Subject: [PATCH 5/5] Set update action to empty function in prevent dropdown test --- tests/integration/components/phone-input-test.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/tests/integration/components/phone-input-test.js b/tests/integration/components/phone-input-test.js index 8d2098f9..0cde7ba6 100644 --- a/tests/integration/components/phone-input-test.js +++ b/tests/integration/components/phone-input-test.js @@ -132,14 +132,10 @@ module('Integration | Component | phone-input', function(hooks) { test('can prevent the dropdown', async function(assert) { assert.expect(1); - await this.owner.lookup('service:phone-input').load(); - - this.set('update', value => { - this.set('allowDropdown', value); - }); + this.set('updateAllowDropdownNumber', () => {}); await render( - hbs`{{phone-input allowDropdown=false update=(action update)}}` + hbs`{{phone-input allowDropdown=false update=(action updateAllowDropdownNumber)}}` ); assert.dom('ul.country-list').doesNotExist();