datasync-dynamic-form 1.1.23 → 1.1.25

package/dist/DsDynamicForm.js

@@ -37,13 +37,23 @@ export class DsDynamicForm extends Component {
                 this.clearForm();
             }
         };
+        /**
+         * Prototype : updateElement
+         */
+        this.updatePageDomElement = (p_pageIndex, p_page_isVisible) => {
+            let pageObject = document.getElementById(`dsdf_page_${p_pageIndex}`);
+            if (p_page_isVisible)
+                pageObject.classList.add("page_visible");
+            else
+                pageObject.classList.remove("page_visible");
+        };
         /**
          * Prototype : clearForm
          */
         this.clearForm = () => {
-            this.setState({ fieldError: {}, form: { Rows: [] }, captcha1: Randomize(0, 5), captcha2: Randomize(0, 5) }, //Clear forced
+            this.setState({ fieldError: {}, form: { Pages: [] }, captcha1: Randomize(0, 5), captcha2: Randomize(0, 5) }, //Clear forced
             () => {
-                this.setState({ form: this.props.form || { Rows: [] }, fieldError: {} }); //No need to override form property with clearObject2 anymore because data are written outside form.
+                this.setState({ form: this.props.form || { Pages: [] }, fieldError: {} }); //No need to override form property with clearObject2 anymore because data are written outside form.
             });
             //Real efficient fix
             let duplicate_data_tier = (this.props.data_blob && this.props.data_blob.data_tier) ? JSON.parse(JSON.stringify(this.props.data_blob.data_tier)) : {};
@@ -177,19 +187,24 @@ export class DsDynamicForm extends Component {
                     event.preventDefault();
                 //Force all fields check    
                 let canSubmit = true;
-                let iRow = 0;
-                while ((iRow < this.state.form.Rows.length)
+                let iPage = 0;
+                while ((iPage < this.state.form.Pages.length)
                     && (canSubmit)) {
-                    let iCol = 0;
-                    while ((iCol < this.state.form.Rows[iRow].Cols.length) && canSubmit) {
-                        let ii = 0;
-                        while ((ii < this.state.form.Rows[iRow].Cols[iCol].Fields.length)
-                            && (canSubmit && (canSubmit = this.checkValidation(this.state.form.Rows[iRow].Cols[iCol].Fields[ii])))) {
-                            ii++;
+                    let iRow = 0;
+                    while ((iRow < this.state.form.Pages[iPage].Rows.length)
+                        && (canSubmit)) {
+                        let iCol = 0;
+                        while ((iCol < this.state.form.Pages[iPage].Rows[iRow].Cols.length) && canSubmit) {
+                            let ii = 0;
+                            while ((ii < this.state.form.Pages[iPage].Rows[iRow].Cols[iCol].Fields.length)
+                                && (canSubmit && (canSubmit = this.checkValidation(this.state.form.Pages[iPage].Rows[iRow].Cols[iCol].Fields[ii])))) {
+                                ii++;
+                            }
+                            iCol++;
                         }
-                        iCol++;
+                        iRow++;
                     }
-                    iRow++;
+                    iPage++;
                 }
                 if (!canSubmit) {
                     let err_message = "Le formulaire comporte des erreurs !";
@@ -364,7 +379,7 @@ export class DsDynamicForm extends Component {
         };
         this._colRendering = (col) => {
             try {
-                return (_jsx(ReactstrapCol, { children: col.Fields.map((field, ii) => {
+                return (_jsx(ReactstrapCol, { id: `${col.Id ? col.Id : ''}`, children: col.Fields.map((field, ii) => {
                         return this._fieldRendering(field, ii);
                     }) }));
             }
@@ -441,7 +456,7 @@ export class DsDynamicForm extends Component {
             if (buttonIsHidden)
                 return (_jsx(_Fragment, {}));
             else {
-                return (_jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { block: true, className: "btn-round", color: "danger", outline: true, type: "reset", onClick: () => { this.clearForm(); }, children: buttonCaption }) }));
+                return (_jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { id: "dsdf_clear_button", block: true, className: "btn-round", color: "danger", outline: true, type: "reset", onClick: () => { this.clearForm(); }, children: buttonCaption }) }));
             }
         };
         this._submitButton = () => {
@@ -450,30 +465,29 @@ export class DsDynamicForm extends Component {
             if (buttonIsHidden)
                 return (_jsx(_Fragment, {}));
             else {
-                return (_jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { block: true, className: "btn-round", color: "danger", outline: true, type: "submit", onClick: () => { this.onClickSubmitFormHandler(); }, children: buttonCaption }) }));
+                return (_jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { id: "dsdf_submit_button", block: true, className: "btn-round", color: "danger", outline: true, type: "submit", onClick: () => { this.onClickSubmitFormHandler(); }, children: buttonCaption }) }));
             }
         };
         this.render = () => {
             return (_jsxs(_Fragment, { children: [!this.state.form &&
                         _jsx("div", { children: _jsx("h1", { children: "Form loading..." }) }), _jsx("form", { children: this.state.form &&
-                            this.state.form.Rows &&
-                            this.state.form.Rows.map(row => {
-                                return (this._rowRendering(row));
-                            }) }), _jsxs(ReactstrapRow, { className: "buttons-row", children: [this._cancelButton(), this._submitButton(), this.props.custom_button_caption &&
-                                _jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler)
+                            this.state.form.Pages &&
+                            this.state.form.Pages.map((page, pageIndex) => {
+                                console.log(`Rendering page ${pageIndex}:`, page);
+                                return (_jsx("div", { id: `dsdf_page_${pageIndex}`, className: `form-page ${pageIndex == this.state.active_page ? "page_visible" : ""}`, children: page.Rows.map((row, rowIndex) => {
+                                        return (_jsx("div", { children: this._rowRendering(row) }, rowIndex));
+                                    }) }, pageIndex));
+                            }) }), _jsxs(ReactstrapRow, { id: "dsdf_buttons_container", className: "buttons-row", children: [this._cancelButton(), this._submitButton(), this.props.custom_button_caption &&
+                                _jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { id: "dsdf_custom_button", block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler)
                                             this.props.custom_button_handler(this.state.form);
                                         else
                                             console.error("custom_button_handler unset !"); }, children: this.props.custom_button_caption }) }), this.props.custom_button_caption2 &&
-                                _jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler2)
+                                _jsx(ReactstrapCol, { md: "4", sm: "4", children: _jsx(Button, { id: "dsdf_custom_button2", block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler2)
                                             this.props.custom_button_handler2(this.state.form);
                                         else
                                             console.error("custom_button_handler2 unset !"); }, children: this.props.custom_button_caption2 }) })] })] }));
         };
