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

package/lib/form-elements/custom-element.js

@@ -37,6 +37,7 @@ var CustomElement = /*#__PURE__*/function (_Component) {
       var props = {};
       props.name = this.props.data.field_name;
       props.defaultValue = this.props.defaultValue;
+      var labelHidden = this.props.data.labelHidden || false;
       if (this.props.mutable && this.props.data.forwardRef) {
         props.ref = this.inputField;
       }
@@ -58,9 +59,9 @@ var CustomElement = /*#__PURE__*/function (_Component) {
         data: this.props.data
       }, this.props.data.props, props)) : /*#__PURE__*/_react["default"].createElement("div", {
         className: "mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
-        className: "form-label"
-      }, this.props)), /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
+      })), /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
         data: this.props.data
       }, this.props.data.props, props))));
     }

package/lib/form-elements/index.js

@@ -30,6 +30,17 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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)); }
 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
 var FormElements = {};
+
+// Helper function to format placeholder with asterisk if the field is required and label is hidden. 
+// The function checks if the field has a required label, if the label is hidden, and if the placeholder is not empty. 
+// If all conditions are met, it appends an asterisk to the placeholder.
+function formatPlaceholder(placeholder, hasRequiredLabel, labelHidden) {
+  var result = placeholder || '';
+  if (hasRequiredLabel && labelHidden && result.trim() !== '' && !result.endsWith('*')) {
+    result += ' *';
+  }
+  return result;
+}
 var Header = /*#__PURE__*/function (_React$Component) {
   function Header() {
     (0, _classCallCheck2["default"])(this, Header);
@@ -163,8 +174,9 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
       props.type = 'text';
       props.className = 'form-control';
       props.name = this.props.data.field_name;
-      props.placeholder = this.props.data.placeholder || '';
       var labelHidden = this.props.data.labelHidden || false;
+      var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
+      props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
@@ -205,8 +217,9 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
       props.type = 'text';
       props.className = 'form-control';
       props.name = this.props.data.field_name;
-      props.placeholder = this.props.data.placeholder || '';
       var labelHidden = this.props.data.labelHidden || false;
+      var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
+      props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
@@ -245,12 +258,15 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
       props.type = 'tel';
       props.className = 'form-control';
       props.name = this.props.data.field_name;
+      var labelHidden = this.props.data.labelHidden || false;
+      var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
+      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.
       if (this.props.data.placeholder !== undefined && this.props.data.placeholder !== null) {
-        props.placeholder = this.props.data.placeholder;
+        placeholder = this.props.data.placeholder;
       } else {
-        props.placeholder = '+12345678900';
+        placeholder = '+12345678900';
       }
-      var labelHidden = this.props.data.labelHidden || false;
+      props.placeholder = formatPlaceholder(placeholder, hasRequiredLabel, labelHidden);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
@@ -289,8 +305,9 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
       props.type = 'number';
       props.className = 'form-control';
       props.name = this.props.data.field_name;
-      props.placeholder = this.props.data.placeholder || '';
       var labelHidden = this.props.data.labelHidden || false;
+      var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
+      props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
@@ -328,8 +345,9 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
       var props = {};
       props.className = 'form-control';
       props.name = this.props.data.field_name;
-      props.placeholder = this.props.data.placeholder || '';
       var labelHidden = this.props.data.labelHidden || false;
+      var hasRequiredLabel = this.props.data.hasOwnProperty('required') && this.props.data.required === true && !this.props.read_only;
+      props.placeholder = formatPlaceholder(this.props.data.placeholder, hasRequiredLabel, labelHidden);
       if (this.props.read_only) {
         props.disabled = 'disabled';
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goldenpine/react-form-builder2",
-  "version": "0.20.3-build.28",
+  "version": "0.20.3-build.29",
   "description": "A complete form builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",