@goldenpine/react-form-builder2 0.20.3-build.27 → 0.20.3-build.29

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.
@@ -37,6 +37,7 @@ var CustomElement = /*#__PURE__*/function (_Component) {
37
37
  var props = {};
38
38
  props.name = this.props.data.field_name;
39
39
  props.defaultValue = this.props.defaultValue;
40
+ var labelHidden = this.props.data.labelHidden || false;
40
41
  if (this.props.mutable && this.props.data.forwardRef) {
41
42
  props.ref = this.inputField;
42
43
  }
@@ -58,9 +59,9 @@ var CustomElement = /*#__PURE__*/function (_Component) {
58
59
  data: this.props.data
59
60
  }, this.props.data.props, props)) : /*#__PURE__*/_react["default"].createElement("div", {
60
61
  className: "mb-3"
61
- }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
62
- className: "form-label"
63
- }, this.props)), /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
62
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
63
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
64
+ })), /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
64
65
  data: this.props.data
65
66
  }, this.props.data.props, props))));
66
67
  }
@@ -30,6 +30,17 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
30
30
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
31
31
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable quote-props */ // eslint-disable-next-line max-classes-per-file
32
32
  var FormElements = {};
33
+
34
+ // Helper function to format placeholder with asterisk if the field is required and label is hidden.
35
+ // The function checks if the field has a required label, if the label is hidden, and if the placeholder is not empty.
36
+ // If all conditions are met, it appends an asterisk to the placeholder.
37
+ function formatPlaceholder(placeholder, hasRequiredLabel, labelHidden) {
38
+ var result = placeholder || '';
39
+ if (hasRequiredLabel && labelHidden && result.trim() !== '' && !result.endsWith('*')) {
40
+ result += ' *';
41
+ }
42
+ return result;
43
+ }
33
44
  var Header = /*#__PURE__*/function (_React$Component) {
34
45
  function Header() {
35
46
  (0, _classCallCheck2["default"])(this, Header);
@@ -163,8 +174,9 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
163
174
  props.type = 'text';
164
175
  props.className = 'form-control';
165
176
  props.name = this.props.data.field_name;
166
- props.placeholder = this.props.data.placeholder || '';
167
177
  var labelHidden = this.props.data.labelHidden || false;
178
+ var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
179
+ props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
168
180
  if (this.props.mutable) {
169
181
  props.defaultValue = this.props.defaultValue;
170
182
  props.ref = this.inputField;
@@ -181,7 +193,11 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
181
193
  className: baseClasses
182
194
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
183
195
  className: "mb-3"
184
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
196
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
197
+ className: ["form-label",
198
+ // In app, it's leveraged to identify element labels. Additionally removed !important of its specificity in scss to make it work with labelHidden.
199
+ this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
200
+ })), /*#__PURE__*/_react["default"].createElement("input", props)));
185
201
  }
186
202
  }]);
187
203
  }(_react["default"].Component);
@@ -201,8 +217,9 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
201
217
  props.type = 'text';
202
218
  props.className = 'form-control';
203
219
  props.name = this.props.data.field_name;
204
- props.placeholder = this.props.data.placeholder || '';
205
220
  var labelHidden = this.props.data.labelHidden || false;
221
+ var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
222
+ props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
206
223
  if (this.props.mutable) {
207
224
  props.defaultValue = this.props.defaultValue;
208
225
  props.ref = this.inputField;
@@ -219,7 +236,9 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
219
236
  className: baseClasses
220
237
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
221
238
  className: "mb-3"
222
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
239
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
240
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
241
+ })), /*#__PURE__*/_react["default"].createElement("input", props)));
223
242
  }
224
243
  }]);
225
244
  }(_react["default"].Component);
@@ -239,12 +258,15 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
239
258
  props.type = 'tel';
240
259
  props.className = 'form-control';
241
260
  props.name = this.props.data.field_name;
