From ebd2a1b056793d44c840062a353b29908e5f3bbb Mon Sep 17 00:00:00 2001
From: Cristhian Laurente <devedux@gmail.com>
Date: Wed, 22 Feb 2023 11:49:37 -0500
Subject: [PATCH 1/2] fix multiple calls when executeChangeOnBlur is false
 applying debounce change

---
 src/helpers/debounce.ts     |  7 +++++++
 src/lib/core.tsx            | 15 ++++++++++++++-
 src/types/index.ts          |  2 ++
 stories/1-Basic.stories.tsx | 27 +++++++++++++++++++++++++++
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/helpers/debounce.ts

diff --git a/src/helpers/debounce.ts b/src/helpers/debounce.ts
new file mode 100644
index 0000000..e4ad00d
--- /dev/null
+++ b/src/helpers/debounce.ts
@@ -0,0 +1,7 @@
+export function debounce(callback: (...args: any) => void, delay: number) {
+  let timer: number;
+  return (...args: any) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => callback(...args), delay)
+  }
+}
diff --git a/src/lib/core.tsx b/src/lib/core.tsx
index eb3ecd5..933488d 100644
--- a/src/lib/core.tsx
+++ b/src/lib/core.tsx
@@ -4,10 +4,11 @@ import regex from './regex'
 
 import { get as get_ } from 'lodash'
 import { hasKey } from '../helpers/hasKey'
+import { debounce } from '../helpers/debounce'
 
 export type Tvalidation = {
   isValid: boolean
-  errorMessage: string
+  errorMessage: staring
 }
 
 export type IValidation<T extends Record<string, any>> = {
@@ -303,6 +304,12 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
     }
   }
 
+  private debouncedFormChange = debounce(newState => {
+    if (!this.props.onFormChange) return;
+    
+    this.props.onFormChange(newState)
+  },this.props.delayToDebounceChange ?? 500)
+
   onFieldsChange(field: Field<any>, val: any, doOnChange: boolean) {
     const { validationForm, usedFields, fieldsState } = this.state
 
@@ -338,6 +345,10 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
     })
 
     if (doOnChange && this.props.onFormChange) {
+      if (!this.props.executeChangeOnBlur && this.props.executeDebounceChange) {
+        this.debouncedFormChange(newState)
+        return;
+      }
       this.props.onFormChange(newState)
     }
   }
@@ -418,6 +429,8 @@ Core.defaultProps = {
   fields: [],
   onFormChange: () => {},
   executeChangeOnBlur: true,
+  executeDebounceChange: false,
+  delayToDebounceChange: 500,
   defaultState: {},
   parseState: () => {},
   showValidation: false,
diff --git a/src/types/index.ts b/src/types/index.ts
index b1c35c4..c8e2b63 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -61,6 +61,8 @@ export interface Props<T> {
   defaultState?: T
   parseState?: Function
   executeChangeOnBlur?: boolean
+  executeDebounceChange?: boolean
+  delayToDebounceChange?: number
 }
 
 export interface FormComponent {
diff --git a/stories/1-Basic.stories.tsx b/stories/1-Basic.stories.tsx
index a71a5c4..3e69dd9 100644
--- a/stories/1-Basic.stories.tsx
+++ b/stories/1-Basic.stories.tsx
@@ -262,6 +262,33 @@ export const WithRef = () => {
   )
 }
 
+export const WithDebounceChange = () => (
+  <DForm
+    executeChangeOnBlur={false}
+    executeDebounceChange
+    onFormChange={() => console.log("executeDebounceChange")}
+    fields={[
+      {
+        fields: [
+          {
+            name: "name",
+            placeholder: "Name",
+            type: "Input",
+            props: {
+              onKeyPress: (e) => {
+                if (e.which == 32) {
+                  e.preventDefault();
+                  console.log("Space Detected");
+                  return false;
+                }
+              },
+            },
+          },
+        ],
+      },
+    ]}
+  />
+)
 // export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
 
 // export const Emoji = () => (

From 3557ee5c50a3a41f050500dd7fd9047562abb0c1 Mon Sep 17 00:00:00 2001
From: Cristhian Laurente <devedux@gmail.com>
Date: Wed, 22 Feb 2023 11:59:06 -0500
Subject: [PATCH 2/2] replace name type incorrect

---
 src/lib/core.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/core.tsx b/src/lib/core.tsx
index 933488d..ccb249c 100644
--- a/src/lib/core.tsx
+++ b/src/lib/core.tsx
@@ -8,7 +8,7 @@ import { debounce } from '../helpers/debounce'
 
 export type Tvalidation = {
   isValid: boolean
-  errorMessage: staring
+  errorMessage: string
 }
 
 export type IValidation<T extends Record<string, any>> = {