@dnb/eufemia 10.22.0 → 10.23.0

package/es/extensions/forms/DataContext/Provider/Provider.js

@@ -2,22 +2,25 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["id", "defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "scrollTopOnSubmit", "sessionStorageId", "ajvInstance", "filterData", "errorMessages", "children"];
+const _excluded = ["id", "defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "onSubmitComplete", "scrollTopOnSubmit", "minimumAsyncBehaviorTime", "asyncBehaviorTimeout", "sessionStorageId", "ajvInstance", "filterData", "errorMessages", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useRef, useMemo, useCallback, useReducer } from 'react';
+import React, { useRef, useMemo, useCallback, useReducer, useEffect } from 'react';
 import pointer from 'json-pointer';
 import { makeAjvInstance, ajvErrorsToFormErrors } from '../../utils/ajv';
-import useMountEffect from '../../hooks/useMountEffect';
-import useUpdateEffect from '../../hooks/useUpdateEffect';
+import SharedProvider from '../../../../shared/Provider';
+import useMountEffect from '../../../../shared/helpers/useMountEffect';
+import useUpdateEffect from '../../../../shared/helpers/useUpdateEffect';
+import { isAsync } from '../../../../shared/helpers/isAsync';
 import { useSharedState } from '../../../../shared/helpers/useSharedState';
 import Context from '../Context';
 import structuredClone from '@ungap/structured-clone';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 const isArrayJsonPointer = /^\/\d+(\/|$)/;
-export default function Provider(_ref) {
-  var _sharedAttachments$da;
-  let {
+export default function Provider(props) {
+  var _sharedAttachments$da, _rest$disabled;
+  const [, forceUpdate] = useReducer(() => ({}), {});
+  const {
       id,
       defaultData,
       data,
@@ -26,15 +29,17 @@ export default function Provider(_ref) {
       onPathChange,
       onSubmit,
       onSubmitRequest,
+      onSubmitComplete,
       scrollTopOnSubmit,
+      minimumAsyncBehaviorTime,
+      asyncBehaviorTimeout,
       sessionStorageId,
       ajvInstance,
       filterData,
       errorMessages: contextErrorMessages,
       children
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const [, forceUpdate] = useReducer(() => ({}), {});
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
   if (data !== undefined && sessionStorageId !== undefined) {
     console.error('Providing both data and sessionStorageId could lead to competing data sources. To provide default data to use only before anything is changed in the interface, use defaultData.');
   }
@@ -46,7 +51,18 @@ export default function Provider(_ref) {
     showAllErrorsRef.current = showAllErrors;
     forceUpdate();
   }, []);
-  const valuesWithErrorRef = useRef([]);
+  const submitStateRef = useRef({});
+  const setSubmitState = useCallback(state => {
+    Object.assign(submitStateRef.current, state);
+    forceUpdate();
+  }, []);
+  const formStateRef = useRef();
+  const setFormState = useCallback(formState => {
+    formStateRef.current = formState;
+    forceUpdate();
+  }, []);
+  const fieldErrorRef = useRef({});
+  const fieldStateRef = useRef({});
   const initialData = useMemo(() => {
     if (sessionStorageId && typeof window !== 'undefined') {
       var _window$sessionStorag;
@@ -59,13 +75,13 @@ export default function Provider(_ref) {
   }, []);
   const internalDataRef = useRef(initialData);
   const ajvValidatorRef = useRef();
-  const validateDataNow = useCallback(() => {
+  const executeAjvValidator = useCallback(() => {
     var _ajvValidatorRef$curr;
     if (!ajvValidatorRef.current) {
       return;
     }
     if (!((_ajvValidatorRef$curr = ajvValidatorRef.current) !== null && _ajvValidatorRef$curr !== void 0 && _ajvValidatorRef$curr.call(ajvValidatorRef, internalDataRef.current))) {
-      errorsRef.current = ajvErrorsToFormErrors(ajvValidatorRef.current.errors);
+      errorsRef.current = ajvErrorsToFormErrors(ajvValidatorRef.current.errors, internalDataRef.current);
     } else {
       errorsRef.current = undefined;
     }
@@ -74,19 +90,27 @@ export default function Provider(_ref) {
     if (!ajvValidatorRef.current) {
       return;
     }
-    validateDataNow();
+    executeAjvValidator();
     forceUpdate();
-  }, [validateDataNow]);
-  const hasFieldError = useCallback(path => {
+  }, [executeAjvValidator]);
+  const checkFieldStateFor = useCallback((path, state) => {
     var _errorsRef$current;
-    return Boolean(((_errorsRef$current = errorsRef.current) === null || _errorsRef$current === void 0 ? void 0 : _errorsRef$current[path]) !== undefined || valuesWithErrorRef.current.includes(path));
+    return Boolean(state === 'error' ? ((_errorsRef$current = errorsRef.current) === null || _errorsRef$current === void 0 ? void 0 : _errorsRef$current[path]) instanceof Error || fieldErrorRef.current[path] : fieldStateRef.current[path] === state);
   }, []);
+  const hasFieldState = useCallback(state => {
+    return mountedFieldPathsRef.current.some(path => {
+      return checkFieldStateFor(path, state);
+    });
+  }, [checkFieldStateFor]);
   const hasErrors = useCallback(() => {
-    return Boolean(mountedFieldPathsRef.current.find(path => hasFieldError(path)));
-  }, [hasFieldError]);
-  const setValueWithError = useCallback((path, withError) => {
-    if (withError !== valuesWithErrorRef.current.includes(path)) {
-      valuesWithErrorRef.current = withError ? addListPath(valuesWithErrorRef.current, path) : removeListPath(valuesWithErrorRef.current, path);
+    return hasFieldState('error');
+  }, [hasFieldState]);
+  const setFieldError = useCallback((path, error) => {
+    fieldErrorRef.current[path] = Boolean(error);
+  }, []);
+  const setFieldState = useCallback((path, fieldState) => {
+    if (fieldState !== fieldStateRef.current[path]) {
+      fieldStateRef.current[path] = fieldState;
       forceUpdate();
     }
   }, []);
@@ -108,9 +132,18 @@ export default function Provider(_ref) {
   const setProps = useCallback((path, props) => {
     fieldPropsRef.current[path] = props;
   }, []);
+  const hasFieldWithAsyncValidator = useCallback(() => {
+    for (const path in fieldPropsRef.current) {
+      const props = fieldPropsRef.current[path];
+      if (isAsync(props.validator) || isAsync(props.onBlurValidator)) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
   const sharedData = useSharedState(id);
   const sharedAttachments = useSharedState(id + '-attachments');
-  const updateSharedData = sharedData.update;
+  const setSharedData = sharedData.set;
   const extendSharedData = sharedData.extend;
   const extendAttachment = sharedAttachments.extend;
   const rerenderUseDataHook = (_sharedAttachments$da = sharedAttachments.data) === null || _sharedAttachments$da === void 0 ? void 0 : _sharedAttachments$da.rerenderUseDataHook;
@@ -146,19 +179,20 @@ export default function Provider(_ref) {
     }
   }, [id, initialData, extendSharedData, sharedData.data]);
   useMemo(() => {
-    validateDataNow();
+    executeAjvValidator();
   }, [internalDataRef.current]);
   useLayoutEffect(() => {
     if (id) {
       extendAttachment === null || extendAttachment === void 0 ? void 0 : extendAttachment({
         filterDataHandler,
-        hasErrors
+        hasErrors,
+        setShowAllErrors
       });
       if (filterData) {
         rerenderUseDataHook === null || rerenderUseDataHook === void 0 ? void 0 : rerenderUseDataHook();
       }
     }
-  }, [filterData, filterDataHandler, rerenderUseDataHook, hasErrors, id, extendAttachment]);
+  }, [extendAttachment, filterData, filterDataHandler, hasErrors, id, rerenderUseDataHook, setShowAllErrors]);
   const updateDataValue = useCallback((path, value) => {
     var _internalDataRef$curr;
     if (!path) {
@@ -174,30 +208,41 @@ export default function Provider(_ref) {
     if (path !== '/') {
       pointer.set(newData, path, value);
     }
+    internalDataRef.current = newData;
     if (id) {
-      updateSharedData === null || updateSharedData === void 0 ? void 0 : updateSharedData(newData);
+      extendSharedData === null || extendSharedData === void 0 ? void 0 : extendSharedData(newData);
       if (filterData) {
         rerenderUseDataHook === null || rerenderUseDataHook === void 0 ? void 0 : rerenderUseDataHook();
       }
     }
-    internalDataRef.current = newData;
     if (sessionStorageId && typeof window !== 'undefined') {
       var _window$sessionStorag2;
       (_window$sessionStorag2 = window.sessionStorage) === null || _window$sessionStorag2 === void 0 ? void 0 : _window$sessionStorag2.setItem(sessionStorageId, JSON.stringify(newData));
     }
     forceUpdate();
     return newData;
-  }, [filterData, id, sessionStorageId, rerenderUseDataHook, updateSharedData]);
-  const handlePathChange = useCallback((path, value) => {
+  }, [id, sessionStorageId, extendSharedData, filterData, rerenderUseDataHook]);
+  const setData = useCallback(newData => {
+    internalDataRef.current = newData;
+    forceUpdate();
+  }, []);
+  const handlePathChange = useCallback(async (path, value) => {
     if (!path) {
-      return;
+      return null;
+    }
+    if (isAsync(onPathChange)) {
+      await (onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(path, value));
+    } else {
+      onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(path, value);
     }
-    onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(path, value);
     const newData = updateDataValue(path, value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(newData);
     showAllErrorsRef.current = false;
     validateData();
-  }, [onPathChange, updateDataValue, onChange, validateData]);
+    if (isAsync(onChange)) {
+      return await onChange(newData);
+    }
+    return onChange === null || onChange === void 0 ? void 0 : onChange(newData);
+  }, [onChange, onPathChange, updateDataValue, validateData]);
   const handleMountField = useCallback(path => {
     mountedFieldPathsRef.current = addListPath(mountedFieldPathsRef.current, path);
   }, []);
@@ -217,37 +262,141 @@ export default function Provider(_ref) {
       });
     }
   }, []);
-  const handleSubmit = useCallback(({
-    formElement = null
-  } = {}) => {
-    if (!hasErrors()) {
-      const resetForm = () => {
-        var _formElement$reset;
-        formElement === null || formElement === void 0 ? void 0 : (_formElement$reset = formElement.reset) === null || _formElement$reset === void 0 ? void 0 : _formElement$reset.call(formElement);
-        if (typeof window !== 'undefined') {
-          if (sessionStorageId) {
-            window.sessionStorage.removeItem(sessionStorageId);
+  const handleSubmitCall = useCallback(async args => {
+    const {
+      onSubmit,
+      enableAsyncBehaviour,
+      skipFieldValidation,
+      skipErrorCheck
+    } = args;
+    setSubmitState({
+      error: undefined
+    });
+    const asyncBehaviorIsEnabled = !(skipErrorCheck ? false : hasErrors()) && (enableAsyncBehaviour || hasFieldWithAsyncValidator());
+    if (asyncBehaviorIsEnabled) {
+      setFormState('pending');
+    }
+    if (!skipFieldValidation) {
+      for (const {
+        path,
+        type,
+        callback
+      } of fieldEventListenersRef.current) {
+        if (type === 'onSubmit' && mountedFieldPathsRef.current.includes(path)) {
+          if (asyncBehaviorIsEnabled) {
+            await callback();
+          } else {
+            callback();
           }
         }
-        forceUpdate();
-      };
-      const clearData = () => {
-        internalDataRef.current = {};
-        forceUpdate();
-      };
-      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filterDataHandler(internalDataRef.current), {
-        resetForm,
-        clearData
-      });
-      if (scrollTopOnSubmit) {
-        scrollToTop();
+      }
+    }
+    if (!(skipErrorCheck ? false : hasErrors()) && !hasFieldState('pending') && (skipFieldValidation ? true : !hasFieldState('error'))) {
+      let result;
+      try {
+        result = await onSubmit();
+        if (result instanceof Error) {
+          throw result;
+        }
+      } catch (error) {
+        result = {
+          error
+        };
+      }
+      const state = result;
+      if (asyncBehaviorIsEnabled) {
+        setFormState(state !== null && state !== void 0 && state.error ? 'abort' : 'complete');
+      }
+      if (state !== null && state !== void 0 && state['status']) {
+        setFormState(state === null || state === void 0 ? void 0 : state['status']);
+      }
+      if (state !== null && state !== void 0 && state.error || state !== null && state !== void 0 && state.warning || state !== null && state !== void 0 && state.info) {
+        setSubmitState(state);
       }
     } else {
-      setShowAllErrors(true);
+      if (asyncBehaviorIsEnabled) {
+        window.requestAnimationFrame(() => {
+          setFormState(undefined);
+        });
+      }
+      if (!skipFieldValidation) {
+        onSubmitContinueRef.current = () => {
+          window.requestAnimationFrame(() => {
+            handleSubmitCall(_objectSpread(_objectSpread({}, args), {}, {
+              skipFieldValidation: true
+            }));
+          });
+        };
+      }
       onSubmitRequest === null || onSubmitRequest === void 0 ? void 0 : onSubmitRequest();
+      setShowAllErrors(true);
     }
     return internalDataRef.current;
-  }, [hasErrors, onSubmit, filterDataHandler, scrollTopOnSubmit, sessionStorageId, scrollToTop, setShowAllErrors, onSubmitRequest]);
+  }, [setSubmitState, hasErrors, hasFieldWithAsyncValidator, hasFieldState, setFormState, onSubmitRequest, setShowAllErrors]);
+  const handleSubmit = useCallback(async ({
+    formElement = null
+  } = {}) => {
+    handleSubmitCall({
+      enableAsyncBehaviour: isAsync(onSubmit),
+      onSubmit: async () => {
+        const args = filterDataHandler(internalDataRef.current);
+        const opts = {
+          resetForm: () => {
+            var _formElement$reset;
+            formElement === null || formElement === void 0 ? void 0 : (_formElement$reset = formElement.reset) === null || _formElement$reset === void 0 ? void 0 : _formElement$reset.call(formElement);
+            if (typeof window !== 'undefined') {
+              if (sessionStorageId) {
+                window.sessionStorage.removeItem(sessionStorageId);
+              }
+            }
+            forceUpdate();
+          },
+          clearData: () => {
+            internalDataRef.current = {};
+            if (id) {
+              setSharedData === null || setSharedData === void 0 ? void 0 : setSharedData({});
+            } else {
+              forceUpdate();
+            }
+          }
+        };
+        let result = undefined;
+        if (isAsync(onSubmit)) {
+          result = await onSubmit(args, opts);
+        } else {
+          result = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(args, opts);
+        }
+        const completeResult = await (onSubmitComplete === null || onSubmitComplete === void 0 ? void 0 : onSubmitComplete(args, result));
+        if (completeResult) {
+          result = Object.keys(result).length > 0 ? _objectSpread(_objectSpread({}, result), completeResult) : completeResult;
+        }
+        if (scrollTopOnSubmit) {
+          scrollToTop();
+        }
+        return result;
+      }
+    });
+  }, [filterDataHandler, handleSubmitCall, id, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit, sessionStorageId, setSharedData]);
+  const fieldEventListenersRef = useRef([]);
+  const setFieldEventListener = useCallback((path, type, callback) => {
+    fieldEventListenersRef.current = fieldEventListenersRef.current.filter(({
+      path: p,
+      type: t
+    }) => {
+      return !(p === path && t === type);
+    });
+    fieldEventListenersRef.current.push({
+      path,
+      type,
+      callback
+    });
+  }, []);
+  const onSubmitContinueRef = useRef(null);
+  if (!hasFieldState('pending')) {
+    var _onSubmitContinueRef$;
+    (_onSubmitContinueRef$ = onSubmitContinueRef.current) === null || _onSubmitContinueRef$ === void 0 ? void 0 : _onSubmitContinueRef$.call(onSubmitContinueRef);
+    onSubmitContinueRef.current = null;
+  }
   useMountEffect(() => {
     if (schema) {
       var _ajvRef$current;
@@ -264,31 +413,56 @@ export default function Provider(_ref) {
       forceUpdate();
     }
   }, [schema, validateData, forceUpdate]);
+  const {
+    bufferedFormState: formState
+  } = useFormStatusBuffer({
+    formState: formStateRef.current,
+    waitFor: hasFieldState('pending'),
+    minimumAsyncBehaviorTime,
+    asyncBehaviorTimeout
+  });
+  const submitState = submitStateRef.current;
+  const disabled = (_rest$disabled = rest === null || rest === void 0 ? void 0 : rest['disabled']) !== null && _rest$disabled !== void 0 ? _rest$disabled : formState === 'pending';
   return React.createElement(Context.Provider, {
-    value: _objectSpread(_objectSpread({
-      hasContext: true,
-      data: internalDataRef.current
-    }, rest), {}, {
+    value: _objectSpread({
       handlePathChange,
-      updateDataValue,
-      validateData,
       handleSubmit,
+      handleMountField,
+      handleUnMountField,
+      handleSubmitCall,
+      setFormState,
+      setShowAllErrors,
+      setFieldEventListener,
+      setFieldState,
+      setFieldError,
+      setProps,
+      hasErrors,
+      hasFieldState,
+      checkFieldStateFor,
+      validateData,
+      updateDataValue,
+      setData,
+      filterDataHandler,
       scrollToTop,
+      schema,
+      disabled,
+      formState,
+      submitState,
+      contextErrorMessages,
+      hasContext: true,
       errors: errorsRef.current,
       showAllErrors: showAllErrorsRef.current,
-      setShowAllErrors,
       mountedFieldPaths: mountedFieldPathsRef.current,
-      handleMountField,
-      handleUnMountField,
-      hasErrors,
-      hasFieldError,
-      setValueWithError,
-      setProps,
       ajvInstance: ajvRef.current,
-      schema,
-      contextErrorMessages
-    })
-  }, children);
+      id,
+      data: internalDataRef.current,
+      props
+    }, rest)
+  }, React.createElement(SharedProvider, {
+    formElement: {
+      disabled
+    }
+  }, children));
 }
 function addListPath(paths, path) {
   return paths.includes(path) ? paths : paths.concat(path);
@@ -296,4 +470,76 @@ function addListPath(paths, path) {
 function removeListPath(paths, path) {
   return paths.filter(thisPath => thisPath !== path);
 }
+function useFormStatusBuffer(props) {
+  const {
+    formState,
+    waitFor,
+    minimumAsyncBehaviorTime,
+    asyncBehaviorTimeout
+  } = props || {};
+  const [, forceUpdate] = useReducer(() => ({}), {});
+  const stateRef = useRef();
+  const nowRef = useRef(null);
+  const timeoutRef = useRef({});
+  const setState = useCallback(state => {
+    stateRef.current = state;
+    forceUpdate();
+  }, [forceUpdate]);
+  const clear = useCallback(() => {
+    for (const key in timeoutRef.current) {
+      clearTimeout(timeoutRef.current[key]);
+    }
+  }, []);
+  const hadCompleteRef = useRef(false);
+  useEffect(() => {
+    const isTest = process.env.NODE_ENV === 'test';
+    const minimum = minimumAsyncBehaviorTime !== null && minimumAsyncBehaviorTime !== void 0 ? minimumAsyncBehaviorTime : isTest ? 1 : 1000;
+    if (stateRef.current && formState === 'error') {
+      clear();
+      setState(undefined);
+      return;
+    }
+    if (formState === 'abort') {
+      clear();
+      setState('abort');
+      timeoutRef.current.reset = setTimeout(() => {
+        nowRef.current = 0;
+        setState(undefined);
+      }, minimum);
+      return;
+    }
+    if (formState === 'complete') {
+      hadCompleteRef.current = true;
+    }
+    if (formState === 'pending') {
+      clear();
+      nowRef.current = Date.now();
+      hadCompleteRef.current = false;
+      setState('pending');
+    } else if (stateRef.current === 'pending') {
+      const offset = Math.max(Date.now() - nowRef.current);
+      const delay = isTest ? minimum : Math.max(minimum - offset, 0);
+      if (!waitFor) {
+        timeoutRef.current.complete = setTimeout(() => {
+          if (hadCompleteRef.current) {
+            setState('complete');
+          }
+        }, delay);
+        timeoutRef.current.reset = setTimeout(() => {
+          nowRef.current = 0;
+          setState(undefined);
+          clear();
+        }, delay + minimum);
+      }
+      timeoutRef.current.timeout = setTimeout(() => {
+        nowRef.current = 0;
+        setState(undefined);
+      }, asyncBehaviorTimeout !== null && asyncBehaviorTimeout !== void 0 ? asyncBehaviorTimeout : 30000);
+    }
+    return clear;
+  }, [clear, minimumAsyncBehaviorTime, formState, setState, waitFor, asyncBehaviorTimeout]);
+  return {
+    bufferedFormState: stateRef.current
+  };
+}
 //# sourceMappingURL=Provider.js.map