@dnb/eufemia 10.24.0 → 10.26.0

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

@@ -17,12 +17,12 @@ var _useId = _interopRequireDefault(require("../../../shared/helpers/useId"));
 var _useUpdateEffect = _interopRequireDefault(require("../../../shared/helpers/useUpdateEffect"));
 var _useMountEffect = _interopRequireDefault(require("../../../shared/helpers/useMountEffect"));
 var _useUnmountEffect = _interopRequireDefault(require("../../../shared/helpers/useUnmountEffect"));
-var _Context = _interopRequireDefault(require("../../../shared/Context"));
 var _FieldBlockContext = _interopRequireDefault(require("../FieldBlock/FieldBlockContext"));
 var _IterateElementContext = _interopRequireDefault(require("../Iterate/IterateElementContext"));
 var _useProcessManager = _interopRequireDefault(require("./useProcessManager"));
 var _useSharedState = require("../../../shared/helpers/useSharedState");
 var _isAsync = require("../../../shared/helpers/isAsync");
+var _useLocale = _interopRequireDefault(require("./useLocale"));
 const _excluded = ["name", "error", "warning", "info", "hasError", "isChanged", "htmlAttributes", "setHasFocus", "handleFocus", "handleBlur", "handleChange", "updateValue", "forceUpdate", "autoComplete", "dataContext", "fieldState"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -59,6 +59,8 @@ function useFieldProps(props) {
     validateInitially,
     validateUnchanged,
     continuousValidation,
+    transformIn = value => value,
+    transformOut = value => value,
     toInput = value => value,
     fromInput = value => value,
     toEvent = value => value,
@@ -83,9 +85,10 @@ function useFieldProps(props) {
   const dataContext = (0, _react.useContext)(_DataContext.Context);
   const fieldBlockContext = (0, _react.useContext)(_FieldBlockContext.default);
   const iterateElementContext = (0, _react.useContext)(_IterateElementContext.default);
-  const sharedContext = (0, _react.useContext)(_Context.default);
-  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const tr = (0, _useLocale.default)();
   const transformers = (0, _react.useRef)({
+    transformIn,
+    transformOut,
     toInput,
     fromInput,
     toEvent,
@@ -94,6 +97,7 @@ function useFieldProps(props) {
     validateRequired
   });
   const {
+    handlePathChangeUnvalidated: handlePathChangeUnvalidatedDataContext,
     handlePathChange: handlePathChangeDataContext,
     updateDataValue: updateDataValueDataContext,
     validateData: validateDataDataContext,
@@ -165,22 +169,22 @@ function useFieldProps(props) {
   const asyncBehaviorIsEnabled = (0, _react.useMemo)(() => {
     return (0, _isAsync.isAsync)(onChange) || (0, _isAsync.isAsync)(onChangeContext);
   }, [onChangeContext, onChange]);
-  const validatedWithValue = (0, _react.useRef)();
+  const validatedValue = (0, _react.useRef)();
   const changeEventResultRef = (0, _react.useRef)(null);
-  const currentAsyncProcessRef = (0, _react.useRef)(null);
-  const setCurrentAsyncProcess = (0, _react.useCallback)(name => {
-    currentAsyncProcessRef.current = name;
+  const asyncProcessRef = (0, _react.useRef)(null);
+  const defineAsyncProcess = (0, _react.useCallback)(name => {
+    asyncProcessRef.current = name;
   }, []);
   const asyncBufferRef = (0, _react.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);
       }
     }
   }
@@ -246,9 +250,9 @@ function useFieldProps(props) {
   const errorMessagesRef = (0, _react.useRef)(null);
   errorMessagesRef.current = (0, _react.useMemo)(() => {
     return _objectSpread({
-      required: tr.fieldErrorRequired
+      required: tr.Field.errorRequired
     }, errorMessages);
-  }, [errorMessages, tr.fieldErrorRequired]);
+  }, [errorMessages, tr.Field.errorRequired]);
   const prepareError = (0, _react.useCallback)(error => {
     if (error instanceof _types.FormError) {
       var _error$messageValues;
@@ -308,24 +312,33 @@ function useFieldProps(props) {
     }
     const runAsync = (0, _isAsync.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 = (0, _react.useCallback)(async function () {
     let {
       valueOverride = null
@@ -336,17 +349,18 @@ function useFieldProps(props) {
     const value = transformers.current.toEvent(valueOverride !== null && valueOverride !== void 0 ? valueOverride : valueRef.current, 'onBlurValidator');
     const runAsync = (0, _isAsync.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 = (0, _react.useCallback)(async () => {
     const isProcessActive = startProcess();
     if (disabled) {
@@ -359,7 +373,7 @@ function useFieldProps(props) {
     }
     const value = valueRef.current;
     changeEventResultRef.current = null;
-    validatedWithValue.current = null;
+    validatedValue.current = null;
     try {
       const requiredError = transformers.current.validateRequired(value, {
         emptyValue,
@@ -385,7 +399,7 @@ function useFieldProps(props) {
       if (isProcessActive()) {
         clearErrorState();
       }
-      validatedWithValue.current = value;
+      validatedValue.current = value;
     } catch (error) {
       if (isProcessActive()) {
         persistErrorState('weak', error);
@@ -423,33 +437,31 @@ function useFieldProps(props) {
   const yieldAsyncProcess = (0, _react.useCallback)(async _ref5 => {
     let {
       name,
-      waitFor,
-      withValidatedValueOf
+      waitFor
     } = _ref5;
     return new Promise(resolve => {
-      const fulfill = () => {
-        if (typeof withValidatedValueOf === 'undefined' || withValidatedValueOf === validatedWithValue.current) {
-          resolve();
-        }
-      };
-      const hasAsyncProcesses = () => {
-        return waitFor.some(_ref6 => {
+      const validateProcesses = () => {
+        const result = waitFor.some(_ref6 => {
           let {
             processName,
-            withStates
+            withStates,
+            withValue
           } = _ref6;
-          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');
       }
     });
@@ -474,6 +486,7 @@ 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) {
@@ -481,7 +494,7 @@ function useFieldProps(props) {
     } else if (asyncBehaviorIsEnabled) {
       setFieldState('complete');
     }
-  }, [asyncBehaviorIsEnabled, persistErrorState, setFieldState, showError, yieldAsyncProcess]);
+  }, [asyncBehaviorIsEnabled, defineAsyncProcess, persistErrorState, setFieldState, showError, yieldAsyncProcess]);
   const setEventResult = (0, _react.useCallback)(result => {
     if (result instanceof Error) {
       result = {
@@ -495,37 +508,43 @@ 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 ((0, _isAsync.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 = (0, _react.useCallback)(async newValue => {
     if (newValue === valueRef.current) {
       return;
     }
     valueRef.current = newValue;
+    handlePathChangeUnvalidatedDataContext(path, newValue);
     addToPool('validator', validateValue, (0, _isAsync.isAsync)(validatorRef.current));
     addToPool('onChangeContext', callOnChangeContext, (0, _isAsync.isAsync)(onChangeContext));
     await runPool(() => {
       handleError();
     });
-  }, [addToPool, callOnChangeContext, handleError, onChangeContext, runPool, validateValue]);
+  }, [handlePathChangeUnvalidatedDataContext, path, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handleError]);
   const handleChange = (0, _react.useCallback)(async function (argFromInput) {
     let additionalArgs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
     const currentValue = valueRef.current;
@@ -533,7 +552,7 @@ function useFieldProps(props) {
     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();
@@ -550,20 +569,26 @@ 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()));
@@ -574,7 +599,7 @@ 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 = (0, _react.useCallback)(() => setHasFocus(true), [setHasFocus]);
   const handleBlur = (0, _react.useCallback)(() => setHasFocus(false), [setHasFocus]);
   (0, _useMountEffect.default)(() => {
@@ -626,8 +651,10 @@ function useFieldProps(props) {
   }, [dataContext.data, dataContext.id, path, props.value, updateDataValueDataContext, validateDataDataContext]);
   (0, _react.useEffect)(() => {
     if (dataContext.showAllErrors) {
-      showError();
-      forceUpdate();
+      if (fieldStateRef.current !== 'validating') {
+        showError();
+        forceUpdate();
+      }
     }
   }, [dataContext.showAllErrors, showError]);
   (0, _react.useEffect)(() => {
@@ -724,7 +751,7 @@ 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 = (0, _useSharedState.useSharedState)(id);
@@ -733,7 +760,7 @@ 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,