react-survey-builder 1.0.9 → 1.0.10

package/lib/form.js

@@ -49,6 +49,10 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
       var actionName = name || 'Submit';
       var _this$props$submitBut = _this.props.submitButton,
         submitButton = _this$props$submitBut === void 0 ? false : _this$props$submitBut;
+      var buttonProps = {};
+      if (_this.props.formId) {
+        buttonProps.form = _this.props.formId;
+      }
       return submitButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
         variant: "primary",
         type: "submit"
@@ -61,7 +65,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
         backButton = _this$props$backButto === void 0 ? false : _this$props$backButto;
       return backButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
         variant: "secondary",
-        href: _this.props.backAction,
+        onClick: _this.props.backAction,
         className: "btn-cancel"
       }, backName);
     });
@@ -82,9 +86,13 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
         var result = {};
         answers.forEach(function (x) {
           if (x.name.indexOf('tags_') > -1) {
-            result[x.name] = x.value.map(function (y) {
-              return y.value;
-            });
+            if (Array.isArray(x.value)) {
+              result[x.name] = x.value.map(function (y) {
+                return y.value;
+              }).join(',');
+            } else {
+              result[x.name] = x.value;
+            }
           } else {
             result[x.name] = x.value;
           }
@@ -124,9 +132,9 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
       if (item.element === 'Rating') {
         $item.value = ref.inputField.current.state.rating;
       } else if (item.element === 'Tags') {
-        $item.value = ref.inputField.current.state.value;
-      } else if (item.element === 'DatePicker') {
         $item.value = ref.state.value;
+        // } else if (item.element === 'DatePicker') {
+        // 	$item.value = ref.state.value;
       } else if (item.element === 'Camera') {
         $item.value = ref.state.img;
       } else if (item.element === 'FileUpload') {
@@ -208,15 +216,22 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
       };
       if (!itemData.name) return null;
       var ref = this.inputs[item.fieldName];
-      if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
-        var checked_options = [];
+      if (item.element === 'Checkboxes') {
+        var checkedOptions = [];
+        item.options.forEach(function (option) {
+          var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
+          if ($option.checked) {
+            checkedOptions.push(option.value);
+          }
+        });
+        itemData.value = checkedOptions;
+      } else if (item.element === 'RadioButtons') {
         item.options.forEach(function (option) {
           var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
           if ($option.checked) {
-            checked_options.push(option.key);
+            itemData.value = option.value;
           }
         });
-        itemData.value = checked_options;
       } else if (item.element === 'Checkbox') {
         if (!ref || !ref.inputField || !ref.inputField.current) {
           itemData.value = false;
@@ -452,18 +467,18 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this8 = this;
-      var data_items = this.props.data;
+      var dataItems = this.props.data;
       if (this.props.displayShort) {
-        data_items = this.props.data.filter(function (i) {
+        dataItems = this.props.data.filter(function (i) {
           return i.alternateForm === true;
         });
       }
-      data_items.forEach(function (item) {
+      dataItems.forEach(function (item) {
         if (item && item.readOnly && item.variableKey && _this8.props.variables[item.variableKey]) {
           _this8.answerData[item.fieldName] = _this8.props.variables[item.variableKey];
         }
       });
-      var items = data_items.filter(function (x) {
+      var items = dataItems.filter(function (x) {
         return !x.parentId;
       }).map(function (item) {
         if (!item) return null;
@@ -566,11 +581,15 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
       var formTokenStyle = {
         display: 'none'
       };
+      var formProps = {};
+      if (this.props.formId) {
+        formProps.id = this.props.formId;
+      }
       return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_surveyValidator["default"], {
         emitter: this.emitter
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "react-survey-builder-form"
-      }, /*#__PURE__*/_react["default"].createElement("form", {
+      }, /*#__PURE__*/_react["default"].createElement("form", (0, _extends2["default"])({
         encType: "multipart/form-data",
         ref: function ref(c) {
           return _this8.form = c;
@@ -580,7 +599,7 @@ var ReactSurvey = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onSubmit: this.handleSubmit,
         method: this.props.formMethod
-      }, this.props.authenticity_token && /*#__PURE__*/_react["default"].createElement("div", {
+      }, formProps), this.props.authenticity_token && /*#__PURE__*/_react["default"].createElement("div", {
         style: formTokenStyle
       }, /*#__PURE__*/_react["default"].createElement("input", {
         name: "utf8",

package/lib/index.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "ElementStore", {
   }
 });
 exports.ReactSurveyBuilder = void 0;
+exports.ReactSurveyFieldGenerator = ReactSurveyFieldGenerator;
 exports.ReactSurveyGenerator = ReactSurveyGenerator;
 Object.defineProperty(exports, "Registry", {
   enumerable: true,
@@ -33,6 +34,7 @@ var _reactIntl = require("react-intl");
 var _preview = _interopRequireDefault(require("./preview"));
 var _toolbar = _interopRequireDefault(require("./toolbar"));
 var _form = _interopRequireDefault(require("./form"));
+var _formFields = _interopRequireDefault(require("./form-fields"));
 var _store = _interopRequireDefault(require("./stores/store"));
 var _registry = _interopRequireDefault(require("./stores/registry"));
 var _languageProvider = _interopRequireDefault(require("./language-provider"));
@@ -82,9 +84,16 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
         });
       }
     }
+  }, {
+    key: "saveFormData",
+    value: function saveFormData() {
+      _store["default"].dispatch('post');
+    }
   }, {
     key: "render",
     value: function render() {
+      var _this$props$formName,
+        _this2 = this;
       var toolbarProps = {
         showDescription: this.props.showDescription
       };
@@ -101,7 +110,9 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
       }, /*#__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"], {
+      }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        md: 9
+      }, /*#__PURE__*/_react["default"].createElement(_preview["default"], {
         files: this.props.files,
         manualEditModeOff: this.manualEditModeOff.bind(this),
         showCorrectColumn: this.props.showCorrectColumn,
@@ -118,9 +129,18 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
         editElement: this.state.editElement,
         renderEditForm: this.props.renderEditForm,
         saveAlways: this.props.saveAlways
-      }), /*#__PURE__*/_react["default"].createElement(_toolbar["default"], (0, _extends2["default"])({}, toolbarProps, {
+      })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
+        md: 3
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "border border-light border-3 p-3 d-grid gap-1 mb-3"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", null, (_this$props$formName = this.props.formName) !== null && _this$props$formName !== void 0 ? _this$props$formName : 'Preview')), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+        variant: "primary",
+        onClick: function onClick() {
+          _this2.saveFormData();
+        }
+      }, "Save Survey")), /*#__PURE__*/_react["default"].createElement(_toolbar["default"], (0, _extends2["default"])({}, toolbarProps, {
         customItems: this.props.customToolbarItems
-      })))))));
+      }))))))));
     }
   }]);
   return ReactSurveyBuilder;
