builders: fix update component value from store

fix debounce for options components

Components/Calculation/builders/build-options.tsx

@@ -3,10 +3,10 @@ import type { FC } from 'react';
 import { useOptions } from 'stores/calculation/options/hooks';
 import { useStatus } from 'stores/calculation/statuses/hooks';
 import { useValidation } from 'stores/calculation/validation/hooks';
-import { useSetValue, useValue } from 'stores/calculation/values/hooks';
 import type { Values } from 'stores/calculation/values/types';
 import type { Elements } from '../config/map/values';
 import type { ElementsProps } from '../types/elements-props';
+import { useStoreValue } from './hooks';
 
 type BuilderProps = {
   elementName: Elements;
@@ -15,8 +15,7 @@ type BuilderProps = {
 
 export default function buildOptions(Component: FC<any>, { elementName, valueName }: BuilderProps) {
   return observer<ElementsProps[typeof elementName]>((props) => {
-    const value = useValue(valueName);
-    const setValue = useSetValue(valueName);
+    const [value, setValue] = useStoreValue(valueName);
     const status = useStatus(elementName);
     const { isValid, help } = useValidation(elementName);
     const options = useOptions(elementName);

Components/Calculation/builders/build-value.tsx

@@ -1,28 +1,30 @@
 import { observer } from 'mobx-react-lite';
 import type { FC } from 'react';
+import { useOptions } from 'stores/calculation/options/hooks';
 import { useStatus } from 'stores/calculation/statuses/hooks';
 import { useValidation } from 'stores/calculation/validation/hooks';
-import { useSetValue, useValue } from 'stores/calculation/values/hooks';
 import type { Values } from 'stores/calculation/values/types';
 import type { Elements } from '../config/map/values';
 import type { ElementsProps } from '../types/elements-props';
+import { useStoreValue } from './hooks';
 
-type BuilderProps = {
+export type BuilderProps = {
   elementName: Elements;
   valueName: Values;
 };
 
 export default function buildValue(Component: FC<any>, { elementName, valueName }: BuilderProps) {
   return observer<ElementsProps[typeof elementName]>((props) => {
-    const value = useValue(valueName);
-    const setValue = useSetValue(valueName);
+    const [value, setValue] = useStoreValue(valueName);
     const status = useStatus(elementName);
     const { isValid, help } = useValidation(elementName);
+    const options = useOptions(elementName);
 
     return (
       <Component
-        defaultValue={value}
+        value={value}
         setValue={setValue}
+        options={options}
         status={status}
         isValid={isValid}
         help={help}

Components/Calculation/builders/hooks.js

@@ -0,0 +1,28 @@
+/* eslint-disable import/prefer-default-export */
+import { useEffect, useState } from 'react';
+import { useValue } from 'stores/calculation/values/hooks';
+import { useDebouncedCallback } from 'use-debounce';
+
+export function useStoreValue(valueName) {
+  const [storeValue, setStoreValue] = useValue(valueName);
+  const [value, setValue] = useState(storeValue);
+
+  // eslint-disable-next-line object-curly-newline
+  const debouncedSetStoreValue = useDebouncedCallback(setStoreValue, 350, { maxWait: 1000 });
+
+  useEffect(
+    () => {
+      if (storeValue !== value) {
+        debouncedSetStoreValue(value);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value]
+  );
+
+  useEffect(() => {
+    setValue(storeValue);
+  }, [storeValue]);
+
+  return [value, setValue];
+}

Elements/InputNumber.tsx

@@ -13,12 +13,7 @@ export default function InputNumber({
 }: BaseElementProps<number>) {
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
-      <AntInputNumber
-        type="number"
-        onChange={setValue}
-        disabled={status === 'Disabled'}
-        {...props}
-      />
+      <AntInputNumber onChange={setValue} disabled={status === 'Disabled'} {...props} />
     </FormItem>
   );
 }

stores/calculation/values/hooks.js

@@ -1,25 +1,15 @@
 import { useStore } from 'stores/hooks';
-import { useDebouncedCallback } from 'use-debounce';
 
 export function useValue(valueName) {
   const { $calculation } = useStore();
-  const value = $calculation.$values.getValue(valueName);
 
-  return value;
-}
+  const storeValue = $calculation.$values.getValue(valueName);
 
-export function useSetValue(valueName) {
-  const { $calculation } = useStore();
+  function setStoreValue(value) {
+    $calculation.$values.setValue(valueName, value);
+  }
 
-  const debouncedSetStoreValue = useDebouncedCallback(
-    (value) => $calculation.$values.setValue(valueName, value),
-    350,
-    {
-      maxWait: 1500,
-    }
-  );
-
-  return debouncedSetStoreValue;
+  return [storeValue, setStoreValue];
 }
 
 export function useComputedValue(valueName) {