261
+ var labelHidden = this.props.data.labelHidden || false;
262
+ var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
263
+ var placeholder; // For phone number input, if placeholder is not set, we will set a default placeholder with an asterisk if it's required, to give users a hint about the expected format and the requirement. The default placeholder is "+12345678900" which is in E.164 format without spaces or dashes, as it's the most widely accepted format for international phone numbers and works well with the pattern validation we have in place. Merchants can customize this placeholder or even disable it by leaving it blank in the form builder.
242
264
  if (this.props.data.placeholder !== undefined && this.props.data.placeholder !== null) {
243
- props.placeholder = this.props.data.placeholder;
265
+ placeholder = this.props.data.placeholder;
244
266
  } else {
245
- props.placeholder = '+12345678900';
267
+ placeholder = '+12345678900';
246
268
  }
247
- var labelHidden = this.props.data.labelHidden || false;
269
+ props.placeholder = formatPlaceholder(placeholder, hasRequiredLabel, labelHidden);
248
270
  if (this.props.mutable) {
249
271
  props.defaultValue = this.props.defaultValue;
250
272
  props.ref = this.inputField;
@@ -261,7 +283,9 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
261
283
  className: baseClasses
262
284
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
263
285
  className: "mb-3"
264
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
286
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
287
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
288
+ })), /*#__PURE__*/_react["default"].createElement("input", props)));
265
289
  }
266
290
  }]);
267
291
  }(_react["default"].Component);
@@ -281,8 +305,9 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
281
305
  props.type = 'number';
282
306
  props.className = 'form-control';
283
307
  props.name = this.props.data.field_name;
284
- props.placeholder = this.props.data.placeholder || '';
285
308
  var labelHidden = this.props.data.labelHidden || false;
309
+ var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
310
+ props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
286
311
  if (this.props.mutable) {
287
312
  props.defaultValue = this.props.defaultValue;
288
313
  props.ref = this.inputField;
@@ -299,7 +324,9 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
299
324
  className: baseClasses
300
325
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
301
326
  className: "mb-3"
302
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
327
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
328
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
329
+ })), /*#__PURE__*/_react["default"].createElement("input", props)));
303
330
  }
304
331
  }]);
305
332
  }(_react["default"].Component);
@@ -318,8 +345,9 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
318
345
  var props = {};
319
346
  props.className = 'form-control';
320
347
  props.name = this.props.data.field_name;
321
- props.placeholder = this.props.data.placeholder || '';
322
348
  var labelHidden = this.props.data.labelHidden || false;
349
+ var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
350
+ props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
323
351
  if (this.props.read_only) {
324
352
  props.disabled = 'disabled';
325
353
  }
@@ -336,7 +364,9 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
336
364
  className: baseClasses
337
365
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
338
366
  className: "mb-3"
339
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("textarea", props)));
367
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
368
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
369
+ })), /*#__PURE__*/_react["default"].createElement("textarea", props)));
340
370
  }
341
371
  }]);
342
372
  }(_react["default"].Component);
@@ -372,7 +402,9 @@ var Dropdown = /*#__PURE__*/function (_React$Component0) {
372
402
  className: baseClasses
373
403
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
374
404
  className: "mb-3"
375
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("select", props, this.props.data.options.map(function (option) {
405
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
406
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
407
+ })), /*#__PURE__*/_react["default"].createElement("select", props, this.props.data.options.map(function (option) {
376
408
  var this_key = "preview_".concat(option.key);
377
409
  return /*#__PURE__*/_react["default"].createElement("option", {
378
410
  value: option.value,
@@ -438,7 +470,9 @@ var Signature = /*#__PURE__*/function (_React$Component1) {
438
470
  className: baseClasses
439
471
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
440
472
  className: "mb-3"
441
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
473
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
474
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
475
+ })), this.props.read_only === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
442
476
  src: sourceDataURL
443
477
  }) : /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], pad_props), canClear && /*#__PURE__*/_react["default"].createElement("i", {
444
478
  className: "fas fa-times clear-signature",
@@ -516,7 +550,9 @@ var Tags = /*#__PURE__*/function (_React$Component10) {
516
550
  className: baseClasses
517
551
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
518
552
  className: "mb-3"
519
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)));
553
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
554
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
555
+ })), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)));
520
556
  }
