react-survey-builder 1.0.7 → 1.0.9

package/lib/survey-elements-edit.js

@@ -20,6 +20,7 @@ var _requests = require("./stores/requests");
 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; } }
 var toolbar = {
@@ -55,10 +56,10 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
       var _this2 = this;
       // elemProperty could be content or label
       // targProperty could be value or checked
-      var this_element = this.state.element;
-      this_element[elemProperty] = e.target[targProperty];
+      var thisElement = this.state.element;
+      thisElement[elemProperty] = e.target[targProperty];
       this.setState({
-        element: this_element,
+        element: thisElement,
         dirty: true
       }, function () {
         if (targProperty === 'checked') {
@@ -70,21 +71,21 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
     key: "onEditorStateChange",
     value: function onEditorStateChange(index, property, editorContent) {
       // const html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/<p>/g, '<div>').replace(/<\/p>/g, '</div>');
-      var html = (0, _draftjsToHtml["default"])((0, _draftJs.convertToRaw)(editorContent.getCurrentContent())).replace(/<p>/g, '').replace(/<\/p>/g, '').replace(/&nbsp;/g, ' ').replace(/(?:\r\n|\r|\n)/g, ' ');
-      var this_element = this.state.element;
-      this_element[property] = html;
+      var html = (0, _draftjsToHtml["default"])((0, _draftJs.convertToRaw)(editorContent.getCurrentContent())).replace(/<p>/g, '').replace(/<\/p>/g, '').replace(/&nbsp;/g, ' ').replace(/(?:\r\n|\r|\n)/g, '');
+      var thisElement = this.state.element;
+      thisElement[property] = html;
       this.setState({
-        element: this_element,
+        element: thisElement,
         dirty: true
       });
     }
   }, {
     key: "updateElement",
     value: function updateElement() {
-      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
         });
@@ -129,19 +130,19 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
       if (this.state.dirty) {
         this.props.element.dirty = true;
       }
-      var this_checked = this.props.element.hasOwnProperty('required') ? this.props.element.required : false;
-      var this_default_checked = this.props.element.hasOwnProperty('defaultChecked') ? this.props.element.defaultChecked : false;
-      var this_read_only = this.props.element.hasOwnProperty('readOnly') ? this.props.element.readOnly : false;
-      var this_default_today = this.props.element.hasOwnProperty('defaultToday') ? this.props.element.defaultToday : false;
-      var this_show_time_select = this.props.element.hasOwnProperty('showTimeSelect') ? this.props.element.showTimeSelect : false;
-      var this_show_time_select_only = this.props.element.hasOwnProperty('showTimeSelectOnly') ? this.props.element.showTimeSelectOnly : false;
-      var this_show_time_input = this.props.element.hasOwnProperty('showTimeInput') ? this.props.element.showTimeInput : false;
-      var this_checked_inline = this.props.element.hasOwnProperty('inline') ? this.props.element.inline : false;
+      var thisChecked = this.props.element.hasOwnProperty('required') ? this.props.element.required : false;
+      var thisDefaultChecked = this.props.element.hasOwnProperty('defaultChecked') ? this.props.element.defaultChecked : false;
+      var thisReadOnly = this.props.element.hasOwnProperty('readOnly') ? this.props.element.readOnly : false;
+      var thisDefaultToday = this.props.element.hasOwnProperty('defaultToday') ? this.props.element.defaultToday : false;
+      var thisShowTimeSelect = this.props.element.hasOwnProperty('showTimeSelect') ? this.props.element.showTimeSelect : false;
+      var thisShowTimeSelectOnly = this.props.element.hasOwnProperty('showTimeSelectOnly') ? this.props.element.showTimeSelectOnly : false;
+      var thisShowTimeInput = this.props.element.hasOwnProperty('showTimeInput') ? this.props.element.showTimeInput : false;
+      var thisCheckedInline = this.props.element.hasOwnProperty('inline') ? this.props.element.inline : false;
       var this_checked_bold = this.props.element.hasOwnProperty('bold') ? this.props.element.bold : false;
-      var this_checked_italic = this.props.element.hasOwnProperty('italic') ? this.props.element.italic : false;
-      var this_checked_center = this.props.element.hasOwnProperty('center') ? this.props.element.center : false;
-      var this_checked_page_break = this.props.element.hasOwnProperty('pageBreakBefore') ? this.props.element.pageBreakBefore : false;
-      var this_checked_alternate_form = this.props.element.hasOwnProperty('alternateForm') ? this.props.element.alternateForm : false;
+      var thisCheckedItalic = this.props.element.hasOwnProperty('italic') ? this.props.element.italic : false;
+      var thisCheckedCenter = this.props.element.hasOwnProperty('center') ? this.props.element.center : false;
+      var thisCheckedPageBreak = this.props.element.hasOwnProperty('pageBreakBefore') ? this.props.element.pageBreakBefore : false;
+      var thisCheckedAlternateForm = this.props.element.hasOwnProperty('alternateForm') ? this.props.element.alternateForm : false;
       var _this$props$element = this.props.element,
         canHavePageBreakBefore = _this$props$element.canHavePageBreakBefore,
         canHaveAlternateForm = _this$props$element.canHaveAlternateForm,
@@ -149,9 +150,9 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         canHaveOptionCorrect = _this$props$element.canHaveOptionCorrect,
         canHaveOptionValue = _this$props$element.canHaveOptionValue;
       var canHaveImageSize = this.state.element.element === 'Image' || this.state.element.element === 'Camera';
-      var this_files = this.props.files.length ? this.props.files : [];
-      if (this_files.length < 1 || this_files.length > 0 && this_files[0].id !== '') {
-        this_files.unshift({
+      var thisFiles = this.props.files.length ? this.props.files : [];
+      if (thisFiles.length < 1 || thisFiles.length > 0 && thisFiles[0].id !== '') {
+        thisFiles.unshift({
           id: '',
           file_name: ''
         });
@@ -174,11 +175,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
       }, this.props.element.text), /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, {
         className: "float-end dismiss-edit",
         onClick: this.props.manualEditModeOff
-      })), this.props.element.hasOwnProperty('content') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+      })), this.props.element.hasOwnProperty('content') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "text-to-display"
       }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
         toolbar: toolbar,
