react-survey-builder 1.0.7 → 1.0.9

package/lib/dynamic-option-list.js

@@ -14,6 +14,7 @@ var _react = _interopRequireDefault(require("react"));
 var _UUID = _interopRequireDefault(require("./UUID"));
 var _IntlMessages = _interopRequireDefault(require("./language-provider/IntlMessages"));
 var _fa = require("react-icons/fa");
+var _reactBootstrap = require("react-bootstrap");
 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; } } /**
   * <DynamicOptionList />
@@ -39,24 +40,24 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
     }
   }, {
     key: "editOption",
-    value: function editOption(option_index, e) {
-      var this_element = this.state.element;
-      var val = this_element.options[option_index].value !== this._setValue(this_element.options[option_index].text) ? this_element.options[option_index].value : this._setValue(e.target.value);
-      this_element.options[option_index].text = e.target.value;
-      this_element.options[option_index].value = val;
+    value: function editOption(optionIndex, e) {
+      var thisElement = this.state.element;
+      var val = thisElement.options[optionIndex].value !== this._setValue(thisElement.options[optionIndex].text) ? thisElement.options[optionIndex].value : this._setValue(e.target.value);
+      thisElement.options[optionIndex].text = e.target.value;
+      thisElement.options[optionIndex].value = val;
       this.setState({
-        element: this_element,
+        element: thisElement,
         dirty: true
       });
     }
   }, {
     key: "editValue",
-    value: function editValue(option_index, e) {
-      var this_element = this.state.element;
-      var val = e.target.value === '' ? this._setValue(this_element.options[option_index].text) : e.target.value;
-      this_element.options[option_index].value = val;
+    value: function editValue(optionIndex, e) {
+      var thisElement = this.state.element;
+      var val = e.target.value === '' ? this._setValue(thisElement.options[optionIndex].text) : e.target.value;
+      thisElement.options[optionIndex].value = val;
       this.setState({
-        element: this_element,
+        element: thisElement,
         dirty: true
       });
     }
@@ -64,25 +65,25 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
     // eslint-disable-next-line no-unused-vars
   }, {
     key: "editOptionCorrect",
-    value: function editOptionCorrect(option_index, e) {
-      var this_element = this.state.element;
-      if (this_element.options[option_index].hasOwnProperty('correct')) {
-        delete this_element.options[option_index].correct;
+    value: function editOptionCorrect(optionIndex, e) {
+      var thisElement = this.state.element;
+      if (thisElement.options[optionIndex].hasOwnProperty('correct')) {
+        delete thisElement.options[optionIndex].correct;
       } else {
-        this_element.options[option_index].correct = true;
+        thisElement.options[optionIndex].correct = true;
       }
       this.setState({
-        element: this_element
+        element: thisElement
       });
-      this.props.updateElement.call(this.props.preview, this_element);
+      this.props.updateElement.call(this.props.preview, thisElement);
     }
   }, {
     key: "updateOption",
     value: function updateOption() {
-      var this_element = this.state.element;
+      var thisElement = this.state.element;
       // to prevent ajax calls with no change
       if (this.state.dirty) {
-        this.props.updateElement.call(this.props.preview, this_element);
+        this.props.updateElement.call(this.props.preview, thisElement);
         this.setState({
           dirty: false
         });
@@ -91,20 +92,20 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
   }, {
     key: "addOption",
     value: function addOption(index) {
-      var this_element = this.state.element;
-      this_element.options.splice(index + 1, 0, {
+      var thisElement = this.state.element;
+      thisElement.options.splice(index + 1, 0, {
         value: '',
         text: '',
         key: _UUID["default"].uuid()
       });
-      this.props.updateElement.call(this.props.preview, this_element);
+      this.props.updateElement.call(this.props.preview, thisElement);
     }
   }, {
     key: "removeOption",
     value: function removeOption(index) {
-      var this_element = this.state.element;
-      this_element.options.splice(index, 1);
-      this.props.updateElement.call(this.props.preview, this_element);
+      var thisElement = this.state.element;
+      thisElement.options.splice(index, 1);
+      this.props.updateElement.call(this.props.preview, thisElement);
     }
   }, {
     key: "render",
@@ -115,33 +116,28 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "dynamic-option-list"
-      }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "row"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-6"
+      }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        sm: 6
       }, /*#__PURE__*/_react["default"].createElement("b", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "options"
-      }))), this.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-2"
+      }))), this.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        sm: 2
       }, /*#__PURE__*/_react["default"].createElement("b", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "value"
-      }))), this.props.canHaveOptionValue && this.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-4"
+      }))), this.props.canHaveOptionValue && this.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        sm: 4
       }, /*#__PURE__*/_react["default"].createElement("b", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "correct"
       }))))), this.props.element.options.map(function (option, index) {
-        var this_key = "edit_".concat(option.key);
+        var thisKey = "edit_".concat(option.key);
         var val = option.value !== _this2._setValue(option.text) ? option.value : '';
         return /*#__PURE__*/_react["default"].createElement("li", {
           className: "clearfix",
-          key: this_key
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "row"
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "col-sm-6"
-        }, /*#__PURE__*/_react["default"].createElement("input", {
+          key: thisKey
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+          sm: 6
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
           tabIndex: index + 1,
-          className: "form-control",
           style: {
             width: '100%'
           },
@@ -151,32 +147,30 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
           value: option.text,
           onBlur: _this2.updateOption.bind(_this2),
           onChange: _this2.editOption.bind(_this2, index)
-        })), _this2.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement("div", {
-          className: "col-sm-2"
-        }, /*#__PURE__*/_react["default"].createElement("input", {
-          className: "form-control",
+        })), _this2.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+          sm: 2
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
           type: "text",
           name: "value_".concat(index),
           value: val,
           onChange: _this2.editValue.bind(_this2, index)
-        })), _this2.props.canHaveOptionValue && _this2.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement("div", {
-          className: "col-sm-1"
-        }, /*#__PURE__*/_react["default"].createElement("input", {
-          className: "form-control",
+        })), _this2.props.canHaveOptionValue && _this2.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+          sm: 1
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
           type: "checkbox",
           value: "1",
           onChange: _this2.editOptionCorrect.bind(_this2, index),
           checked: option.hasOwnProperty('correct')
