@goldenpine/react-form-builder2 0.20.3-build.26 → 0.20.3-build.28

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.
Files changed (12) hide show
  1. package/dist/845.app.js +1 -1
  2. package/dist/app.css +1 -1
  3. package/dist/app.css.map +1 -1
  4. package/dist/app.js +1 -1
  5. package/lib/form-elements/date-picker.js +2 -1
  6. package/lib/form-elements/index.js +73 -16
  7. package/lib/form-elements-edit.js +35 -3
  8. package/lib/language-provider/locales/en-us.json +2 -0
  9. package/lib/language-provider/locales/fa-ir.json +2 -0
  10. package/lib/language-provider/locales/it-it.json +3 -1
  11. package/lib/language-provider/locales/vi-vn.json +2 -0
  12. package/package.json +1 -1
package/lib/form-elements/date-picker.js CHANGED
@@ -65,6 +65,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
65
65
  props.type = 'date';
66
66
  props.className = 'form-control';
67
67
  props.name = this.props.data.field_name;
68
+ var labelHidden = this.props.data.labelHidden || false;
68
69
  var readOnly = this.props.data.readOnly || this.props.read_only;
69
70
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
70
71
  var placeholderText = this.state.formatMask.toLowerCase();
@@ -81,7 +82,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
81
82
  style: _objectSpread({}, this.props.style)
82
83
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
83
84
  className: "mb-3"
84
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", null, readOnly && /*#__PURE__*/_react["default"].createElement("input", {
85
+ }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", null, readOnly && /*#__PURE__*/_react["default"].createElement("input", {
85
86
  type: "text",
86
87
  name: props.name,
87
88
  ref: props.ref,
package/lib/form-elements/index.js CHANGED
@@ -163,6 +163,8 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
163
163
  props.type = 'text';
164
164
  props.className = 'form-control';
165
165
  props.name = this.props.data.field_name;
166
+ props.placeholder = this.props.data.placeholder || '';
167
+ var labelHidden = this.props.data.labelHidden || false;
166
168
  if (this.props.mutable) {
167
169
  props.defaultValue = this.props.defaultValue;
168
170
  props.ref = this.inputField;
@@ -179,7 +181,11 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
179
181
  className: baseClasses
180
182
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
181
183
  className: "mb-3"
182
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
184
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
185
+ className: ["form-label",
186
+ // In app, it's leveraged to identify element labels. Additionally removed !important of its specificity in scss to make it work with labelHidden.
187
+ this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
188
+ })), /*#__PURE__*/_react["default"].createElement("input", props)));
183
189
  }
184
190
  }]);
185
191
  }(_react["default"].Component);
@@ -199,6 +205,8 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
199
205
  props.type = 'text';
200
206
  props.className = 'form-control';
201
207
  props.name = this.props.data.field_name;
208
+ props.placeholder = this.props.data.placeholder || '';
209
+ var labelHidden = this.props.data.labelHidden || false;
202
210
  if (this.props.mutable) {
203
211
  props.defaultValue = this.props.defaultValue;
204
212
  props.ref = this.inputField;
@@ -215,7 +223,9 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
215
223
  className: baseClasses
216
224
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
217
225
  className: "mb-3"
218
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
226
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
227
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
228
+ })), /*#__PURE__*/_react["default"].createElement("input", props)));
219
229
  }
220
230
  }]);
221
231
  }(_react["default"].Component);
@@ -235,6 +245,12 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
235
245
  props.type = 'tel';
236
246
  props.className = 'form-control';
237
247
  props.name = this.props.data.field_name;
248
+ if (this.props.data.placeholder !== undefined && this.props.data.placeholder !== null) {
249
+ props.placeholder = this.props.data.placeholder;
250
+ } else {
251
+ props.placeholder = '+12345678900';
252
+ }
253
+ var labelHidden = this.props.data.labelHidden || false;
238
254
  if (this.props.mutable) {
239
255
  props.defaultValue = this.props.defaultValue;
240
256
  props.ref = this.inputField;
@@ -251,7 +267,9 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
251
267
  className: baseClasses
252
268
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
253
269
  className: "mb-3"
254
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
270
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
271
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
272
+ })), /*#__PURE__*/_react["default"].createElement("input", props)));
255
273
  }