@@ -186,36 +183,28 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         onBlur: this.updateElement.bind(this),
         onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'content'),
         stripPastedStyles: true
-      })), this.props.element.hasOwnProperty('file_path') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      })), this.props.element.hasOwnProperty('filePath') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "fileSelect"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "choose-file"
-      }), ":"), /*#__PURE__*/_react["default"].createElement("select", {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, {
         id: "fileSelect",
-        className: "form-control",
-        defaultValue: this.props.element.file_path,
+        defaultValue: this.props.element.filePath,
         onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'file_path', 'value')
-      }, this_files.map(function (file) {
-        var this_key = "file_".concat(file.id);
+        onChange: this.editElementProp.bind(this, 'filePath', 'value')
+      }, thisFiles.map(function (file) {
+        var thisKey = "file_".concat(file.id);
         return /*#__PURE__*/_react["default"].createElement("option", {
           value: file.id,
-          key: this_key
+          key: thisKey
         }, file.file_name);
-      }))), this.props.element.hasOwnProperty('href') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
+      }))), this.props.element.hasOwnProperty('href') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
         type: "text",
         className: "form-control",
         defaultValue: this.props.element.href,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'href', 'value')
-      })), this.props.element.hasOwnProperty('label') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+      })), this.props.element.hasOwnProperty('label') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "display-label"
       })), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
         toolbar: toolbar,
@@ -223,81 +212,52 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         onBlur: this.updateElement.bind(this),
         onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'label'),
         stripPastedStyles: true
-      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
-      }, /*#__PURE__*/_react["default"].createElement("input", {
+      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "is-required",
-        className: "custom-control-input",
+        label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+          id: "required"
+        }),
         type: "checkbox",
-        checked: this_checked,
+        checked: thisChecked,
         value: true,
         onChange: this.editElementProp.bind(this, 'required', 'checked')
-      }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
-        htmlFor: "is-required"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "required"
-      }))), this.props.element.hasOwnProperty('readOnly') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
-      }, /*#__PURE__*/_react["default"].createElement("input", {
+      }), this.props.element.hasOwnProperty('readOnly') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "is-read-only",
-        className: "custom-control-input",
+        label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+          id: "read-only"
+        }),
         type: "checkbox",
