react-survey-builder 1.0.7 → 1.0.8

package/lib/survey-elements/index.js

@@ -8,13 +8,14 @@ exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _isomorphicFetch = _interopRequireDefault(require("isomorphic-fetch"));
 var _fileSaver = require("file-saver");
 var _react = _interopRequireDefault(require("react"));
@@ -28,10 +29,39 @@ var _componentLabel = _interopRequireDefault(require("./component-label"));
 var _myxss = _interopRequireDefault(require("./myxss"));
 var _fa = require("react-icons/fa");
 var _reactBootstrap = require("react-bootstrap");
+var _reactImask = require("react-imask");
+var _excluded = ["onChange"]; // 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 _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-next-line max-classes-per-file
+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; } }
+var CustomPhoneInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var onChange = _ref.onChange,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_reactImask.IMaskInput, (0, _extends2["default"])({}, otherProps, {
+    mask: '{+1} (#00) 000-0000',
+    lazy: false,
+    overwrite: true,
+    definitions: {
+      '#': /[1-9]/
+    },
+    unmask: true // true|false|'typed'
+    ,
+    inputRef: ref
+    // inputRef={inputRef}  // access to nested input
+    // DO NOT USE onChange TO HANDLE CHANGES!
+    // USE onAccept INSTEAD
+    ,
+    onAccept:
+    // depending on prop above first argument is
+    // `value` if `unmask=false`,
+    // `unmaskedValue` if `unmask=true`,
+    // `typedValue` if `unmask='typed'`
+    function onAccept(value, mask) {
+      onChange(value);
+    }
+  }));
+});
 var SurveyElements = {};
 var Header = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Header, _React$Component);
@@ -171,12 +201,13 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
   (0, _createClass2["default"])(TextInput, [{
     key: "render",
     value: function render() {
+      var _this$props$data$plac;
       var props = {};
       props.type = 'text';
-      props.className = 'form-control';
-      props.name = this.props.data.field_name;
-      props.placeholder = this.props.data.placeholder;
+      //props.className = 'form-control';
+      props.name = this.props.data.fieldName;
       props.help = this.props.data.help;
+      props.placeholder = (_this$props$data$plac = this.props.data.placeholder) !== null && _this$props$data$plac !== void 0 ? _this$props$data$plac : _myxss["default"].process(this.props.data.label);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
@@ -185,21 +216,20 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
-      if (this.props.read_only) {
+      if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, {
-        className: "mb-3"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
-        name: props.name
-      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
         id: props.name
-      }, props))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+      }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        name: props.name,
+        htmlFor: props.name
+      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
       }, props.help) : null));
     }
@@ -219,11 +249,13 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
   (0, _createClass2["default"])(EmailInput, [{
     key: "render",
     value: function render() {
+      var _this$props$data$plac2;
       var props = {};
       props.type = 'text';
-      props.className = 'form-control';
-      props.name = this.props.data.field_name;
-      props.placeholder = this.props.data.placeholder;
+      // props.className = 'form-control';
+      props.name = this.props.data.fieldName;
+      props.help = this.props.data.help;
+      props.placeholder = (_this$props$data$plac2 = this.props.data.placeholder) !== null && _this$props$data$plac2 !== void 0 ? _this$props$data$plac2 : _myxss["default"].process(this.props.data.label);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
@@ -232,15 +264,21 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
-      if (this.props.read_only) {
+      if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: props.name
+      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, props.help) : null));
     }
   }]);
   return EmailInput;
@@ -252,17 +290,29 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
     var _this3;
     (0, _classCallCheck2["default"])(this, PhoneNumber);
     _this3 = _super7.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "handleChange", function (e) {
+      _this3.setState({
+        value: e
+      });
+    });
     _this3.inputField = /*#__PURE__*/_react["default"].createRef();
+    var defaultValue = props.defaultValue,
+      data = props.data;
+    _this3.state = {
+      value: defaultValue
+    };
     return _this3;
   }
   (0, _createClass2["default"])(PhoneNumber, [{
     key: "render",
     value: function render() {
+      var _this$props$data$plac3;
       var props = {};
       props.type = 'tel';
       props.className = 'form-control';
-      props.name = this.props.data.field_name;
-      props.placeholder = this.props.data.placeholder;
+      props.name = this.props.data.fieldName;
+      props.help = this.props.data.help;
+      props.placeholder = (_this$props$data$plac3 = this.props.data.placeholder) !== null && _this$props$data$plac3 !== void 0 ? _this$props$data$plac3 : _myxss["default"].process(this.props.data.label);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
@@ -271,15 +321,24 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
       if (this.props.data.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
-      if (this.props.read_only) {
+      if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props, {
+        onChange: this.handleChange,
+        as: CustomPhoneInput
+      })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: props.name
+      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, props.help) : null));
     }
   }]);
   return PhoneNumber;