256
274
  }]);
257
275
  }(_react["default"].Component);
@@ -271,6 +289,8 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
271
289
  props.type = 'number';
272
290
  props.className = 'form-control';
273
291
  props.name = this.props.data.field_name;
292
+ props.placeholder = this.props.data.placeholder || '';
293
+ var labelHidden = this.props.data.labelHidden || false;
274
294
  if (this.props.mutable) {
275
295
  props.defaultValue = this.props.defaultValue;
276
296
  props.ref = this.inputField;
@@ -287,7 +307,9 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
287
307
  className: baseClasses
288
308
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
289
309
  className: "mb-3"
290
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
310
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
311
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
312
+ })), /*#__PURE__*/_react["default"].createElement("input", props)));
291
313
  }
292
314
  }]);
293
315
  }(_react["default"].Component);
@@ -306,6 +328,8 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
306
328
  var props = {};
307
329
  props.className = 'form-control';
308
330
  props.name = this.props.data.field_name;
331
+ props.placeholder = this.props.data.placeholder || '';
332
+ var labelHidden = this.props.data.labelHidden || false;
309
333
  if (this.props.read_only) {
310
334
  props.disabled = 'disabled';
311
335
  }
@@ -322,7 +346,9 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
322
346
  className: baseClasses
323
347
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
324
348
  className: "mb-3"
325
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("textarea", props)));
349
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
350
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
351
+ })), /*#__PURE__*/_react["default"].createElement("textarea", props)));
326
352
  }
327
353
  }]);
328
354
  }(_react["default"].Component);
@@ -341,6 +367,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component0) {
341
367
  var props = {};
342
368
  props.className = 'form-control';
343
369
  props.name = this.props.data.field_name;
370
+ var labelHidden = this.props.data.labelHidden || false;
344
371
  if (this.props.mutable) {
345
372
  props.defaultValue = this.props.defaultValue;
346
373
  props.ref = this.inputField;
@@ -357,7 +384,9 @@ var Dropdown = /*#__PURE__*/function (_React$Component0) {
357
384
  className: baseClasses
358
385
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
359
386
  className: "mb-3"
360
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("select", props, this.props.data.options.map(function (option) {
387
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
388
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
389
+ })), /*#__PURE__*/_react["default"].createElement("select", props, this.props.data.options.map(function (option) {
361
390
  var this_key = "preview_".concat(option.key);
362
391
  return /*#__PURE__*/_react["default"].createElement("option", {
363
392
  value: option.value,
@@ -397,6 +426,7 @@ var Signature = /*#__PURE__*/function (_React$Component1) {
397
426
  var props = {};
398
427
  props.type = 'hidden';
399
428
  props.name = this.props.data.field_name;
429
+ var labelHidden = this.props.data.labelHidden || false;
400
430
  if (this.props.mutable) {
401
431
  props.defaultValue = defaultValue;
402
432
  props.ref = this.inputField;
@@ -422,7 +452,9 @@ var Signature = /*#__PURE__*/function (_React$Component1) {
422
452
  className: baseClasses
423
453
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
424
454
  className: "mb-3"
425
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
455
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
456
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
457
+ })), this.props.read_only === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
426
458
  src: sourceDataURL
427
459
  }) : /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], pad_props), canClear && /*#__PURE__*/_react["default"].createElement("i", {
428
460
  className: "fas fa-times clear-signature",
@@ -481,6 +513,7 @@ var Tags = /*#__PURE__*/function (_React$Component10) {
481
513
  props.isMulti = true;
482
514
  props.name = this.props.data.field_name;
483
515
  props.onChange = this.handleChange;
516
+ var labelHidden = this.props.data.labelHidden || false;
484
517
  props.options = options;
485
518
  if (!this.props.mutable) {
486
519
  props.value = options[0].text;
@@ -499,7 +532,9 @@ var Tags = /*#__PURE__*/function (_React$Component10) {
499
532
  className: baseClasses
500
533
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
501
534
  className: "mb-3"
502
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)));
535
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
536
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
537
+ })), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)));
503
538
  }
