datasync-dynamic-form 1.1.2 → 1.1.4
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/components/DsDynamicForm.js +3 -65
- package/package.json +3 -3
- package/dist/index.css +0 -23
|
@@ -16,7 +16,6 @@ var _datasyncCore = require("datasync-core");
|
|
|
16
16
|
var _datasyncCommonLibrary = require("datasync-common-library");
|
|
17
17
|
var _datasyncBlob = require("datasync-blob");
|
|
18
18
|
var _reactDatepicker = _interopRequireWildcard(require("react-datepicker"));
|
|
19
|
-
require("react-datepicker/dist/react-datepicker.css");
|
|
20
19
|
var _reactstrap = require("reactstrap");
|
|
21
20
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
22
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
@@ -63,12 +62,10 @@ class DsDynamicForm extends _react.Component {
|
|
|
63
62
|
// Typical usage (don't forget to compare props):
|
|
64
63
|
if (this.props.form !== prevProps.form) {
|
|
65
64
|
//Lookup field props has changed
|
|
66
|
-
if (globals.parameters.debugging) console.log("09/07:componentDidUpdate -> props.form:has changed", this.props.form);
|
|
67
65
|
this.clearForm();
|
|
68
66
|
}
|
|
69
67
|
if (this.props.data_blob !== prevProps.data_blob) {
|
|
70
68
|
//Lookup field props has changed
|
|
71
|
-
if (globals.parameters.debugging) console.log("09/07:componentDidUpdate -> props.data_blob.data_tier:has changed", this.props.data_blob.data_tier);
|
|
72
69
|
this.clearForm();
|
|
73
70
|
}
|
|
74
71
|
}
|
|
@@ -77,9 +74,6 @@ class DsDynamicForm extends _react.Component {
|
|
|
77
74
|
* Prototype : clearForm
|
|
78
75
|
*/
|
|
79
76
|
clearForm = () => {
|
|
80
|
-
console.log("28:ClearForm");
|
|
81
|
-
console.log("28:this.local_data_blob.data_tier INITIAL ->", this.local_data_blob && this.local_data_blob.data_tier ? this.local_data_blob.data_tier : "this.local_data_blob.data_tier not defined");
|
|
82
|
-
console.log("28:this.props.data_blob.data_tier ->", this.props.data_blob && this.props.data_blob.data_tier ? this.props.data_blob.data_tier : "props data_blob not set");
|
|
83
77
|
this.setState({
|
|
84
78
|
fieldError: [],
|
|
85
79
|
form: {},
|
|
@@ -88,7 +82,6 @@ class DsDynamicForm extends _react.Component {
|
|
|
88
82
|
},
|
|
89
83
|
//Clear forced
|
|
90
84
|
() => {
|
|
91
|
-
if (globals.parameters.debugging) console.log("27:DynamicForm3Tiers2 state cleansed 2:", this.state);
|
|
92
85
|
this.setState({
|
|
93
86
|
form: this.props.form,
|
|
94
87
|
fieldError: []
|
|
@@ -107,13 +100,10 @@ class DsDynamicForm extends _react.Component {
|
|
|
107
100
|
//Ensure props.foreign_keys is a json object - PMAB on 2025-04-10
|
|
108
101
|
if (this.props.foreign_keys && typeof this.props.foreign_keys !== "object") throw new Error("foreign_keys must be a json object !");
|
|
109
102
|
this.local_data_blob.data_tier = Object.assign(this.props.foreign_keys ? this.props.foreign_keys : {}, duplicate_data_tier);
|
|
110
|
-
console.log("this.local_data_blob.data_tier ->", this.local_data_blob.data_tier);
|
|
111
|
-
console.log("this.props.data_blob.data_tier ->", this.props.data_blob && this.props.data_blob.data_tier ? this.props.data_blob.data_tier : "props data_blob not set");
|
|
112
103
|
};
|
|
113
104
|
getFieldData = fieldName => {
|
|
114
105
|
/** Return data value form field object */
|
|
115
106
|
let nextFieldData = this.local_data_blob.data_tier[fieldName] ? this.local_data_blob.data_tier[fieldName] : "";
|
|
116
|
-
if (globals.parameters.debugging) console.log("getFieldData[", fieldName, "] nextFieldData->", nextFieldData);
|
|
117
107
|
return nextFieldData;
|
|
118
108
|
};
|
|
119
109
|
setFieldData = (fieldName, value) => {
|
|
@@ -121,11 +111,6 @@ class DsDynamicForm extends _react.Component {
|
|
|
121
111
|
|
|
122
112
|
//onFormChange handler return current form value to caller - PMAB on 2025-02-03
|
|
123
113
|
if (this.props.onFormChange) this.props.onFormChange(this.local_data_blob.data_tier);
|
|
124
|
-
if (globals.parameters.debugging) {
|
|
125
|
-
console.log("setFieldData[", fieldName, "] value->", value);
|
|
126
|
-
console.log("setFieldData[", fieldName, "] this.local_data_blob.data_tier ->", this.local_data_blob.data_tier);
|
|
127
|
-
console.log("setFieldData[", fieldName, "] this.data_blob ->", this.local_data_blob);
|
|
128
|
-
}
|
|
129
114
|
};
|
|
130
115
|
getSelectedFieldValues_V1 = pFieldObject => {
|
|
131
116
|
return pFieldObject.selected_values ? pFieldObject.selected_values : "";
|
|
@@ -141,7 +126,7 @@ class DsDynamicForm extends _react.Component {
|
|
|
141
126
|
//Scroll form to first erroneous field
|
|
142
127
|
(0, _datasyncCommonLibrary.WScrollTo)(pFieldObject.name);
|
|
143
128
|
} catch (e) {
|
|
144
|
-
console.
|
|
129
|
+
console.error(`Error caught on ${e}`);
|
|
145
130
|
}
|
|
146
131
|
};
|
|
147
132
|
getFieldError = pFieldObject => {
|
|
@@ -395,7 +380,6 @@ class DsDynamicForm extends _react.Component {
|
|
|
395
380
|
minutes_placeholder: "minutes",
|
|
396
381
|
required: false,
|
|
397
382
|
onChange: timeValuePack => {
|
|
398
|
-
console.log("valuepack in EventForm ==>", timeValuePack);
|
|
399
383
|
this.setState({
|
|
400
384
|
hour: timeValuePack.hour,
|
|
401
385
|
minutes: timeValuePack.minutes
|
|
@@ -436,14 +420,12 @@ class DsDynamicForm extends _react.Component {
|
|
|
436
420
|
while (iCol < this.state.form.Rows[iRow].Cols.length && canSubmit) {
|
|
437
421
|
let ii = 0;
|
|
438
422
|
while (ii < this.state.form.Rows[iRow].Cols[iCol].Fields.length && (canSubmit &= this.checkValidation(this.state.form.Rows[iRow].Cols[iCol].Fields[ii]))) {
|
|
439
|
-
if (globals.parameters.debugging) console.log(`Fields[${ii}]|${this.state.form.Rows[iRow].Cols[iCol].Fields[ii].name}| canSubmit=${canSubmit}`);
|
|
440
423
|
ii++;
|
|
441
424
|
}
|
|
442
425
|
iCol++;
|
|
443
426
|
}
|
|
444
427
|
iRow++;
|
|
445
428
|
}
|
|
446
|
-
if (globals.parameters.debugging) console.log("canSubmit:", canSubmit);
|
|
447
429
|
if (!canSubmit) {
|
|
448
430
|
let err_message = "Le formulaire comporte des erreurs !";
|
|
449
431
|
if (this.props.onFormFailed) this.props.onFormFailed(err_message);else alert(`${err_message}`);
|
|
@@ -495,10 +477,8 @@ class DsDynamicForm extends _react.Component {
|
|
|
495
477
|
let min = pFieldObject.min_length;
|
|
496
478
|
let max = pFieldObject.max_length;
|
|
497
479
|
let fieldValue = this.getFieldData(pFieldObject.name);
|
|
498
|
-
console.log("d3t3:checkValidation fieldValue->", fieldValue);
|
|
499
480
|
let errorsFieldName = `err_${fieldName}`; /** Error data displayed in dedicated error label, beside input field in Form */
|
|
500
481
|
let nextErrors = [];
|
|
501
|
-
if (globals.parameters.debugging) console.log(`d3t:min:${min} - max:${max}`);
|
|
502
482
|
|
|
503
483
|
/** Check basic field validity except combo and radio */
|
|
504
484
|
if (pFieldObject.required && fieldValue.trim().length <= 0) nextErrors.push(`obligatoire`);
|
|
@@ -519,37 +499,15 @@ class DsDynamicForm extends _react.Component {
|
|
|
519
499
|
if (!fieldValue.match(/^(\d{2}\/\d{2}\/\d{4})$/i)) nextErrors.push(`Format de date incorrect !`);
|
|
520
500
|
}
|
|
521
501
|
if (max > 0 && fieldValue.trim().length > max) nextErrors.push(`trop long, ${fieldValue.trim().length - max} caractères en trop.`);
|
|
522
|
-
/* Special validation handlers
|
|
523
|
-
if (parseInt(this.state[fieldName]) !== (this.state.v1 + this.state.v2))
|
|
524
|
-
nextErrors.push(`calcul faux !`)*/
|
|
525
|
-
|
|
526
|
-
if (globals.parameters.debugging) {
|
|
527
|
-
console.log(`d3t:-----------------`);
|
|
528
|
-
console.log(`d3t:fieldName => ${fieldName}`);
|
|
529
|
-
console.log(`d3t:value => ${fieldValue}`);
|
|
530
|
-
console.log(`errorsFieldName => ${errorsFieldName}`);
|
|
531
|
-
console.log(`nextErrors => ${nextErrors}`);
|
|
532
|
-
console.log(`nextErrors.length => ${nextErrors.length}`);
|
|
533
|
-
}
|
|
534
502
|
|
|
535
503
|
//update error field
|
|
536
|
-
if (globals.parameters.debugging) {
|
|
537
|
-
console.log("nextFieldsErrorsArray=>", nextErrors);
|
|
538
|
-
}
|
|
539
504
|
this.setFieldError(pFieldObject, nextErrors.join("/"));
|
|
540
|
-
if (globals.parameters.debugging) {
|
|
541
|
-
console.log(`new fieldError : ${this.getFieldError(pFieldObject)}`);
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
//set change flag
|
|
545
|
-
//nextState.has_changed = true
|
|
546
505
|
|
|
547
506
|
//Return validation predicate
|
|
548
507
|
return nextErrors.length === 0; //returns true if no error occurs
|
|
549
508
|
};
|
|
550
509
|
dynamicInputTextChangeHandler = eventObject => {
|
|
551
510
|
if (eventObject && eventObject.event) eventObject.event.preventDefault();
|
|
552
|
-
if (globals.parameters.debugging) console.log(`d3t:dynamicInputTextChangeHandler eventObject -> `, eventObject);
|
|
553
511
|
this.setFieldData(eventObject.fieldObject.name, eventObject.event.target.value);
|
|
554
512
|
|
|
555
513
|
//Validate field
|
|
@@ -557,13 +515,9 @@ class DsDynamicForm extends _react.Component {
|
|
|
557
515
|
};
|
|
558
516
|
dynamicInputNumericChangeHandler = eventObject => {
|
|
559
517
|
if (eventObject && eventObject.event) eventObject.event.preventDefault();
|
|
560
|
-
if (globals.parameters.debugging) console.log(`d3t:dynamicInputNumericChangeHandler ${eventObject.fieldObject.name} Input field has changed`);
|
|
561
518
|
if (eventObject.event.target.value.length == 0 || !isNaN(eventObject.event.target.value) && !isNaN(parseFloat(eventObject.event.target.value))) this.setFieldData(eventObject.fieldObject.name, eventObject.event.target.value);else {
|
|
562
|
-
if (globals.parameters.debugging) console.
|
|
519
|
+
if (globals.parameters.debugging) console.error(`Value rejected -> ${eventObject.event.target.value}`);
|
|
563
520
|
}
|
|
564
|
-
|
|
565
|
-
//Validate field
|
|
566
|
-
if (globals.parameters.debugging) console.log(`#${eventObject.fieldObject.name} => ${this.getFieldData(eventObject.fieldObject.name)}`);
|
|
567
521
|
this.checkValidation(eventObject.fieldObject);
|
|
568
522
|
};
|
|
569
523
|
convertDate = p_o_day_month_year => {
|
|
@@ -587,11 +541,6 @@ class DsDynamicForm extends _react.Component {
|
|
|
587
541
|
month: 1 + p_oDate.getMonth(),
|
|
588
542
|
year: p_oDate.getFullYear()
|
|
589
543
|
});
|
|
590
|
-
if (globals.parameters.debugging) {
|
|
591
|
-
console.log("p_oDate =>", p_oDate);
|
|
592
|
-
console.log("dateConvertedObject =>", dateConvertedObject);
|
|
593
|
-
console.log("dateConvertedObject.asString =>", dateConvertedObject.asString);
|
|
594
|
-
}
|
|
595
544
|
this.setFieldData(eventObject.fieldObject.name, dateConvertedObject.asString);
|
|
596
545
|
this.setFieldData(eventObject.fieldObject.name_day, dateConvertedObject.asDate.day);
|
|
597
546
|
this.setFieldData(eventObject.fieldObject.name_month, dateConvertedObject.asDate.month);
|
|
@@ -605,12 +554,6 @@ class DsDynamicForm extends _react.Component {
|
|
|
605
554
|
this.setFieldData(eventObject.sub_field_name, eventObject.value);
|
|
606
555
|
//update fulll time field
|
|
607
556
|
this.setFieldData(eventObject.fieldObject.name, this.getFieldData(eventObject.fieldObject.name_hour) + ":" + this.getFieldData(eventObject.fieldObject.name_min));
|
|
608
|
-
if (true) {
|
|
609
|
-
console.clear();
|
|
610
|
-
console.log(eventObject.fieldObject.name_hour, " ->", this.getFieldData(eventObject.fieldObject.name_hour));
|
|
611
|
-
console.log(eventObject.fieldObject.name_min, "->", this.getFieldData(eventObject.fieldObject.name_min));
|
|
612
|
-
console.log(eventObject.fieldObject.name, " ->", this.getFieldData(eventObject.fieldObject.name));
|
|
613
|
-
}
|
|
614
557
|
|
|
615
558
|
//Validate field
|
|
616
559
|
this.checkValidation(eventObject.fieldObject);
|
|
@@ -633,11 +576,6 @@ class DsDynamicForm extends _react.Component {
|
|
|
633
576
|
return /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, "Error ", err.message);
|
|
634
577
|
}
|
|
635
578
|
};
|
|
636
|
-
migrate_field = (pFieldObject, migrated_value) => {
|
|
637
|
-
//Set data_tier property with former form value
|
|
638
|
-
this.local_data_blob.data_tier[pFieldObject.name] = migrated_value;
|
|
639
|
-
if (globals.parameters.debugging) console.log("09/07:migrate_field -> pFieldObject.name=", pFieldObject.name);
|
|
640
|
-
};
|
|
641
579
|
_fieldRendering = (field, ii) => {
|
|
642
580
|
try {
|
|
643
581
|
//Do not display field if empty in read only mode
|
|
@@ -728,7 +666,7 @@ class DsDynamicForm extends _react.Component {
|
|
|
728
666
|
case "captcha":
|
|
729
667
|
return this._captcha_field(field);
|
|
730
668
|
default:
|
|
731
|
-
console.
|
|
669
|
+
console.error("alert incorrect field type");
|
|
732
670
|
}
|
|
733
671
|
} catch (error) {
|
|
734
672
|
console.error(`_fieldRendering raises "${error}"`);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "datasync-dynamic-form",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
4
4
|
"description": "Datasync Dynamic Form component",
|
|
5
5
|
"main": "./dist/components/DsDynamicForm",
|
|
6
6
|
"types": "./dist/components/DsDynamicForm",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"axios": "^1.7.2",
|
|
45
45
|
"datasync-blob": "^1.0.2",
|
|
46
|
-
"datasync-common-library": "^1.0.
|
|
47
|
-
"datasync-core": "^1.0.
|
|
46
|
+
"datasync-common-library": "^1.0.10",
|
|
47
|
+
"datasync-core": "^1.0.36",
|
|
48
48
|
"datasync-dynamic-form": "^1.0.27",
|
|
49
49
|
"react-datepicker": "@^4.11.0",
|
|
50
50
|
"universal-cookie": "^7.2.2"
|
package/dist/index.css
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
.tweet-btn-container{
|
|
2
|
-
margin-top: 30px;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.tweet-button{
|
|
6
|
-
display: inline-block;
|
|
7
|
-
text-decoration: none;
|
|
8
|
-
font-size: 0.97rem;
|
|
9
|
-
font-weight: bold;
|
|
10
|
-
color: #333;
|
|
11
|
-
background-color: #eee;
|
|
12
|
-
padding: 17px 35px;
|
|
13
|
-
border-radius: 7px;
|
|
14
|
-
border-block: 1px solid #ccc;
|
|
15
|
-
border-inline: 1px solid #333;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.tweet-button:hover{
|
|
19
|
-
text-decoration: none;
|
|
20
|
-
color: #fff;
|
|
21
|
-
background-color: #1a8cd8;
|
|
22
|
-
border-block-color: #1a8cd8;
|
|
23
|
-
}
|