-        })), /*#__PURE__*/_react["default"].createElement("div", {
-          className: "col-sm-3"
+        })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+          sm: 3
         }, /*#__PURE__*/_react["default"].createElement("div", {
           className: "dynamic-options-actions-buttons"
-        }, /*#__PURE__*/_react["default"].createElement("button", {
-          onClick: _this2.addOption.bind(_this2, index),
-          className: "btn btn-success"
-        }, /*#__PURE__*/_react["default"].createElement(_fa.FaPlusCircle, null)), index > 0 && /*#__PURE__*/_react["default"].createElement("button", {
-          onClick: _this2.removeOption.bind(_this2, index),
-          className: "btn btn-danger"
+        }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+          variant: "success",
+          onClick: _this2.addOption.bind(_this2, index)
+        }, /*#__PURE__*/_react["default"].createElement(_fa.FaPlusCircle, null)), index > 0 && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+          variant: "danger",
+          onClick: _this2.removeOption.bind(_this2, index)
         }, /*#__PURE__*/_react["default"].createElement(_fa.FaMinusCircle, null))))));
       })));
     }

package/lib/fieldset/FieldSet.js

@@ -14,7 +14,8 @@ var _componentHeader = _interopRequireDefault(require("../survey-elements/compon
 var _componentLabel = _interopRequireDefault(require("../survey-elements/component-label"));
 var _dustbin = _interopRequireDefault(require("../multi-column/dustbin"));
 var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
-var _excluded = ["data", "class_name"];
+var _reactBootstrap = require("react-bootstrap");
+var _excluded = ["data", "className"];
 /* eslint-disable camelcase */
 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; }
@@ -30,7 +31,7 @@ function FieldSetBase(props) {
     setChildItems = _React$useState4[1];
   _react["default"].useEffect(function () {
     var data = props.data,
-      class_name = props.class_name,
+      className = props.className,
       rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
     setChildData(data);
     var count = 1;
@@ -56,7 +57,7 @@ function FieldSetBase(props) {
   };
   var createChild = function createChild(count, data) {
     var colCount = count;
-    var className = data.class_name || "col-md-12";
+    var className = data.className || "col-md-12";
     if (!data.childItems) {
       // eslint-disable-next-line no-param-reassign
       data.childItems = Array.from({
@@ -86,12 +87,10 @@ function FieldSetBase(props) {
     className: baseClasses
   }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], (0, _extends2["default"])({}, props, {
     isFieldSet: true
-  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], props), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "row"
-  }, childItems === null || childItems === void 0 ? void 0 : childItems.map(function (x, i) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
+  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, childItems === null || childItems === void 0 ? void 0 : childItems.map(function (x, i) {
+    return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
       key: "".concat(i, "_").concat(x || "_"),
-      className: "col-md-12"
+      md: 12
     }, controls ? controls[i] : /*#__PURE__*/_react["default"].createElement(_dustbin["default"], {
       style: {
         width: "100%"

package/lib/form.js

@@ -23,6 +23,7 @@ var _multiColumn = require("./multi-column");
 var _fieldset = require("./fieldset");
 var _customElement = _interopRequireDefault(require("./survey-elements/custom-element"));
 var _registry = _interopRequireDefault(require("./stores/registry"));
+var _reactBootstrap = require("react-bootstrap");
 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; } } /**
   * <Form />
@@ -44,27 +45,27 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputs", {});
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "answerData", void 0);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRenderSubmit", function () {
-      var name = _this.props.action_name || _this.props.actionName;
+      var name = _this.props.actionName || _this.props.actionName;
       var actionName = name || 'Submit';
       var _this$props$submitBut = _this.props.submitButton,
         submitButton = _this$props$submitBut === void 0 ? false : _this$props$submitBut;
-      return submitButton || /*#__PURE__*/_react["default"].createElement("input", {
-        type: "submit",
-        className: "btn btn-big",
-        value: actionName
-      });
+      return submitButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "primary",
+        type: "submit"
+      }, actionName);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRenderBack", function () {
-      var name = _this.props.back_name || _this.props.backName;
+      var name = _this.props.backName || _this.props.backName;
       var backName = name || 'Cancel';
       var _this$props$backButto = _this.props.backButton,
         backButton = _this$props$backButto === void 0 ? false : _this$props$backButto;
-      return backButton || /*#__PURE__*/_react["default"].createElement("a", {
-        href: _this.props.back_action,
-        className: "btn btn-default btn-cancel btn-big"
+      return backButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "secondary",
+        href: _this.props.backAction,
+        className: "btn-cancel"
       }, backName);
     });
-    _this.answerData = _this._convert(props.answer_data);
+    _this.answerData = _this._convert(props.answerData);
     _this.emitter = new _fbemitter.EventEmitter();
     _this.getDataById = _this.getDataById.bind((0, _assertThisInitialized2["default"])(_this));
 
@@ -95,7 +96,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "_getDefaultValue",
     value: function _getDefaultValue(item) {
-      return this.answerData[item.field_name];
+      return this.answerData[item.fieldName];
     }
   }, {
     key: "_optionsDefaultValue",
@@ -143,7 +144,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
     value: function _isIncorrect(item) {
       var incorrect = false;
       if (item.canHaveAnswer) {
-        var ref = this.inputs[item.field_name];
+        var ref = this.inputs[item.fieldName];
         if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
           item.options.forEach(function (option) {
             var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
@@ -169,7 +170,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
     value: function _isInvalid(item) {
       var invalid = false;
       if (item.required === true) {
-        var ref = this.inputs[item.field_name];
+        var ref = this.inputs[item.fieldName];
         if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
           var checked_options = 0;
           item.options.forEach(function (option) {
@@ -200,12 +201,13 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
     value: function _collect(item) {
       var itemData = {
         id: item.id,
-        name: item.field_name,
-        custom_name: item.custom_name || item.field_name,
-        help: item.help
+        name: item.fieldName,
+        customName: item.customName || item.fieldName,
+        help: item.help,
+        label: item.label !== null && item.label !== undefined && item.label !== '' ? item.label.trim() : ''
       };
       if (!itemData.name) return null;
-      var ref = this.inputs[item.field_name];
+      var ref = this.inputs[item.fieldName];
       if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
         var checked_options = [];
         item.options.forEach(function (option) {
@@ -244,7 +246,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "_getSignatureImg",
     value: function _getSignatureImg(item) {
-      var ref = this.inputs[item.field_name];
+      var ref = this.inputs[item.fieldName];
       var $canvas_sig = ref.canvas.current;
       if ($canvas_sig) {
         var base64 = $canvas_sig.toDataURL().replace('data:image/png;base64,', '');
@@ -262,7 +264,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
     value: function handleSubmit(e) {
       e.preventDefault();
       var errors = [];
-      if (!this.props.skip_validations) {
+      if (!this.props.skipValidations) {
         errors = this.validateForm();
         // Publish errors, if any.
         this.emitter.emit('surveyValidation', errors);
@@ -307,7 +309,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
       var errors = [];
       var data_items = this.props.data;
       var intl = this.props.intl;
-      if (this.props.display_short) {
+      if (this.props.displayShort) {
         data_items = this.props.data.filter(function (i) {
           return i.alternateForm === true;
         });
@@ -322,7 +324,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
           }), "!"));
         }
         if (item.element === 'EmailInput') {
-          var ref = _this4.inputs[item.field_name];
+          var ref = _this4.inputs[item.fieldName];
           var emailValue = _this4._getItemValue(item, ref).value;
           if (emailValue) {
             var validateEmail = function validateEmail(email) {
@@ -339,7 +341,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
           }
         }
         if (item.element === 'PhoneNumber') {
-          var _ref = _this4.inputs[item.field_name];
+          var _ref = _this4.inputs[item.fieldName];
           var phoneValue = _this4._getItemValue(item, _ref).value;
           if (phoneValue) {
             var validatePhone = function validatePhone(phone) {
@@ -382,13 +384,13 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(Input, {
         handleChange: this.handleChange,
         ref: function ref(c) {
-          return _this5.inputs[item.field_name] = c;
+          return _this5.inputs[item.fieldName] = c;
         },
         mutable: true,
         key: "form_".concat(item.id),
         data: item,
-        read_only: this.props.read_only,
-        hide_required_alert: this.props.hide_required_alert,
+        readOnly: this.props.readOnly,
+        hideRequiredAlert: this.props.hideRequiredAlert || item.hideRequiredAlert,
         defaultValue: this._getDefaultValue(item)
       });
     }
@@ -404,7 +406,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
         key: "form_".concat(item.id),
         data: item,
         controls: controls,
-        hide_required_alert: this.props.hide_required_alert
+        hideRequiredAlert: this.props.hideRequiredAlert || item.hideRequiredAlert
       });
     }
   }, {
@@ -415,7 +417,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
         mutable: true,
         key: "form_".concat(item.id),
         data: item,
-        hide_required_alert: this.props.hide_required_alert
+        hideRequiredAlert: this.props.hideRequiredAlert || item.hideRequiredAlert
       });
     }
   }, {
@@ -435,13 +437,13 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
         handleChange: this.handleChange,
         defaultValue: this._getDefaultValue(item),
         ref: function ref(c) {
-          return _this7.inputs[item.field_name] = c;
+          return _this7.inputs[item.fieldName] = c;
         }
       };
       return /*#__PURE__*/_react["default"].createElement(_customElement["default"], (0, _extends2["default"])({
         mutable: true,
-        read_only: this.props.read_only,
-        hide_required_alert: this.props.hide_required_alert,
+        readOnly: this.props.readOnly,
+        hideRequiredAlert: this.props.hideRequiredAlert || item.hideRequiredAlert,
         key: "form_".concat(item.id),
         data: item
       }, inputProps));
@@ -451,14 +453,14 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this8 = this;
       var data_items = this.props.data;
-      if (this.props.display_short) {
+      if (this.props.displayShort) {
         data_items = this.props.data.filter(function (i) {
           return i.alternateForm === true;
         });
       }
       data_items.forEach(function (item) {
         if (item && item.readOnly && item.variableKey && _this8.props.variables[item.variableKey]) {
-          _this8.answerData[item.field_name] = _this8.props.variables[item.variableKey];
+          _this8.answerData[item.fieldName] = _this8.props.variables[item.variableKey];
         }
       });
       var items = data_items.filter(function (x) {
@@ -492,9 +494,9 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
           case 'Signature':
             return /*#__PURE__*/_react["default"].createElement(Signature, {
               ref: function ref(c) {
-                return _this8.inputs[item.field_name] = c;
+                return _this8.inputs[item.fieldName] = c;
               },
-              read_only: _this8.props.read_only || item.readOnly,
+              readOnly: _this8.props.readOnly || item.readOnly,
               mutable: true,
               key: "form_".concat(item.id),
               data: item,
@@ -503,58 +505,58 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
           case 'Checkboxes':
             return /*#__PURE__*/_react["default"].createElement(Checkboxes, {
               ref: function ref(c) {
-                return _this8.inputs[item.field_name] = c;
+                return _this8.inputs[item.fieldName] = c;
               },
-              read_only: _this8.props.read_only,
+              readOnly: _this8.props.readOnly,
               handleChange: _this8.handleChange,
               mutable: true,
               key: "form_".concat(item.id),
               data: item,
               defaultValue: _this8._optionsDefaultValue(item),
-              hide_required_alert: _this8.props.hide_required_alert
+              hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
             });
           case 'Image':
             return /*#__PURE__*/_react["default"].createElement(Image, {
               ref: function ref(c) {
-                return _this8.inputs[item.field_name] = c;
+                return _this8.inputs[item.fieldName] = c;
               },
               handleChange: _this8.handleChange,
               mutable: true,
               key: "form_".concat(item.id),
               data: item,
               defaultValue: _this8._getDefaultValue(item),
-              hide_required_alert: _this8.props.hide_required_alert
+              hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
             });
           case 'Download':
             return /*#__PURE__*/_react["default"].createElement(Download, {
-              download_path: _this8.props.download_path,
+              downloadPath: _this8.props.downloadPath,
               mutable: true,
               key: "form_".concat(item.id),
               data: item,
-              hide_required_alert: _this8.props.hide_required_alert
+              hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
             });
           case 'Camera':
             return /*#__PURE__*/_react["default"].createElement(Camera, {
               ref: function ref(c) {
-                return _this8.inputs[item.field_name] = c;
+                return _this8.inputs[item.fieldName] = c;
               },
-              read_only: _this8.props.read_only || item.readOnly,
+              readOnly: _this8.props.readOnly || item.readOnly,
               mutable: true,
               key: "form_".concat(item.id),
               data: item,
               defaultValue: _this8._getDefaultValue(item),
-              hide_required_alert: _this8.props.hide_required_alert
+              hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
             });
           case 'FileUpload':
             return /*#__PURE__*/_react["default"].createElement(FileUpload, {
               ref: function ref(c) {
-                return _this8.inputs[item.field_name] = c;
+                return _this8.inputs[item.fieldName] = c;
               },
-              read_only: _this8.props.read_only || item.readOnly,
+              readOnly: _this8.props.readOnly || item.readOnly,
               mutable: true,
               key: "form_".concat(item.id),
               data: item,
-              hide_required_alert: _this8.props.hide_required_alert,
+              hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert,
               defaultValue: _this8._getDefaultValue(item)
             });
           default:
@@ -573,11 +575,11 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
         ref: function ref(c) {
           return _this8.form = c;
         },
-        action: this.props.form_action,
+        action: this.props.formAction,
         onBlur: this.handleBlur,
         onChange: this.handleChange,
         onSubmit: this.handleSubmit,
-        method: this.props.form_method
+        method: this.props.formMethod
       }, this.props.authenticity_token && /*#__PURE__*/_react["default"].createElement("div", {
         style: formTokenStyle
       }, /*#__PURE__*/_react["default"].createElement("input", {
@@ -593,8 +595,8 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
         type: "hidden",
         value: this.props.task_id
       })), items, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn-toolbar"
-      }, !this.props.hide_actions && this.handleRenderSubmit(), !this.props.hide_actions && this.props.back_action && this.handleRenderBack()))));
+        className: this.props.buttonClassName ? this.props.buttonClassName : 'btn-toolbar'
+      }, !this.props.hideActions && this.handleRenderSubmit(), !this.props.hideActions && this.props.backAction && this.handleRenderBack()))));
     }
   }]);
   return ReactSurvey;

package/lib/index.js

@@ -36,6 +36,7 @@ var _form = _interopRequireDefault(require("./form"));
 var _store = _interopRequireDefault(require("./stores/store"));
 var _registry = _interopRequireDefault(require("./stores/registry"));
 var _languageProvider = _interopRequireDefault(require("./language-provider"));
+var _reactBootstrap = require("react-bootstrap");
 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; } } /**
   * <ReactSurveyBuilder />
@@ -85,7 +86,7 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
     key: "render",
     value: function render() {
       var toolbarProps = {
-        showDescription: this.props.show_description
+        showDescription: this.props.showDescription
       };
       var language = this.props.locale ? this.props.locale : 'en';
       var currentAppLocale = _languageProvider["default"][language];
@@ -97,9 +98,10 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
       }, /*#__PURE__*/_react["default"].createElement(_reactIntl.IntlProvider, {
         locale: currentAppLocale.locale,
         messages: currentAppLocale.messages
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "react-survey-builder clearfix"
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_preview["default"], {
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Container, {
+        fluid: true,
+        className: "react-survey-builder"
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_preview["default"], {
         files: this.props.files,
         manualEditModeOff: this.manualEditModeOff.bind(this),
         showCorrectColumn: this.props.showCorrectColumn,

package/lib/language-provider/IntlMessages.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
-var InjectMassage = function InjectMassage(props) {
+var InjectMessage = function InjectMessage(props) {
   return /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, props);
 };
-var _default = exports["default"] = (0, _reactIntl.injectIntl)(InjectMassage, {
+var _default = exports["default"] = (0, _reactIntl.injectIntl)(InjectMessage, {
   withRef: false
 });

package/lib/language-provider/index.js

@@ -6,27 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.AppLanguages = void 0;
 var _enUs = _interopRequireDefault(require("./entries/en-us"));
-var _itIt = _interopRequireDefault(require("./entries/it-it"));
-var _viVn = _interopRequireDefault(require("./entries/vi-vn"));
 var AppLanguages = exports.AppLanguages = [{
-  languageId: 'vietnamese',
-  locale: 'vi',
-  name: 'Vietnamese',
-  icon: 'vn'
-}, {
   languageId: 'english',
   locale: 'en',
   name: 'English',
   icon: 'us'
-}, {
-  languageId: 'italian',
-  locale: 'it',
-  name: 'Italiano',
-  icon: 'it'
 }];
 var AppLocale = {
-  en: _enUs["default"],
-  vi: _viVn["default"],
-  it: _itIt["default"]
+  en: _enUs["default"]
 };
 var _default = exports["default"] = AppLocale;