react-survey-builder 1.0.8 → 1.0.10

package/lib/survey-elements-edit.js

@@ -72,10 +72,10 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
     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 thisElement = this.state.element;
+      thisElement[property] = html;
       this.setState({
-        element: this_element,
+        element: thisElement,
         dirty: true
       });
     }
@@ -130,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,
@@ -150,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: ''
         });
@@ -192,11 +192,11 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         defaultValue: this.props.element.filePath,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'filePath', 'value')
-      }, this_files.map(function (file) {
-        var this_key = "file_".concat(file.id);
+      }, 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(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
         type: "text",
@@ -218,7 +218,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "required"
         }),
         type: "checkbox",
-        checked: this_checked,
+        checked: thisChecked,
         value: true,
         onChange: this.editElementProp.bind(this, 'required', 'checked')
       }), this.props.element.hasOwnProperty('readOnly') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
@@ -227,7 +227,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "read-only"
         }),
         type: "checkbox",
-        checked: this_read_only,
+        checked: thisReadOnly,
         value: true,
         onChange: this.editElementProp.bind(this, 'readOnly', 'checked')
       }), this.props.element.hasOwnProperty('defaultToday') && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
@@ -236,7 +236,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "default-to-today"
         }),
         type: "checkbox",
-        checked: this_default_today,
+        checked: thisDefaultToday,
         value: true,
         onChange: this.editElementProp.bind(this, 'defaultToday', 'checked')
       }), ['Checkboxes', 'Checkbox'].indexOf(this.state.element.element) !== -1 && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
@@ -245,7 +245,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "default-checked"
         }),
         type: "checkbox",
-        checked: this_default_checked,
+        checked: thisDefaultChecked,
         value: true,
         onChange: this.editElementProp.bind(this, 'defaultChecked', 'checked')
       }), (this.state.element.element === 'RadioButtons' || this.state.element.element === 'Checkboxes') && canHaveDisplayHorizontal && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, {
@@ -254,7 +254,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "display-horizontal"
         }),
         type: "checkbox",
-        checked: this_checked_inline,
+        checked: thisCheckedInline,
         value: true,
         onChange: this.editElementProp.bind(this, 'inline', 'checked')
       })), 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"], {
@@ -281,7 +281,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "center"
         }),
         type: "checkbox",
-        checked: this_checked_center,
+        checked: thisCheckedCenter,
         value: true,
         onChange: this.editElementProp.bind(this, 'center', 'checked')
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
@@ -351,7 +351,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "page-break-before-element"
         }),
         type: "checkbox",
-        checked: this_checked_page_break,
+        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"], {
@@ -362,7 +362,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "display-on-alternate-signature-page"
         }),
         type: "checkbox",
-        checked: this_checked_alternate_form,
+        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", {
@@ -452,7 +452,7 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
           id: "italic"
         }),
         type: "checkbox",
-        checked: this_checked_italic,
+        checked: thisCheckedItalic,
         value: true,
         onChange: this.editElementProp.bind(this, 'italic', 'checked')
       })), this.props.element.showPlaceholder && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
@@ -475,7 +475,20 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         defaultValue: this.props.element.customName,
         onBlur: this.updateElement.bind(this),
         onChange: this.editElementProp.bind(this, 'customName', 'value')
-      })), this.props.element.showHelp && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Label, {
+      })), 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"

package/lib/toolbar.js

@@ -20,7 +20,6 @@ var _UUID = _interopRequireDefault(require("./UUID"));
 var _store = _interopRequireDefault(require("./stores/store"));
 var _functions = require("./functions");
 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; } }
 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; }
@@ -165,7 +164,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showHelp: true,
         options: [],
         placeholder: 'Select One',
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'Tags',
         canHaveAnswer: true,
@@ -181,7 +181,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showDescription: true,
         showHelp: true,
         options: [],
-        hideRequiredAlert: true
+        placeholder: 'Select...',
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'Checkboxes',
         canHaveAnswer: true,
@@ -247,7 +249,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         placeholder: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'EmailInput',
         canHaveAnswer: true,