@@ -297,19 +356,20 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
   (0, _createClass2["default"])(NumberInput, [{
     key: "render",
     value: function render() {
+      var _this$props$data$plac4;
       var props = {};
       props.type = 'number';
-      props.className = 'form-control';
-      props.name = this.props.data.field_name;
-      props.placeholder = this.props.data.placeholder;
+      props.name = this.props.data.fieldName;
+      props.help = this.props.data.help;
+      props.placeholder = (_this$props$data$plac4 = this.props.data.placeholder) !== null && _this$props$data$plac4 !== void 0 ? _this$props$data$plac4 : _myxss["default"].process(this.props.data.label);
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
-      props.min = this.props.data.min_value;
-      props.max = this.props.data.max_value;
+      props.min = this.props.data.minValue;
+      props.max = this.props.data.maxValue;
       props.step = this.props.data.step;
-      if (this.props.read_only) {
+      if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
       var baseClasses = 'SortableItem rfb-item';
@@ -319,9 +379,15 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        id: props.name
+      }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: props.name
+      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, props.help) : null));
     }
   }]);
   return NumberInput;
@@ -339,11 +405,12 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
   (0, _createClass2["default"])(TextArea, [{
     key: "render",
     value: function render() {
+      var _this$props$data$plac5;
       var props = {};
-      props.className = 'form-control';
-      props.name = this.props.data.field_name;
-      props.placeholder = this.props.data.placeholder;
-      if (this.props.read_only) {
+      props.name = this.props.data.fieldName;
+      props.help = this.props.data.help;
+      props.placeholder = (_this$props$data$plac5 = this.props.data.placeholder) !== null && _this$props$data$plac5 !== void 0 ? _this$props$data$plac5 : _myxss["default"].process(this.props.data.label);
+      if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
       if (this.props.mutable) {
@@ -357,9 +424,16 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("textarea", props)));
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, (0, _extends2["default"])({
+        as: "textarea",
+        id: props.name
+      }, props)), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: props.name
+      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, props.help) : null));
     }
   }]);
   return TextArea;
@@ -378,13 +452,15 @@ var Dropdown = /*#__PURE__*/function (_React$Component10) {
     key: "render",
     value: function render() {
       var props = {};
-      props.className = 'form-select';
-      props.name = this.props.data.field_name;
+      //props.className = 'form-select';
+      props.name = this.props.data.fieldName;
+      props.placeholder = this.props.data.placeholder;
+      props.help = this.props.data.help;
       if (this.props.mutable) {
         props.defaultValue = this.props.defaultValue;
         props.ref = this.inputField;
       }
-      if (this.props.read_only) {
+      if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
       var baseClasses = 'SortableItem rfb-item';
@@ -394,15 +470,23 @@ var Dropdown = /*#__PURE__*/function (_React$Component10) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("select", props, this.props.data.options.map(function (option) {
-        var this_key = "preview_".concat(option.key);
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Floating, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, (0, _extends2["default"])({
+        id: props.name
+      }, props), props.placeholder ? /*#__PURE__*/_react["default"].createElement("option", {
+        value: ""
+      }, props.placeholder) : null, this.props.data.options.map(function (option) {
+        var thisKey = "preview_".concat(option.key);
         return /*#__PURE__*/_react["default"].createElement("option", {
           value: option.value,
-          key: this_key
+          key: thisKey
         }, option.text);
-      }))));
+      })), /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
+        htmlFor: props.name
+      }))), props.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, props.help) : null));
     }
   }]);
   return Dropdown;
@@ -437,17 +521,17 @@ var Signature = /*#__PURE__*/function (_React$Component11) {
       var canClear = !!defaultValue;
       var props = {};
       props.type = 'hidden';
-      props.name = this.props.data.field_name;
+      props.name = this.props.data.fieldName;
       if (this.props.mutable) {
         props.defaultValue = defaultValue;
         props.ref = this.inputField;
       }
-      var pad_props = {};
+      var padProps = {};
       // umd requires canvasProps={{ width: 400, height: 150 }}
       if (this.props.mutable) {
-        pad_props.defaultValue = defaultValue;
-        pad_props.ref = this.canvas;
-        canClear = !this.props.read_only;
+        padProps.defaultValue = defaultValue;
+        padProps.ref = this.canvas;
+        canClear = !this.props.readOnly;
       }
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.data.pageBreakBefore) {
@@ -460,11 +544,11 @@ var Signature = /*#__PURE__*/function (_React$Component11) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.readOnly === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
         src: sourceDataURL
-      }) : /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], pad_props), canClear && /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, {
+      }) : /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], padProps), canClear && /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, {
         className: "clear-signature",
         onClick: this.clear,
         title: "Clear Signature"
@@ -521,14 +605,14 @@ var Tags = /*#__PURE__*/function (_React$Component12) {
       });
       var props = {};
       props.isMulti = true;
