Extract dirty computation logic in a hook

Author: djhi

packages/ra-core/src/form/index.ts

@@ -11,3 +11,4 @@ export * from './useWarnWhenUnsavedChanges';
 export * from './validation';
 export * from './WarnWhenUnsavedChanges';
 export * from './FilterLiveForm';
+export * from './useFormIsDirty';

packages/ra-core/src/form/useFormIsDirty.ts

@@ -0,0 +1,49 @@
+import { useFormState } from 'react-hook-form';
+import isEmpty from 'lodash/isEmpty.js';
+
+// useFormState().isDirty might differ from useFormState().dirtyFields (https://github.com/react-hook-form/react-hook-form/issues/4740)
+export const useFormIsDirty = (): boolean => {
+    const { dirtyFields } = useFormState();
+    return hasDirtyFields(dirtyFields);
+};
+
+const hasDirtyFields = (
+    dirtyFields: Partial<
+        Readonly<{
+            [x: string]: any;
+        }>
+    >
+): boolean => {
+    // dirtyFields can contains simple keys with boolean values, nested objects or arrays
+    // We must ignore values that are false
+    return Object.values(dirtyFields).some(value => {
+        if (typeof value === 'boolean') {
+            return value;
+        } else if (Array.isArray(value)) {
+            // Some arrays contain only booleans (scalar arrays), some arrays contain objects (object arrays)
+            for (const item of value) {
+                if (item === true) {
+                    return true;
+                }
+                // FIXME: because we currently don't set default values correctly for arrays,
+                // new items are either empty objects, or undefined in dirtyFields. Consider them as dirty.
+                if (
+                    (typeof item === 'object' && isEmpty(item)) ||
+                    item === undefined
+                ) {
+                    return true;
+                }
+                if (
+                    typeof item === 'object' &&
+                    item !== null &&
+                    hasDirtyFields(item)
+                ) {
+                    return true;
+                }
+            }
+        } else if (typeof value === 'object' && value !== null) {
+            return hasDirtyFields(value);
+        }
+        return false;
+    });
+};

packages/ra-ui-materialui/src/button/SaveButton.tsx

@@ -19,8 +19,8 @@ import {
     warning,
     setSubmissionErrors,
     useRecordFromLocation,
+    useFormIsDirty,
 } from 'ra-core';
-import isEmpty from 'lodash/isEmpty';
 
 /**
  * Submit button for resource forms (Edit and Create).
@@ -73,9 +73,9 @@ export const SaveButton = <RecordType extends RaRecord = any>(
     const translate = useTranslate();
     const form = useFormContext();
     const saveContext = useSaveContext();
-    const { dirtyFields, isValidating, isSubmitting } = useFormState();
+    const { isValidating, isSubmitting } = useFormState();
     // useFormState().isDirty might differ from useFormState().dirtyFields (https://github.com/react-hook-form/react-hook-form/issues/4740)
-    const isDirty = hasDirtyFields(dirtyFields);
+    const isDirty = useFormIsDirty();
     // Use form isDirty, isValidating and form context saving to enable or disable the save button
     // if alwaysEnable is undefined and the form wasn't prefilled
     const recordFromLocation = useRecordFromLocation();
@@ -227,44 +227,3 @@ declare module '@mui/material/styles' {
         };
     }
 }
-
-const hasDirtyFields = (
-    dirtyFields: Partial<
-        Readonly<{
-            [x: string]: any;
-        }>
-    >
-): boolean => {
-    // dirtyFields can contains simple keys with boolean values, nested objects or arrays
-    // We must ignore values that are false
-    return Object.values(dirtyFields).some(value => {
-        if (typeof value === 'boolean') {
-            return value;
-        } else if (Array.isArray(value)) {
-            // Some arrays contain only booleans (scalar arrays), some arrays contain objects (object arrays)
-            for (const item of value) {
-                if (item === true) {
-                    return true;
-                }
-                // FIXME: because we currently don't set default values correctly for arrays,
-                // new items are either empty objects, or undefined in dirtyFields. Consider them as dirty.
-                if (
-                    (typeof item === 'object' && isEmpty(item)) ||
-                    item === undefined
-                ) {
-                    return true;
-                }
-                if (
-                    typeof item === 'object' &&
-                    item !== null &&
-                    hasDirtyFields(item)
-                ) {
-                    return true;
-                }
-            }
-        } else if (typeof value === 'object' && value !== null) {
-            return hasDirtyFields(value);
-        }
-        return false;
-    });
-};