@goldenpine/react-form-builder2 0.20.3-build.1 → 0.20.3-build.10

package/lib/form-elements/index.js

@@ -8,13 +8,12 @@ exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _isomorphicFetch = _interopRequireDefault(require("isomorphic-fetch"));
 var _fileSaver = require("file-saver");
 var _react = _interopRequireDefault(require("react"));
@@ -26,19 +25,18 @@ var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _componentHeader = _interopRequireDefault(require("./component-header"));
 var _componentLabel = _interopRequireDefault(require("./component-label"));
 var _myxss = _interopRequireDefault(require("./myxss"));
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable quote-props */ // eslint-disable-next-line max-classes-per-file
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 = {};
 var Header = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Header, _React$Component);
-  var _super = _createSuper(Header);
   function Header() {
     (0, _classCallCheck2["default"])(this, Header);
-    return _super.apply(this, arguments);
+    return _callSuper(this, Header, arguments);
   }
-  (0, _createClass2["default"])(Header, [{
+  (0, _inherits2["default"])(Header, _React$Component);
+  return (0, _createClass2["default"])(Header, [{
     key: "render",
     value: function render() {
       // const headerClasses = `dynamic-input ${this.props.data.element}-input`;
@@ -64,16 +62,14 @@ var Header = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-  return Header;
 }(_react["default"].Component);
 var Paragraph = /*#__PURE__*/function (_React$Component2) {
-  (0, _inherits2["default"])(Paragraph, _React$Component2);
-  var _super2 = _createSuper(Paragraph);
   function Paragraph() {
     (0, _classCallCheck2["default"])(this, Paragraph);
-    return _super2.apply(this, arguments);
+    return _callSuper(this, Paragraph, arguments);
   }
-  (0, _createClass2["default"])(Paragraph, [{
+  (0, _inherits2["default"])(Paragraph, _React$Component2);
+  return (0, _createClass2["default"])(Paragraph, [{
     key: "render",
     value: function render() {
       var classNames = 'static';
@@ -98,16 +94,14 @@ var Paragraph = /*#__PURE__*/function (_React$Component2) {
       }));
     }
   }]);
-  return Paragraph;
 }(_react["default"].Component);
 var Label = /*#__PURE__*/function (_React$Component3) {
-  (0, _inherits2["default"])(Label, _React$Component3);
-  var _super3 = _createSuper(Label);
   function Label() {
     (0, _classCallCheck2["default"])(this, Label);
-    return _super3.apply(this, arguments);
+    return _callSuper(this, Label, arguments);
   }
-  (0, _createClass2["default"])(Label, [{
+  (0, _inherits2["default"])(Label, _React$Component3);
+  return (0, _createClass2["default"])(Label, [{
     key: "render",
     value: function render() {
       var classNames = 'static';
@@ -132,16 +126,14 @@ var Label = /*#__PURE__*/function (_React$Component3) {
       }));
     }
   }]);
-  return Label;
 }(_react["default"].Component);
 var LineBreak = /*#__PURE__*/function (_React$Component4) {
-  (0, _inherits2["default"])(LineBreak, _React$Component4);
-  var _super4 = _createSuper(LineBreak);
   function LineBreak() {
     (0, _classCallCheck2["default"])(this, LineBreak);
-    return _super4.apply(this, arguments);
+    return _callSuper(this, LineBreak, arguments);
   }
-  (0, _createClass2["default"])(LineBreak, [{
+  (0, _inherits2["default"])(LineBreak, _React$Component4);
+  return (0, _createClass2["default"])(LineBreak, [{
     key: "render",
     value: function render() {
       var baseClasses = 'SortableItem rfb-item';
@@ -154,19 +146,17 @@ var LineBreak = /*#__PURE__*/function (_React$Component4) {
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("hr", null));
     }
   }]);
-  return LineBreak;
 }(_react["default"].Component);
 var TextInput = /*#__PURE__*/function (_React$Component5) {
-  (0, _inherits2["default"])(TextInput, _React$Component5);
-  var _super5 = _createSuper(TextInput);
   function TextInput(props) {
     var _this;
     (0, _classCallCheck2["default"])(this, TextInput);
-    _this = _super5.call(this, props);
+    _this = _callSuper(this, TextInput, [props]);
     _this.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
-  (0, _createClass2["default"])(TextInput, [{
+  (0, _inherits2["default"])(TextInput, _React$Component5);
+  return (0, _createClass2["default"])(TextInput, [{
     key: "render",
     value: function render() {
       var props = {};
@@ -192,19 +182,17 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
-  return TextInput;
 }(_react["default"].Component);
 var EmailInput = /*#__PURE__*/function (_React$Component6) {
-  (0, _inherits2["default"])(EmailInput, _React$Component6);
-  var _super6 = _createSuper(EmailInput);
   function EmailInput(props) {
     var _this2;
     (0, _classCallCheck2["default"])(this, EmailInput);
-    _this2 = _super6.call(this, props);
+    _this2 = _callSuper(this, EmailInput, [props]);
     _this2.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this2;
   }
-  (0, _createClass2["default"])(EmailInput, [{
+  (0, _inherits2["default"])(EmailInput, _React$Component6);
+  return (0, _createClass2["default"])(EmailInput, [{
     key: "render",
     value: function render() {
       var props = {};
@@ -230,19 +218,17 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
-  return EmailInput;
 }(_react["default"].Component);
 var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
-  (0, _inherits2["default"])(PhoneNumber, _React$Component7);
-  var _super7 = _createSuper(PhoneNumber);
   function PhoneNumber(props) {
     var _this3;
     (0, _classCallCheck2["default"])(this, PhoneNumber);
-    _this3 = _super7.call(this, props);
+    _this3 = _callSuper(this, PhoneNumber, [props]);
     _this3.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this3;
   }
-  (0, _createClass2["default"])(PhoneNumber, [{
+  (0, _inherits2["default"])(PhoneNumber, _React$Component7);
+  return (0, _createClass2["default"])(PhoneNumber, [{
     key: "render",
     value: function render() {
       var props = {};
@@ -268,19 +254,17 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
-  return PhoneNumber;
 }(_react["default"].Component);
 var NumberInput = /*#__PURE__*/function (_React$Component8) {
-  (0, _inherits2["default"])(NumberInput, _React$Component8);
-  var _super8 = _createSuper(NumberInput);
   function NumberInput(props) {
     var _this4;
     (0, _classCallCheck2["default"])(this, NumberInput);
-    _this4 = _super8.call(this, props);
+    _this4 = _callSuper(this, NumberInput, [props]);
     _this4.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this4;
   }
-  (0, _createClass2["default"])(NumberInput, [{
+  (0, _inherits2["default"])(NumberInput, _React$Component8);
+  return (0, _createClass2["default"])(NumberInput, [{
     key: "render",
     value: function render() {
       var props = {};
@@ -306,19 +290,17 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
-  return NumberInput;
 }(_react["default"].Component);
 var TextArea = /*#__PURE__*/function (_React$Component9) {
-  (0, _inherits2["default"])(TextArea, _React$Component9);
-  var _super9 = _createSuper(TextArea);
   function TextArea(props) {
     var _this5;
     (0, _classCallCheck2["default"])(this, TextArea);
-    _this5 = _super9.call(this, props);
+    _this5 = _callSuper(this, TextArea, [props]);
     _this5.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this5;
   }
-  (0, _createClass2["default"])(TextArea, [{
+  (0, _inherits2["default"])(TextArea, _React$Component9);
+  return (0, _createClass2["default"])(TextArea, [{
     key: "render",
     value: function render() {
       var props = {};
@@ -343,19 +325,17 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("textarea", props)));
     }
   }]);
-  return TextArea;
 }(_react["default"].Component);
-var Dropdown = /*#__PURE__*/function (_React$Component10) {
-  (0, _inherits2["default"])(Dropdown, _React$Component10);
-  var _super10 = _createSuper(Dropdown);
+var Dropdown = /*#__PURE__*/function (_React$Component0) {
   function Dropdown(props) {
     var _this6;
     (0, _classCallCheck2["default"])(this, Dropdown);
-    _this6 = _super10.call(this, props);
+    _this6 = _callSuper(this, Dropdown, [props]);
     _this6.inputField = /*#__PURE__*/_react["default"].createRef();
     return _this6;
   }
-  (0, _createClass2["default"])(Dropdown, [{
+  (0, _inherits2["default"])(Dropdown, _React$Component0);
+  return (0, _createClass2["default"])(Dropdown, [{
     key: "render",
     value: function render() {
       var props = {};
@@ -386,16 +366,13 @@ var Dropdown = /*#__PURE__*/function (_React$Component10) {
       }))));
     }
   }]);
-  return Dropdown;
 }(_react["default"].Component);
-var Signature = /*#__PURE__*/function (_React$Component11) {
-  (0, _inherits2["default"])(Signature, _React$Component11);
-  var _super11 = _createSuper(Signature);
+var Signature = /*#__PURE__*/function (_React$Component1) {
   function Signature(props) {
     var _this7;
     (0, _classCallCheck2["default"])(this, Signature);
-    _this7 = _super11.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this7), "clear", function () {
+    _this7 = _callSuper(this, Signature, [props]);
+    (0, _defineProperty2["default"])(_this7, "clear", function () {
       if (_this7.state.defaultValue) {
         _this7.setState({
           defaultValue: ''
@@ -411,7 +388,8 @@ var Signature = /*#__PURE__*/function (_React$Component11) {
     _this7.canvas = /*#__PURE__*/_react["default"].createRef();
     return _this7;
   }
-  (0, _createClass2["default"])(Signature, [{
+  (0, _inherits2["default"])(Signature, _React$Component1);
+  return (0, _createClass2["default"])(Signature, [{
     key: "render",
     value: function render() {
       var defaultValue = this.state.defaultValue;
@@ -453,16 +431,14 @@ var Signature = /*#__PURE__*/function (_React$Component11) {
       }), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
-  return Signature;
 }(_react["default"].Component);
-var Tags = /*#__PURE__*/function (_React$Component12) {
-  (0, _inherits2["default"])(Tags, _React$Component12);
-  var _super12 = _createSuper(Tags);
+var Tags = /*#__PURE__*/function (_React$Component10) {
   function Tags(props) {
     var _this8;
     (0, _classCallCheck2["default"])(this, Tags);
-    _this8 = _super12.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this8), "handleChange", function (e) {
+    _this8 = _callSuper(this, Tags, [props]);
+    // state = { value: this.props.defaultValue !== undefined ? this.props.defaultValue.split(',') : [] };
+    (0, _defineProperty2["default"])(_this8, "handleChange", function (e) {
       _this8.setState({
         value: e || []
       });
@@ -475,7 +451,8 @@ var Tags = /*#__PURE__*/function (_React$Component12) {
     };
     return _this8;
   }
-  (0, _createClass2["default"])(Tags, [{
+  (0, _inherits2["default"])(Tags, _React$Component10);
+  return (0, _createClass2["default"])(Tags, [{
     key: "getDefaultValue",
     value: function getDefaultValue(defaultValue, options) {
       if (defaultValue) {
@@ -493,8 +470,6 @@ var Tags = /*#__PURE__*/function (_React$Component12) {
       }
       return [];
     }
-
-    // state = { value: this.props.defaultValue !== undefined ? this.props.defaultValue.split(',') : [] };
   }, {
     key: "render",
     value: function render() {
@@ -527,22 +502,20 @@ var Tags = /*#__PURE__*/function (_React$Component12) {
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)));
     }
   }]);
-  return Tags;
 }(_react["default"].Component);
-var Checkboxes = /*#__PURE__*/function (_React$Component13) {
-  (0, _inherits2["default"])(Checkboxes, _React$Component13);
-  var _super13 = _createSuper(Checkboxes);
+var Checkboxes = /*#__PURE__*/function (_React$Component11) {
   function Checkboxes(props) {
     var _this9;
     (0, _classCallCheck2["default"])(this, Checkboxes);
-    _this9 = _super13.call(this, props);
+    _this9 = _callSuper(this, Checkboxes, [props]);
     _this9.options = {};
     return _this9;
   }
-  (0, _createClass2["default"])(Checkboxes, [{
+  (0, _inherits2["default"])(Checkboxes, _React$Component11);
+  return (0, _createClass2["default"])(Checkboxes, [{
     key: "render",
     value: function render() {
-      var _this10 = this;
+      var _this0 = this;
       var self = this;
       var classNames = 'custom-control custom-checkbox';
       if (this.props.data.inline) {
@@ -566,7 +539,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component13) {
         if (self.props.mutable) {
           props.defaultChecked = self.props.defaultValue !== undefined && (self.props.defaultValue.indexOf(option.key) > -1 || self.props.defaultValue.indexOf(option.value) > -1);
         }
-        if (_this10.props.read_only) {
+        if (_this0.props.read_only) {
           props.disabled = 'disabled';
         }
         return /*#__PURE__*/_react["default"].createElement("div", {
@@ -587,22 +560,20 @@ var Checkboxes = /*#__PURE__*/function (_React$Component13) {
       })));
     }
   }]);
-  return Checkboxes;
 }(_react["default"].Component);
-var RadioButtons = /*#__PURE__*/function (_React$Component14) {
-  (0, _inherits2["default"])(RadioButtons, _React$Component14);
-  var _super14 = _createSuper(RadioButtons);
+var RadioButtons = /*#__PURE__*/function (_React$Component12) {
   function RadioButtons(props) {
-    var _this11;
+    var _this1;
     (0, _classCallCheck2["default"])(this, RadioButtons);
-    _this11 = _super14.call(this, props);
-    _this11.options = {};
-    return _this11;
+    _this1 = _callSuper(this, RadioButtons, [props]);
+    _this1.options = {};
+    return _this1;
   }
-  (0, _createClass2["default"])(RadioButtons, [{
+  (0, _inherits2["default"])(RadioButtons, _React$Component12);
+  return (0, _createClass2["default"])(RadioButtons, [{
     key: "render",
     value: function render() {
-      var _this12 = this;
+      var _this10 = this;
       var self = this;
       var classNames = 'custom-control custom-radio';
       if (this.props.data.inline) {
@@ -626,7 +597,7 @@ var RadioButtons = /*#__PURE__*/function (_React$Component14) {
         if (self.props.mutable) {
           props.defaultChecked = self.props.defaultValue !== undefined && (self.props.defaultValue.indexOf(option.key) > -1 || self.props.defaultValue.indexOf(option.value) > -1);
         }
-        if (_this12.props.read_only) {
+        if (_this10.props.read_only) {
           props.disabled = 'disabled';
         }
         return /*#__PURE__*/_react["default"].createElement("div", {
@@ -647,16 +618,14 @@ var RadioButtons = /*#__PURE__*/function (_React$Component14) {
       })));
     }
   }]);
-  return RadioButtons;
 }(_react["default"].Component);
-var Image = /*#__PURE__*/function (_React$Component15) {
-  (0, _inherits2["default"])(Image, _React$Component15);
-  var _super15 = _createSuper(Image);
+var Image = /*#__PURE__*/function (_React$Component13) {
   function Image() {
     (0, _classCallCheck2["default"])(this, Image);
-    return _super15.apply(this, arguments);
+    return _callSuper(this, Image, arguments);
   }
-  (0, _createClass2["default"])(Image, [{
+  (0, _inherits2["default"])(Image, _React$Component13);
+  return (0, _createClass2["default"])(Image, [{
     key: "render",
     value: function render() {
       var style = this.props.data.center ? {
@@ -671,26 +640,27 @@ var Image = /*#__PURE__*/function (_React$Component15) {
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), this.props.data.src && /*#__PURE__*/_react["default"].createElement("img", {
         src: this.props.data.src,
-        width: this.props.data.width,
-        height: this.props.data.height
+        style: {
+          height: this.props.data.height,
+          width: this.props.data.width,
+          display: 'inline'
+        }
       }), !this.props.data.src && /*#__PURE__*/_react["default"].createElement("div", {
         className: "no-image"
       }, "No Image"));
     }
   }]);
-  return Image;
 }(_react["default"].Component);
-var Rating = /*#__PURE__*/function (_React$Component16) {
-  (0, _inherits2["default"])(Rating, _React$Component16);
-  var _super16 = _createSuper(Rating);
+var Rating = /*#__PURE__*/function (_React$Component14) {
   function Rating(props) {
-    var _this13;
+    var _this11;
     (0, _classCallCheck2["default"])(this, Rating);
-    _this13 = _super16.call(this, props);
-    _this13.inputField = /*#__PURE__*/_react["default"].createRef();
-    return _this13;
+    _this11 = _callSuper(this, Rating, [props]);
+    _this11.inputField = /*#__PURE__*/_react["default"].createRef();
+    return _this11;
   }
-  (0, _createClass2["default"])(Rating, [{
+  (0, _inherits2["default"])(Rating, _React$Component14);
+  return (0, _createClass2["default"])(Rating, [{
     key: "render",
     value: function render() {
       var props = {};
@@ -714,16 +684,14 @@ var Rating = /*#__PURE__*/function (_React$Component16) {
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props)));
     }
   }]);
-  return Rating;
 }(_react["default"].Component);
-var HyperLink = /*#__PURE__*/function (_React$Component17) {
-  (0, _inherits2["default"])(HyperLink, _React$Component17);
-  var _super17 = _createSuper(HyperLink);
+var HyperLink = /*#__PURE__*/function (_React$Component15) {
   function HyperLink() {
     (0, _classCallCheck2["default"])(this, HyperLink);
-    return _super17.apply(this, arguments);
+    return _callSuper(this, HyperLink, arguments);
   }
-  (0, _createClass2["default"])(HyperLink, [{
+  (0, _inherits2["default"])(HyperLink, _React$Component15);
+  return (0, _createClass2["default"])(HyperLink, [{
     key: "render",
     value: function render() {
       var baseClasses = 'SortableItem rfb-item';
@@ -746,16 +714,14 @@ var HyperLink = /*#__PURE__*/function (_React$Component17) {
       }))));
     }
   }]);
-  return HyperLink;
 }(_react["default"].Component);
-var Download = /*#__PURE__*/function (_React$Component18) {
-  (0, _inherits2["default"])(Download, _React$Component18);
-  var _super18 = _createSuper(Download);
+var Download = /*#__PURE__*/function (_React$Component16) {
   function Download() {
     (0, _classCallCheck2["default"])(this, Download);
-    return _super18.apply(this, arguments);
+    return _callSuper(this, Download, arguments);
   }
-  (0, _createClass2["default"])(Download, [{
+  (0, _inherits2["default"])(Download, _React$Component16);
+  return (0, _createClass2["default"])(Download, [{
     key: "render",
     value: function render() {
       var baseClasses = 'SortableItem rfb-item';
@@ -772,17 +738,14 @@ var Download = /*#__PURE__*/function (_React$Component18) {
       }, this.props.data.content)));
     }
   }]);
-  return Download;
 }(_react["default"].Component);
-var Camera = /*#__PURE__*/function (_React$Component19) {
-  (0, _inherits2["default"])(Camera, _React$Component19);
-  var _super19 = _createSuper(Camera);
+var Camera = /*#__PURE__*/function (_React$Component17) {
   function Camera(props) {
-    var _this14;
+    var _this12;
     (0, _classCallCheck2["default"])(this, Camera);
-    _this14 = _super19.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this14), "displayImage", function (e) {
-      var self = (0, _assertThisInitialized2["default"])(_this14);
+    _this12 = _callSuper(this, Camera, [props]);
+    (0, _defineProperty2["default"])(_this12, "displayImage", function (e) {
+      var self = _this12;
       var target = e.target;
       if (target.files && target.files.length) {
         self.setState({
@@ -791,19 +754,20 @@ var Camera = /*#__PURE__*/function (_React$Component19) {
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this14), "clearImage", function () {
-      _this14.setState({
+    (0, _defineProperty2["default"])(_this12, "clearImage", function () {
+      _this12.setState({
         img: null,
         previewImg: null
       });
     });
-    _this14.state = {
+    _this12.state = {
       img: null,
       previewImg: null
     };
-    return _this14;
+    return _this12;
   }
-  (0, _createClass2["default"])(Camera, [{
+  (0, _inherits2["default"])(Camera, _React$Component17);
+  return (0, _createClass2["default"])(Camera, [{
     key: "getImageSizeProps",
     value: function getImageSizeProps(_ref) {
       var width = _ref.width,
@@ -819,12 +783,25 @@ var Camera = /*#__PURE__*/function (_React$Component19) {
       }
       return imgProps;
     }
+
+    /* 
+      Originally Image/File upload elments don't count the heights of all visible controls which is layered on top of <input>,
+      which makes the element possibly overlaps on the next element on a narrow screen. 
+      It's caused by "position: absolue" of .image-upload-control.
+      The fix is to add inline style "position: relative" to the container div of .image-upload-control, and use <label> tag
+      and "for"/"id" to trigger to the file input dialog.
+    */
   }, {
     key: "render",
     value: function render() {
-      var _this15 = this;
+      var _this13 = this;
       var imageStyle = {
-        objectFit: 'scale-down',
+        // 2025/11/11
+        // 'scale-down' looks to keep the original size of image on form-builder-generator.
+        // and sometimes the image is too small. Supposeing admin want to show the image in bigger size,
+        // so adjust it "contain" to make it bigger if possible. 
+        // "contain" is supposed to "Preserves the aspect ratio, and fits the image inside the container, without cutting"
+        objectFit: 'contain',
         objectPosition: this.props.data.center ? 'center' : 'left'
       };
       var baseClasses = 'SortableItem rfb-item';
@@ -863,16 +840,22 @@ var Camera = /*#__PURE__*/function (_React$Component19) {
         className: "image-upload",
         onChange: this.displayImage,
         "data-clearlabel": this.props.data.label_after_photo_clear_icon,
-        disabled: this.props.read_only
+        disabled: this.props.read_only,
+        id: name,
+        hidden: true
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image-upload-control"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn btn-default"
+        className: "image-upload-control",
+        style: {
+          position: 'relative'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "btn btn-default",
+        htmlFor: name
       }, /*#__PURE__*/_react["default"].createElement("i", {
         className: "fas fa-camera"
-      }), " ", this.props.data.label_after_camera_icon), /*#__PURE__*/_react["default"].createElement("p", null, this.props.data.message_under_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+      }), " ", this.props.data.label_after_camera_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_camera_icon))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
         onLoad: function onLoad() {
-          return URL.revokeObjectURL(_this15.state.previewImg);
+          return URL.revokeObjectURL(_this13.state.previewImg);
         },
         src: this.state.previewImg,
         height: "100",
@@ -885,17 +868,14 @@ var Camera = /*#__PURE__*/function (_React$Component19) {
       }), " ", this.props.data.label_after_photo_clear_icon)))));
     }
   }]);
-  return Camera;
 }(_react["default"].Component);
-var FileUpload = /*#__PURE__*/function (_React$Component20) {
-  (0, _inherits2["default"])(FileUpload, _React$Component20);
-  var _super20 = _createSuper(FileUpload);
+var FileUpload = /*#__PURE__*/function (_React$Component18) {
   function FileUpload(props) {
-    var _this16;
+    var _this14;
     (0, _classCallCheck2["default"])(this, FileUpload);
-    _this16 = _super20.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this16), "displayFileUpload", function (e) {
-      var self = (0, _assertThisInitialized2["default"])(_this16);
+    _this14 = _callSuper(this, FileUpload, [props]);
+    (0, _defineProperty2["default"])(_this14, "displayFileUpload", function (e) {
+      var self = _this14;
       var target = e.target;
       var file;
       if (target.files && target.files.length > 0) {
@@ -905,51 +885,49 @@ var FileUpload = /*#__PURE__*/function (_React$Component20) {
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this16), "clearFileUpload", function () {
-      _this16.setState({
+    (0, _defineProperty2["default"])(_this14, "clearFileUpload", function () {
+      _this14.setState({
         fileUpload: null
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this16), "saveFile", /*#__PURE__*/function () {
+    (0, _defineProperty2["default"])(_this14, "saveFile", /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
         var sourceUrl, response, dispositionHeader, resBlob, blob, fileName, _fileName;
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                e.preventDefault();
-                sourceUrl = _this16.props.defaultValue;
-                _context.next = 4;
-                return (0, _isomorphicFetch["default"])(sourceUrl, {
-                  method: 'GET',
-                  headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json; charset=utf-8'
-                  },
-                  responseType: 'blob'
-                });
-              case 4:
-                response = _context.sent;
-                dispositionHeader = response.headers.get('Content-Disposition');
-                _context.next = 8;
-                return response.blob();
-              case 8:
-                resBlob = _context.sent;
-                // eslint-disable-next-line no-undef
-                blob = new Blob([resBlob], {
-                  type: _this16.props.data.fileType || response.headers.get('Content-Type')
-                });
-                if (dispositionHeader && dispositionHeader.indexOf(';filename=') > -1) {
-                  fileName = dispositionHeader.split(';filename=')[1];
-                  (0, _fileSaver.saveAs)(blob, fileName);
-                } else {
-                  _fileName = sourceUrl.substring(sourceUrl.lastIndexOf('/') + 1);
-                  (0, _fileSaver.saveAs)(response.url, _fileName);
-                }
-              case 11:
-              case "end":
-                return _context.stop();
-            }
+        return _regenerator["default"].wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              sourceUrl = _this14.props.defaultValue;
+              _context.next = 1;
+              return (0, _isomorphicFetch["default"])(sourceUrl, {
+                method: 'GET',
+                headers: {
+                  'Accept': 'application/json',
+                  'Content-Type': 'application/json; charset=utf-8'
+                },
+                responseType: 'blob'
+              });
+            case 1:
+              response = _context.sent;
+              dispositionHeader = response.headers.get('Content-Disposition');
+              _context.next = 2;
+              return response.blob();
+            case 2:
+              resBlob = _context.sent;
+              // eslint-disable-next-line no-undef
+              blob = new Blob([resBlob], {
+                type: _this14.props.data.fileType || response.headers.get('Content-Type')
+              });
+              if (dispositionHeader && dispositionHeader.indexOf(';filename=') > -1) {
+                fileName = dispositionHeader.split(';filename=')[1];
+                (0, _fileSaver.saveAs)(blob, fileName);
+              } else {
+                _fileName = sourceUrl.substring(sourceUrl.lastIndexOf('/') + 1);
+                (0, _fileSaver.saveAs)(response.url, _fileName);
+              }
+            case 3:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }));
@@ -957,12 +935,13 @@ var FileUpload = /*#__PURE__*/function (_React$Component20) {
         return _ref2.apply(this, arguments);
       };
     }());
-    _this16.state = {
+    _this14.state = {
       fileUpload: null
     };
-    return _this16;
+    return _this14;
   }
-  (0, _createClass2["default"])(FileUpload, [{
+  (0, _inherits2["default"])(FileUpload, _React$Component18);
+  return (0, _createClass2["default"])(FileUpload, [{
     key: "render",
     value: function render() {
       var baseClasses = 'SortableItem rfb-item';
@@ -994,14 +973,20 @@ var FileUpload = /*#__PURE__*/function (_React$Component20) {
         className: "image-upload",
         onChange: this.displayFileUpload,
         "data-clearlabel": this.props.data.label_after_file_clear_icon,
-        disabled: this.props.read_only
+        disabled: this.props.read_only,
+        id: name,
+        hidden: true
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image-upload-control"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn btn-default"
+        className: "image-upload-control",
+        style: {
+          position: 'relative'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: "btn btn-default",
+        htmlFor: name
       }, /*#__PURE__*/_react["default"].createElement("i", {
         className: "fas fa-file"
-      }), " ", this.props.data.label_after_file_icon), /*#__PURE__*/_react["default"].createElement("p", null, this.props.data.message_under_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      }), " ", this.props.data.label_after_file_icon), /*#__PURE__*/_react["default"].createElement("div", null, this.props.data.message_under_file_icon))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "file-upload-preview"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
@@ -1021,28 +1006,26 @@ var FileUpload = /*#__PURE__*/function (_React$Component20) {
       }), " ", this.props.data.label_after_file_clear_icon)))));
     }
   }]);
-  return FileUpload;
 }(_react["default"].Component);
-var Range = /*#__PURE__*/function (_React$Component21) {
-  (0, _inherits2["default"])(Range, _React$Component21);
-  var _super21 = _createSuper(Range);
+var Range = /*#__PURE__*/function (_React$Component19) {
   function Range(props) {
-    var _this17;
+    var _this15;
     (0, _classCallCheck2["default"])(this, Range);
-    _this17 = _super21.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this17), "changeValue", function (e) {
+    _this15 = _callSuper(this, Range, [props]);
+    (0, _defineProperty2["default"])(_this15, "changeValue", function (e) {
       var target = e.target;
-      _this17.setState({
+      _this15.setState({
         value: target.value
       });
     });
-    _this17.inputField = /*#__PURE__*/_react["default"].createRef();
-    _this17.state = {
+    _this15.inputField = /*#__PURE__*/_react["default"].createRef();
+    _this15.state = {
       value: props.defaultValue !== undefined ? parseInt(props.defaultValue, 10) : parseInt(props.data.default_value, 10)
     };
-    return _this17;
+    return _this15;
   }
-  (0, _createClass2["default"])(Range, [{
+  (0, _inherits2["default"])(Range, _React$Component19);
+  return (0, _createClass2["default"])(Range, [{
     key: "render",
     value: function render() {
       var props = {};
@@ -1102,9 +1085,9 @@ var Range = /*#__PURE__*/function (_React$Component21) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "clearfix"
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "float-left"
+        className: "float-start"
       }, this.props.data.min_label), /*#__PURE__*/_react["default"].createElement("span", {
-        className: "float-right"
+        className: "float-end"
       }, this.props.data.max_label)), /*#__PURE__*/_react["default"].createElement(_reactBootstrapSlider["default"], props)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "visible_marks"
       }, visible_marks), /*#__PURE__*/_react["default"].createElement("input", {
@@ -1116,7 +1099,6 @@ var Range = /*#__PURE__*/function (_React$Component21) {
       }, _datalist)));
     }
   }]);
-  return Range;
 }(_react["default"].Component);
 FormElements.Header = Header;
 FormElements.Paragraph = Paragraph;
@@ -1140,5 +1122,4 @@ FormElements.Download = Download;
 FormElements.Camera = Camera;
 FormElements.FileUpload = FileUpload;
 FormElements.Range = Range;
-var _default = FormElements;
-exports["default"] = _default;
+var _default = exports["default"] = FormElements;