@@ -265,40 +268,46 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         placeholder: intl.formatMessage({
           id: 'place-holder-email'
         }),
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
-        key: 'NumberInput',
+        key: 'PhoneNumber',
         canHaveAnswer: true,
         name: intl.formatMessage({
-          id: 'number-input'
+          id: 'phone-input'
         }),
         label: intl.formatMessage({
-          id: 'place-holder-label'
+          id: 'place-holder-phone-number'
         }),
-        icon: _fa.FaPlus,
-        fieldName: 'number_input_',
+        icon: _fa.FaPhone,
+        fieldName: 'phone_input_',
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        step: 1,
-        minValue: 0,
-        maxValue: 5,
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
-        key: 'PhoneNumber',
-        canHaveAnswer: true,
+        key: 'DatePicker',
+        canDefaultToday: true,
+        canReadOnly: true,
+        dateFormat: 'MM/DD/YYYY',
+        timeFormat: 'hh:mm aa',
+        showTimeSelect: false,
+        showTimeSelectOnly: false,
+        showTimeInput: false,
         name: intl.formatMessage({
-          id: 'phone-input'
+          id: 'date'
         }),
+        icon: _fa.FaRegCalendarAlt,
         label: intl.formatMessage({
-          id: 'place-holder-phone-number'
+          id: 'place-holder-label'
         }),
-        icon: _fa.FaPhone,
-        fieldName: 'phone_input_',
+        fieldName: 'date_picker_',
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'TextArea',
         canHaveAnswer: true,
@@ -313,81 +322,27 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        hideRequiredAlert: true
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
-        key: 'FieldSet',
-        canHaveAnswer: false,
+        key: 'NumberInput',
+        canHaveAnswer: true,
         name: intl.formatMessage({
-          id: 'fieldset'
+          id: 'number-input'
         }),
         label: intl.formatMessage({
-          id: 'fieldset'
-        }),
-        icon: _fa.FaBars,
-        fieldName: 'fieldset-element'
-      }, {
-        key: 'TwoColumnRow',
-        canHaveAnswer: false,
-        name: intl.formatMessage({
-          id: 'two-columns-row'
-        }),
-        label: '',
-        icon: _fa.FaColumns,
-        fieldName: 'two_col_row_'
-      }, {
-        key: 'ThreeColumnRow',
-        canHaveAnswer: false,
-        name: intl.formatMessage({
-          id: 'three-columns-row'
-        }),
-        label: '',
-        icon: _fa.FaColumns,
-        fieldName: 'three_col_row_'
-      }, {
-        key: 'FourColumnRow',
-        element: 'MultiColumnRow',
-        canHaveAnswer: false,
-        name: intl.formatMessage({
-          id: 'four-columns-row'
-        }),
-        label: '',
-        icon: _fa.FaColumns,
-        fieldName: 'four_col_row_',
-        colCount: 4,
-        className: 'col-md-3'
-      }, {
-        key: 'FiveColumnRow',
-        element: 'MultiColumnRow',
-        canHaveAnswer: false,
-        name: intl.formatMessage({
-          id: 'five-columns-row'
-        }),
-        label: '',
-        icon: _fa.FaColumns,
-        fieldName: 'five_col_row_',
-        colCount: 5,
-        className: 'col'
-      }, {
-        key: 'SixColumnRow',
-        element: 'MultiColumnRow',
-        canHaveAnswer: false,
-        name: intl.formatMessage({
-          id: 'six-columns-row'
-        }),
-        label: '',
-        icon: _fa.FaColumns,
-        fieldName: 'six_col_row_',
-        colCount: 6,
-        className: 'col-md-2'
-      }, {
-        key: 'Image',
-        name: intl.formatMessage({
-          id: 'image'
+          id: 'place-holder-label'
         }),
-        label: '',
-        icon: _fa.FaRegImage,
-        fieldName: 'image_',
-        src: ''
+        icon: _fa.FaPlus,
+        fieldName: 'number_input_',
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true,
+        step: 1,
+        minValue: 0,
+        maxValue: 5,
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'Rating',
         canHaveAnswer: true,
@@ -403,22 +358,25 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showDescription: true,
         showHelp: true
       }, {
-        key: 'DatePicker',
-        canDefaultToday: true,
-        canReadOnly: true,
-        dateFormat: 'MM/dd/yyyy',
-        timeFormat: 'hh:mm aa',
-        showTimeSelect: false,
-        showTimeSelectOnly: false,
-        showTimeInput: false,
+        key: 'Range',
         name: intl.formatMessage({
-          id: 'date'
+          id: 'range'
         }),
-        icon: _fa.FaRegCalendarAlt,
+        icon: _fa.FaSlidersH,
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        fieldName: 'date_picker_',
+        fieldName: 'range_',
+        step: 1,
+        defaultValue: 3,
+        minValue: 1,
+        maxValue: 5,
+        minLabel: intl.formatMessage({
+          id: 'easy'
+        }),
+        maxLabel: intl.formatMessage({
+          id: 'difficult'
+        }),
         showCustomName: true,
         showDescription: true,
         showHelp: true,
@@ -433,7 +391,51 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'signature'
         }),