-      props.name = this.props.data.field_name;
+      props.name = this.props.data.fieldName;
       props.onChange = this.handleChange;
       props.options = options;
       if (!this.props.mutable) {
         props.value = options[0].text;
       } // to show a sample of what tags looks like
       if (this.props.mutable) {
-        props.isDisabled = this.props.read_only;
+        props.isDisabled = this.props.readOnly;
         props.value = this.state.value;
         props.ref = this.inputField;
       }
@@ -539,8 +623,8 @@ var Tags = /*#__PURE__*/function (_React$Component12) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)));
     }
   }]);
@@ -561,7 +645,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component13) {
     value: function render() {
       var _this10 = this;
       var self = this;
-      var classNames = 'custom-control custom-checkbox';
+      var classNames = ''; // 'custom-control custom-checkbox';
       if (this.props.data.inline) {
         classNames += ' option-inline';
       }
@@ -572,10 +656,10 @@ var Checkboxes = /*#__PURE__*/function (_React$Component13) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
-        var this_key = "preview_".concat(option.key);
+        var thisKey = "preview_".concat(option.key);
         var props = {};
         props.name = "option_".concat(option.key);
         props.type = 'checkbox';
@@ -583,24 +667,21 @@ var Checkboxes = /*#__PURE__*/function (_React$Component13) {
         if (self.props.mutable) {
           props.defaultChecked = self.props.defaultValue !== undefined && self.props.defaultValue.indexOf(option.key) > -1;
         }
-        if (_this10.props.read_only) {
+        if (_this10.props.readOnly) {
           props.disabled = 'disabled';
         }
-        return /*#__PURE__*/_react["default"].createElement("div", {
+        return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, (0, _extends2["default"])({
+          label: option.text,
           className: classNames,
-          key: this_key
-        }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
-          id: "fid_".concat(this_key),
-          className: "custom-control-input",
+          type: "checkbox",
+          key: thisKey,
+          id: "fid_".concat(thisKey),
           ref: function ref(c) {
             if (c && self.props.mutable) {
               self.options["child_ref_".concat(option.key)] = c;
             }
           }
-        }, props)), /*#__PURE__*/_react["default"].createElement("label", {
-          className: "custom-control-label",
-          htmlFor: "fid_".concat(this_key)
-        }, option.text));
+        }, props));
       })));
     }
   }]);
@@ -619,7 +700,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component14) {
   (0, _createClass2["default"])(Checkbox, [{
     key: "render",
     value: function render() {
-      var classNames = 'custom-control custom-checkbox';
+      var classNames = ''; // 'custom-control custom-checkbox';
       // if (this.props.data.inline) { classNames += ' option-inline'; }
 
       var baseClasses = 'SortableItem rfb-item';
@@ -628,34 +709,31 @@ var Checkbox = /*#__PURE__*/function (_React$Component14) {
       }
       var props = {};
       // eslint-disable-next-line no-undef
-      props.name = this.props.data.field_name;
+      props.name = this.props.data.fieldName;
       props.type = 'checkbox';
       props.defaultChecked = this.props.data.defaultChecked;
       if (this.props.mutable) {
         props.ref = this.inputField;
       }
-      if (this.props.read_only) {
+      if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
         className: "form-label"
-      }, this.props)), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classNames
-      }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
-        id: this.props.data.field_name,
-        className: "custom-control-input"
-      }, props)), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
-        htmlFor: this.props.data.field_name,
-        dangerouslySetInnerHTML: {
-          __html: this.props.data.boxLabel
-        }
-      }))));
+      }, this.props)), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, (0, _extends2["default"])({
+        label: /*#__PURE__*/_react["default"].createElement("span", {
+          dangerouslySetInnerHTML: {
+            __html: this.props.data.boxLabel
+          }
+        }),
+        type: "checkbox",
+        id: this.props.data.fieldName
+      }, props))));
     }
   }]);
   return Checkbox;
