Add useDebounce hook and timeoutOnChange for TextField

src/components/textField/textField.api.json

@@ -64,6 +64,7 @@
     },
     {"name": "validateOnStart", "type": "boolean", "description": "Should validate when the TextField mounts"},
     {"name": "validateOnChange", "type": "boolean", "description": "Should validate when the TextField value changes"},
+    {"name": "validationDebounceTime", "type": "number", "description": "Add a debounce timeout when sending validateOnChange"},
     {"name": "validateOnBlur", "type": "boolean", "description": "Should validate when losing focus of TextField"},
     {
       "name": "onChangeValidity",

src/components/textField/types.ts

@@ -42,6 +42,7 @@ export type Validator = ((value?: string) => boolean) | keyof typeof formValidat
 export interface FieldStateProps extends InputProps {
   validateOnStart?: boolean;
   validateOnChange?: boolean;
+  validationDebounceTime?: number;
   validateOnBlur?: boolean;
   /**
    * Callback for when field validated and failed
@@ -241,6 +242,10 @@ export type TextFieldProps = MarginModifiers &
      * Should validate when the TextField value changes
      */
     validateOnChange?: boolean;
+    /**
+     * Add a debounce timeout when sending validateOnChange
+     */
+    validationDebounceTime?: number;
     /**
      * Should validate when losing focus of TextField
      */

src/components/textField/useFieldState.ts

@@ -1,7 +1,7 @@
 import {useCallback, useState, useEffect, useMemo} from 'react';
 import _ from 'lodash';
 import * as Presenter from './Presenter';
-import {useDidUpdate} from 'hooks';
+import {useDidUpdate, useDebounce} from 'hooks';
 import {FieldStateProps} from './types';
 import {Constants} from '../../commons/new';
 
@@ -10,6 +10,7 @@ export default function useFieldState({
   validationMessage,
   validateOnBlur,
   validateOnChange,
+  validationDebounceTime,
   validateOnStart,
   onValidationFailed,
   onChangeValidity,
@@ -42,12 +43,32 @@ export default function useFieldState({
     }
   }, []);
 
+  const validateField = useCallback((valueToValidate = value) => {
+    const [_isValid, _failingValidatorIndex] = Presenter.validate(valueToValidate, validate);
+
+    setIsValid(_isValid);
+    setFailingValidatorIndex(_failingValidatorIndex);
+
+    if (!_isValid && !_.isUndefined(_failingValidatorIndex)) {
+      onValidationFailed?.(_failingValidatorIndex);
+    }
+
+    return _isValid;
+  },
+  [value, validate, onValidationFailed]);
+
+  const debouncedValidateField = useDebounce(validateField, validationDebounceTime);
+
   useEffect(() => {
     if (propsValue !== value) {
       setValue(propsValue);
 
       if (validateOnChange) {
-        validateField(propsValue);
+        if (validationDebounceTime) {
+          debouncedValidateField(propsValue);
+        } else {
+          validateField(propsValue);
+        }
       }
     }
     /* On purpose listen only to propsValue change */
@@ -65,20 +86,6 @@ export default function useFieldState({
     return _isValid;
   }, [value, validate]);
 
-  const validateField = useCallback((valueToValidate = value) => {
-    const [_isValid, _failingValidatorIndex] = Presenter.validate(valueToValidate, validate);
-
-    setIsValid(_isValid);
-    setFailingValidatorIndex(_failingValidatorIndex);
-
-    if (!_isValid && !_.isUndefined(_failingValidatorIndex)) {
-      onValidationFailed?.(_failingValidatorIndex);
-    }
-
-    return _isValid;
-  },
-  [value, validate, onValidationFailed]);
-
   const onFocus = useCallback((...args: any) => {
     setIsFocused(true);
     //@ts-expect-error
@@ -101,10 +108,14 @@ export default function useFieldState({
     props.onChangeText?.(text);
 
     if (validateOnChange) {
-      validateField(text);
+      if (validationDebounceTime) {
+        debouncedValidateField(text);
+      } else {
+        validateField(text);
+      }
     }
   },
-  [props.onChangeText, validateOnChange, validateField]);
+  [props.onChangeText, validateOnChange, debouncedValidateField, validateField]);
 
   const fieldState = useMemo(() => {
     return {

src/hooks/index.ts

@@ -9,5 +9,5 @@ export {default as useScrollReached} from './useScrollReached';
 export {default as useScrollToItem} from './useScrollToItem';
 export {default as useScrollTo} from './useScrollTo';
 export {default as useThemeProps} from './useThemeProps';
+export {default as useDebounce} from './useDebounce';
 export * from './useScrollTo';
-

src/hooks/useDebounce/index.ts

@@ -0,0 +1,20 @@
+import {useCallback, useRef} from 'react';
+
+/**
+ * This hook is used to debounce a function call
+ */
+function useDebounce<A>(func: (args: A) => void, timeout = 300) {
+  const handler = useRef<NodeJS.Timeout>();
+  const debouncedFunction = useCallback((args: A) => {
+    if (handler.current) {
+      clearTimeout(handler.current);
+    }
+    handler.current = setTimeout(() => {
+      func(args);
+    }, timeout);
+  }, [func, timeout]);
+
+  return debouncedFunction;
+}
+
+export default useDebounce;