504
539
  }]);
505
540
  }(_react["default"].Component);
@@ -517,6 +552,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
517
552
  value: function render() {
518
553
  var _this0 = this;
519
554
  var self = this;
555
+ var labelHidden = this.props.data.labelHidden || false;
520
556
  var classNames = 'form-check';
521
557
  if (this.props.data.inline) {
522
558
  classNames += ' form-check-inline';
@@ -530,7 +566,9 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
530
566
  className: baseClasses
531
567
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
532
568
  className: "mb-3"
533
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
569
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
570
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
571
+ })), this.props.data.options.map(function (option) {
534
572
  var this_key = "preview_".concat(option.key);
535
573
  var props = {};
536
574
  props.name = "option_".concat(option.key);
@@ -576,6 +614,7 @@ var RadioButtons = /*#__PURE__*/function (_React$Component12) {
576
614
  value: function render() {
577
615
  var _this10 = this;
578
616
  var self = this;
617
+ var labelHidden = this.props.data.labelHidden || false;
579
618
  var classNames = 'form-check';
580
619
  if (this.props.data.inline) {
581
620
  classNames += ' form-check-inline';
@@ -589,7 +628,9 @@ var RadioButtons = /*#__PURE__*/function (_React$Component12) {
589
628
  className: baseClasses
590
629
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
591
630
  className: "mb-3"
592
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
631
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
632
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
633
+ })), this.props.data.options.map(function (option) {
593
634
  var this_key = "preview_".concat(option.key);
594
635
  var props = {};
595
636
  props.name = self.props.data.field_name;
@@ -666,6 +707,7 @@ var Rating = /*#__PURE__*/function (_React$Component14) {
666
707
  value: function render() {
667
708
  var props = {};
668
709
  props.name = this.props.data.field_name;
710
+ var labelHidden = this.props.data.labelHidden || false;
669
711
  props.ratingAmount = 5;
670
712
  if (this.props.mutable) {
671
713
  props.rating = this.props.defaultValue !== undefined ? parseFloat(this.props.defaultValue, 10) : 0;
@@ -682,7 +724,9 @@ var Rating = /*#__PURE__*/function (_React$Component14) {
682
724
  className: baseClasses
683
725
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
684
726
  className: "mb-3"
685
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props)));
727
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
728
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
729
+ })), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props)));
686
730
  }
687
731
  }]);
688
732
  }(_react["default"].Component);
@@ -810,6 +854,7 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
810
854
  };
811
855
  var baseClasses = 'SortableItem rfb-item';
812
856
  var name = this.props.data.field_name;
857
+ var labelHidden = this.props.data.labelHidden || false;
813
858
  var fileInputStyle = this.state.img ? {
814
859
  display: 'none'
815
860
  } : null;
@@ -830,7 +875,9 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
830
875
  className: baseClasses
831
876
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
832
877
  className: "mb-3"
833
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
878
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
879
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
880
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
834
881
  style: imageStyle,
835
882
  src: sourceDataURL
836
883
  // {...this.getImageSizeProps(this.props.data)} // move width and height from element style to inline style of image, to make it work the same way as 'Image' element.
@@ -878,7 +925,9 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
878
925
  className: baseClasses
879
926
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
880
927
  className: "mb-3"
881
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
928
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
929
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
930
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
882
931
  style: imageStyle,
883
932
  src: sourceDataURL
