datasync-dynamic-form 1.3.2 → 1.3.3

package/dist/DsDynamicForm.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { Component } from "react";
+import React, { Component, useImperativeHandle, forwardRef } from "react";
 import Multiselect from 'multiselect-react-dropdown';
 import { CTimeStamp, Randomize, SaveDataTierToDatasync, WScrollTo } from "datasync-core";
 import { DsBlob } from "datasync-blob";
@@ -16,13 +16,10 @@ import { DsPdf } from "datasync-pdf";
 // reactstrap components
 import { Button, Label, FormGroup, Input, InputGroupText, InputGroup, Row as ReactstrapRow, Col as ReactstrapCol, } from "reactstrap";
 const debugging = false;
-const local = true;
-const production = !local;
 const globals = {
     parameters: {
         debugging: debugging,
         local: true,
-        production: false,
         use_navigate: false,
         save_failed_alert: false,
         form_version: "1.0",
@@ -104,8 +101,6 @@ export class DsDynamicForm extends Component {
                 let nextFieldError = this.state.fieldError || {};
                 nextFieldError[pFieldObject.name] = value;
                 this.setState({ fieldError: nextFieldError });
-                //Scroll form to first erroneous field
-                WScrollTo(pFieldObject.name);
             }
             catch (e) {
                 console.error(`Error caught on ${e}`);
@@ -198,17 +193,21 @@ export class DsDynamicForm extends Component {
                     event.preventDefault();
                 //Force all fields check    
                 let canSubmit = true;
+                let firstErrFieldName = null;
                 let iPage = 0;
-                while ((iPage < this.state.form.Pages.length)
-                    && (canSubmit)) {
+                while (iPage < this.state.form.Pages.length) {
                     let iRow = 0;
-                    while ((iRow < this.state.form.Pages[iPage].Rows.length)
-                        && (canSubmit)) {
+                    while (iRow < this.state.form.Pages[iPage].Rows.length) {
                         let iCol = 0;
-                        while ((iCol < this.state.form.Pages[iPage].Rows[iRow].Cols.length) && canSubmit) {
+                        while (iCol < this.state.form.Pages[iPage].Rows[iRow].Cols.length) {
                             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])))) {
+                            while (ii < this.state.form.Pages[iPage].Rows[iRow].Cols[iCol].Fields.length) {
+                                const field = this.state.form.Pages[iPage].Rows[iRow].Cols[iCol].Fields[ii];
+                                const isValid = this.checkValidation(field);
+                                if (!isValid && firstErrFieldName === null) {
+                                    firstErrFieldName = field.name;
+                                }
+                                canSubmit = canSubmit && isValid;
                                 ii++;
                             }
                             iCol++;
@@ -218,6 +217,12 @@ export class DsDynamicForm extends Component {
                     iPage++;
                 }
                 if (!canSubmit) {
+                    // Scroll to the first field with error only on submit
+                    if (firstErrFieldName) {
+                        if (globals.parameters.debugging)
+                            console.log("WScrollTo invoked :-)");
+                        WScrollTo(firstErrFieldName);
+                    }
                     let err_message = "Le formulaire comporte des erreurs !";
                     if (this.props.onFormFailed)
                         this.props.onFormFailed(err_message);
@@ -482,7 +487,7 @@ export class DsDynamicForm extends Component {
             }
         };
         this.render = () => {
-            return (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: console.log('form->', this.props.form) }), !this.state.form &&
+            return (_jsxs(_Fragment, { children: [_jsx(_Fragment, {}), !this.state.form &&
                         _jsx("div", { children: _jsx("h1", { children: "Form loading..." }) }), !(this.state.form &&
                         this.state.form.Pages) &&
                         _jsx("div", { children: _jsx("h1", { children: "Form Missing Pages !!!" }) }), _jsx("form", { children: this.state.form &&
@@ -538,3 +543,19 @@ export class DsDynamicForm extends Component {
         }
     }
 }
+// ForwardRef wrapper that exposes only the desired methods
+export const DsDynamicFormForwardRef = forwardRef((props, ref) => {
+    const innerRef = React.useRef(null);
+    useImperativeHandle(ref, () => ({
+        clearForm: () => {
+            var _a;
+            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.clearForm();
+        },
+        onClickSubmitFormHandler: (event) => {
+            return innerRef.current
+                ? innerRef.current.onClickSubmitFormHandler(event)
+                : Promise.resolve(false);
+        },
+    }));
+    return (_jsx(DsDynamicForm, Object.assign({}, props, { ref: innerRef })));
+});

package/dist/types/DsDynamicForm.d.ts

@@ -160,4 +160,9 @@ export declare class DsDynamicForm extends Component<DsDynamicFormProps, DsDynam
     _submitButton: () => JSX.Element;
     render: () => JSX.Element;
 }
+export type DsDynamicFormRef = {
+    clearForm: () => void;
+    onClickSubmitFormHandler: (event?: React.MouseEvent<HTMLButtonElement>) => Promise<boolean>;
+};
+export declare const DsDynamicFormForwardRef: any;
 export {};

package/package.json

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