fix(form): prevent reload loop with rjsf v5.20

cern-sis · Sep 12, 2024 · 9e57be4 · 9e57be4
1 parent 208dbc1
commit 9e57be4
Show file tree

Hide file tree

Showing 7 changed files with 926 additions and 946 deletions.
diff --git a/formule-demo/yarn.lock b/formule-demo/yarn.lock
diff --git a/package.json b/package.json
@@ -38,10 +38,10 @@
     "@codemirror/lint": "^6.5.0",
     "@codemirror/merge": "^6.1.1",
     "@reduxjs/toolkit": "^1.9.5",
-    "@rjsf/antd": "5.19.4",
-    "@rjsf/core": "5.19.4",
-    "@rjsf/utils": "5.19.4",
-    "@rjsf/validator-ajv8": "5.19.4",
+    "@rjsf/antd": "^5.21.0",
+    "@rjsf/core": "^5.21.0",
+    "@rjsf/utils": "^5.21.0",
+    "@rjsf/validator-ajv8": "^5.21.0",
     "antd": "^5.7.3",
     "axios": "^1.4.0",
     "codemirror": "^6.0.1",

diff --git a/src/admin/formComponents/ObjectFieldTemplate.jsx b/src/admin/formComponents/ObjectFieldTemplate.jsx
@@ -5,10 +5,15 @@ import update from "immutability-helper";
 import { useDispatch } from "react-redux";
 import { updateUiSchemaByPath } from "../../store/schemaWizard";
 
