@dnb/eufemia 10.24.0 → 10.26.0

package/es/extensions/forms/hooks/useFieldProps.js

@@ -16,12 +16,12 @@ import useId from '../../../shared/helpers/useId';
 import useUpdateEffect from '../../../shared/helpers/useUpdateEffect';
 import useMountEffect from '../../../shared/helpers/useMountEffect';
 import useUnmountEffect from '../../../shared/helpers/useUnmountEffect';
-import SharedContext from '../../../shared/Context';
 import FieldBlockContext from '../FieldBlock/FieldBlockContext';
 import IterateElementContext from '../Iterate/IterateElementContext';
 import useProcessManager from './useProcessManager';
 import { createSharedState, useSharedState } from '../../../shared/helpers/useSharedState';
 import { isAsync } from '../../../shared/helpers/isAsync';
+import useLocale from './useLocale';
 export default function useFieldProps(props) {
   var _props$disabled, _dataContext$props, _dataContext$ajvInsta, _localErrorRef$curren, _ref, _props$path, _props$autoComplete;
   const {
@@ -42,6 +42,8 @@ export default function useFieldProps(props) {
     validateInitially,
     validateUnchanged,
     continuousValidation,
+    transformIn = value => value,
+    transformOut = value => value,
     toInput = value => value,
     fromInput = value => value,
     toEvent = value => value,
@@ -65,9 +67,10 @@ export default function useFieldProps(props) {
   const dataContext = useContext(DataContext);
   const fieldBlockContext = useContext(FieldBlockContext);
   const iterateElementContext = useContext(IterateElementContext);
-  const sharedContext = useContext(SharedContext);
-  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const tr = useLocale();
   const transformers = useRef({
+    transformIn,
+    transformOut,
     toInput,
     fromInput,
     toEvent,
@@ -76,6 +79,7 @@ export default function useFieldProps(props) {
     validateRequired
   });
   const {
+    handlePathChangeUnvalidated: handlePathChangeUnvalidatedDataContext,
     handlePathChange: handlePathChangeDataContext,
     updateDataValue: updateDataValueDataContext,
     validateData: validateDataDataContext,
@@ -147,22 +151,22 @@ export default function useFieldProps(props) {
   const asyncBehaviorIsEnabled = useMemo(() => {
     return isAsync(onChange) || isAsync(onChangeContext);
   }, [onChangeContext, onChange]);
-  const validatedWithValue = useRef();
+  const validatedValue = useRef();
   const changeEventResultRef = useRef(null);
-  const currentAsyncProcessRef = useRef(null);
-  const setCurrentAsyncProcess = useCallback(name => {
-    currentAsyncProcessRef.current = name;
+  const asyncProcessRef = useRef(null);
+  const defineAsyncProcess = useCallback(name => {
+    asyncProcessRef.current = name;
   }, []);
   const asyncBufferRef = useRef({});
   for (const key in asyncBufferRef.current) {
     const {
-      fulfill,
-      hasAsyncProcesses
+      resolve,
+      validateProcesses
     } = asyncBufferRef.current[key] || {};
-    if ((hasAsyncProcesses === null || hasAsyncProcesses === void 0 ? void 0 : hasAsyncProcesses()) === false) {
+    if ((validateProcesses === null || validateProcesses === void 0 ? void 0 : validateProcesses()) === false) {
       delete asyncBufferRef.current[key];
-      if (typeof fulfill === 'function') {
-        window.requestAnimationFrame(fulfill);
+      if (typeof resolve === 'function') {
+        window.requestAnimationFrame(resolve);
       }
     }
   }
@@ -227,9 +231,9 @@ export default function useFieldProps(props) {
   const errorMessagesRef = useRef(null);
   errorMessagesRef.current = useMemo(() => {
     return _objectSpread({
-      required: tr.fieldErrorRequired
+      required: tr.Field.errorRequired
     }, errorMessages);
-  }, [errorMessages, tr.fieldErrorRequired]);
+  }, [errorMessages, tr.Field.errorRequired]);
   const prepareError = useCallback(error => {
     if (error instanceof FormError) {
       var _error$messageValues;
@@ -287,24 +291,33 @@ export default function useFieldProps(props) {
     }
     const runAsync = isAsync(validatorRef.current);
     if (runAsync) {
-      setCurrentAsyncProcess('validator');
+      defineAsyncProcess('validator');
       setFieldState('validating');
       hideError();
     }
     const opts = _objectSpread(_objectSpread({}, contextErrorMessages), errorMessagesRef.current);
+    const tmpValue = valueRef.current;
     const result = await validatorRef.current(valueRef.current, opts);
-    persistErrorState('gracefully', result);
-    if (runAsync) {
-      setFieldState(result instanceof Error ? 'error' : 'complete');
+    const unchangedValue = tmpValue === valueRef.current;
+    if (unchangedValue) {
+      persistErrorState('gracefully', result);
+      if (continuousValidation || runAsync) {
+        window.requestAnimationFrame(() => {
+          showError();
+          forceUpdate();
+        });
+      }
     }
-    if (continuousValidation || runAsync) {
-      window.requestAnimationFrame(() => {
-        showError();
-        forceUpdate();
-      });
+    if (runAsync) {
+      defineAsyncProcess(undefined);
+      if (unchangedValue) {
+        setFieldState(result instanceof Error ? 'error' : 'complete');
+      } else {
+        setFieldState('pending');
+      }
     }
     return result;
-  }, [contextErrorMessages, continuousValidation, hideError, persistErrorState, setCurrentAsyncProcess, setFieldState, showError]);
+  }, [contextErrorMessages, continuousValidation, hideError, persistErrorState, defineAsyncProcess, setFieldState, showError]);
   const callOnBlurValidator = useCallback(async ({
     valueOverride = null
   } = {}) => {
@@ -314,17 +327,18 @@ export default function useFieldProps(props) {
     const value = transformers.current.toEvent(valueOverride !== null && valueOverride !== void 0 ? valueOverride : valueRef.current, 'onBlurValidator');
     const runAsync = isAsync(onBlurValidatorRef.current);
     if (runAsync) {
-      setCurrentAsyncProcess('onBlurValidator');
+      defineAsyncProcess('onBlurValidator');
       setFieldState('validating');
     }
     const result = await onBlurValidatorRef.current(value);
     persistErrorState('gracefully', result);
     if (runAsync) {
+      defineAsyncProcess(undefined);
       setFieldState(result instanceof Error ? 'error' : 'complete');
     }
     showError();
     forceUpdate();
-  }, [persistErrorState, setCurrentAsyncProcess, setFieldState, showError]);
+  }, [persistErrorState, defineAsyncProcess, setFieldState, showError]);
   const validateValue = useCallback(async () => {
     const isProcessActive = startProcess();
     if (disabled) {
@@ -337,7 +351,7 @@ export default function useFieldProps(props) {
     }
     const value = valueRef.current;
     changeEventResultRef.current = null;
-    validatedWithValue.current = null;
+    validatedValue.current = null;
     try {
       const requiredError = transformers.current.validateRequired(value, {
         emptyValue,
@@ -363,7 +377,7 @@ export default function useFieldProps(props) {
       if (isProcessActive()) {
         clearErrorState();
       }
-      validatedWithValue.current = value;
+      validatedValue.current = value;
     } catch (error) {
       if (isProcessActive()) {
         persistErrorState('weak', error);
@@ -400,32 +414,30 @@ export default function useFieldProps(props) {
   }, [addToPool, callOnBlurValidator, onBlur, onFocus, runPool, showError, validateUnchanged]);
   const yieldAsyncProcess = useCallback(async ({
     name,
-    waitFor,
-    withValidatedValueOf
+    waitFor
   }) => {
     return new Promise(resolve => {
-      const fulfill = () => {
-        if (typeof withValidatedValueOf === 'undefined' || withValidatedValueOf === validatedWithValue.current) {
-          resolve();
-        }
-      };
-      const hasAsyncProcesses = () => {
-        return waitFor.some(({
+      const validateProcesses = () => {
+        const result = waitFor.some(({
           processName,
-          withStates
+          withStates,
+          withValue
         }) => {
-          return (processName ? processName === currentAsyncProcessRef.current : true) && withStates.some(state => {
+          const hasMatchingValue = withValue === validatedValue.current;
+          const result = (typeof withValue === 'undefined' ? false : !hasMatchingValue) || (processName ? processName === asyncProcessRef.current : true) && (withStates === null || withStates === void 0 ? void 0 : withStates.some(state => {
             return state === fieldStateRef.current;
-          });
+          }));
+          return result;
         });
+        return result;
       };
-      if (hasAsyncProcesses() === true) {
+      if (validateProcesses() === true) {
         asyncBufferRef.current[name] = {
-          fulfill,
-          hasAsyncProcesses
+          resolve,
+          validateProcesses
         };
       } else {
-        fulfill();
+        resolve();
         setFieldState('pending');
       }
     });
@@ -450,6 +462,7 @@ export default function useFieldProps(props) {
         }]
       });
     }
+    defineAsyncProcess(undefined);
     if ((result === null || result === void 0 ? void 0 : result.success) === 'saved') {
       setFieldState('success');
     } else if (result !== null && result !== void 0 && result.error) {
@@ -457,7 +470,7 @@ export default function useFieldProps(props) {
     } else if (asyncBehaviorIsEnabled) {
       setFieldState('complete');
     }
-  }, [asyncBehaviorIsEnabled, persistErrorState, setFieldState, showError, yieldAsyncProcess]);
+  }, [asyncBehaviorIsEnabled, defineAsyncProcess, persistErrorState, setFieldState, showError, yieldAsyncProcess]);
   const setEventResult = useCallback(result => {
     if (result instanceof Error) {
       result = {
@@ -471,44 +484,50 @@ export default function useFieldProps(props) {
     if (asyncBehaviorIsEnabled) {
       await yieldAsyncProcess({
         name: 'onChangeContext',
-        withValidatedValueOf: valueRef.current,
         waitFor: [{
           processName: 'validator',
-          withStates: ['validating', 'error']
+          withStates: ['validating', 'error'],
+          withValue: valueRef.current
         }, {
           processName: 'onBlurValidator',
-          withStates: ['validating', 'error']
+          withStates: ['validating', 'error'],
+          withValue: valueRef.current
         }]
       });
     }
     if (path) {
       if (isAsync(onChangeContext)) {
-        setCurrentAsyncProcess('onChangeContext');
-        setEventResult(await (handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(path, valueRef.current)));
+        defineAsyncProcess('onChangeContext');
+        if (!hasError()) {
+          setEventResult(await (handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(path)));
+        } else {
+          setEventResult(null);
+        }
       } else {
-        setEventResult(handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(path, valueRef.current));
+        setEventResult(handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(path));
       }
     }
     forceUpdate();
-  }, [asyncBehaviorIsEnabled, path, yieldAsyncProcess, onChangeContext, setCurrentAsyncProcess, setEventResult, handlePathChangeDataContext]);
+  }, [asyncBehaviorIsEnabled, path, hasError, yieldAsyncProcess, onChangeContext, defineAsyncProcess, setEventResult, handlePathChangeDataContext]);
   const updateValue = useCallback(async newValue => {
     if (newValue === valueRef.current) {
       return;
     }
     valueRef.current = newValue;
+    handlePathChangeUnvalidatedDataContext(path, newValue);
     addToPool('validator', validateValue, isAsync(validatorRef.current));
     addToPool('onChangeContext', callOnChangeContext, isAsync(onChangeContext));
     await runPool(() => {
       handleError();
     });
-  }, [addToPool, callOnChangeContext, handleError, onChangeContext, runPool, validateValue]);
+  }, [handlePathChangeUnvalidatedDataContext, path, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handleError]);
   const handleChange = useCallback(async (argFromInput, additionalArgs = undefined) => {
     const currentValue = valueRef.current;
     const fromInput = transformers.current.fromInput(argFromInput);
     if (fromInput === currentValue) {
       return;
     }
-    const transformedValue = transformers.current.transformValue(fromInput, currentValue);
+    const transformedValue = transformers.current.transformOut(transformers.current.transformValue(fromInput, currentValue));
     changedRef.current = true;
     if (asyncBehaviorIsEnabled) {
       hideError();
@@ -525,20 +544,26 @@ export default function useFieldProps(props) {
         const args = getArgs();
         await yieldAsyncProcess({
           name: 'onChangeLocal',
-          withValidatedValueOf: args[0],
           waitFor: [{
             processName: 'validator',
-            withStates: ['validating', 'error']
+            withStates: ['validating', 'error'],
+            withValue: args[0]
           }, {
             processName: 'onBlurValidator',
-            withStates: ['validating', 'error']
+            withStates: ['validating', 'error'],
+            withValue: args[0]
           }, {
             processName: 'onChangeContext',
-            withStates: ['pending', 'error']
+            withStates: ['pending', 'error'],
+            withValue: args[0]
           }]
         });
-        setCurrentAsyncProcess('onChangeLocal');
-        setEventResult(await (onChange === null || onChange === void 0 ? void 0 : onChange.apply(this, args)));
+        defineAsyncProcess('onChangeLocal');
+        if (!hasError()) {
+          setEventResult(await (onChange === null || onChange === void 0 ? void 0 : onChange.apply(this, args)));
+        } else {
+          setEventResult(null);
+        }
       }, true);
     } else {
       setEventResult(onChange === null || onChange === void 0 ? void 0 : onChange.apply(this, getArgs()));
@@ -549,7 +574,7 @@ export default function useFieldProps(props) {
         handleIterateElementChange === null || handleIterateElementChange === void 0 ? void 0 : handleIterateElementChange(iterateValuePath, valueRef.current);
       }
     });
-  }, [addToPool, asyncBehaviorIsEnabled, handleIterateElementChange, hideError, itemPath, iterateElementIndex, onChange, runPool, setCurrentAsyncProcess, setEventResult, updateValue, yieldAsyncProcess]);
+  }, [addToPool, asyncBehaviorIsEnabled, handleIterateElementChange, hasError, hideError, itemPath, iterateElementIndex, onChange, runPool, defineAsyncProcess, setEventResult, updateValue, yieldAsyncProcess]);
   const handleFocus = useCallback(() => setHasFocus(true), [setHasFocus]);
   const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus]);
   useMountEffect(() => {
@@ -601,8 +626,10 @@ export default function useFieldProps(props) {
   }, [dataContext.data, dataContext.id, path, props.value, updateDataValueDataContext, validateDataDataContext]);
   useEffect(() => {
     if (dataContext.showAllErrors) {
-      showError();
-      forceUpdate();
+      if (fieldStateRef.current !== 'validating') {
+        showError();
+        forceUpdate();
+      }
     }
   }, [dataContext.showAllErrors, showError]);
   useEffect(() => {
@@ -699,7 +726,7 @@ export default function useFieldProps(props) {
     info: !inFieldBlock ? infoRef.current : undefined,
     warning: !inFieldBlock ? warningRef.current : undefined,
     error: !inFieldBlock ? error : undefined,
-    disabled: onBlurValidator && currentAsyncProcessRef.current === 'onBlurValidator' && fieldStateRef.current === 'validating' ? true : disabled,
+    disabled: onBlurValidator && asyncProcessRef.current === 'onBlurValidator' && fieldStateRef.current === 'validating' ? true : disabled,
     fieldState: resolveValidatingState(fieldStateRef.current)
   };
   const sharedData = useSharedState(id);
@@ -708,7 +735,7 @@ export default function useFieldProps(props) {
     name: props.name || ((_props$path = props.path) === null || _props$path === void 0 ? void 0 : _props$path.replace('/', '')) || id,
     autoComplete: (_props$autoComplete = props.autoComplete) !== null && _props$autoComplete !== void 0 ? _props$autoComplete : dataContext.autoComplete === true ? 'on' : undefined,
     id,
-    value: transformers.current.toInput(valueRef.current),
+    value: transformers.current.transformIn(transformers.current.toInput(valueRef.current)),
     hasError: hasVisibleError,
     isChanged: changedRef.current,
     htmlAttributes,