-        checked: this_read_only,
+        checked: thisReadOnly,
         value: true,
         onChange: this.editElementProp.bind(this, 'readOnly', 'checked')
-      }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
-        htmlFor: "is-read-only"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "read-only"
-      }))), this.props.element.hasOwnProperty('defaultToday') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
-      }, /*#__PURE__*/_react["default"].createElement("input", {
+      }), this.props.element.hasOwnProperty('defaultToday') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "is-default-to-today",
-        className: "custom-control-input",
+        label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+          id: "default-to-today"
+        }),
         type: "checkbox",
-        checked: this_default_today,
+        checked: thisDefaultToday,
         value: true,
         onChange: this.editElementProp.bind(this, 'defaultToday', 'checked')
-      }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
-        htmlFor: "is-default-to-today"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "default-to-today"
-      }), "?")), ['Checkboxes', 'Checkbox'].indexOf(this.state.element.element) !== -1 && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
-      }, /*#__PURE__*/_react["default"].createElement("input", {
-        id: "display-horizontal",
-        className: "custom-control-input",
+      }), ['Checkboxes', 'Checkbox'].indexOf(this.state.element.element) !== -1 && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
+        id: "default-checked",
+        label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+          id: "default-checked"
+        }),
         type: "checkbox",
-        checked: this_default_checked,
+        checked: thisDefaultChecked,
         value: true,
         onChange: this.editElementProp.bind(this, 'defaultChecked', 'checked')
-      }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
-        htmlFor: "display-horizontal"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "default-checked"
-      }))), (this.state.element.element === 'RadioButtons' || this.state.element.element === 'Checkboxes') && canHaveDisplayHorizontal && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
-      }, /*#__PURE__*/_react["default"].createElement("input", {
+      }), (this.state.element.element === 'RadioButtons' || this.state.element.element === 'Checkboxes') && canHaveDisplayHorizontal && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "display-horizontal",
-        className: "custom-control-input",
+        label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+          id: "display-horizontal"
+        }),
         type: "checkbox",
-        checked: this_checked_inline,
+        checked: thisCheckedInline,
         value: true,
         onChange: this.editElementProp.bind(this, 'inline', 'checked')
-      }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
-        htmlFor: "display-horizontal"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "display-horizontal"
-      })))), this.state.element.element === 'Checkbox' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+      })), this.state.element.element === 'Checkbox' && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "checkbox-label-text"
       }), ":"), /*#__PURE__*/_react["default"].createElement(_reactDraftWysiwyg.Editor, {
         toolbar: toolbar,
@@ -305,76 +265,56 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         onBlur: this.updateElement.bind(this),
         onEditorStateChange: this.onEditorStateChange.bind(this, 0, 'boxLabel'),
         stripPastedStyles: true
-      })), this.props.element.hasOwnProperty('src') && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      })), this.props.element.hasOwnProperty('src') && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "srcInput"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "link-to"
-      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "srcInput",
         type: "text",
-        className: "form-control",
         defaultValue: this.props.element.src,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'src', 'value')
-      }))), canHaveImageSize && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
-      }, /*#__PURE__*/_react["default"].createElement("input", {
+      }))), canHaveImageSize && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "do-center",
-        className: "custom-control-input",
+        label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+          id: "center"
+        }),
         type: "checkbox",
-        checked: this_checked_center,
+        checked: thisCheckedCenter,
         value: true,
         onChange: this.editElementProp.bind(this, 'center', 'checked')
-      }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
-        htmlFor: "do-center"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "center"
-      }), "?"))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "row"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-3"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        sm: 3
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "elementWidth"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "width"
-      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "elementWidth",
         type: "text",
-        className: "form-control",
         defaultValue: this.props.element.width,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'width', 'value')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-3"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        sm: 3
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "elementHeight"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "height"
-      }), ":"), /*#__PURE__*/_react["default"].createElement("input", {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "elementHeight",
         type: "text",
-        className: "form-control",
         defaultValue: this.props.element.height,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'height', 'value')
-      })))), this.state.element.element === 'FileUpload' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
+      })))), this.state.element.element === 'FileUpload' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         className: "control-label",
         htmlFor: "fileType"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "choose-file-type"