@@ -675,7 +753,7 @@ var RadioButtons = /*#__PURE__*/function (_React$Component15) {
     value: function render() {
       var _this13 = this;
       var self = this;
-      var classNames = 'custom-control custom-radio';
+      var classNames = ''; // 'custom-control custom-radio';
       if (this.props.data.inline) {
         classNames += ' option-inline';
       }
@@ -686,35 +764,32 @@ var RadioButtons = /*#__PURE__*/function (_React$Component15) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.data.options.map(function (option) {
-        var this_key = "preview_".concat(option.key);
+        var thisKey = "preview_".concat(option.key);
         var props = {};
-        props.name = self.props.data.field_name;
+        props.name = self.props.data.fieldName;
         props.type = 'radio';
         props.value = option.value;
         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 (_this13.props.read_only) {
+        if (_this13.props.readOnly) {
           props.disabled = 'disabled';
         }
-        return /*#__PURE__*/_react["default"].createElement("div", {
+        return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, (0, _extends2["default"])({
+          label: option.text,
           className: classNames,
-          key: this_key
-        }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
-          id: "fid_".concat(this_key),
-          className: "custom-control-input",
+          type: "radio",
+          key: thisKey,
+          id: "fid_".concat(thisKey),
           ref: function ref(c) {
             if (c && self.props.mutable) {
               self.options["child_ref_".concat(option.key)] = c;
             }
           }
-        }, props)), /*#__PURE__*/_react["default"].createElement("label", {
-          className: "custom-control-label",
-          htmlFor: "fid_".concat(this_key)
-        }, option.text));
+        }, props));
       })));
     }
   }]);
@@ -765,12 +840,12 @@ var Rating = /*#__PURE__*/function (_React$Component17) {
     key: "render",
     value: function render() {
       var props = {};
-      props.name = this.props.data.field_name;
+      props.name = this.props.data.fieldName;
       props.ratingAmount = 5;
       if (this.props.mutable) {
         props.rating = this.props.defaultValue !== undefined ? parseFloat(this.props.defaultValue, 10) : 0;
         props.editing = true;
-        props.disabled = this.props.read_only;
+        props.disabled = this.props.readOnly;
         props.ref = this.inputField;
       }
       var baseClasses = 'SortableItem rfb-item';
@@ -780,8 +855,8 @@ var Rating = /*#__PURE__*/function (_React$Component17) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_starRating["default"], props)));
     }
   }]);
@@ -804,11 +879,9 @@ var HyperLink = /*#__PURE__*/function (_React$Component18) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: 'form-label'
-      }, /*#__PURE__*/_react["default"].createElement("a", {
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement("a", {
         target: "_blank",
         href: this.props.data.href,
         dangerouslySetInnerHTML: {
@@ -836,10 +909,10 @@ var Download = /*#__PURE__*/function (_React$Component19) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement("a", {
-        href: "".concat(this.props.download_path, "?id=").concat(this.props.data.file_path)
+        href: "".concat(this.props.downloadPath, "?id=").concat(this.props.data.filePath)
       }, this.props.data.content)));
     }
   }]);
@@ -876,9 +949,9 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
   }
   (0, _createClass2["default"])(Camera, [{
     key: "getImageSizeProps",
-    value: function getImageSizeProps(_ref) {
-      var width = _ref.width,
-        height = _ref.height;
+    value: function getImageSizeProps(_ref2) {
+      var width = _ref2.width,
+        height = _ref2.height;
       var imgProps = {
         width: '100%'
       };
@@ -899,7 +972,7 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
         objectPosition: this.props.data.center ? 'center' : 'left'
       };
       var baseClasses = 'SortableItem rfb-item';
-      var name = this.props.data.field_name;
+      var name = this.props.data.fieldName;
       var fileInputStyle = this.state.img ? {
         display: 'none'
       } : null;
@@ -907,7 +980,7 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
         baseClasses += ' alwaysbreak';
       }
       var sourceDataURL;
-      if (this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0) {
+      if (this.props.readOnly === true && this.props.defaultValue && this.props.defaultValue.length > 0) {
         if (this.props.defaultValue.indexOf(name > -1)) {
           sourceDataURL = this.props.defaultValue;
         } else {
@@ -917,9 +990,9 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__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", (0, _extends2["default"])({
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.readOnly === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({
         style: imageStyle,
         src: sourceDataURL
       }, this.getImageSizeProps(this.props.data)))) : /*#__PURE__*/_react["default"].createElement("div", {
@@ -935,8 +1008,8 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
         onChange: this.displayImage
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-control"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn btn-default"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "light"
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaCamera, null), " Upload Photo"), /*#__PURE__*/_react["default"].createElement("p", null, "Select an image from your computer or device."))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
         onLoad: function onLoad() {
           return URL.revokeObjectURL(_this16.state.previewImg);
@@ -944,8 +1017,8 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
         src: this.state.previewImg,
         height: "100",
         className: "image-upload-preview"
-      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn btn-image-clear",
+      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        className: "btn-image-clear",
         onClick: this.clearImage
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear Photo")))));
     }
@@ -976,7 +1049,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this17), "saveFile", /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
+      var _ref3 = (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) {
@@ -1017,7 +1090,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
         }, _callee);
       }));
       return function (_x) {
-        return _ref2.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }());
     _this17.state = {
@@ -1029,7 +1102,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
     key: "render",
     value: function render() {
       var baseClasses = 'SortableItem rfb-item';
-      var name = this.props.data.field_name;
+      var name = this.props.data.fieldName;
       var fileInputStyle = this.state.fileUpload ? {
         display: 'none'
       } : null;
@@ -1039,10 +1112,10 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__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", {
-        className: "btn btn-default",
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.readOnly === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "default",
         onClick: this.saveFile
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaDownload, null), " Download File")) : /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-container"
@@ -1056,8 +1129,8 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
         onChange: this.displayFileUpload
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-control"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn btn-default"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "light"
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaFile, null), " Upload File"), /*#__PURE__*/_react["default"].createElement("p", null, "Select a file from your computer or device."))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "file-upload-preview"
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -1070,8 +1143,8 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
           display: 'inline-block',
           marginLeft: '5px'
         }
