onekijs-ui 0.19.5 → 0.19.7

package/dist/index.js

@@ -1495,11 +1495,12 @@ const TooltipContent = ({ code, fields }) => {
     if (code <= onekijsFramework.ValidationCode.Error) {
         return (React.createElement(React.Fragment, null,
             React.createElement("div", null,
-                "Some fields are in ",
+                "Some fields are ",
                 code === onekijsFramework.ValidationCode.Error ? 'in error' : 'loading'),
             Object.keys(fields).map((fieldName, index) => (React.createElement("div", { key: `error-${index}` },
-                React.createElement("b", null, fieldName),
-                ": ",
+                fieldName !== onekijsFramework.FORM_GLOBAL_VALIDATION_KEY ? React.createElement(React.Fragment, null,
+                    React.createElement("b", null, "fieldName"),
+                    ":") : '',
                 fields[fieldName])))));
     }
     return null;
@@ -1508,19 +1509,26 @@ const SubmitButton = React.memo((opts) => {
     const { submitting, code, fields } = onekijsFramework.useSubmit();
     const { showErrors, type = 'submit', ...props } = opts;
     let disabled = props.disabled || false;
+    let loading = false;
+    let kind = props.kind || 'primary';
     let errors = [];
     if (code <= onekijsFramework.ValidationCode.Error) {
         disabled = true;
         if (showErrors) {
             errors = Object.keys(fields);
         }
+        kind = 'danger';
+    }
+    if (code === onekijsFramework.ValidationCode.Loading) {
+        loading = true;
+        kind = 'dark';
     }
     // eslint-disable-next-line react/prop-types
-    if (submitting) {
+    if (submitting || loading) {
         disabled = true;
     }
-    return (React.createElement(Tooltip, { content: errors.length > 0 ? React.createElement(TooltipContent, { code: code, fields: fields }) : undefined, placement: "top", kind: "danger", delayHide: 0 },
-        React.createElement(Button, { ...props, disabled: disabled, type: type, loading: submitting }, props.children ? props.children : 'Submit')));
+    return (React.createElement(Tooltip, { content: errors.length > 0 && !loading ? React.createElement(TooltipContent, { code: code, fields: fields }) : undefined, placement: "top", kind: kind, delayHide: 0 },
+        React.createElement(Button, { ...props, kind: kind, disabled: disabled, type: type, loading: submitting || loading }, props.children ? props.children : 'Submit')));
 });
 SubmitButton.displayName = 'SubmitButton';
 
@@ -1664,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 });
         })));
 };
@@ -1685,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;
@@ -1693,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;
@@ -11230,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" });
     })));
 };
@@ -11295,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 });
             })));
         },
@@ -11309,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;
@@ -11319,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 })));
 };