datasync-dynamic-form 1.3.5 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DsDynamicForm.js +28 -18
- package/dist/types/DsDynamicForm.d.ts +12 -2
- package/package.json +5 -5
package/dist/DsDynamicForm.js
CHANGED
|
@@ -9,10 +9,8 @@ import { Button, Label, FormGroup, Input, InputGroupText, InputGroup, Row as Rea
|
|
|
9
9
|
import "./flex-grid.css";
|
|
10
10
|
const FlexRow = ({ className, ...props }) => (_jsx(ReactstrapRow, { className: ["flex-row", className].filter(Boolean).join(" "), ...props }));
|
|
11
11
|
const FlexCol = ({ className, ...props }) => (_jsx(ReactstrapCol, { className: ["flex-col", className].filter(Boolean).join(" "), ...props }));
|
|
12
|
-
const debugging = false;
|
|
13
12
|
const globals = {
|
|
14
13
|
parameters: {
|
|
15
|
-
debugging: debugging,
|
|
16
14
|
local: true,
|
|
17
15
|
production: false,
|
|
18
16
|
use_navigate: false,
|
|
@@ -35,19 +33,19 @@ export class DsDynamicForm extends Component {
|
|
|
35
33
|
*/
|
|
36
34
|
this.updatePageDomElement = (p_pageIndex, p_page_isVisible) => {
|
|
37
35
|
let pageObject = document.getElementById(`dsdf_page_${p_pageIndex}`);
|
|
38
|
-
if (
|
|
36
|
+
if (this.debugging)
|
|
39
37
|
console.log(`updatePageDomElement = (${p_pageIndex}, ${p_page_isVisible ? "show" : "hide"})`);
|
|
40
38
|
if (!pageObject) {
|
|
41
39
|
console.error(`Page element with id 'dsdf_page_${p_pageIndex}' not found`);
|
|
42
40
|
return;
|
|
43
41
|
}
|
|
44
|
-
if (
|
|
42
|
+
if (this.debugging)
|
|
45
43
|
console.log("pageObject.classList(before)->", pageObject.classList);
|
|
46
44
|
if (p_page_isVisible)
|
|
47
45
|
pageObject.classList.add("page_visible");
|
|
48
46
|
else
|
|
49
47
|
pageObject.classList.remove("page_visible");
|
|
50
|
-
if (
|
|
48
|
+
if (this.debugging)
|
|
51
49
|
console.log("pageObject.classList(after)->", pageObject.classList);
|
|
52
50
|
};
|
|
53
51
|
/**
|
|
@@ -67,7 +65,7 @@ export class DsDynamicForm extends Component {
|
|
|
67
65
|
if (this.props.foreign_keys && typeof this.props.foreign_keys !== "object")
|
|
68
66
|
throw new Error("foreign_keys must be a json object !");
|
|
69
67
|
this.local_data_blob.data_tier = Object.assign(this.props.foreign_keys ? this.props.foreign_keys : {}, duplicate_data_tier);
|
|
70
|
-
if (
|
|
68
|
+
if (this.debugging)
|
|
71
69
|
console.log("clearForm->this.local_data_blob.data_tier =>", this.local_data_blob.data_tier);
|
|
72
70
|
};
|
|
73
71
|
this.getFieldData = (fieldName) => {
|
|
@@ -77,7 +75,7 @@ export class DsDynamicForm extends Component {
|
|
|
77
75
|
};
|
|
78
76
|
this.setFieldData = (fieldName, value) => {
|
|
79
77
|
try {
|
|
80
|
-
if (
|
|
78
|
+
if (this.debugging)
|
|
81
79
|
console.log("setFieldData:fieldName ->", fieldName, " value ->", value);
|
|
82
80
|
let duplicate_data_tier = JSON.parse(JSON.stringify(this.local_data_blob.data_tier));
|
|
83
81
|
duplicate_data_tier[fieldName] = value;
|
|
@@ -104,7 +102,7 @@ export class DsDynamicForm extends Component {
|
|
|
104
102
|
this.getFieldError = (pFieldObject) => {
|
|
105
103
|
/** Return data value form field object */
|
|
106
104
|
try {
|
|
107
|
-
if (
|
|
105
|
+
if (this.debugging)
|
|
108
106
|
console.log(`getFieldError(${JSON.stringify(pFieldObject)}) -> ${this.state.fieldError}`);
|
|
109
107
|
let dbg = (this.state.fieldError && this.state.fieldError[pFieldObject.name]) ? this.state.fieldError[pFieldObject.name] : "";
|
|
110
108
|
return `${dbg}`;
|
|
@@ -217,7 +215,7 @@ export class DsDynamicForm extends Component {
|
|
|
217
215
|
if (!canSubmit) {
|
|
218
216
|
// Scroll to the first field with error only on submit
|
|
219
217
|
if (firstErrFieldName) {
|
|
220
|
-
if (
|
|
218
|
+
if (this.debugging)
|
|
221
219
|
console.log("WScrollTo invoked :-)");
|
|
222
220
|
WScrollTo(firstErrFieldName);
|
|
223
221
|
}
|
|
@@ -230,7 +228,7 @@ export class DsDynamicForm extends Component {
|
|
|
230
228
|
}
|
|
231
229
|
//Invoke onFormSubmit props
|
|
232
230
|
if (this.props.onFormSubmit) {
|
|
233
|
-
if (
|
|
231
|
+
if (this.debugging)
|
|
234
232
|
alert("onFormSubmit => filter log with AsyncDebug:: prefixe");
|
|
235
233
|
//If props function return false then cancel form submit and do not save !
|
|
236
234
|
this.props.onFormSubmit(this.local_data_blob);
|
|
@@ -293,7 +291,7 @@ export class DsDynamicForm extends Component {
|
|
|
293
291
|
if (this.props.onFormSaved)
|
|
294
292
|
this.props.onFormSaved(blob);
|
|
295
293
|
else
|
|
296
|
-
console.error("
|
|
294
|
+
console.error("DsDynamicForm.onFormSaved props is not defined !");
|
|
297
295
|
//clear form
|
|
298
296
|
if (this.props.clearOnSave)
|
|
299
297
|
this.clearForm();
|
|
@@ -306,7 +304,7 @@ export class DsDynamicForm extends Component {
|
|
|
306
304
|
if (this.props.onFormUpdated)
|
|
307
305
|
this.props.onFormUpdated(blob);
|
|
308
306
|
else
|
|
309
|
-
console.error("
|
|
307
|
+
console.error("DsDynamicForm.onFormUpdated props is not defined !");
|
|
310
308
|
//clear form
|
|
311
309
|
if (this.props.clearOnUpdate)
|
|
312
310
|
this.clearForm();
|
|
@@ -322,10 +320,18 @@ export class DsDynamicForm extends Component {
|
|
|
322
320
|
if (this.props.onFormFailed)
|
|
323
321
|
this.props.onFormFailed(err);
|
|
324
322
|
else {
|
|
325
|
-
console.error("
|
|
323
|
+
console.error("DsDynamicForm.onFormFailed props is not defined !");
|
|
326
324
|
alert("Erreur de sauvegarde !!!");
|
|
327
325
|
}
|
|
328
326
|
};
|
|
327
|
+
this.onBlobErrorLocalHandler = (errorObject) => {
|
|
328
|
+
if (this.props.onBlobErrorHandler)
|
|
329
|
+
this.props.onBlobErrorHandler(errorObject);
|
|
330
|
+
else {
|
|
331
|
+
console.error("DsDynamicForm.onBlobErrorHandler props is not defined !");
|
|
332
|
+
alert(errorObject.message);
|
|
333
|
+
}
|
|
334
|
+
};
|
|
329
335
|
this.checkValidation = (pFieldObject) => {
|
|
330
336
|
/** Get field properties */
|
|
331
337
|
let min = pFieldObject.min_length || 0;
|
|
@@ -354,7 +360,7 @@ export class DsDynamicForm extends Component {
|
|
|
354
360
|
}
|
|
355
361
|
if ((max > 0) && (fieldValue.trim().length > max))
|
|
356
362
|
nextErrors.push(`trop long, ${fieldValue.trim().length - max} caractères en trop.`);
|
|
357
|
-
if (
|
|
363
|
+
if (this.debugging) {
|
|
358
364
|
console.log(`pFieldObject.name->`, JSON.stringify(pFieldObject.name));
|
|
359
365
|
console.log(`nextErrors->`, JSON.stringify(nextErrors));
|
|
360
366
|
console.log(`-----------`);
|
|
@@ -379,7 +385,7 @@ export class DsDynamicForm extends Component {
|
|
|
379
385
|
!isNaN(parseFloat(eventObject.event.target.value)))
|
|
380
386
|
this.setFieldData(eventObject.fieldObject.name, eventObject.event.target.value);
|
|
381
387
|
else {
|
|
382
|
-
if (
|
|
388
|
+
if (this.debugging)
|
|
383
389
|
console.error(`Value rejected -> ${eventObject.event.target.value}`);
|
|
384
390
|
}
|
|
385
391
|
this.checkValidation(eventObject.fieldObject);
|
|
@@ -461,7 +467,7 @@ export class DsDynamicForm extends Component {
|
|
|
461
467
|
/* Checkbox is override with combobox */
|
|
462
468
|
return (_jsxs("div", { children: [this.getFieldLabelTitle(field), _jsx(Multiselect, { showArrow: true, options: ["Oui", "Non"], isObject: false, displayValue: "key", selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name).split(";") : [], placeholder: field.placeholder, emptyRecordMsg: "", onSelect: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, onRemove: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, disable: this.props.read_only, singleSelect: true }), this._error_label(field)] }));
|
|
463
469
|
case "blob":
|
|
464
|
-
return (_jsxs(_Fragment, { children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "col-md-10", children: [_jsx(DsBlob, { item_id: field.name, readOnly: this.props.read_only ? this.props.read_only : false, Caption: `${this.getFieldPrompt(field)} ...`, data: this.getFieldData(field.name), uploadPicture: (UploadFile) => { this.setFieldData(field.name, UploadFile.data); this.checkValidation(field); }, pictureStyle: "pic", buttonStyle: "btn btn-secondary", width: field.width ? field.width : undefined, height: field.height ? field.height : undefined, maxWidth: field.
|
|
470
|
+
return (_jsxs(_Fragment, { children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "col-md-10", children: [_jsx(DsBlob, { item_id: field.name, readOnly: this.props.read_only ? this.props.read_only : false, Caption: `${this.getFieldPrompt(field)} ...`, data: this.getFieldData(field.name), uploadPicture: (UploadFile) => { this.setFieldData(field.name, UploadFile.data); this.checkValidation(field); }, pictureStyle: "pic", buttonStyle: "btn btn-secondary", width: field.width ? field.width : undefined, height: field.height ? field.height : undefined, maxWidth: field.max_width ? field.max_width : undefined, maxHeight: field.max_height ? field.max_height : undefined, maxKBytes: field.max_kbytes ? field.max_kbytes : undefined, reduceImage: field.reduceImage ? field.reduceImage : undefined, onErrorHandler: (errorObject) => { this.onBlobErrorLocalHandler(errorObject); }, debugging: this.debugging }), this._error_label(field)] })] }));
|
|
465
471
|
case "pdf":
|
|
466
472
|
return (_jsxs(_Fragment, { children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "col-md-10", children: [_jsx(DsPdf, { item_id: field.name, readOnly: this.props.read_only ? this.props.read_only : false, Caption: `${this.getFieldPrompt(field)} ...`, data: this.getFieldData(field.name), uploadPdf: (UploadFile) => { this.setFieldData(field.name, UploadFile.data); this.checkValidation(field); }, pictureStyle: "pic", buttonStyle: "btn btn-secondary" }), this._error_label(field)] })] }));
|
|
467
473
|
case "email":
|
|
@@ -534,7 +540,7 @@ export class DsDynamicForm extends Component {
|
|
|
534
540
|
_jsx("div", { children: _jsx("h1", { children: "Form Missing Pages !!!" }) }), _jsx("form", { children: this.state.form &&
|
|
535
541
|
this.state.form.Pages &&
|
|
536
542
|
this.state.form.Pages.map((page, pageIndex) => {
|
|
537
|
-
if (
|
|
543
|
+
if (this.debugging)
|
|
538
544
|
console.log(`Rendering page ${pageIndex}:`, page);
|
|
539
545
|
return (_jsx("div", { id: `dsdf_page_${pageIndex}`, className: `form-page ${((pageIndex == this.state.active_page) || this.props.read_only) ? "page_visible" : ""}`, children: page.Rows.map((row, rowIndex) => {
|
|
540
546
|
return (_jsx("div", { children: this._rowRendering(row) }, rowIndex));
|
|
@@ -552,6 +558,10 @@ export class DsDynamicForm extends Component {
|
|
|
552
558
|
this.state = { form: { Pages: [] }, active_page: 0 };
|
|
553
559
|
this.local_data_blob = { data_tier: {} };
|
|
554
560
|
}
|
|
561
|
+
// Helper method to get debugging value from props with default fallback
|
|
562
|
+
get debugging() {
|
|
563
|
+
return this.props.debugging ?? false;
|
|
564
|
+
}
|
|
555
565
|
componentDidUpdate(prevProps) {
|
|
556
566
|
// Typical usage (don't forget to compare props):
|
|
557
567
|
if (this.props.form !== prevProps.form) {
|
|
@@ -566,7 +576,7 @@ export class DsDynamicForm extends Component {
|
|
|
566
576
|
//Page is about to change, then triger onPageChanging Handler
|
|
567
577
|
if (this.props.onPageChanging)
|
|
568
578
|
this.props.onPageChanging({ "active_page": prevProps.active_page ?? 0, "next_page": this.props.active_page ?? 0, "last_page": this.state.form.Pages.length - 1 });
|
|
569
|
-
if (
|
|
579
|
+
if (this.debugging)
|
|
570
580
|
console.log("active_page has changed !");
|
|
571
581
|
try {
|
|
572
582
|
if (prevProps.active_page !== undefined) {
|
|
@@ -13,8 +13,9 @@ interface Field {
|
|
|
13
13
|
hidden?: boolean;
|
|
14
14
|
width?: number;
|
|
15
15
|
height?: number;
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
max_width?: number;
|
|
17
|
+
max_height?: number;
|
|
18
|
+
max_kbytes?: number;
|
|
18
19
|
reduceImage?: boolean;
|
|
19
20
|
name_day?: string;
|
|
20
21
|
name_month?: string;
|
|
@@ -90,6 +91,7 @@ interface DsDynamicFormProps {
|
|
|
90
91
|
next_page: number;
|
|
91
92
|
last_page: number;
|
|
92
93
|
}) => void;
|
|
94
|
+
onBlobErrorHandler?: (errorObject: ErrorObject) => void;
|
|
93
95
|
clearOnSave?: boolean;
|
|
94
96
|
clearOnUpdate?: boolean;
|
|
95
97
|
onTerminated?: () => void;
|
|
@@ -108,6 +110,7 @@ interface DsDynamicFormProps {
|
|
|
108
110
|
col_sm?: number | string;
|
|
109
111
|
col_md?: number | string;
|
|
110
112
|
col_lg?: number | string;
|
|
113
|
+
debugging?: boolean;
|
|
111
114
|
}
|
|
112
115
|
interface DsDynamicFormState {
|
|
113
116
|
form: Form;
|
|
@@ -118,9 +121,15 @@ interface DsDynamicFormState {
|
|
|
118
121
|
captcha2?: number;
|
|
119
122
|
active_page?: number;
|
|
120
123
|
}
|
|
124
|
+
interface ErrorObject {
|
|
125
|
+
error_code: string;
|
|
126
|
+
error_definition: string;
|
|
127
|
+
message: string;
|
|
128
|
+
}
|
|
121
129
|
export declare class DsDynamicForm extends Component<DsDynamicFormProps, DsDynamicFormState> {
|
|
122
130
|
private local_data_blob;
|
|
123
131
|
constructor(props: DsDynamicFormProps);
|
|
132
|
+
private get debugging();
|
|
124
133
|
componentDidMount: () => void;
|
|
125
134
|
componentDidUpdate(prevProps: DsDynamicFormProps): void;
|
|
126
135
|
/**
|
|
@@ -155,6 +164,7 @@ export declare class DsDynamicForm extends Component<DsDynamicFormProps, DsDynam
|
|
|
155
164
|
onFormSavedLocalHandler: (blob: DataBlob) => void;
|
|
156
165
|
onFormUpdatedLocalHandler: (blob: DataBlob) => void;
|
|
157
166
|
onFormFailedLocalHandler: (err: string) => void;
|
|
167
|
+
onBlobErrorLocalHandler: (errorObject: ErrorObject) => void;
|
|
158
168
|
checkValidation: (pFieldObject: Field) => boolean;
|
|
159
169
|
dynamicInputTextChangeHandler: (eventObject: EventObject) => void;
|
|
160
170
|
dynamicInputNumericChangeHandler: (eventObject: EventObject) => void;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "datasync-dynamic-form",
|
|
3
3
|
"description": "Datasync Dynamic Form component",
|
|
4
|
-
"version": "1.3.
|
|
4
|
+
"version": "1.3.6",
|
|
5
5
|
"main": "dist/DsDynamicForm.js",
|
|
6
6
|
"module": "dist/DsDynamicForm.js",
|
|
7
7
|
"types": "dist/types/DsDynamicForm.d.ts",
|
|
@@ -17,13 +17,13 @@
|
|
|
17
17
|
"email": "pmabiala@me.com"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
|
+
"@types/react": "^18.2.75",
|
|
21
|
+
"@types/react-dom": "^18.2.25",
|
|
20
22
|
"datasync-core": "^1.0.44",
|
|
21
23
|
"multiselect-react-dropdown": "^2.0.25",
|
|
22
24
|
"react": ">=18.2.0",
|
|
23
25
|
"reactstrap": ">=8.4.1",
|
|
24
|
-
"typescript": "^5.9.2"
|
|
25
|
-
"@types/react": "^18.2.75",
|
|
26
|
-
"@types/react-dom": "^18.2.25"
|
|
26
|
+
"typescript": "^5.9.2"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"multiselect-react-dropdown": "^2.0.25",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"license": "ISC",
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"axios": "^1.7.2",
|
|
40
|
-
"datasync-blob": "^1.1.
|
|
40
|
+
"datasync-blob": "^1.1.12",
|
|
41
41
|
"datasync-pdf": "^0.0.1",
|
|
42
42
|
"runscripts": "^0.0.1"
|
|
43
43
|
}
|