onekijs-ui 0.19.6 → 0.19.7

package/dist/index.js

@@ -1672,7 +1672,7 @@ const FormCardDisplayerComponent = (displayerProps) => {
     return (React.createElement("div", { className: addClassname('o-displayer-card', displayerProps.className) },
         React.createElement("div", { className: "o-displayer-card-title" }, displayerProps.name),
         Object.values(displayerProps.children ?? {}).map((field, index) => {
-            const Displayer = field.Displayer;
+            const Displayer = field.Displayer ?? onekijsFramework.DefaultDisplayer;
             return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format });
         })));
 };
@@ -1693,6 +1693,7 @@ const FormCard = ({ name, ...cardProps }) => {
         container: name,
     });
     const { hide, show, disable, enable } = fieldContainer;
+    const initializedRef = React.useRef(false);
     React.useEffect(() => {
         const visible = metadata.visible ?? true;
         const disabled = metadata.disabled ?? false;
@@ -1701,19 +1702,29 @@ const FormCard = ({ name, ...cardProps }) => {
                 disable();
             }
             else {
-                enable();
+                if (initializedRef.current === true) {
+                    // we only use the enable method if this is a change and not a initialization
+                    enable();
+                }
             }
             hide();
         }
         else {
-            show();
+            if (initializedRef.current === true) {
+                // we only use the show method if this is a change and not a initialization
+                show();
+            }
             if (disabled) {
                 disable();
             }
             else {
-                enable();
+                if (initializedRef.current === true) {
+                    // we only use the enable method if this is a change and not a initialization
+                    enable();
+                }
             }
         }
+        initializedRef.current = true;
     }, [metadata.visible, metadata.disabled, hide, show, disable, enable]);
     if (metadata.visible === false) {
         return null;
@@ -11238,7 +11249,7 @@ const WizardSummaryComponent = ({ className }) => {
     const form = onekijsFramework.useForm();
     const tree = Object.values(form.getDisplayerTree());
     return (React.createElement(Accordion, { className: className }, tree.map((field, index) => {
-        const Displayer = field.Displayer;
+        const Displayer = field.Displayer || onekijsFramework.DefaultDisplayer;
         return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === tree.length - 1, format: "form_summary" });
     })));
 };
@@ -11303,7 +11314,7 @@ const FormStep = ({ name, disabled = false, visible = true, ...stepProps }) => {
         Displayer: (displayerProps) => {
             const total = Object.values(displayerProps.children ?? {}).length;
             return (React.createElement(AccordionPanel, { title: stepProps.title, initialActive: displayerProps.index === 0, initialExpand: displayerProps.index === 0 }, Object.values(displayerProps.children ?? {}).map((field, index) => {
-                const Displayer = field.Displayer;
+                const Displayer = field.Displayer ?? onekijsFramework.DefaultDisplayer;
                 return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format });
             })));
         },
@@ -11317,6 +11328,7 @@ const FormStep = ({ name, disabled = false, visible = true, ...stepProps }) => {
         },
     });
     const { touchAllFields, hide, show, disable, enable } = fieldContainer;
+    const initializedRef = React.useRef(false);
     React.useEffect(() => {
         const visible = metadata.visible ?? true;
         const disabled = metadata.disabled ?? false;
@@ -11327,44 +11339,51 @@ const FormStep = ({ name, disabled = false, visible = true, ...stepProps }) => {
             }
             else {
                 service.enable(name);
-                enable();
+                if (initializedRef.current === true) {
+                    // we only use the enable method if this is a change and not a initialization
+                    enable();
+                }
             }
             service.hide(name);
             hide();
         }
         else {
             service.show(name);
-            show();
+            if (initializedRef.current === true) {
+                // we only use the show method if this is a change and not a initialization
+                show();
+            }
             if (disabled) {
                 service.disable(name);
                 disable();
             }
             else {
                 service.enable(name);
-                enable();
+                if (initializedRef.current === true) {
+                    // we only use the enable method if this is a change and not a initialization
+                    enable();
+                }
             }
         }
+        initializedRef.current = true;
     }, [name, metadata.visible, metadata.disabled]);
-    React.useEffect(() => {
-        if (!visible) {
-            if (disabled) {
-                disable();
-            }
-            else {
-                enable();
-            }
-            hide();
-        }
-        else {
-            show();
-            if (disabled) {
-                disable();
-            }
-            else {
-                enable();
-            }
-        }
-    }, [visible, disabled, hide, show, disable, enable]);
+    // useEffect(() => {
+    //   if (!visible) {
+    //     if (disabled) {
+    //       disable();
+    //     } else {
+    //       enable();
+    //     }
+    //     hide();
+    //   } else {
+    //     show();
+    //     if (disabled) {
+    //       disable();
+    //     } else {
+    //       enable();
+    //     }
+    //   }
+    // }, [visible, disabled, hide, show, disable, enable]);
     return (React.createElement(onekijsFramework.FormContext.Provider, { value: fieldContainer.context },
         React.createElement(Step, { ...stepProps, uid: name, onTouch: touchAllFields })));
 };