react-survey-builder 1.0.20 → 1.0.21

package/lib/fieldset/FieldSet.js

@@ -11,15 +11,27 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _componentHeader = _interopRequireDefault(require("../survey-elements/component-header"));
-var _componentLabel = _interopRequireDefault(require("../survey-elements/component-label"));
 var _dustbin = _interopRequireDefault(require("../multi-column/dustbin"));
 var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
 var _reactBootstrap = require("react-bootstrap");
+var _myxss = _interopRequireDefault(require("../survey-elements/myxss"));
 var _excluded = ["item", "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; }
 var accepts = [_ItemTypes["default"].BOX, _ItemTypes["default"].CARD];
+var ComponentLegend = function ComponentLegend(_ref) {
+  var item = _ref.item;
+  var labelText = _myxss["default"].process(item.label);
+  if (!labelText || !labelText.trim()) {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement("legend", {
+    dangerouslySetInnerHTML: {
+      __html: labelText
+    }
+  });
+};
 function FieldSetBase(props) {
   var _React$useState = _react["default"].useState({}),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -85,7 +97,9 @@ 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(_reactBootstrap.Row, null, childItems === null || childItems === void 0 ? void 0 : childItems.map(function (x, i) {
+  })), /*#__PURE__*/_react["default"].createElement("fieldset", null, /*#__PURE__*/_react["default"].createElement(ComponentLegend, props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Container, {
+    fluid: true
+  }, /*#__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 || "_"),
       md: 12
@@ -111,5 +125,5 @@ function FieldSetBase(props) {
       seq: seq,
       rowNo: i
     }));
-  }))));
+  })))));
 }

package/lib/form-fields.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -33,12 +34,8 @@ var Image = _surveyElements["default"].Image,
 var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
   var _ref$validateForCorre = _ref.validateForCorrectness,
     validateForCorrectness = _ref$validateForCorre === void 0 ? false : _ref$validateForCorre,
-    _ref$skipValidations = _ref.skipValidations,
-    skipValidations = _ref$skipValidations === void 0 ? false : _ref$skipValidations,
     _ref$displayShort = _ref.displayShort,
     displayShort = _ref$displayShort === void 0 ? false : _ref$displayShort,
-    _ref$hideRequiredAler = _ref.hideRequiredAlert,
-    hideRequiredAlert = _ref$hideRequiredAler === void 0 ? false : _ref$hideRequiredAler,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     downloadPath = _ref.downloadPath,
@@ -107,6 +104,9 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     if (defaultValue === undefined) {
       if ($dataItem.element === 'Checkboxes' || $dataItem.element === 'Tags') {
         defaultValue = [];
+      } else if ($dataItem.element === 'NumberInput' || $dataItem.element === 'Range') {
+        var _$dataItem$minValue;
+        defaultValue = (_$dataItem$minValue = $dataItem.minValue) !== null && _$dataItem$minValue !== void 0 ? _$dataItem$minValue : 0;
       } else {
         defaultValue = '';
       }
@@ -153,7 +153,8 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
   };
   var _isIncorrect = function _isIncorrect($dataItem) {
     var incorrect = false;
-    if ($dataItem.canHaveAnswer) {
+    var canHaveAnswer = ['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags', 'Checkboxes', 'Checkbox', 'RadioButtons', 'Rating', 'Range'].indexOf($dataItem.element) !== -1;
+    if (canHaveAnswer) {
       var ref = inputs.current[$dataItem.fieldName];
       if ($dataItem.element === 'Checkboxes' || $dataItem.element === 'RadioButtons') {
         $dataItem.options.forEach(function (option) {
@@ -164,7 +165,13 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
         });
       } else {
         var $item = _getItemValue($dataItem, ref);
-        if ($dataItem.element === 'Rating') {
+        if ($dataItem.element === 'Rating' || $dataItem.element === 'Range' || $dataItem.element === 'NumberInput') {
+          // number to string
+          if ($item.value.toString() !== $dataItem.correct) {
+            incorrect = true;
+          }
+        } else if ($dataItem.element === 'Checkbox') {
+          // boolean to string
           if ($item.value.toString() !== $dataItem.correct) {
             incorrect = true;
           }
@@ -252,41 +259,25 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     });
     return formData;
   };
-  var _getSignatureImg = function _getSignatureImg($dataItem) {
-    // const ref = inputs.current[$dataItem.fieldName];
-    // const $canvas_sig = ref.canvas.current;
-    // if ($canvas_sig) {
-    // 	const base64 = $canvas_sig.toDataURL().replace('data:image/png;base64,', '');
-    // 	const isEmpty = $canvas_sig.isEmpty();
-    // 	const $input_sig = ReactDOM.findDOMNode(ref.inputField.current);
-    // 	if (isEmpty) {
-    // 		$input_sig.value = '';
-    // 		methods.setValue($dataItem.fieldName, '');
-    // 	} else {
-    // 		$input_sig.value = base64;
-    // 		methods.setValue($dataItem.fieldName, base64);
-    // 	}
-    // }
-  };
 
   //#endregion
   //#region form methods
 
   var handleSubmit = function handleSubmit($formData, event) {
     event.preventDefault();
-    console.log('handleSubmit', $formData);
-    var errors = [];
-    if (!skipValidations) {
-      errors = validateForm();
-      // Publish errors, if any.
-      //emitter.emit('surveyValidation', errors);
+    var hasErrors = false;
+    if (validateForCorrectness) {
+      hasErrors = validateForm();
     }
 
     // Only submit if there are no errors.
-    if (errors.length < 1) {
+    if (hasErrors === false) {
       if (onSubmit) {
         var $data = _collectFormData(items);
-        onSubmit($data);
+        onSubmit({
+          formData: $formData,
+          answers: $data
+        });
       } else {
         var $form = _reactDom["default"].findDOMNode(form.current);
         $form.submit();
@@ -302,7 +293,7 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     }
   };
   var validateForm = function validateForm() {
-    var errors = [];
+    var hasErrors = false;
     var dataItems = items;
     if (displayShort) {
       dataItems = items.filter(function (i) {
@@ -310,51 +301,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
       });
     }
     dataItems.forEach(function (item) {
-      if (item.element === 'Signature') {
-        _getSignatureImg(item);
-      }
-      if (_isInvalid(item)) {
-        errors.push("".concat(item.label, " ").concat(intl.formatMessage({
-          id: 'message.is-required'
-        }), "!"));
-      }
-      if (item.element === 'EmailInput') {
-        var ref = inputs.current[item.fieldName];
-        var emailValue = _getItemValue(item, ref).value;
-        if (emailValue) {
-          var checkEmail = validateEmail(emailValue);
-          if (!checkEmail) {
-            errors.push("".concat(item.label, " ").concat(intl.formatMessage({
-              id: 'message.invalid-email'
-            })));
-          }
-        }
-      }
-      if (item.element === 'PhoneNumber') {
-        var _ref2 = inputs.current[item.fieldName];
-        var phoneValue = _getItemValue(item, _ref2).value;
-        if (phoneValue) {
-          var checkPhone = validatePhone(phoneValue);
-          if (!checkPhone) {
-            errors.push("".concat(item.label, " ").concat(intl.formatMessage({
-              id: 'message.invalid-phone-number'
-            })));
-          }
+      if (_isIncorrect(item)) {
+        if (methods) {
+          methods.setError(item.fieldName, {
+            type: 'incorrect',
+            message: "".concat(item.label, " ").concat(intl.formatMessage({
+              id: 'message.was-answered-incorrectly'
+            }))
+          });
         }
-      }
-      if (validateForCorrectness && _isIncorrect(item)) {
-        methods.setError(item.fieldName, {
-          type: 'incorrect',
-          message: "".concat(item.label, " ").concat(intl.formatMessage({
-            id: 'message.was-answered-incorrectly'
-          }))
-        });
-        errors.push("".concat(item.label, " ").concat(intl.formatMessage({
-          id: 'message.was-answered-incorrectly'
-        }), "!"));
+        hasErrors = true;
       }
     });
-    return errors;
+    return hasErrors;
   };
   var validateEmail = function validateEmail(email) {
     return email.match(
@@ -435,12 +394,12 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
       return x.id === id;
     });
     if ($dataItem !== undefined) {
+      var _ref2, _ref3;
       return _objectSpread(_objectSpread({}, $dataItem), {}, {
         fieldRules: getFieldRules($dataItem),
         print: print !== null && print !== void 0 ? print : false,
-        hideRequiredAlert: hideRequiredAlert || $dataItem.hideRequiredAlert,
-        readOnly: readOnly || $dataItem.readOnly,
-        disabled: $dataItem.readOnly,
+        readOnly: (_ref2 = readOnly || $dataItem.readOnly) !== null && _ref2 !== void 0 ? _ref2 : false,
+        disabled: (_ref3 = readOnly || $dataItem.readOnly) !== null && _ref3 !== void 0 ? _ref3 : false,
         mutable: true
       });
     }
@@ -460,19 +419,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
       defaultValue: _getDefaultValue(item),
       disabled: item.disabled,
       required: item.required,
-      render: function render(_ref3) {
-        var _ref3$field = _ref3.field,
-          _onChange = _ref3$field.onChange,
-          onBlur = _ref3$field.onBlur,
-          value = _ref3$field.value,
-          name = _ref3$field.name,
-          ref = _ref3$field.ref,
-          _ref3$fieldState = _ref3.fieldState,
-          invalid = _ref3$fieldState.invalid,
-          isTouched = _ref3$fieldState.isTouched,
-          isDirty = _ref3$fieldState.isDirty,
-          error = _ref3$fieldState.error,
-          formState = _ref3.formState;
+      render: function render(_ref4) {
+        var _ref4$field = _ref4.field,
+          _onChange = _ref4$field.onChange,
+          onBlur = _ref4$field.onBlur,
+          value = _ref4$field.value,
+          name = _ref4$field.name,
+          ref = _ref4$field.ref,
+          _ref4$fieldState = _ref4.fieldState,
+          invalid = _ref4$fieldState.invalid,
+          isTouched = _ref4$fieldState.isTouched,
+          isDirty = _ref4$fieldState.isDirty,
+          error = _ref4$fieldState.error,
+          formState = _ref4.formState;
         return /*#__PURE__*/_react["default"].createElement(Input, {
           onBlur: onBlur,
           onChange: function onChange(e) {
@@ -526,19 +485,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
       defaultValue: _getDefaultValue(item),
       disabled: item.disabled,
       required: item.required,
-      render: function render(_ref4) {
-        var _ref4$field = _ref4.field,
-          _onChange2 = _ref4$field.onChange,
-          onBlur = _ref4$field.onBlur,
-          value = _ref4$field.value,
-          name = _ref4$field.name,
-          ref = _ref4$field.ref,
-          _ref4$fieldState = _ref4.fieldState,
-          invalid = _ref4$fieldState.invalid,
-          isTouched = _ref4$fieldState.isTouched,
-          isDirty = _ref4$fieldState.isDirty,
-          error = _ref4$fieldState.error,
-          formState = _ref4.formState;
+      render: function render(_ref5) {
+        var _ref5$field = _ref5.field,
+          _onChange2 = _ref5$field.onChange,
+          onBlur = _ref5$field.onBlur,
+          value = _ref5$field.value,
+          name = _ref5$field.name,
+          ref = _ref5$field.ref,
+          _ref5$fieldState = _ref5.fieldState,
+          invalid = _ref5$fieldState.invalid,
+          isTouched = _ref5$fieldState.isTouched,
+          isDirty = _ref5$fieldState.isDirty,
+          error = _ref5$fieldState.error,
+          formState = _ref5.formState;
         return /*#__PURE__*/_react["default"].createElement(_customElement["default"], {
           onBlur: onBlur,
           onChange: function onChange(e) {
@@ -619,11 +578,11 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
 
   //#endregion
 
-  var dataItems = items;
+  var dataItems = items ? (0, _toConsumableArray2["default"])(items) : [];
   if (displayShort) {
-    dataItems = items.filter(function (i) {
+    dataItems = items ? (0, _toConsumableArray2["default"])(items).filter(function (i) {
       return i.alternateForm === true;
-    });
+    }) : [];
   }
   dataItems.forEach(function (item) {
     if (item && item.readOnly && item.variableKey && variables[item.variableKey]) {
@@ -633,12 +592,12 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
   var fieldItems = dataItems.filter(function (x) {
     return !x.parentId;
   }).map(function (item) {
+    var _ref6, _ref7;
     if (!item) return null;
     item.fieldRules = getFieldRules(item);
     item.print = print !== null && print !== void 0 ? print : false;
-    item.hideRequiredAlert = hideRequiredAlert || item.hideRequiredAlert;
-    item.readOnly = readOnly || item.readOnly;
-    item.disabled = item.readOnly;
+    item.readOnly = (_ref6 = readOnly || item.readOnly) !== null && _ref6 !== void 0 ? _ref6 : false;
+    item.disabled = (_ref7 = readOnly || item.readOnly) !== null && _ref7 !== void 0 ? _ref7 : false;
     item.mutable = true;
     switch (item.element) {
       case 'TextInput':
@@ -673,19 +632,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           defaultValue: _getDefaultValue(item),
           disabled: item.disabled,
           required: item.required,
-          render: function render(_ref5) {
-            var _ref5$field = _ref5.field,
-              _onChange3 = _ref5$field.onChange,
-              onBlur = _ref5$field.onBlur,
-              value = _ref5$field.value,
-              name = _ref5$field.name,
-              ref = _ref5$field.ref,
-              _ref5$fieldState = _ref5.fieldState,
-              invalid = _ref5$fieldState.invalid,
-              isTouched = _ref5$fieldState.isTouched,
-              isDirty = _ref5$fieldState.isDirty,
-              error = _ref5$fieldState.error,
-              formState = _ref5.formState;
+          render: function render(_ref8) {
+            var _ref8$field = _ref8.field,
+              _onChange3 = _ref8$field.onChange,
+              onBlur = _ref8$field.onBlur,
+              value = _ref8$field.value,
+              name = _ref8$field.name,
+              ref = _ref8$field.ref,
+              _ref8$fieldState = _ref8.fieldState,
+              invalid = _ref8$fieldState.invalid,
+              isTouched = _ref8$fieldState.isTouched,
+              isDirty = _ref8$fieldState.isDirty,
+              error = _ref8$fieldState.error,
+              formState = _ref8.formState;
             return /*#__PURE__*/_react["default"].createElement(Signature, {
               methods: methods,
               onBlur: onBlur,
@@ -711,19 +670,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           defaultValue: _optionsDefaultValue(item),
           disabled: item.disabled,
           required: item.required,
-          render: function render(_ref6) {
-            var _ref6$field = _ref6.field,
-              _onChange4 = _ref6$field.onChange,
-              onBlur = _ref6$field.onBlur,
-              value = _ref6$field.value,
-              name = _ref6$field.name,
-              ref = _ref6$field.ref,
-              _ref6$fieldState = _ref6.fieldState,
-              invalid = _ref6$fieldState.invalid,
-              isTouched = _ref6$fieldState.isTouched,
-              isDirty = _ref6$fieldState.isDirty,
-              error = _ref6$fieldState.error,
-              formState = _ref6.formState;
+          render: function render(_ref9) {
+            var _ref9$field = _ref9.field,
+              _onChange4 = _ref9$field.onChange,
+              onBlur = _ref9$field.onBlur,
+              value = _ref9$field.value,
+              name = _ref9$field.name,
+              ref = _ref9$field.ref,
+              _ref9$fieldState = _ref9.fieldState,
+              invalid = _ref9$fieldState.invalid,
+              isTouched = _ref9$fieldState.isTouched,
+              isDirty = _ref9$fieldState.isDirty,
+              error = _ref9$fieldState.error,
+              formState = _ref9.formState;
             return /*#__PURE__*/_react["default"].createElement(Checkboxes, {
               onBlur: onBlur,
               onChange: function onChange(e) {
@@ -763,19 +722,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           defaultValue: _getDefaultValue(item),
           disabled: item.disabled,
           required: item.required,
-          render: function render(_ref7) {
-            var _ref7$field = _ref7.field,
-              _onChange5 = _ref7$field.onChange,
-              onBlur = _ref7$field.onBlur,
-              value = _ref7$field.value,
-              name = _ref7$field.name,
-              ref = _ref7$field.ref,
-              _ref7$fieldState = _ref7.fieldState,
-              invalid = _ref7$fieldState.invalid,
-              isTouched = _ref7$fieldState.isTouched,
-              isDirty = _ref7$fieldState.isDirty,
-              error = _ref7$fieldState.error,
-              formState = _ref7.formState;
+          render: function render(_ref10) {
+            var _ref10$field = _ref10.field,
+              _onChange5 = _ref10$field.onChange,
+              onBlur = _ref10$field.onBlur,
+              value = _ref10$field.value,
+              name = _ref10$field.name,
+              ref = _ref10$field.ref,
+              _ref10$fieldState = _ref10.fieldState,
+              invalid = _ref10$fieldState.invalid,
+              isTouched = _ref10$fieldState.isTouched,
+              isDirty = _ref10$fieldState.isDirty,
+              error = _ref10$fieldState.error,
+              formState = _ref10.formState;
             return /*#__PURE__*/_react["default"].createElement(Camera, {
               onBlur: onBlur,
               onChange: function onChange(e) {
@@ -801,19 +760,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           defaultValue: _getDefaultValue(item),
           disabled: item.disabled,
           required: item.required,
-          render: function render(_ref8) {
-            var _ref8$field = _ref8.field,
-              _onChange6 = _ref8$field.onChange,
-              onBlur = _ref8$field.onBlur,
-              value = _ref8$field.value,
-              name = _ref8$field.name,
-              ref = _ref8$field.ref,
-              _ref8$fieldState = _ref8.fieldState,
-              invalid = _ref8$fieldState.invalid,
-              isTouched = _ref8$fieldState.isTouched,
-              isDirty = _ref8$fieldState.isDirty,
-              error = _ref8$fieldState.error,
-              formState = _ref8.formState;
+          render: function render(_ref11) {
+            var _ref11$field = _ref11.field,
+              _onChange6 = _ref11$field.onChange,
+              onBlur = _ref11$field.onBlur,
+              value = _ref11$field.value,
+              name = _ref11$field.name,
+              ref = _ref11$field.ref,
+              _ref11$fieldState = _ref11.fieldState,
+              invalid = _ref11$fieldState.invalid,
+              isTouched = _ref11$fieldState.isTouched,
+              isDirty = _ref11$fieldState.isDirty,
+              error = _ref11$fieldState.error,
+              formState = _ref11.formState;
             return /*#__PURE__*/_react["default"].createElement(FileUpload, {
               onBlur: onBlur,
               onChange: function onChange(e) {