datasync-dynamic-form 1.3.2 → 1.3.4

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);
@@ -389,8 +394,9 @@ export class DsDynamicForm extends Component {
             }
         };
         this._colRendering = (col) => {
+            var _a, _b, _c, _d;
             try {
-                return (_jsx(ReactstrapCol, { xs: "12", sm: "12", md: "6", lg: "4", id: `${col.Id ? col.Id : ''}`, children: col.Fields.map((field, ii) => {
+                return (_jsx(ReactstrapCol, { xs: (_a = this.props.col_xs) !== null && _a !== void 0 ? _a : 12, sm: (_b = this.props.col_sm) !== null && _b !== void 0 ? _b : 12, md: (_c = this.props.col_md) !== null && _c !== void 0 ? _c : 6, lg: (_d = this.props.col_lg) !== null && _d !== void 0 ? _d : 4, id: `${col.Id ? col.Id : ''}`, children: col.Fields.map((field, ii) => {
                         return this._fieldRendering(field, ii);
                     }) }));
             }
@@ -464,25 +470,28 @@ export class DsDynamicForm extends Component {
             }
         };
         this._cancelButton = () => {
+            var _a, _b, _c, _d;
             let buttonIsHidden = (this.props.read_only || (this.props.buttons_options && this.props.buttons_options.cancel_button_hidden)) ? true : false;
             let buttonCaption = (this.props.buttons_options && this.props.buttons_options.cancel_button_caption) ? this.props.buttons_options.cancel_button_caption : "Annuler";
             if (buttonIsHidden)
                 return (_jsx(_Fragment, {}));
             else {
-                return (_jsx(ReactstrapCol, { xs: "12", sm: "12", md: "6", lg: "4", children: _jsx(Button, { id: "dsdf_clear_button", block: true, className: "btn-round", color: "danger", outline: true, type: "reset", onClick: () => { this.clearForm(); }, children: buttonCaption }) }));
+                return (_jsx(ReactstrapCol, { xs: (_a = this.props.col_xs) !== null && _a !== void 0 ? _a : 12, sm: (_b = this.props.col_sm) !== null && _b !== void 0 ? _b : 12, md: (_c = this.props.col_md) !== null && _c !== void 0 ? _c : 6, lg: (_d = this.props.col_lg) !== null && _d !== void 0 ? _d : 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 = () => {
+            var _a, _b, _c, _d;
             let buttonIsHidden = (this.props.read_only || (this.props.buttons_options && this.props.buttons_options.submit_button_hidden)) ? true : false;
             let buttonCaption = (this.props.buttons_options && this.props.buttons_options.submit_button_caption) ? this.props.buttons_options.submit_button_caption : "Soumettre";
             if (buttonIsHidden)
                 return (_jsx(_Fragment, {}));
             else {
-                return (_jsx(ReactstrapCol, { xs: "12", sm: "12", md: "6", lg: "4", children: _jsx(Button, { id: "dsdf_submit_button", block: true, className: "btn-round", color: "danger", outline: true, type: "submit", onClick: () => { this.onClickSubmitFormHandler(); }, children: buttonCaption }) }));
+                return (_jsx(ReactstrapCol, { xs: (_a = this.props.col_xs) !== null && _a !== void 0 ? _a : 12, sm: (_b = this.props.col_sm) !== null && _b !== void 0 ? _b : 12, md: (_c = this.props.col_md) !== null && _c !== void 0 ? _c : 6, lg: (_d = this.props.col_lg) !== null && _d !== void 0 ? _d : 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: [_jsx(_Fragment, { children: console.log('form->', this.props.form) }), !this.state.form &&
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            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 &&
@@ -494,11 +503,11 @@ export class DsDynamicForm extends Component {
                                         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, { xs: "12", sm: "12", md: "6", lg: "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)
+                                _jsx(ReactstrapCol, { xs: (_a = this.props.col_xs) !== null && _a !== void 0 ? _a : 12, sm: (_b = this.props.col_sm) !== null && _b !== void 0 ? _b : 12, md: (_c = this.props.col_md) !== null && _c !== void 0 ? _c : 6, lg: (_d = this.props.col_lg) !== null && _d !== void 0 ? _d : 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, { xs: "12", sm: "12", md: "6", lg: "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)
+                                _jsx(ReactstrapCol, { xs: (_e = this.props.col_xs) !== null && _e !== void 0 ? _e : 12, sm: (_f = this.props.col_sm) !== null && _f !== void 0 ? _f : 12, md: (_g = this.props.col_md) !== null && _g !== void 0 ? _g : 6, lg: (_h = this.props.col_lg) !== null && _h !== void 0 ? _h : 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 }) })] })] }));
@@ -538,3 +547,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

@@ -97,6 +97,10 @@ interface DsDynamicFormProps {
     custom_button_handler2?: (form: Form) => void;
     show_hidden?: boolean;
     active_page?: number;
+    col_xs?: number | string;
+    col_sm?: number | string;
+    col_md?: number | string;
+    col_lg?: number | string;
 }
 interface DsDynamicFormState {
     form: Form;
@@ -160,4 +164,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.4",
   "main": "dist/DsDynamicForm.js",
   "module": "dist/DsDynamicForm.js",
   "types": "dist/types/DsDynamicForm.d.ts",