From ca61f530913fd37ebc9f84f90811761915cfe8f2 Mon Sep 17 00:00:00 2001 From: Maxime Perrault Date: Mon, 8 Jul 2024 10:18:12 +0200 Subject: [PATCH] feat(components): add an international french format --- e2e/base/fields/PhoneInput.spec.tsx | 131 ++++++++++++++-------------- src/fields/PhoneInput.tsx | 19 ++-- 2 files changed, 79 insertions(+), 71 deletions(-) diff --git a/e2e/base/fields/PhoneInput.spec.tsx b/e2e/base/fields/PhoneInput.spec.tsx index 9831abce..2cce0545 100644 --- a/e2e/base/fields/PhoneInput.spec.tsx +++ b/e2e/base/fields/PhoneInput.spec.tsx @@ -70,96 +70,95 @@ context('Story', () => { outputShouldBe('0712345678') }) + }) + describe('international format', () => { + it('Should fill, change and clear the input', () => { + mountAndWait( + + + + ) - describe('international format', () => { - it('Should fill, change and clear the input', () => { - mountAndWait( - - - - ) - - outputShouldBe(undefined) + outputShouldBe(undefined) - cy.fill(commonProps.label, '00 594 222 333 444') + cy.fill(commonProps.label, '00 594 222 333 444') - outputShouldBe('00594222333444') + outputShouldBe('00594222333444') - cy.fill(commonProps.label, '') + cy.fill(commonProps.label, '') - outputShouldBe(undefined) - }) + outputShouldBe(undefined) + }) - it('Should have output with default value`', () => { - mountAndWait( - - - - ) + it('Should have output with default value`', () => { + mountAndWait( + + + + ) - outputShouldBe('00594222333444') - }) - describe('other format', () => { - it('Should fill, change and clear the input', () => { - mountAndWait( - - - - ) + outputShouldBe('00594222333444') + }) + }) + describe('other format', () => { + it('Should fill, change and clear the input', () => { + mountAndWait( + + + + ) - outputShouldBe(undefined) + outputShouldBe(undefined) - cy.fill(commonProps.label, '8317920035') + cy.fill(commonProps.label, '8317920035') - outputShouldBe('8317920035') + outputShouldBe('8317920035') - cy.fill(commonProps.label, '') + cy.fill(commonProps.label, '') - outputShouldBe(undefined) - }) + outputShouldBe(undefined) + }) - it('Should be editable to a international number', () => { - mountAndWait( - - - - ) + it('Should be editable to a international number', () => { + mountAndWait( + + + + ) - outputShouldBe(undefined) + outputShouldBe(undefined) - cy.fill(commonProps.label, '8317920035') + cy.fill(commonProps.label, '8317920035') - cy.get(`#${commonProps.name}`).type('{moveToStart}').type('00') + cy.get(`#${commonProps.name}`).type('{moveToStart}').type('00') - outputShouldBe('008317920035') - }) + outputShouldBe('008317920035') + }) - it('Should be editable to a french number', () => { - mountAndWait( - - - - ) + it('Should be editable to a french number', () => { + mountAndWait( + + + + ) - outputShouldBe(undefined) + outputShouldBe(undefined) - cy.fill(commonProps.label, '8317920035') + cy.fill(commonProps.label, '8317920035') - cy.get(`#${commonProps.name}`).type('{moveToStart}').type('0') + cy.get(`#${commonProps.name}`).type('{moveToStart}').type('0') - outputShouldBe('08317920035') - }) + outputShouldBe('08317920035') + }) - it('Should have output with default value`', () => { - mountAndWait( - - - - ) + it('Should have output with default value`', () => { + mountAndWait( + + + + ) - outputShouldBe('+3361234567890') - }) - }) + outputShouldBe('+3361234567890') }) }) }) diff --git a/src/fields/PhoneInput.tsx b/src/fields/PhoneInput.tsx index dee45063..40286313 100644 --- a/src/fields/PhoneInput.tsx +++ b/src/fields/PhoneInput.tsx @@ -28,6 +28,11 @@ const internationalFormat = { mask: '`@@ #[00] 000 000 000 000' } +const internationalFrenchFormat = { + definitions: { '@': /0/ }, + mask: '`@@ 00 00 00 00 00' +} + const frenchFormat = { definitions: { '#': /[1-9]/, '@': /0/ }, mask: '`@# 00 00 00 00' } const defaultFormat = { definitions: { '#': /[1-9]/, '+': /[+\d]/ }, mask: '`+00 000 000 000 000 000' } @@ -69,23 +74,27 @@ export const PhoneInput = forwardRef( $isTransparent={isTransparent} disabled={disabled} dispatch={(appended, dynamicMasked) => { - const phoneNumber = dynamicMasked.unmaskedValue + appended + const phoneNumber = (dynamicMasked.unmaskedValue + appended).replace(/\s+/g, '') if (phoneNumber.startsWith('00')) { + if (value && value.length === 12 && phoneNumber === value) { + return dynamicMasked.compiledMasks[1] + } + return dynamicMasked.compiledMasks[0] } if (phoneNumber.startsWith('0') && value && value.length <= 10 && phoneNumber === value) { - return dynamicMasked.compiledMasks[1] + return dynamicMasked.compiledMasks[2] } - return dynamicMasked.compiledMasks[2] + return dynamicMasked.compiledMasks[3] }} id={name} - mask={[internationalFormat, frenchFormat, defaultFormat]} + mask={[internationalFormat, internationalFrenchFormat, frenchFormat, defaultFormat]} onAccept={(nextValue: string) => { onChange(nextValue || undefined) }} - overwrite={false} + overwrite="shift" type="tel" unmask value={value}