-      }, this.state.fileUpload.size.length > 6 ? "Size:  ".concat(Math.ceil(this.state.fileUpload.size / (1024 * 1024)), " mb") : "Size:  ".concat(Math.ceil(this.state.fileUpload.size / 1024), " kb"))), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn btn-file-upload-clear",
+      }, this.state.fileUpload.size.length > 6 ? "Size:  ".concat(Math.ceil(this.state.fileUpload.size / (1024 * 1024)), " mb") : "Size:  ".concat(Math.ceil(this.state.fileUpload.size / 1024), " kb"))), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        className: "btn-file-upload-clear",
         onClick: this.clearFileUpload
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear File")))));
     }
@@ -1093,7 +1166,7 @@ var Range = /*#__PURE__*/function (_React$Component22) {
     });
     _this18.inputField = /*#__PURE__*/_react["default"].createRef();
     _this18.state = {
-      value: props.defaultValue !== undefined ? parseInt(props.defaultValue, 10) : parseInt(props.data.default_value, 10)
+      value: props.defaultValue !== undefined ? parseInt(props.defaultValue, 10) : parseInt(props.data.defaultValue, 10)
     };
     return _this18;
   }
@@ -1101,11 +1174,11 @@ var Range = /*#__PURE__*/function (_React$Component22) {
     key: "render",
     value: function render() {
       var props = {};
-      var name = this.props.data.field_name;
+      var name = this.props.data.fieldName;
       props.type = 'range';
       props.list = "tickmarks_".concat(name);
-      props.min = this.props.data.min_value;
-      props.max = this.props.data.max_value;
+      props.min = this.props.data.minValue;
+      props.max = this.props.data.maxValue;
       props.step = this.props.data.step;
       props.value = this.state.value;
       props.onChange = this.changeValue;
@@ -1140,7 +1213,7 @@ var Range = /*#__PURE__*/function (_React$Component22) {
         }
         return /*#__PURE__*/_react["default"].createElement("label", option_props, d);
       });
-      if (this.props.read_only) {
+      if (this.props.readOnly) {
         props.disabled = 'disabled';
       }
       var baseClasses = 'SortableItem rfb-item';
@@ -1150,17 +1223,17 @@ var Range = /*#__PURE__*/function (_React$Component22) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
-      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
         className: "range"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "clearfix"
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: "float-start"
-      }, this.props.data.min_label), /*#__PURE__*/_react["default"].createElement("span", {
+      }, this.props.data.minLabel), /*#__PURE__*/_react["default"].createElement("span", {
         className: "float-end"
-      }, this.props.data.max_label)), /*#__PURE__*/_react["default"].createElement(_reactBootstrapRangeSlider["default"], props)), /*#__PURE__*/_react["default"].createElement("div", {
+      }, this.props.data.maxLabel)), /*#__PURE__*/_react["default"].createElement(_reactBootstrapRangeSlider["default"], props)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "visible_marks"
       }, visible_marks), /*#__PURE__*/_react["default"].createElement("input", {
         name: name,