-        fieldName: 'signature_'
+        fieldName: 'signature_',
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true,
+        hideRequiredAlert: true
+      }, {
+        key: 'Camera',
+        name: intl.formatMessage({
+          id: 'camera'
+        }),
+        icon: _fa.FaCamera,
+        label: intl.formatMessage({
+          id: 'place-holder-label'
+        }),
+        fieldName: 'camera_'
+      }, {
+        key: 'FileUpload',
+        name: intl.formatMessage({
+          id: 'file-upload'
+        }),
+        icon: _fa.FaFile,
+        label: intl.formatMessage({
+          id: 'place-holder-label'
+        }),
+        fieldName: 'file_upload_'
+      }, {
+        key: 'FieldSet',
+        canHaveAnswer: false,
+        name: intl.formatMessage({
+          id: 'fieldset'
+        }),
+        label: intl.formatMessage({
+          id: 'fieldset'
+        }),
+        icon: _fa.FaBars,
+        fieldName: 'fieldset-element'
+      }, {
+        key: 'Image',
+        name: intl.formatMessage({
+          id: 'image'
+        }),
+        label: '',
+        icon: _fa.FaRegImage,
+        fieldName: 'image_',
+        src: ''
       }, {
         key: 'HyperLink',
         name: intl.formatMessage({
@@ -459,49 +461,59 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         filePath: '',
         _href: ''
       }, {
-        key: 'Range',
+        key: 'TwoColumnRow',
+        canHaveAnswer: false,
         name: intl.formatMessage({
-          id: 'range'
-        }),
-        icon: _fa.FaSlidersH,
-        label: intl.formatMessage({
-          id: 'place-holder-label'
-        }),
-        fieldName: 'range_',
-        step: 1,
-        defaultValue: 3,
-        minValue: 1,
-        maxValue: 5,
-        minLabel: intl.formatMessage({
-          id: 'easy'
-        }),
-        maxLabel: intl.formatMessage({
-          id: 'difficult'
+          id: 'two-columns-row'
         }),
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
-        hideRequiredAlert: true
+        label: '',
+        icon: _fa.FaColumns,
+        fieldName: 'two_col_row_'
       }, {
-        key: 'Camera',
+        key: 'ThreeColumnRow',
+        canHaveAnswer: false,
         name: intl.formatMessage({
-          id: 'camera'
+          id: 'three-columns-row'
         }),
-        icon: _fa.FaCamera,
-        label: intl.formatMessage({
-          id: 'place-holder-label'
+        label: '',
+        icon: _fa.FaColumns,
+        fieldName: 'three_col_row_'
+      }, {
+        key: 'FourColumnRow',
+        element: 'MultiColumnRow',
+        canHaveAnswer: false,
+        name: intl.formatMessage({
+          id: 'four-columns-row'
         }),
-        fieldName: 'camera_'
+        label: '',
+        icon: _fa.FaColumns,
+        fieldName: 'four_col_row_',
+        colCount: 4,
+        className: 'col-md-3'
       }, {
-        key: 'FileUpload',
+        key: 'FiveColumnRow',
+        element: 'MultiColumnRow',
+        canHaveAnswer: false,
         name: intl.formatMessage({
-          id: 'file-upload'
+          id: 'five-columns-row'
         }),
-        icon: _fa.FaFile,
-        label: intl.formatMessage({
-          id: 'place-holder-label'
+        label: '',
+        icon: _fa.FaColumns,
+        fieldName: 'five_col_row_',
+        colCount: 5,
+        className: 'col'
+      }, {
+        key: 'SixColumnRow',
+        element: 'MultiColumnRow',
+        canHaveAnswer: false,
+        name: intl.formatMessage({
+          id: 'six-columns-row'
         }),
-        fieldName: 'file_upload_'
+        label: '',
+        icon: _fa.FaColumns,
+        fieldName: 'six_col_row_',
+        colCount: 6,
+        className: 'col-md-2'
       }];
     }
   }, {
@@ -536,7 +548,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       }
 
       // add placeholder to form input
-      if (['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown'].indexOf(element) !== -1) {
+      if (['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags'].indexOf(element) !== -1) {
         elementOptions.showPlaceholder = true;
       }
       elementOptions.placeholder = item.placeholder;
@@ -555,6 +567,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       }
       elementOptions.showCustomName = item.showCustomName;
       elementOptions.customName = item.customName;
+      elementOptions.showLabelLocationPicker = item.showLabelLocationPicker;
+      elementOptions.labelLocation = item.labelLocation;
       elementOptions.showHelp = item.showHelp;
       elementOptions.help = item.help;
       elementOptions.hideRequiredAlert = item.hideRequiredAlert;
@@ -657,8 +671,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         items = _buildGroupItems.items,
         grouped = _buildGroupItems.grouped,
         groupKeys = _buildGroupItems.groupKeys;
-      return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
-        md: 3,
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: "react-survey-builder-toolbar"
       }, /*#__PURE__*/_react["default"].createElement("h4", null, this.props.intl.formatMessage({
         id: 'toolbox'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-survey-builder",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "A complete survey builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
@@ -28,8 +28,10 @@
   },
   "author": "Garrett Lang",
   "dependencies": {
+    "@hookform/error-message": ">=2.0.1",
     "beedle": "^0.8.1",
     "classnames": "^2.2.6",
+    "create-react-class": "^15.7.0",
     "date-fns": "^2.16.1",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
@@ -39,14 +41,18 @@
     "immutability-helper": "^3.1.1",
     "isomorphic-fetch": "^3.0.0",
     "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.44",
     "prop-types": "^15.7.2",
-    "react-bootstrap": "^2.9.2",
+    "react-bootstrap": ">=2.9.2",
     "react-bootstrap-range-slider": "^3.0.8",
+    "react-bootstrap-typeahead": "^6.3.2",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
     "react-draft-wysiwyg": "^1.15.0",
-    "react-icons": "^5.0.1",
-    "react-imask": "^7.0.1",
+    "react-hook-form": ">=7.45.4",
+    "react-icons": ">=5.0.1",
+    "react-imask": ">=7.0.1",
     "react-intl": "^5.24.3",
     "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.3",
@@ -54,9 +60,11 @@
     "xss": "^1.0.8"
   },
   "peerDependencies": {
+    "@hookform/error-message": ">=2.0.1",
     "react": ">=18.2.0",
     "react-bootstrap": ">=2.9.2",
     "react-dom": ">=18.2.0",
+    "react-hook-form": ">=7.45.4",
     "react-icons": ">=5.0.1",
     "react-imask": ">=7.0.1"
   },

package/types/index.d.ts

@@ -28,6 +28,9 @@ type BaseElement = {
     | "Range"
     | "Camera";
   showDescription?: boolean;
+  showLabelLocationPicker?: boolean;
+  showHelp?: boolean;
+	hideRequiredAlert?: boolean;
   required: boolean;
   canHaveAlternateForm: boolean;
   canHaveDisplayHorizontal: boolean;
@@ -120,6 +123,7 @@ export type ToolbarItem = {
 };
 
 export interface SurveyBuilderProps {
+  formName?: string;
   toolbarItems?: ToolbarItem[];
   files?: any[];
   url?: string;
@@ -164,6 +168,10 @@ export interface SurveyGeneratorProps {
   // eslint-disable-next-line no-undef
   variables?: Record<any, any>;
   submitButton?: JSX.Element;
+  backButton?: JSX.Element;
+  buttons?: JSX.Element;
+  buttonClassName?: string;
+  formId?: string;
 }
 
 export class ReactSurveyGenerator extends React.Component<SurveyGeneratorProps> {}