521
557
  }]);
522
558
  }(_react["default"].Component);
@@ -548,7 +584,9 @@ var Checkboxes = /*#__PURE__*/function (_React$Component11) {
548
584
  className: baseClasses
549
585
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
550
586
  className: "mb-3"
551
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
587
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
588
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
589
+ })), this.props.data.options.map(function (option) {
552
590
  var this_key = "preview_".concat(option.key);
553
591
  var props = {};
554
592
  props.name = "option_".concat(option.key);
@@ -608,7 +646,9 @@ var RadioButtons = /*#__PURE__*/function (_React$Component12) {
608
646
  className: baseClasses
609
647
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
610
648
  className: "mb-3"
611
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
649
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
650
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
651
+ })), this.props.data.options.map(function (option) {
612
652
  var this_key = "preview_".concat(option.key);
613
653
  var props = {};
614
654
  props.name = self.props.data.field_name;
@@ -702,7 +742,9 @@ var Rating = /*#__PURE__*/function (_React$Component14) {
702
742
  className: baseClasses
703
743
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
704
744
  className: "mb-3"
705
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props)));
745
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
746
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
747
+ })), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props)));
706
748
  }
707
749
  }]);
708
750
  }(_react["default"].Component);
@@ -851,7 +893,9 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
851
893
  className: baseClasses
852
894
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
853
895
  className: "mb-3"
854
- }, !labelHidden && /*#__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", {
896
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
897
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
898
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
855
899
  style: imageStyle,
856
900
  src: sourceDataURL
857
901
  // {...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.
@@ -899,7 +943,9 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
899
943
  className: baseClasses
900
944
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
901
945
  className: "mb-3"
902
- }, !labelHidden && /*#__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", {
946
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
947
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
948
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
903
949
  style: imageStyle,
904
950
  src: sourceDataURL
905
951
  })) : /*#__PURE__*/_react["default"].createElement("div", {
@@ -1033,7 +1079,9 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
1033
1079
  className: baseClasses
1034
1080
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1035
1081
  className: "mb-3"
1036
- }, !labelHidden && /*#__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", {
1082
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
1083
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
1084
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
1037
1085
  className: "btn btn-outline-secondary",
1038
1086
  onClick: this.saveFile
1039
1087
  }, /*#__PURE__*/_react["default"].createElement("i", {
@@ -1087,7 +1135,9 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
1087
1135
  className: baseClasses
1088
1136
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1089
1137
  className: "mb-3"
1090
- }, !labelHidden && /*#__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", {
1138
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
1139
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
1140
+ })), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
1091
1141
  className: "btn btn-outline-secondary",
1092
1142
  onClick: this.saveFile
1093
1143
  }, /*#__PURE__*/_react["default"].createElement("i", {
@@ -1210,7 +1260,9 @@ var Range = /*#__PURE__*/function (_React$Component19) {
1210
1260
  className: baseClasses
1211
1261
  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1212
1262
  className: "mb-3"
1213
- }, !labelHidden && /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
1263
+ }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
1264
+ className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
1265
+ })), /*#__PURE__*/_react["default"].createElement("div", {
1214
1266
  className: "range"
1215
1267
  }, /*#__PURE__*/_react["default"].createElement("div", {
1216
1268
  className: "clearfix"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@goldenpine/react-form-builder2",
3
- "version": "0.20.3-build.27",
3
+ "version": "0.20.3-build.29",
4
4
  "description": "A complete form builder for react.",
5
5
  "main": "lib/index.js",
6
6
  "types": "types/index.d.ts",