feat: phone input with no spaces

Adopta-Un-Abuelo · Jan 9, 2024 · 0d63d0e · 0d63d0e
1 parent bb8f4d0
commit 0d63d0e
Show file tree

Hide file tree

Showing 4 changed files with 1,233 additions and 706 deletions.
diff --git a/package.json b/package.json
@@ -61,14 +61,14 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-typescript": "^8.3.4",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
-    "@storybook/test-runner": "^0.14.1",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/rollup": "^6.3.1",
     "@types/draftjs-to-html": "^0.8.1",
@@ -94,7 +94,7 @@
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^7.5.3",
+    "storybook": "^7.6.7",
     "typescript": "^5.1.6"
   },
   "resolutions": {

diff --git a/src/components/Input/InputPrimary.tsx b/src/components/Input/InputPrimary.tsx
@@ -65,21 +65,23 @@ const InputPrimary = (props: InputPrimaryProps) =>{
         setInputValue(e.target.value);
         props.onChange && props.onChange(e);
         if(props.type === 'tel'){
-            const phone = country.prefix + e.target.value;
+            const value = e.target.value.replaceAll(/\s/g,'')
+            const phone = country.prefix + value;
             props.onPhoneChange && props.onPhoneChange({
                 country: country.prefix, 
-                value: e.target.value,
+                value: value,
                 isValid: (phone.length > 8 && phone.length < 18) ? phoneUtil.isValidNumberForRegion(phoneUtil.parse(phone, country.countryCode), country.countryCode) : false
             });
         }
     }
 
     const onCountryChange = (country: CountryProps) =>{
         setCountry(country);
-        const phone = country.prefix + (inputValue ? inputValue : "");
+        const value = (inputValue && typeof inputValue === 'string') ? inputValue.replaceAll(/\s/g,'') : "";
+        const phone = country.prefix + value;
         props.onPhoneChange && props.onPhoneChange({
             country: country.prefix, 
-            value: inputValue,
+            value: value,
             isValid: (phone.length >= 6 && phone.length < 18) ? phoneUtil.isValidNumberForRegion(phoneUtil.parse(phone, country.countryCode), country.countryCode) : false
         });
     }

diff --git a/src/components/Input/InputSecondary.tsx b/src/components/Input/InputSecondary.tsx
@@ -75,21 +75,23 @@ const InputSecondary = (props: InputSecondaryProps) =>{
         setInputValue(e.target.value);
         props.onChange && props.onChange(e);
         if(props.type === 'tel'){
-            const phone = country.prefix + e.target.value;
+            const value = e.target.value.replaceAll(/\s/g,'');
+            const phone = country.prefix + value;
             props.onPhoneChange && props.onPhoneChange({
                 country: country.prefix, 
-                value: e.target.value,
+                value: value,
                 isValid: (phone.length > 8 && phone.length < 18) ? phoneUtil.isValidNumberForRegion(phoneUtil.parse(phone, country.countryCode), country.countryCode) : false
             });
         }
     }
 
     const onCountryChange = (country:any) =>{
         setCountry(country);
-        const phone = country.prefix + (inputValue ? inputValue : "");
+        const value = (inputValue && typeof inputValue === 'string') ? inputValue.replaceAll(/\s/g,'') : "";
+        const phone = country.prefix + value;
         props.onPhoneChange && props.onPhoneChange({
             country: country.prefix, 
-            value: inputValue,
+            value: value,
             isValid: (phone.length >=6 && phone.length < 18) ? phoneUtil.isValidNumberForRegion(phoneUtil.parse(phone, country.countryCode), country.countryCode) : false
         });
     }