-const ObjectFieldTemplate = ({properties, uiSchema, formContext, idSchema}) => {
+const ObjectFieldTemplate = ({
+  properties,
+  uiSchema,
+  formContext,
+  idSchema,
+}) => {
   const [cards, setCards] = useState([]);
 
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   useEffect(
     () => {
@@ -34,16 +39,16 @@ const ObjectFieldTemplate = ({properties, uiSchema, formContext, idSchema}) => {
       // if there is no change with the number of the items it means that either there is a re ordering
       // or some update at each props data
       if (propertiesLength === cardsLength) {
-        let uiCards = cards.map(item => item.name);
-        let uiProperties = properties.map(item => item.name);
+        let uiCards = cards.map((item) => item.name);
+        let uiProperties = properties.map((item) => item.name);
         let different;
-        uiProperties.map(item => {
+        uiProperties.map((item) => {
           if (!uiCards.includes(item)) {
             different = item;
           }
         });
 
-        const newCards = [...cards]
+        const newCards = [...cards];
 
         // the different variable will define if there was a change in the prop keys or there is just a re ordering
         if (different) {
@@ -53,7 +58,7 @@ const ObjectFieldTemplate = ({properties, uiSchema, formContext, idSchema}) => {
           });
 
           let itemProps;
-          properties.map(item => {
+          properties.map((item) => {
             if (item.name === different) itemProps = item;
           });
 
@@ -62,39 +67,43 @@ const ObjectFieldTemplate = ({properties, uiSchema, formContext, idSchema}) => {
             name: different,
             prop: itemProps,
           };
-          newCards[diffIndex] = item
+          newCards[diffIndex] = item;
         } else {
           newCards.map((card, index) => {
             card.prop = properties[index];
           });
         }
-        setCards(newCards)
+        setCards(newCards);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [properties]
+    [properties],
   );
 
-  // Updates the uiSchema after the cards update with the new ui:order 
+  // Updates the uiSchema after the cards update with the new ui:order
   // (so that the form preview displays the correct order)
-  useEffect(
-    () => {
-      let uiCards = cards.map(item => item.name);
-      let uiProperties = properties.map(item => item.name);
-      let { ...rest } = uiSchema;
+  useEffect(() => {
+    const uiCards = cards.map((item) => item.name);
+    const uiProperties = properties.map((item) => item.name);
+    const { ...rest } = uiSchema;
 
-      uiCards = uiProperties.length < uiCards.length ? uiProperties : uiCards;
+    const isOrderChanged = !uiCards.every(
+      (card, index) => card === uiProperties[index],
+    );
 
-      dispatch(updateUiSchemaByPath({
-        path: formContext.uiSchema.length > 0 ? formContext.uiSchema : [],
-        value: {
-          ...rest,
-          "ui:order": [...uiCards, "*"],
-        }
-      }));
+    if (isOrderChanged) {
+      dispatch(
+        updateUiSchemaByPath({
+          path: formContext.uiSchema.length > 0 ? formContext.uiSchema : [],
+          value: {
+            ...rest,
+            "ui:order": [...uiCards, "*"],
+          },
+        }),
+      );
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cards]
-  );
+  }, [cards]);
 
   // create a new array to keep track of the changes in the order
   properties.map((prop, index) => {
@@ -117,17 +126,22 @@ const ObjectFieldTemplate = ({properties, uiSchema, formContext, idSchema}) => {
       if (dragCard) {
         setCards(
           update(cards, {
-            $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]],
-          })
+            $splice: [
+              [dragIndex, 1],
+              [hoverIndex, 0, dragCard],
+            ],
+          }),
         );
       }
     },
-    [cards]
+    [cards],
   );
   if (idSchema.$id == "root") {
     return (
       <div>
-        {cards.map((card, i) => RenderSortable(formContext.uiSchema, card, i, moveCard))}
+        {cards.map((card, i) =>
+          RenderSortable(formContext.uiSchema, card, i, moveCard),
+        )}
       </div>
     );
   }
@@ -141,5 +155,4 @@ ObjectFieldTemplate.propTypes = {
   uiSchema: PropTypes.object,
 };
 
-
-export default ObjectFieldTemplate
+export default ObjectFieldTemplate;
diff --git a/src/admin/utils/index.js b/src/admin/utils/index.js
@@ -6,17 +6,6 @@ export const SIZE_OPTIONS = {
   xlarge: 24,
 };
 
-export const slugify = (text) => {
-  return text
-    .toString()
-    .toLowerCase()
-    .replace(/\s+/g, "-") // Replace spaces with -
-    .replace(/[^\w-]+/g, "") // Remove all non-word chars
-    .replace(/--+/g, "-") // Replace multiple - with single -
-    .replace(/^-+/, "") // Trim - from start of text
-    .replace(/-+$/, ""); // Trim - from end of text
-};
-
 export const initSchemaStructure = (name = "New schema", description = "") => ({
   schema: {
     title: name,

diff --git a/src/forms/fields/internal/TitleField.jsx b/src/forms/fields/internal/TitleField.jsx
@@ -9,7 +9,7 @@ import {
 import Markdown from "../../../partials/Markdown/Markdown";
 
 const TitleField = ({
-  formContext,
+  formContext = {},
   id,
   fieldId,
   prefixCls,
@@ -131,8 +131,4 @@ TitleField.propTypes = {
   enableImport: PropTypes.func,
 };
 
-TitleField.defaultProps = {
-  formContext: {},
-};
-
 export default TitleField;
diff --git a/src/forms/templates/ArrayFieldTemplates/ArrayFieldTemplateItem.jsx b/src/forms/templates/ArrayFieldTemplates/ArrayFieldTemplateItem.jsx
@@ -49,7 +49,6 @@ const ArrayFieldTemplateItem = ({
 ArrayFieldTemplateItem.propTypes = {
   children: PropTypes.node,
   disabled: PropTypes.bool,
-  formContext: PropTypes.object,
   hasMoveDown: PropTypes.bool,
   hasMoveUp: PropTypes.bool,
   hasRemove: PropTypes.bool,
@@ -60,8 +59,4 @@ ArrayFieldTemplateItem.propTypes = {
   readonly: PropTypes.bool,
 };
 
-ArrayFieldTemplateItem.defaultProps = {
-  formContext: {},
-};
-
 export default ArrayFieldTemplateItem;