@@ -133,9 +153,18 @@ function ReactSurveyGenerator(props) {
     messages: currentAppLocale.messages
   }, /*#__PURE__*/_react["default"].createElement(_form["default"], props));
 }
+function ReactSurveyFieldGenerator(props) {
+  var language = props.locale ? props.locale : 'en';
+  var currentAppLocale = _languageProvider["default"][language];
+  return /*#__PURE__*/_react["default"].createElement(_reactIntl.IntlProvider, {
+    locale: currentAppLocale.locale,
+    messages: currentAppLocale.messages
+  }, /*#__PURE__*/_react["default"].createElement(_formFields["default"], props));
+}
 var SurveyBuilders = {};
 SurveyBuilders.ReactSurveyBuilder = ReactSurveyBuilder;
 SurveyBuilders.ReactSurveyGenerator = ReactSurveyGenerator;
+SurveyBuilders.ReactSurveyFieldGenerator = ReactSurveyFieldGenerator;
 SurveyBuilders.ElementStore = _store["default"];
 SurveyBuilders.Registry = _registry["default"];
 var _default = exports["default"] = SurveyBuilders;

package/lib/language-provider/locales/en-us.json

@@ -97,5 +97,6 @@
 	"message.was-answered-incorrectly": "was answered incorrectly",
 	"message.was-not-registered": "was not registered",
 	"message.invalid-email": "field requires valid email address",
-	"message.invalid-phone-number": "field requires a valid phone number"
+	"message.invalid-phone-number": "field requires a valid phone number",
+	"message.invalid-date": "field requires a valid date in the format MM/DD/YYYY"
 }

package/lib/preview.js

@@ -19,7 +19,6 @@ var _store = _interopRequireDefault(require("./stores/store"));
 var _surveyDynamicEdit = _interopRequireDefault(require("./survey-dynamic-edit"));
 var _sortableFormElements = _interopRequireDefault(require("./sortable-form-elements"));
 var _componentDragLayer = _interopRequireDefault(require("./survey-elements/component-drag-layer"));
-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; } } /**
   * <Preview />
@@ -359,8 +358,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
       var items = data.map(function (item, index) {
         return _this6.getElement(item, index);
       });
-      return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
-        md: 9,
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "edit-form",

package/lib/survey-elements/component-error-message.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getError = exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _errorMessage = require("@hookform/error-message");
+var _reactBootstrap = require("react-bootstrap");
+var getError = exports.getError = function getError(errors, name) {
+  if (name !== undefined && errors !== undefined) {
+    var obj = errors;
+    name = name.split('.');
+    var len = name.length;
+    for (var i = 0; i < len - 1; i++) {
+      if (obj[name[i]] !== undefined) {
+        //console.log(obj[name[i]]);
+        obj = obj[name[i]];
+      }
+    }
+    return obj[name[len - 1]];
+  } else {
+    return undefined;
+  }
+};
+var ComponentErrorMessage = function ComponentErrorMessage(_ref) {
+  var name = _ref.name;
+  var methods = (0, _reactHookForm.useFormContext)();
+  if (getError(methods.formState.errors, name) !== undefined) {
+    return /*#__PURE__*/_react["default"].createElement(_errorMessage.ErrorMessage, {
+      errors: methods.formState.errors,
+      name: name,
+      render: function render(_ref2) {
+        var message = _ref2.message,
+          messages = _ref2.messages;
+        if (messages !== undefined && messages !== null) {
+          return Object.entries(messages).map(function (_ref3) {
+            var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+              type = _ref4[0],
+              message = _ref4[1];
+            return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Alert, {
+              key: "".concat(name, "-").concat(type),
+              variant: "danger",
+              className: "form-error"
+            }, message);
+          });
+        } else if (message !== undefined && message !== null && message !== '') {
+          return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Alert, {
+            variant: "danger",
+            className: "form-error"
+          }, message);
+        } else {
+          return null;
+        }
+      }
+    });
+  } else {
+    return null;
+  }
+};
+var _default = exports["default"] = ComponentErrorMessage;