feat: add support for locale + regex + simpler code

web-ridge · Dec 15, 2022 · 3640f1d · 3640f1d
1 parent f07f445
commit 3640f1d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -127,6 +127,7 @@ export default function App() {
         <TextInputWithError
           mode="outlined"
           {...email('email', {
+
             validate: (v) => {
               return looksLikeMail(v) ? true : 'Email-address is invalid';
             },
@@ -136,10 +137,10 @@ export default function App() {
         <TextInputWithError
           mode="outlined"
           {...telephone('telephone', {
-            validate: (v) => {
-              console.log({ v });
-              return looksLikeTelephone(v) ? true : 'Telephone is invalid';
-            },
+            required: true,
+            minLength: 3,
+            maxLength: 10,
+            shouldFollowRegexes: [telephoneRegex],
             label: "Telefoon"
           })}
         />
@@ -174,17 +175,10 @@ function TextInputWithError({ errorMessage, ...rest }: React.ComponentProps<type
 }
 
 
-// you can add your own validate functions
-function looksLikeTelephone(str: string): boolean {
-  if (str.length !== 10) {
-    return false;
-  }
-  let isNum = /^\d+$/.test(str);
-  if (!isNum) {
-    return false;
-  }
-  return true;
-}
+const telephoneRegex = {
+  regex: new RegExp(/^\d+$/),
+  errorMessage: 'Telephone is invalid',
+};
 
 // you can add your own validate functions
 function looksLikeMail(str: string): boolean {

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -73,9 +73,10 @@ export default function App() {
         <TextInputWithError
           mode="outlined"
           {...fh.telephone('telephone', {
-            validate: (v) => {
-              return looksLikeTelephone(v) ? true : 'Telephone is invalid';
-            },
+            required: true,
+            minLength: 3,
+            maxLength: 10,
+            shouldFollowRegexes: [telephoneRegex],
             label: 'Telephone',
           })}
         />
@@ -123,11 +124,7 @@ export default function App() {
             required: true,
             minLength: 3,
             maxLength: 10,
-            validate: (v) => {
-              return looksLikeTelephone(v || '')
-                ? true
-                : 'Telephone is invalid';
-            },
+            shouldFollowRegexes: [telephoneRegex],
             label: 'Organization telephone',
           })}
         />
@@ -213,12 +210,10 @@ function AddressCompanyEdit({
   );
 }
 
-function looksLikeTelephone(str: string): boolean {
-  if (str.length !== 10) {
-    return false;
-  }
-  return /^\d+$/.test(str);
-}
+const telephoneRegex = {
+  regex: new RegExp(/^\d+$/),
+  errorMessage: 'Telephone is invalid',
+};
 
 function looksLikeMail(str: string): boolean {
   let lastAtPos = str.lastIndexOf('@');