-        if (globals.parameters.debugging) {
-            console.log("30:DynamicForm3Tiers2::this.props.data_blob", this.props.data_blob);
-            console.log("30DynamicForm3Tiers::this.props.form", this.props.form);
-        }
-        this.state = { form: { Rows: [] } };
+        this.state = { form: { Pages: [] }, active_page: 0 };
         this.local_data_blob = { data_tier: {} };
     }
     componentDidUpdate(prevProps) {
@@ -486,5 +500,19 @@ export class DsDynamicForm extends Component {
             //Lookup field props has changed
             this.clearForm();
         }
+        if (this.props.active_page != prevProps.active_page) {
+            try {
+                this.updatePageDomElement(this.prevProps.active_page, false);
+            }
+            catch (error) {
+                this.updatePageDomElement(0, false);
+            }
+            try {
+                this.updatePageDomElement(this.props.active_page, true);
+            }
+            catch (error) {
+                this.updatePageDomElement(1, true);
+            }
+        }
     }
 }

package/dist/types/DsDynamicForm.d.ts

@@ -22,14 +22,18 @@ interface Field {
     name_min?: string;
 }
 interface Col {
+    Id: string;
     Fields: Field[];
 }
 interface Row {
     Cols: Col[];
 }
-interface Form {
+interface Page {
     Rows: Row[];
 }
+interface Form {
+    Pages: Page[];
+}
 interface DataTier {
     [key: string]: any;
 }
@@ -106,6 +110,10 @@ export declare class DsDynamicForm extends Component<DsDynamicFormProps, DsDynam
     constructor(props: DsDynamicFormProps);
     componentDidMount: () => void;
     componentDidUpdate(prevProps: DsDynamicFormProps): void;
+    /**
+     * Prototype : updateElement
+     */
+    updatePageDomElement: (p_pageIndex: any, p_page_isVisible: any) => void;
     /**
      * Prototype : clearForm
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "datasync-dynamic-form",
   "description": "Datasync Dynamic Form component",
-  "version": "1.1.23",
+  "version": "1.1.25",
   "main": "dist/DsDynamicForm.js",
   "module": "dist/DsDynamicForm.js",
   "types": "dist/types/DsDynamicForm.d.ts",