feat: add ability to disable final-form insertion delay (#56)

gravity-ui · Jun 6, 2023 · 4df2b00 · 4df2b00
1 parent 3015d34
commit 4df2b00
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/docs/lib.md b/docs/lib.md
@@ -10,13 +10,14 @@ And it is intended to be used with `final-form`.
 
 This component serves as the primary entry point for drawing dynamic forms.
 
-| Property | Type                                     | Required | Description                                                                                                                                               |
-| :------- | :--------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| name     | `string`                                 |   yes    | Field name                                                                                                                                                |
-| spec     | `Spec`                                   |   yes    | A [spec](./spec.md#specs) describing the entity                                                                                                           |
-| config   | `DynamicFormConfig`                      |   yes    | A [config](./config.md) containing [Inputs](./config.md#inputs), [Layouts](./config.md#layouts), and [validators](./config.md#validators) for each entity |
-| Monaco   | `React.ComponentType<MonacoEditorProps>` |          | [MonacoEditor](https://github.com/react-monaco-editor/react-monaco-editor) component for Monaco [Input](./config.md#inputs)                               |
-| search   | `string \| function`                     |          | A string or function for performing a form search                                                                                                         |
+| Property                | Type                                     | Required | Description                                                                                                                                               |
+| :---------------------- | :--------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                    | `string`                                 |   yes    | Field name                                                                                                                                                |
+| spec                    | `Spec`                                   |   yes    | A [spec](./spec.md#specs) describing the entity                                                                                                           |
+| config                  | `DynamicFormConfig`                      |   yes    | A [config](./config.md) containing [Inputs](./config.md#inputs), [Layouts](./config.md#layouts), and [validators](./config.md#validators) for each entity |
+| Monaco                  | `React.ComponentType<MonacoEditorProps>` |          | [MonacoEditor](https://github.com/react-monaco-editor/react-monaco-editor) component for Monaco [Input](./config.md#inputs)                               |
+| search                  | `string \| function`                     |          | A string or function for performing a form search                                                                                                         |
+| withoutInsertFFDebounce | `boolean`                                |          | Flag that disables the delay before inserting data into the final-form store                                                                              |
 
 ### Controller
 

diff --git a/src/lib/core/components/Form/DynamicField.tsx b/src/lib/core/components/Form/DynamicField.tsx
@@ -25,6 +25,7 @@ export interface DynamicFieldProps {
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
     search?: string | ((spec: Spec, input: FieldValue, name: string) => boolean);
+    withoutInsertFFDebounce?: boolean;
     __mirror?: WonderMirror;
 }
 
@@ -34,12 +35,13 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
     config,
     Monaco,
     search,
+    withoutInsertFFDebounce,
     __mirror,
 }) => {
     const DynamicFormsCtx = useCreateContext();
     const SearchContext = useCreateSearchContext();
     const {tools, store} = useStore(name);
-    const watcher = useIntegrationFF(store);
+    const watcher = useIntegrationFF(store, withoutInsertFFDebounce);
     const {store: searchStore, setField, removeField, isHiddenField} = useSearchStore();
 
     const context = React.useMemo(

diff --git a/src/lib/core/components/Form/hooks/useIntegrationFF.tsx b/src/lib/core/components/Form/hooks/useIntegrationFF.tsx
@@ -4,10 +4,10 @@ import _ from 'lodash';
 import debounce from 'lodash/debounce';
 import {Field as FinalFormField, useForm} from 'react-final-form';
 
-import {AsyncValidateError, BaseValidateError, DynamicFieldStore} from '../types';
+import {AsyncValidateError, BaseValidateError, DynamicFieldStore, FieldValue} from '../types';
 import {transformArrOut} from '../utils';
 
-export const useIntegrationFF = (store: DynamicFieldStore) => {
+export const useIntegrationFF = (store: DynamicFieldStore, withoutDebounce?: boolean) => {
     const form = useForm();
 
     const watcher = React.useMemo(() => {
@@ -40,12 +40,17 @@ export const useIntegrationFF = (store: DynamicFieldStore) => {
         return <FinalFormField {...props} />;
     }, [store.name, store.errors]);
 
-    const change = React.useCallback(
-        debounce((value) => {
+    const change = React.useMemo(() => {
+        const cb = (value: FieldValue) => {
             form.change(store.name, _.get(transformArrOut(value), store.name));
-        }, 100),
-        [form.change, store.name],
-    );
+        };
+
+        if (withoutDebounce) {
+            return cb;
+        }
+
+        return debounce(cb, 100);
+    }, [form.change, store.name, withoutDebounce]);
 
     React.useEffect(() => {
         change(store.values);