Develop (#50)

* fix #43: stop navigation to disabled items with buttons * fix #44: update change events * fix #48: making spacing configurable
manojadams · Feb 11, 2024 · 40cc131 · 40cc131
1 parent 51abd79
commit 40cc131
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 19 deletions.
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -104,8 +104,8 @@ export const EVENTS = {
     PAGE_CHANGE: "page_change",
     _FIELD_CHANGE: "$field_change",
     _FIELD_CLOSE: "$field_close",
-    _DISABLE_TAB: "$disable-tab",
-    _ENABLE_CURRENT_TAB: "$enable-current-tab",
+    _DISABLE_TAB: "$disable_tab",
+    _ENABLE_CURRENT_TAB: "$enable_current_tab",
     _END_OF_PAGE: "$end_of_page",
     _RESET_END_OF_PAGE: "$reset_end_of_page"
 };

diff --git a/src/core/MetaForm.tsx b/src/core/MetaForm.tsx
@@ -490,10 +490,10 @@ export default class MetaForm implements IMetaForm {
                             const { eventType, payload } = changes;
                             if (value !== undefined) {
                                 if (value === fieldValue) {
-                                    this.emit(eventType as string, payload);
+                                    this.emit(eventType as string, { payload });
                                 }
                             } else {
-                                this.emit(eventType as string, payload);
+                                this.emit(eventType as string, { payload });
                             }
                         }
                         break;

diff --git a/src/form/Form.tsx b/src/form/Form.tsx
@@ -80,6 +80,7 @@ function Form(props: IProps) {
         props.emit(EVENTS.SWITCH, { payload: FORM_ACTION.PREVIOUS });
         props.onPrevious();
     };
+
     if (hasSection && sectionLayout !== SECTION_LAYOUT.DEFAULT) {
         return (
             <SectionForm

diff --git a/src/form/FormFieldRenderer.tsx b/src/form/FormFieldRenderer.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from "react";
+import React, { Fragment, useContext, useState } from "react";
 import FormUtils from "../utils/FormUtil";
 import { IFormField, IRenderField } from "../constants/common-interface";
 import { Row as MRow } from "layout-emotions";
@@ -7,8 +7,10 @@ import FormControl from "./form-controls/FormControl";
 import { IField } from "../constants/model-interfaces";
 import Col from "./layout/Col";
 import styled from "@emotion/styled";
+import FormContext from "./form-context";
 
 function FormFieldRenderer(props: IRenderField) {
+    const { formConfig } = useContext(FormContext);
     if (props?.meta?.type === "hidden") {
         return <Fragment />;
     }
@@ -27,7 +29,10 @@ function FormFieldRenderer(props: IRenderField) {
     }
     if (isSection) {
         return (
-            <MRow>
+            <MRow 
+                gapX={formConfig.config?.gapX} 
+                gapY={formConfig.config?.gapY}
+            >
                 <RenderColumn
                     cssClassName={cssClassName}
                     props={props}
@@ -82,14 +87,13 @@ function RenderColumn({
     cField: IFormField;
     sync: () => void;
 }) {
-    const vs = "my-2 my-md-3";
     const type = props.meta?.type ? props.meta.type : "field";
     const wrapClassName = cssClassName || (type === "field" ? "mcol-md-12" : "");
     if (wrapClassName) {
         return (
             <Row isStandalone={isStandAlone} align={props?.meta?.displayProps?.align}>
                 {props.meta.displayProps?.rs && <div className="mcol-md-12" />}
-                <div className={wrapClassName + " " + vs}>
+                <div className={wrapClassName}>
                     {isSection && props.meta.displayType === "title" && (
                         <h4 className="text-center mt-md-5 mb-md-2 mt-4 mb-2">{props.meta.displayName}</h4>
                     )}
@@ -103,7 +107,7 @@ function RenderColumn({
                                 form={props.form[field.name]}
                                 sync={sync}
                             />
-                        ))}
+                    ))}
                 </div>
             </Row>
         );

diff --git a/src/form/form-controls/Footer/Footer.tsx b/src/form/form-controls/Footer/Footer.tsx
@@ -74,8 +74,13 @@ function Footer(props: IProps) {
                 props.onCustom(e, button, callback);
         }
     };
+
     return (
-        <FooterStyled className="footer" data-pagenumber={page.pageNumber} useDefault={props.useDefaultButtons}>
+        <FooterStyled
+            className="footer" 
+            data-pagenumber={page.pageNumber} 
+            useDefault={props.useDefaultButtons}
+        >
             {props.formButtons.map((button: IField, idx: number) => {
                 const className = FormUtils.getCssClassName(button.meta?.displayProps);
                 const subprops = {
@@ -156,7 +161,7 @@ const FooterStyled = styled(Row)<{ useDefault: boolean }>`
     gap: 1.5rem;
     margin-top: 1.5rem;
     justify-content: flex-end;
-    ${(props) =>
+        ${(props) =>
         props.useDefault
             ? `
         display: flex;

diff --git a/src/form/form-group/BaseFormGroup.tsx b/src/form/form-group/BaseFormGroup.tsx
@@ -50,12 +50,24 @@ export default abstract class BaseFormGroup extends React.Component<ISchema> {
         });
         this.context.listener(EVENTS.SWITCH, (payload: { payload: string; callback?: TCallback }) => {
             switch (payload.payload) {
-                case "next":
-                    this.setActiveIndex(this.state.activeIndex + 1, payload.callback);
-                    break;
-                case "previous":
-                    this.setActiveIndex(this.state.activeIndex - 1, payload.callback);
-                    break;
+                case "next": {
+                    const nextIndex = this.getNextAvailableIndex(this.state.activeIndex + 1);
+                    if (nextIndex >= 0) {
+                        this.setActiveIndex(nextIndex, payload.callback);
+                    }
+                    const hasMorePages = this.getNextAvailableIndex(nextIndex + 1) === -1 ? false : true;
+                    if (!hasMorePages) {
+                        this.context.emit(EVENTS._END_OF_PAGE, { payload: nextIndex + 1});
+                    }
+                }
+                break;
+                case "previous": {
+                    const previousIndex = this.getPreviousAvailableIndex(this.state.activeIndex - 1);
+                    if (previousIndex >= 0) {
+                        this.setActiveIndex(previousIndex, payload.callback);
+                    }
+                }
+                break;
             }
         });
         this.context.listener(EVENTS.VALIDATION_ERROR, (payload: { payload: string; callback: TCallback }) => {
@@ -142,6 +154,28 @@ export default abstract class BaseFormGroup extends React.Component<ISchema> {
         });
     }
 
+    getNextAvailableIndex(index: number): number {
+        if (this.tabFields.length > index) {
+            if (this.tabFields[index]?.meta?.isDisabled === true) {
+                return this.getNextAvailableIndex(index + 1);
+            } else {
+                return index;
+            }
+        }
+        return -1;
+    }
+
+    getPreviousAvailableIndex(index: number): number {
+        if (this.tabFields.length > index) {
+            if (this.tabFields[index]?.meta?.isDisabled === true) {
+                return this.getPreviousAvailableIndex(index - 1);
+            } else {
+                return index;
+            }
+        }
+        return -1;
+    }
+
     abstract tabs(): JSX.Element;
     abstract panels(): JSX.Element;
 }
diff --git a/src/form/form-group/common/Section.tsx b/src/form/form-group/common/Section.tsx
@@ -32,7 +32,10 @@ export function Section(props: ISectionProps) {
             role="tabpanel"
             aria-labelledby={props.section.name}
         >
-            <Row gapX={formContext.formConfig.config?.gapX} gapY={formContext.formConfig.config?.gapY}>
+            <Row 
+                gapX={formContext.formConfig.config?.gapX} 
+                gapY={formContext.formConfig.config?.gapY}
+            >
                 {props.section.fields &&
                     props.section.fields.map((field: IField) => (
                         <FormFieldRenderer

diff --git a/src/form/form-stepper/BaseFormStepper.tsx b/src/form/form-stepper/BaseFormStepper.tsx
@@ -26,7 +26,11 @@ abstract class BaseFormStepper extends BaseFormWizard {
         const fields = section?.fields || [];
         const form = this.context.form[section?.name ?? DEFAULT];
         return (
-            <Row className="section">
+            <Row 
+                className="section"
+                gapX={this.context.formConfig.config?.gapX}
+                gapY={this.context.formConfig.config?.gapY}
+            >
                 {fields.map((field) => (
                     <FormFieldRenderer
                         {...field}