884
933
  })) : /*#__PURE__*/_react["default"].createElement("div", {
@@ -999,6 +1048,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
999
1048
  value: function render() {
1000
1049
  var baseClasses = 'SortableItem rfb-item';
1001
1050
  var name = this.props.data.field_name;
1051
+ var labelHidden = this.props.data.labelHidden || false;
1002
1052
  var fileInputStyle = this.state.fileUpload ? {
1003
1053
  display: 'none'
1004
1054
  } : null;
@@ -1011,7 +1061,9 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
1011
1061
  className: baseClasses
1012
1062
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1013
1063
  className: "mb-3"
1014
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
1064
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
1065
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
1066
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
1015
1067
  className: "btn btn-outline-secondary",
1016
1068
  onClick: this.saveFile
1017
1069
  }, /*#__PURE__*/_react["default"].createElement("i", {
@@ -1065,7 +1117,9 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
1065
1117
  className: baseClasses
1066
1118
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1067
1119
  className: "mb-3"
1068
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
1120
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
1121
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
1122
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
1069
1123
  className: "btn btn-outline-secondary",
1070
1124
  onClick: this.saveFile
1071
1125
  }, /*#__PURE__*/_react["default"].createElement("i", {
@@ -1137,6 +1191,7 @@ var Range = /*#__PURE__*/function (_React$Component19) {
1137
1191
  value: function render() {
1138
1192
  var props = {};
1139
1193
  var name = this.props.data.field_name;
1194
+ var labelHidden = this.props.data.labelHidden || false;
1140
1195
  props.type = 'range';
1141
1196
  props.list = "tickmarks_".concat(name);
1142
1197
  props.min = Number(this.props.data.min_value);
@@ -1187,7 +1242,9 @@ var Range = /*#__PURE__*/function (_React$Component19) {
1187
1242
  className: baseClasses
1188
1243
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1189
1244
  className: "mb-3"
1190
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1245
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
1246
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
1247
+ })), /*#__PURE__*/_react["default"].createElement("div", {
1191
1248
  className: "range"
1192
1249
  }, /*#__PURE__*/_react["default"].createElement("div", {
1193
1250
  className: "clearfix"
package/lib/form-elements-edit.js CHANGED
@@ -173,6 +173,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
173
173
  canHaveOptionValue = _this$props$element.canHaveOptionValue;
174
174
  var canHaveImageSize = this.state.element.element === 'Image' || this.state.element.element === 'Camera';
175
175
  var canHaveUploadLayout = this.state.element.element === 'Camera' || this.state.element.element === 'FileUpload';
176
+ var canHavePlaceholder = this.props.element.element === 'TextInput' || this.props.element.element === 'TextArea' || this.props.element.element === 'EmailInput' || this.props.element.element === 'NumberInput' || this.props.element.element === 'PhoneNumber';
176
177
  var this_files = this.props.files.length ? this.props.files : [];
177
178
  if (this_files.length < 1 || this_files.length > 0 && this_files[0].id !== '') {
178
179
  this_files.unshift({
@@ -235,9 +236,26 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
235
236
  onChange: this.editElementProp.bind(this, 'href', 'value')
236
237
  })), this.props.element.hasOwnProperty('label') && /*#__PURE__*/_react["default"].createElement("div", {
237
238
  className: "mb-3"
238
- }, /*#__PURE__*/_react["default"].createElement("label", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
239
+ }, /*#__PURE__*/_react["default"].createElement("div", {
240
+ className: "d-flex justify-content-between align-items-center"
241
+ }, /*#__PURE__*/_react["default"].createElement("label", {
242
+ className: "mb-0"
243
+ }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
239
244
  id: "display-label"
240
- })), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
245
+ })), /*#__PURE__*/_react["default"].createElement("div", {
246
+ className: "form-check m-0"
247
+ }, /*#__PURE__*/_react["default"].createElement("input", {
248
+ id: "label-hidden",
249
+ className: "form-check-input",
250
+ type: "checkbox",
251
+ checked: this.props.element.labelHidden || false,
252
+ onChange: this.editElementProp.bind(this, 'labelHidden', 'checked')
253
+ }), /*#__PURE__*/_react["default"].createElement("label", {
254
+ className: "form-check-label",
255
+ htmlFor: "label-hidden"
256
+ }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
257
+ id: "label-hidden"
258
+ })))), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
241
259
  toolbar: toolbar,
242
260
  defaultEditorState: editorState,
243
261
  onBlur: this.updateElement.bind(this),
@@ -359,7 +377,21 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
359
377
  htmlFor: "display-horizontal"
360
378
  }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
361
379
  id: "display-horizontal"
362
- })))), this.props.element.hasOwnProperty('src') && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
380
+ })))), canHavePlaceholder && /*#__PURE__*/_react["default"].createElement("div", {
381
+ className: "mb-3"
382
+ }, /*#__PURE__*/_react["default"].createElement("label", {
383
+ className: "control-label",
384
+ htmlFor: "placeholderInput"
385
+ }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
386
+ id: "placeholder"
387
+ })), /*#__PURE__*/_react["default"].createElement("input", {
388
+ id: "placeholderInput",
389
+ type: "text",
390
+ className: "form-control",
391
+ defaultValue: this.props.element.placeholder,
392
+ onBlur: this.updateElement.bind(this),
393
+ onChange: this.editElementProp.bind(this, 'placeholder', 'value')
394
+ })), this.props.element.hasOwnProperty('src') && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
363
395
  className: "mb-3"