-      }), ":"), /*#__PURE__*/_react["default"].createElement("select", {
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, {
         id: "fileType",
-        className: "form-control",
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'fileType', 'value')
       }, [{
@@ -403,166 +343,152 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           value: file.type,
           key: index
         }, file.typeName);
-      })))), this.props.element.hasOwnProperty('step') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+      })))), canHavePageBreakBefore && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "print-options"
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
+        id: "page-break-before-element",
+        label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+          id: "page-break-before-element"
+        }),
+        type: "checkbox",
+        checked: thisCheckedPageBreak,
+        value: true,
+        onChange: this.editElementProp.bind(this, 'pageBreakBefore', 'checked')
+      })), canHaveAlternateForm && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "alternate-signature-page"
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
+        id: "display-on-alternate",
+        label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+          id: "display-on-alternate-signature-page"
+        }),
+        type: "checkbox",
+        checked: thisCheckedAlternateForm,
+        value: true,
+        onChange: this.editElementProp.bind(this, 'alternateForm', 'checked')
+      })), this.props.element.hasOwnProperty('step') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "rangeStep"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "step"
-      })), /*#__PURE__*/_react["default"].createElement("input", {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "rangeStep",
         type: "number",
-        className: "form-control",
         defaultValue: this.props.element.step,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'step', 'value')
-      }))), this.props.element.hasOwnProperty('min_value') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+      }))), this.props.element.hasOwnProperty('minValue') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "rangeMin"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "min"
-      })), /*#__PURE__*/_react["default"].createElement("input", {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "rangeMin",
         type: "number",
-        className: "form-control",
-        defaultValue: this.props.element.min_value,
+        defaultValue: this.props.element.minValue,
         onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'min_value', 'value')
-      }))), this.props.element.hasOwnProperty('min_label') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+        onChange: this.editElementProp.bind(this, 'minValue', 'value')
+      }))), this.props.element.hasOwnProperty('minLabel') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "rangeMin"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "min_label"
-      })), /*#__PURE__*/_react["default"].createElement("input", {
+        id: "min-label"
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         type: "text",
-        className: "form-control",
-        defaultValue: this.props.element.min_label,
+        defaultValue: this.props.element.minLabel,
         onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'min_label', 'value')
-      }))), this.props.element.hasOwnProperty('max_value') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+        onChange: this.editElementProp.bind(this, 'minLabel', 'value')
+      }))), this.props.element.hasOwnProperty('maxValue') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "rangeMax"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "max"
-      })), /*#__PURE__*/_react["default"].createElement("input", {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "rangeMax",
         type: "number",
-        className: "form-control",
-        defaultValue: this.props.element.max_value,
+        defaultValue: this.props.element.maxValue,
         onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'max_value', 'value')
-      }))), this.props.element.hasOwnProperty('max_label') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+        onChange: this.editElementProp.bind(this, 'maxValue', 'value')
+      }))), this.props.element.hasOwnProperty('maxLabel') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "rangeMax"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "max_label"
-      })), /*#__PURE__*/_react["default"].createElement("input", {
+        id: "max-label"
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         type: "text",
-        className: "form-control",
-        defaultValue: this.props.element.max_label,
+        defaultValue: this.props.element.maxLabel,
         onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'max_label', 'value')
-      }))), this.props.element.hasOwnProperty('default_value') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+        onChange: this.editElementProp.bind(this, 'maxLabel', 'value')
+      }))), this.props.element.hasOwnProperty('defaultValue') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group-range"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "defaultSelected"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "default-selected"
-      })), /*#__PURE__*/_react["default"].createElement("input", {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "defaultSelected",
         type: "number",
-        className: "form-control",
-        defaultValue: this.props.element.default_value,
+        defaultValue: this.props.element.defaultValue,
         onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'default_value', 'value')
-      }))), this.props.element.hasOwnProperty('static') && this.props.element["static"] && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        onChange: this.editElementProp.bind(this, 'defaultValue', 'value')
+      }))), this.props.element.hasOwnProperty('static') && this.props.element["static"] && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "text-style"
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
-      }, /*#__PURE__*/_react["default"].createElement("input", {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "do-bold",
-        className: "custom-control-input",
+        label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+          id: "bold"
+        }),
         type: "checkbox",
         checked: this_checked_bold,
         value: true,
         onChange: this.editElementProp.bind(this, 'bold', 'checked')
