ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(input-tel): use pattern validation message for too-short/too-long (#1693)

Browse source
This commit is contained in:
gerjanvangeest 2022-05-31 11:00:37 +02:00 committed by GitHub
parent 27c86e71e8
commit abcff8c9e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 152 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/five-pots-clean.md Normal file
View file

@ -0,0 +1,6 @@
---
'@lion/input-tel': patch
'@lion/validate-messages': patch
---
Add replace Min/MaxLength validator messages with Pattern validator message in PhoneNumber validator, since wrong info (param) was shown. And removed default Validator message for PhoneNumber validator.

6
docs/components/input-tel-dropdown/examples.md
View file

@ -4,6 +4,7 @@
import { html } from '@mdjs/mdjs-preview';
import '@lion/select-rich/define';
import './src/intl-input-tel-dropdown.js';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
```
## Input Tel International
@ -16,7 +17,9 @@ Inspired by:
- [react-phone-input-2](https://github.com/bl00mber/react-phone-input-2)
```js preview-story
export const IntlInputTelDropdown = () => html`
export const IntlInputTelDropdown = () => {
loadDefaultFeedbackMessages();
return html`
<intl-input-tel-dropdown
.preferredRegions="${['NL', 'PH']}"
.modelValue=${'+639608920056'}
@ -25,4 +28,5 @@ export const IntlInputTelDropdown = () => html`
name="phoneNumber"
></intl-input-tel-dropdown>
`;
};
```

2
docs/components/input-tel-dropdown/overview.md
View file

@ -5,10 +5,12 @@ Extension of Input Tel that prefixes a dropdown list that shows all possible reg
```js script
import { html } from '@mdjs/mdjs-preview';
import '@lion/input-tel-dropdown/define';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
```
```js preview-story
export const main = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-tel-dropdown label="Telephone number" name="phoneNumber"></lion-input-tel-dropdown>
`;

20
docs/components/input-tel-dropdown/use-cases.md
View file

@ -7,6 +7,9 @@ import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
import { PhoneUtilManager } from '@lion/input-tel';
import '@lion/input-tel-dropdown/define';
import '../../../docs/fundamentals/systems/form/assets/h-output.js';
// TODO: make each example load/use the dependencies by default
// loadDefaultFeedbackMessages();
```
## Input Tel Dropdown
@ -15,7 +18,9 @@ When `.allowedRegions` is not configured, all regions/countries will be availabl
list. Once a region is chosen, its country/dial code will be adjusted with that of the new locale.
```js preview-story
export const InputTelDropdown = () => html`
export const InputTelDropdown = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-tel-dropdown
label="Select region via dropdown"
help-text="Shows all regions by default"
@ -26,6 +31,7 @@ export const InputTelDropdown = () => html`
.readyPromise="${PhoneUtilManager.loadComplete}"
></h-output>
`;
};
```
## Allowed regions
@ -34,7 +40,9 @@ When `.allowedRegions` is configured, only those regions/countries will be avail
list.
```js preview-story
export const allowedRegions = () => html`
export const allowedRegions = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-tel-dropdown
label="Select region via dropdown"
help-text="With region code 'NL'"
@ -47,6 +55,7 @@ export const allowedRegions = () => html`
.readyPromise="${PhoneUtilManager.loadComplete}"
></h-output>
`;
};
```
## Preferred regions
@ -54,7 +63,9 @@ export const allowedRegions = () => html`
When `.preferredRegions` is configured, they will show up on top of the dropdown list to enhance user experience.
```js preview-story
export const preferredRegionCodes = () => html`
export const preferredRegionCodes = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-tel-dropdown
label="Select region via dropdown"
help-text="Preferred regions show on top"
@ -67,5 +78,6 @@ export const preferredRegionCodes = () => html`
.show="${['modelValue', 'activeRegion']}"
.readyPromise="${PhoneUtilManager.loadComplete}"
></h-output>
`;
`
};
```

2
docs/components/input-tel/overview.md
View file

@ -7,11 +7,13 @@ import { html } from '@mdjs/mdjs-preview';
import { ref, createRef } from '@lion/core';
import { PhoneUtilManager } from '@lion/input-tel';
import '@lion/input-tel/define';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
import '../../../docs/fundamentals/systems/form/assets/h-output.js';
```
```js preview-story
export const main = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-tel
.modelValue="${'+639921343959'}"

31
docs/components/input-tel/use-cases.md
View file

@ -10,6 +10,9 @@ import { PhoneUtilManager } from '@lion/input-tel';
import '@lion/input-tel/define';
import './src/h-region-code-table.js';
import '../../../docs/fundamentals/systems/form/assets/h-output.js';
// TODO: make each example load/use the dependencies by default
// loadDefaultFeedbackMessages();
```
## Regions: some context
@ -23,7 +26,10 @@ The table below lists all possible regions worldwide. When [allowed regions](#al
all of them will be supported as values of Input Tel.
```js story
export const regionCodesTable = () => html`<h-region-code-table></h-region-code-table>`;
export const regionCodesTable = () => {
loadDefaultFeedbackMessages();
return html`<h-region-code-table></h-region-code-table>`;
};
```
### Active region
@ -51,6 +57,8 @@ The following heuristic will be applied:
```js preview-story
export const heuristic = () => {
loadDefaultFeedbackMessages();
const initialAllowedRegions = ['CN', 'ES'];
const [inputTelRef, outputRef, selectRef] = [createRef(), createRef(), createRef()];
@ -126,7 +134,9 @@ values that are present in this list.
> be shown in the dropdown list.
```js preview-story
export const allowedRegions = () => html`
export const allowedRegions = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-tel
label="Allowed regions 'NL', 'BE', 'DE'"
help-text="Type '+31'(NL), '+32'(BE) or '+49'(DE) and see how activeRegion changes"
@ -139,6 +149,7 @@ export const allowedRegions = () => html`
.readyPromise="${PhoneUtilManager.loadComplete}"
></h-output>
`;
};
```
### Restrict to one region
@ -147,7 +158,9 @@ When one allowed region is configured, validation and formatting will be restric
region (that means that changes of the region via viewValue won't have effect).
```js preview-story
export const oneAllowedRegion = () => html`
export const oneAllowedRegion = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-tel
label="Only allowed region 'DE'"
help-text="Restricts validation / formatting to one region"
@ -160,6 +173,7 @@ export const oneAllowedRegion = () => html`
.readyPromise="${PhoneUtilManager.loadComplete}"
></h-output>
`;
};
```
## Format strategy
@ -183,6 +197,7 @@ Also see:
```js preview-story
export const formatStrategy = () => {
loadDefaultFeedbackMessages();
const inputTel = createRef();
return html`
<select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
@ -215,7 +230,9 @@ Type '6' in the example below to see how the phone number is formatted during ty
See [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
```js preview-story
export const liveFormat = () => html`
export const liveFormat = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-tel
label="Realtime format on user input"
help-text="Partial numbers are also formatted"
@ -225,6 +242,7 @@ export const liveFormat = () => html`
name="phoneNumber"
></lion-input-tel>
`;
};
```
## Active phone number type
@ -239,7 +257,9 @@ Also see:
- [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
```js preview-story
export const activePhoneNumberType = () => html`
export const activePhoneNumberType = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-tel
label="Active phone number type"
.modelValue="${'+31612345678'}"
@ -251,4 +271,5 @@ export const activePhoneNumberType = () => html`
.readyPromise="${PhoneUtilManager.loadComplete}"
></h-output>
`;
};
```

6
packages/input-tel/src/validators.js
View file

@ -4,6 +4,7 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
/**
* @typedef {import('../types').RegionCode} RegionCode
* @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
* @typedef {import('@lion/form-core/types/validate/validate').FeedbackMessageData} FeedbackMessageData
*/
/**
@ -62,9 +63,4 @@ export class PhoneNumber extends Validator {
}
return hasFeedback(modelValue, regionCode);
}
// TODO: add a file for loadDefaultMessages
static async getMessage() {
return 'Not a valid phone number';
}
}

10
packages/input-tel/test/validators.test.js
View file

@ -34,16 +34,14 @@ describe('PhoneNumber validation', () => {
expect(validator.execute('+32612345678', 'NL')).to.equal('invalid-country-code');
});
// TODO: find out why awesome-phonenumber does not detect too-short/too-long
it.skip('is invalid when number is too short, returns "too-short"', () => {
it('is invalid when number is too short, returns "too-short"', () => {
const validator = new PhoneNumber();
expect(validator.execute('+3161234567', 'NL')).to.equal('too-short');
expect(validator.execute('+316123', 'NL')).to.equal('too-short');
});
// TODO: find out why awesome-phonenumber does not detect too-short/too-long
it.skip('is invalid when number is too long, returns "too-long"', () => {
it('is invalid when number is too long, returns "too-long"', () => {
const validator = new PhoneNumber();
expect(validator.execute('+316123456789', 'NL')).to.equal('too-long');
expect(validator.execute('+31612345678901', 'NL')).to.equal('too-long');
});
it('is valid when a phone number is entered', () => {

6
packages/validate-messages/src/loadDefaultFeedbackMessages.js
View file

@ -172,10 +172,12 @@ export function loadDefaultFeedbackMessages() {
await forMessagesToBeReady();
const { type, outcome } = data;
if (outcome === 'too-long') {
return localize.msg(`lion-validate:${type}.MaxLength`, data);
// TODO: get max-length of country and use MaxLength validator
return localize.msg(`lion-validate:${type}.Pattern`, data);
}
if (outcome === 'too-short') {
return localize.msg(`lion-validate:${type}.MinLength`, data);
// TODO: get min-length of country and use MinLength validator
return localize.msg(`lion-validate:${type}.Pattern`, data);
}
// TODO: add a more specific message here
if (outcome === 'invalid-country-code') {