364
396
  }, /*#__PURE__*/_react["default"].createElement("label", {
365
397
  className: "control-label",
package/lib/language-provider/locales/en-us.json CHANGED
@@ -53,6 +53,8 @@
53
53
  "place-holder-display-message-under-file-icon" : "Select a file from your computer or device.",
54
54
  "display-label-after-file-clear-icon" : "Display label after file clear icon",
55
55
  "place-holder-display-label-after-file-clear-icon" : "Clear File",
56
+ "placeholder" : "Hint text (shown inside the input field)",
57
+ "label-hidden" : "Hide label",
56
58
 
57
59
  "options" : "Options",
58
60
  "value" : "Value",
package/lib/language-provider/locales/fa-ir.json CHANGED
@@ -53,6 +53,8 @@
53
53
  "place-holder-display-message-under-file-icon" : "یک فایل را از رایانه یا دستگاه خود انتخاب کنید.",
54
54
  "display-label-after-file-clear-icon" : "نمایش برچسب پس از آیکون حذف فایل",
55
55
  "place-holder-display-label-after-file-clear-icon" : "حذف فایل",
56
+ "placeholder": "متن راهنما (در داخل فیلد ورودی نمایش داده می‌شود)",
57
+ "label-hidden": "پنهان کردن برچسب",
56
58
 
57
59
  "options": "گزینه‌ها",
58
60
  "value": "مقدار",
package/lib/language-provider/locales/it-it.json CHANGED
@@ -53,7 +53,9 @@
53
53
  "place-holder-display-message-under-file-icon" : "Seleziona un file dal tuo computer o dispositivo.",
54
54
  "display-label-after-file-clear-icon" : "Mostra etichetta dopo l'icona di cancellazione del file",
55
55
  "place-holder-display-label-after-file-clear-icon" : "Cancella file",
56
-
56
+ "placeholder": "Testo di suggerimento (mostrato all'interno del campo di input)",
57
+ "label-hidden": "Nascondi etichetta",
58
+
57
59
  "options" : "Opzioni",
58
60
  "value" : "Valore",
59
61
  "correct" : "Corretto",
package/lib/language-provider/locales/vi-vn.json CHANGED
@@ -53,6 +53,8 @@
53
53
  "place-holder-display-message-under-file-icon" : "Chọn một tập tin từ máy tính hoặc thiết bị của bạn.",
54
54
  "display-label-after-file-clear-icon" : "Hiển thị nhãn sau biểu tượng xóa tập tin",
55
55
  "place-holder-display-label-after-file-clear-icon" : "Xóa tập tin",
56
+ "placeholder": "Gợi ý (hiển thị bên trong ô nhập)",
57
+ "label-hidden": "Ẩn nhãn",
56
58
 
57
59
  "options" : "Tùy chọn",
58
60
  "value" : "Giá trị",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@goldenpine/react-form-builder2",
3
- "version": "0.20.3-build.26",
3
+ "version": "0.20.3-build.28",
4
4
  "description": "A complete form builder for react.",
5
5
  "main": "lib/index.js",
6
6
  "types": "types/index.d.ts",