-      }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
-        htmlFor: "do-bold"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "bold"
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "custom-control custom-checkbox"
-      }, /*#__PURE__*/_react["default"].createElement("input", {
+      }), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
         id: "do-italic",
-        className: "custom-control-input",
+        label: /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+          id: "italic"
+        }),
         type: "checkbox",
-        checked: this_checked_italic,
+        checked: thisCheckedItalic,
         value: true,
         onChange: this.editElementProp.bind(this, 'italic', 'checked')
-      }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "custom-control-label",
-        htmlFor: "do-italic"
-      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
-        id: "italic"
-      })))), this.props.element.showPlaceholder && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      })), this.props.element.showPlaceholder && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "placeholder"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "place-holder-text-label"
-      })), /*#__PURE__*/_react["default"].createElement("input", {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         type: "text",
-        className: "form-control",
         id: "placeholder",
         defaultValue: this.props.element.placeholder,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'placeholder', 'value')
-      })), this.props.element.showCustomName && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
-        htmlFor: "custom_name"
+      })), this.props.element.showCustomName && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        htmlFor: "customName"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "custom-name-label"
-      })), /*#__PURE__*/_react["default"].createElement("input", {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         type: "text",
-        className: "form-control",
-        id: "custom_name",
-        defaultValue: this.props.element.custom_name,
+        id: "customName",
+        defaultValue: this.props.element.customName,
         onBlur: this.updateElement.bind(this),
-        onChange: this.editElementProp.bind(this, 'custom_name', 'value')
-      })), this.props.element.showHelp && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+        onChange: this.editElementProp.bind(this, 'customName', 'value')
+      })), this.props.element.showLabelLocationPicker && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+        htmlFor: "labelLocation"
+      }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "choose-label-location"
+      }), ":"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Select, {
+        id: "labelLocation",
+        defaultValue: this.props.element.labelLocation,
+        onBlur: this.updateElement.bind(this),
+        onChange: this.editElementProp.bind(this, 'labelLocation', 'value')
+      }, /*#__PURE__*/_react["default"].createElement("option", {
+        value: "ABOVE"
+      }, "Above Form Field"), /*#__PURE__*/_react["default"].createElement("option", {
+        value: "FLOATING"
+      }, "Floating Inside Form Field"))), this.props.element.showHelp && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "help"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "help-label"
@@ -573,10 +499,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         defaultValue: this.props.element.help,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'help', 'value')
-      })), this.props.element.showDescription && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      })), this.props.element.showDescription && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "questionDescription"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "description"
@@ -587,44 +510,34 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         defaultValue: this.props.element.description,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'description', 'value')
-      })), this.props.showCorrectColumn && this.props.element.canHaveAnswer && !this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      })), this.props.showCorrectColumn && this.props.element.canHaveAnswer && !this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "correctAnswer"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "correct-answer"
-      })), /*#__PURE__*/_react["default"].createElement("input", {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         id: "correctAnswer",
         type: "text",
-        className: "form-control",
         defaultValue: this.props.element.correct,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'correct', 'value')
-      })), this.props.element.canPopulateFromApi && this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-group"
-      }, /*#__PURE__*/_react["default"].createElement("label", {
-        className: "control-label",
+      })), this.props.element.canPopulateFromApi && this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
         htmlFor: "optionsApiUrl"
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "populate-options-from-api"
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "row"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-6"
-      }, /*#__PURE__*/_react["default"].createElement("input", {
-        className: "form-control",
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        sm: 6
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
         style: {
           width: '100%'
         },
         type: "text",
         id: "optionsApiUrl",
         placeholder: "http://localhost:8080/api/optionsdata"
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "col-sm-6"
-      }, /*#__PURE__*/_react["default"].createElement("button", {
-        onClick: this.addOptions.bind(this),
-        className: "btn btn-success"
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        sm: 6
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "success",
+        onClick: this.addOptions.bind(this)
       }, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
         id: "populate"
       }))))), this.props.element.hasOwnProperty('options') && /*#__PURE__*/_react["default"].createElement(_dynamicOptionList["default"], {