- Bugfix for <Textbox> async customFunc when updating unm…

…ounted component problem.
edwardfxiao · Sep 17, 2020 · 6742f6f · 6742f6f
1 parent 88b014c
commit 6742f6f
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 144 deletions.
diff --git a/example/index.js b/example/index.js
@@ -587,6 +587,9 @@ class Index extends Component {
                       name: 'Name', // Optional.[String].Default: "". To display in the Error message. i.e Please enter your {name}.
                       check: true, // Optional.[Bool].Default: true. To determin if you need to validate.
                       required: true, // Optional.[Bool].Default: true. To determin if it is a required field.
+                      customFunc: (v) =>{
+                        return ''
+                      }
                     }}
                   />
                   <br />

diff --git a/lib/components/index.js b/lib/components/index.js
diff --git a/lib/react-inputs-validation.js b/lib/react-inputs-validation.js
diff --git a/lib/react-inputs-validation.js.map b/lib/react-inputs-validation.js.map
diff --git a/lib/react-inputs-validation.min.js b/lib/react-inputs-validation.min.js
diff --git a/lib/react-inputs-validation.min.js.map b/lib/react-inputs-validation.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-inputs-validation",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "description": "A react component for form inputs validation.",
   "main": "index.js",
   "repository": {

diff --git a/src/js/Inputs/Textbox.tsx b/src/js/Inputs/Textbox.tsx
@@ -253,183 +253,174 @@ const component: React.FC<Props> = ({
     },
     [err, attributesInput, option],
   );
-  const check = useCallback(
-    async () => {
-      const { reg, min, max, type, name, check, length, regMsg, locale, compare, required, msgOnSuccess, customFunc } = option;
-      if (!check) {
-        return;
-      }
-      if (type) {
-        if (VALIDATE_OPTION_TYPE_LIST.indexOf(type) !== -1) {
-          if (!message[locale] || !message[locale][TYPE]) {
-            console.error(REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE);
+  const check = useCallback(async () => {
+    const { reg, min, max, type, name, check, length, regMsg, locale, compare, required, msgOnSuccess, customFunc } = option;
+    if (!check) {
+      return;
+    }
+    if (type) {
+      if (VALIDATE_OPTION_TYPE_LIST.indexOf(type) !== -1) {
+        if (!message[locale] || !message[locale][TYPE]) {
+          console.error(REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE);
+          return;
+        }
+        const msg = message[locale][TYPE];
+        const nameText = name ? name : '';
+        if (required) {
+          if (validator.empty(internalValue)) {
+            handleCheckEnd(true, msg.empty(nameText));
             return;
           }
-          const msg = message[locale][TYPE];
-          const nameText = name ? name : '';
-          if (required) {
-            if (validator.empty(internalValue)) {
-              handleCheckEnd(true, msg.empty(nameText));
+        }
+        if (String(internalValue) !== '') {
+          if (reg) {
+            if (validator['reg'](reg, internalValue)) {
+              handleCheckEnd(true, regMsg !== '' ? regMsg : msg.invalid(nameText));
               return;
             }
           }
-          if (String(internalValue) !== '') {
-            if (reg) {
-              if (validator['reg'](reg, internalValue)) {
-                handleCheckEnd(true, regMsg !== '' ? regMsg : msg.invalid(nameText));
-                return;
-              }
-            }
-            if (type === VALIDATE_OPTION_TYPE_LIST[0]) {
-              if (min || max) {
-                if (min && max) {
-                  if (String(internalValue).length < min || String(internalValue).length > max) {
-                    handleCheckEnd(true, msg.inBetween(nameText)(min)(max));
+          if (type === VALIDATE_OPTION_TYPE_LIST[0]) {
+            if (min || max) {
+              if (min && max) {
+                if (String(internalValue).length < min || String(internalValue).length > max) {
+                  handleCheckEnd(true, msg.inBetween(nameText)(min)(max));
+                  return;
+                }
+              } else {
+                if (min) {
+                  if (String(internalValue).length < min) {
+                    handleCheckEnd(true, msg.lessThan(nameText)(min));
                     return;
                   }
-                } else {
-                  if (min) {
-                    if (String(internalValue).length < min) {
-                      handleCheckEnd(true, msg.lessThan(nameText)(min));
-                      return;
-                    }
-                  }
-                  if (max) {
-                    if (String(internalValue).length > max) {
-                      handleCheckEnd(true, msg.greaterThan(nameText)(max));
-                      return;
-                    }
-                  }
                 }
-              }
-              if (length) {
-                if (String(internalValue).length !== length) {
-                  handleCheckEnd(true, msg.lengthEqual(nameText)(length));
-                  return;
+                if (max) {
+                  if (String(internalValue).length > max) {
+                    handleCheckEnd(true, msg.greaterThan(nameText)(max));
+                    return;
+                  }
                 }
               }
             }
-            if (type === VALIDATE_OPTION_TYPE_LIST[1]) {
-              if (!validator[type](internalValue, null, null)) {
-                handleCheckEnd(true, msg.invalid(nameText));
+            if (length) {
+              if (String(internalValue).length !== length) {
+                handleCheckEnd(true, msg.lengthEqual(nameText)(length));
                 return;
               }
-              if (min || max) {
-                if (min && max) {
-                  if (!validator[type](internalValue, min, max)) {
-                    handleCheckEnd(true, msg.inBetween(nameText)(min)(max));
+            }
+          }
+          if (type === VALIDATE_OPTION_TYPE_LIST[1]) {
+            if (!validator[type](internalValue, null, null)) {
+              handleCheckEnd(true, msg.invalid(nameText));
+              return;
+            }
+            if (min || max) {
+              if (min && max) {
+                if (!validator[type](internalValue, min, max)) {
+                  handleCheckEnd(true, msg.inBetween(nameText)(min)(max));
+                  return;
+                }
+              } else {
+                if (min) {
+                  if (!validator[type](internalValue, min)) {
+                    handleCheckEnd(true, msg.lessThan(nameText)(min));
                     return;
                   }
-                } else {
-                  if (min) {
-                    if (!validator[type](internalValue, min)) {
-                      handleCheckEnd(true, msg.lessThan(nameText)(min));
-                      return;
-                    }
-                  }
-                  if (max) {
-                    if (!validator[type](internalValue, 0, max)) {
-                      handleCheckEnd(true, msg.greaterThan(nameText)(max));
-                      return;
-                    }
-                  }
                 }
-              }
-              if (length) {
-                if (String(internalValue).length !== length) {
-                  handleCheckEnd(true, msg.lengthEqual(nameText)(length));
-                  return;
+                if (max) {
+                  if (!validator[type](internalValue, 0, max)) {
+                    handleCheckEnd(true, msg.greaterThan(nameText)(max));
+                    return;
+                  }
                 }
               }
             }
-            if (compare && compare !== '') {
-              if (internalValue !== compare) {
-                handleCheckEnd(true, msg.twoInputsNotEqual());
+            if (length) {
+              if (String(internalValue).length !== length) {
+                handleCheckEnd(true, msg.lengthEqual(nameText)(length));
                 return;
               }
             }
           }
-          if (customFunc && typeof customFunc === 'function') {
-            const customFuncResult = await customFunc(internalValue);
-            /* istanbul ignore next because of async problem */
-            if (typeof customFuncResult === 'object') {
-              if (typeof customFuncResult.error === 'boolean' && typeof customFuncResult.message === 'string') {
-                if (customFuncResult.error === false && customFuncResult.showOnSuccess === true) {
-                  setSuccessMsg(customFuncResult.message);
-                }
-                handleCheckEnd(customFuncResult.error, customFuncResult.message, true);
-              }
+          if (compare && compare !== '') {
+            if (internalValue !== compare) {
+              handleCheckEnd(true, msg.twoInputsNotEqual());
               return;
             }
-            /* istanbul ignore next because of async problem */
-            if (customFuncResult !== true) {
-              handleCheckEnd(true, customFuncResult, true);
-              return;
+          }
+        }
+        if (customFunc && typeof customFunc === 'function') {
+          const customFuncResult = await customFunc(internalValue);
+          if (!($input && $input.current)) {
+            return;
+          }
+          /* istanbul ignore next because of async problem */
+          if (typeof customFuncResult === 'object') {
+            if (typeof customFuncResult.error === 'boolean' && typeof customFuncResult.message === 'string') {
+              if (customFuncResult.error === false && customFuncResult.showOnSuccess === true) {
+                setSuccessMsg(customFuncResult.message);
+              }
+              handleCheckEnd(customFuncResult.error, customFuncResult.message, true);
             }
+            return;
           }
-          if (msgOnSuccess) {
-            setSuccessMsg(msgOnSuccess);
+          /* istanbul ignore next because of async problem */
+          if (customFuncResult !== true) {
+            handleCheckEnd(true, customFuncResult, true);
+            return;
           }
-          handleCheckEnd(false, msgOnSuccess);
-        } else {
-          console.error(`The valid ${utils.toCamelCase(TYPE)(true)} "type" options in validationOption are [${VALIDATE_OPTION_TYPE_LIST.map(i => i)}]`);
         }
+        if (msgOnSuccess) {
+          setSuccessMsg(msgOnSuccess);
+        }
+        handleCheckEnd(false, msgOnSuccess);
       } else {
-        console.error('Please provide "type" in validationOption');
+        console.error(`The valid ${utils.toCamelCase(TYPE)(true)} "type" options in validationOption are [${VALIDATE_OPTION_TYPE_LIST.map(i => i)}]`);
       }
+    } else {
+      console.error('Please provide "type" in validationOption');
+    }
+  }, [internalValue, option]);
+  const handleCheckEnd = useCallback(
+    (err: boolean, message: string, fromCustomFunc: boolean = false) => {
+      let msg = message;
+      const { msgOnError } = option;
+      if (err && msgOnError && !fromCustomFunc) {
+        msg = msgOnError;
+      }
+      setErr(err);
+      setMsg(msg);
+      validationCallback && validationCallback(err);
     },
-    [internalValue, option],
+    [option.msgOnError],
   );
-  const handleCheckEnd = useCallback((err: boolean, message: string, fromCustomFunc: boolean = false) => {
-    let msg = message;
-    const { msgOnError } = option;
-    if (err && msgOnError && !fromCustomFunc) {
-      msg = msgOnError;
+  useEffect(() => {
+    if (validate) {
+      check();
     }
-    setErr(err);
-    setMsg(msg);
-    validationCallback && validationCallback(err);
-  }, [option.msgOnError]);
-  useEffect(
-    () => {
-      if (validate) {
+  }, [validate]);
+  useEffect(() => {
+    setInternalValue(String(value));
+  }, [value]);
+  useEffect(() => {
+    /* istanbul ignore next because of https://github.com/airbnb/enzyme/issues/441 && https://github.com/airbnb/enzyme/blob/master/docs/future.md */
+    if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
+      if (option.customFunc && onKeyUp) {
         check();
       }
-    },
-    [validate],
-  );
-  useEffect(
-    () => {
-      setInternalValue(String(value));
-    },
-    [value],
-  );
-  useEffect(
-    () => {
-      /* istanbul ignore next because of https://github.com/airbnb/enzyme/issues/441 && https://github.com/airbnb/enzyme/blob/master/docs/future.md */
-      if (typeof prevInternalValue !== 'undefined' && prevInternalValue !== internalValue) {
-        if (option.customFunc && onKeyUp) {
-          check();
+    }
+  }, [internalValue]);
+  useEffect(() => {
+    if (asyncObj) {
+      if (asyncObj.message) {
+        if (asyncObj.showOnError) {
+          handleCheckEnd(asyncObj.error, asyncObj.message);
         }
-      }
-    },
-    [internalValue],
-  );
-  useEffect(
-    () => {
-      if (asyncObj) {
-        if (asyncObj.message) {
-          if (asyncObj.showOnError) {
-            handleCheckEnd(asyncObj.error, asyncObj.message);
-          }
-          if (!asyncObj.error && asyncObj.showOnSuccess) {
-            setSuccessMsg(asyncObj.message);
-          }
+        if (!asyncObj.error && asyncObj.showOnSuccess) {
+          setSuccessMsg(asyncObj.message);
         }
       }
-    },
-    [asyncMsgObj],
-  );
+    }
+  }, [asyncMsgObj]);
   const wrapperClass = `${classNameWrapper} ${reactInputsValidationCss[`${TYPE}__wrapper`]} ${err && reactInputsValidationCss['error']} ${successMsg !== '' &&
     !err &&
     reactInputsValidationCss['success']} ${disabled && reactInputsValidationCss['disabled']}`;