@thecb/components 10.9.0-beta.13 → 10.9.0-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.9.0-beta.13",
+  "version": "10.9.0-beta.14",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/email-form/EmailForm.js

@@ -8,6 +8,7 @@ import {
 import Checkbox from "../../atoms/checkbox";
 import Paragraph from "../../atoms/paragraph";
 import { noop } from "../../../util/general";
+import { useConditionallyAddValidator } from "../../../hooks";
 
 const EmailForm = ({
   variant = "default",
@@ -22,30 +23,19 @@ const EmailForm = ({
   walletCheckboxMarked,
   isRequired = false
 }) => {
-  console.log("🚀 ~  isRequired:",  isRequired)
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
+  useConditionallyAddValidator(
+    isRequired,
+    required,
+    actions.fields.email.addValidator,
+    actions.fields.email.removeValidator
+  );
   const emailFieldErrorMessages = {
     [required.error]: "Email address is required",
     [isProbablyEmail.error]: "Invalid email address"
   };
-  useEffect(() => {
-    debugger;
-    if (isRequired) {
-      console.log('adding email validator')
-      actions.fields.email.addValidator(required());
-    } 
-    // else {
-    //   console.log('removing email validator')
-    //   actions.fields.email.removeValidator(required());
-    // }
-    return () => {
-      console.log('removing email validator')
-      // If the form is not rendered it should not be required.
-      actions.fields.email.removeValidator(required());
-    };
-  }, [isRequired]);
 
   return (
     <FormContainer variant={variant} role="form" aria-label="Email address">

package/src/components/molecules/phone-form/PhoneForm.js

@@ -4,11 +4,12 @@ import { createFormat } from "formatted-input";
 import {
   FormInput,
   FormContainer,
-  FormInputColumn,
+  FormInputColumn
 } from "../../atoms/form-layouts";
 import { noop } from "../../../util/general";
 import Checkbox from "../../atoms/checkbox";
 import { phoneFormats, formatDelimiter } from "../../../util/formats";
+import { useConditionallyAddValidator } from "../../../hooks";
 
 const PhoneForm = ({
   variant = "default",
@@ -25,27 +26,16 @@ const PhoneForm = ({
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
+  useConditionallyAddValidator(
+    isRequired,
+    required,
+    actions.fields.phone.addValidator,
+    actions.fields.phone.removeValidator
+  );
   const phoneErrorMessage = {
     [required.error]: "Phone number is required",
     [hasLength.error]: "Phone number must be 10 digits"
   };
-  useEffect(() => {
-    if (isRequired) {
-      console.log("adding phone validator");
-      actions.fields.phone.addValidator(required());
-    }
-    // else {
-    //   debugger;
-    //   console.log('removing phone validator 1')
-    //   actions.fields.phone.removeValidator(required());
-    // }
-    return () => {
-      console.log("removing phone validator 2");
-      // If the form is not rendered it should not be required.
-      actions.fields.phone.removeValidator(required());
-    };
-  }, [isRequired]);
-
   return (
     <FormContainer variant={variant} role="form" aria-label="Phone number">
       <FormInputColumn>

package/src/hooks/index.js

@@ -1,3 +1,4 @@
 export { default as useOutsideClick } from "./use-outside-click";
 export { default as useScrollTo } from "./use-scroll-to";
 export { default as useToastNotification } from "./use-toast-notification";
+export { default as useConditionallyAddValidator } from "./use-conditionally-add-validator";

package/src/hooks/use-conditionally-add-validator/index.js

@@ -1,31 +1,18 @@
 import { useEffect } from "react";
 
-// const validatorAlreadyExists = (currentValidators) => {
-//     if (    currentValidators
-//         .map((v) => currentValidators.type)
-//         .includes('validator/NUMBER_GREATER_THAN')) {
-
-//         }
-// }
-
-
 function useConditionallyAddValidator(
   condition,
-  currentValidators,
+  validatorFn,
   addValidator,
-  removeValidator,
-  field
+  removeValidator
 ) {
   useEffect(() => {
-    if (isRequired) {
-      addValidator();
-    } else {
-      removeValidator();
+    if (condition) {
+      addValidator(validatorFn());
     }
     return () => {
-      console.log("removing phone validator 2");
-      // If the form is not rendered it should not be required.
-      removeValidator(required());
+      // Remove validator when component unmounts
+      removeValidator(validatorFn());
     };
   }, [condition, addValidator, removeValidator]);
 }