Merge remote-tracking branch 'origin/adrian/abstracted-reset-css' int…

…o adrian/abstracted-reset-css
webiny · May 16, 2024 · fa6a78a · fa6a78a
2 parents 32fdd9d + cb94087
commit fa6a78a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryLocker.tsx b/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryLocker.tsx
@@ -35,6 +35,7 @@ const ForceUnlocked = ({ user }: IForceUnlockedProps) => {
 };
 
 export const ContentEntryLocker = ({ children }: IContentEntryLockerProps) => {
+    const disablePrompt = useRef(false);
     const { entry, contentModel: model } = useContentEntry();
     const { updateEntryLock, unlockEntry, fetchLockedEntryLockRecord, removeEntryLock } =
         useRecordLocking();
@@ -50,9 +51,8 @@ export const ContentEntryLocker = ({ children }: IContentEntryLockerProps) => {
     const PromptDecorator = useMemo(() => {
         return Prompt.createDecorator(Original => {
             return function Prompt(props) {
-                return <Original {...props} />;
-                // const when = disablePrompt.current === true ? false : props.when;
-                // return <Original message={props.message} when={when} />;
+                const when = disablePrompt.current === true ? false : props.when;
+                return <Original message={props.message} when={when} />;
             };
         });
     }, []);
@@ -74,6 +74,7 @@ export const ContentEntryLocker = ({ children }: IContentEntryLockerProps) => {
                     $lockingType: model.modelId
                 };
                 removeEntryLock(record);
+                disablePrompt.current = true;
                 showDialog({
                     title: "Entry was forcefully unlocked",
                     content: <ForceUnlocked user={user} />,

diff --git a/packages/form/src/Form.tsx b/packages/form/src/Form.tsx
@@ -9,22 +9,32 @@ import { FormContext } from "./FormContext";
 import { FormPresenter } from "./FormPresenter";
 import { FormAPI } from "./FormApi";
 
+type Callbacks<T> = Pick<FormProps<T>, "onChange" | "onInvalid">;
+
 function FormInner<T extends GenericFormData = GenericFormData>(
     props: FormProps<T>,
     ref: React.ForwardedRef<any>
 ) {
     const dataRef = useRef(props.data);
+    const callbacksRef = useRef<Callbacks<T>>({
+        onChange: props.onChange,
+        onInvalid: props.onInvalid
+    });
 
     const presenter = useMemo(() => {
         const presenter = new FormPresenter<T>();
         presenter.init({
             data: (props.data || {}) as T,
             onChange: data => {
-                if (typeof props.onChange === "function") {
-                    props.onChange(data, formApi);
+                if (typeof callbacksRef.current.onChange === "function") {
+                    callbacksRef.current.onChange(data, formApi);
                 }
             },
-            onInvalid: props.onInvalid
+            onInvalid: (...args) => {
+                if (typeof callbacksRef.current.onInvalid === "function") {
+                    callbacksRef.current.onInvalid(...args);
+                }
+            }
         });
         return presenter;
     }, []);
@@ -45,6 +55,13 @@ function FormInner<T extends GenericFormData = GenericFormData>(
         });
     }, [props.onSubmit, props.disabled, props.validateOnFirstSubmit]);
 
+    useEffect(() => {
+        callbacksRef.current = {
+            onChange: props.onChange,
+            onInvalid: props.onInvalid
+        };
+    }, [props.onChange, props.onInvalid]);
+
     useEffect(() => {
         presenter.setInvalidFields(props.invalidFields || {});
     }, [props.invalidFields]);
@@ -117,3 +134,5 @@ export const Form = observer(
         props: FormProps<T> & { ref?: React.ForwardedRef<any> }
     ) => ReturnType<typeof FormInner<T>>
 );
+
+Form.displayName = "Form";
diff --git a/packages/form/src/FormPresenter.ts b/packages/form/src/FormPresenter.ts
@@ -160,11 +160,13 @@ export class FormPresenter<T extends GenericFormData = GenericFormData> {
         const defaultValue = field.getDefaultValue();
 
         requestAnimationFrame(() => {
-            if (emptyValues.includes(currentFieldValue) && defaultValue !== undefined) {
-                lodashSet(this.data, fieldName, defaultValue);
-            }
+            runInAction(() => {
+                if (emptyValues.includes(currentFieldValue) && defaultValue !== undefined) {
+                    lodashSet(this.data, fieldName, defaultValue);
+                }
 
-            this.formFields.set(props.name, field);
+                this.formFields.set(props.name, field);
+            });
         });
     }