react-survey-builder 1.0.16 → 1.0.17

package/lib/form-fields.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntl = require("react-intl");
@@ -17,9 +17,9 @@ var _customElement = _interopRequireDefault(require("./survey-elements/custom-el
 var _registry = _interopRequireDefault(require("./stores/registry"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactHookForm = require("react-hook-form");
-var _componentErrorMessage = _interopRequireDefault(require("./survey-elements/component-error-message"));
 var _lodash = require("lodash");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _reactPhoneNumberInput = require("react-phone-number-input");
 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; } /**
   * <FormFields />
@@ -47,7 +47,7 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     onSubmit = _ref.onSubmit,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
-    data = _ref.data,
+    items = _ref.items,
     _ref$submitButton = _ref.submitButton,
     submitButton = _ref$submitButton === void 0 ? false : _ref$submitButton,
     _ref$backButton = _ref.backButton,
@@ -67,76 +67,82 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     task_id = _ref.task_id,
     buttonClassName = _ref.buttonClassName,
     formId = _ref.formId,
-    methods = _ref.methods;
-  // const methods = useFormContext();
-  console.log(methods);
+    methods = _ref.methods,
+    _ref$print = _ref.print,
+    print = _ref$print === void 0 ? false : _ref$print;
   if (!methods) return null;
 
   //#region helper functions
 
-  var _convert = function _convert(answers) {
-    if (Array.isArray(answers)) {
+  var _convert = function _convert($dataAnswers) {
+    if (Array.isArray($dataAnswers)) {
       var result = {};
-      answers.forEach(function (x) {
-        if (x.name.indexOf('tags_') > -1) {
-          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;
-        }
+      $dataAnswers.forEach(function (answer) {
+        result[answer.name] = answer.value;
       });
       return result;
     }
-    return answers || {};
+    return $dataAnswers || {};
   };
   var form = _react["default"].useRef();
   var inputs = _react["default"].useRef({});
   var answerData = _react["default"].useRef(_convert(answers));
-  var _getDefaultValue = function _getDefaultValue(item) {
-    var defaultValue = answerData.current[item.fieldName];
-    if (item.element === 'DatePicker') {
-      var _item$defaultToday;
-      var defaultToday = (_item$defaultToday = item.defaultToday) !== null && _item$defaultToday !== void 0 ? _item$defaultToday : false;
-      var formatMask = item.formatMask || 'MM/DD/YYYY';
+  var _getDefaultValue = function _getDefaultValue($dataItem) {
+    var defaultValue = answerData.current[$dataItem.fieldName];
+    if ($dataItem.element === 'DatePicker') {
+      var _$dataItem$defaultTod;
+      var defaultToday = (_$dataItem$defaultTod = $dataItem.defaultToday) !== null && _$dataItem$defaultTod !== void 0 ? _$dataItem$defaultTod : false;
+      var formatMask = $dataItem.formatMask || 'MM/DD/YYYY';
       if (defaultToday && (defaultValue === '' || defaultValue === undefined)) {
         defaultValue = (0, _momentTimezone["default"])().format(formatMask);
       }
     }
+    if ($dataItem.element === 'Checkbox') {
+      var _$dataItem$defaultChe;
+      var defaultChecked = (_$dataItem$defaultChe = $dataItem.defaultChecked) !== null && _$dataItem$defaultChe !== void 0 ? _$dataItem$defaultChe : false;
+      if (defaultChecked === true) {
+        defaultValue = true;
+      }
+    }
+    if (defaultValue === undefined) {
+      if ($dataItem.element === 'Checkboxes' || $dataItem.element === 'Tags') {
+        defaultValue = [];
+      } else {
+        defaultValue = '';
+      }
+    }
     return defaultValue;
   };
-  var _optionsDefaultValue = function _optionsDefaultValue(item) {
-    var defaultValue = _getDefaultValue(item);
+  var _optionsDefaultValue = function _optionsDefaultValue($dataItem) {
+    var defaultValue = _getDefaultValue($dataItem);
     if (defaultValue) {
       return defaultValue;
     }
     var defaultChecked = [];
-    item.options.forEach(function (option) {
+    $dataItem.options.forEach(function (option) {
       if (answerData.current["option_".concat(option.key)]) {
         defaultChecked.push(option.key);
       }
     });
     return defaultChecked;
   };
-  var _getItemValue = function _getItemValue(item, ref) {
+  var _getItemValue = function _getItemValue($dataItem, ref) {
     var $item = {
-      element: item.element,
+      element: $dataItem.element,
       value: ''
     };
-    if (item.element === 'Rating') {
+    if ($dataItem.element === 'Rating') {
       $item.value = ref.inputField.current.state.rating;
-    } else if (item.element === 'Tags') {
-      $item.value = ref.state.value;
+    } else if ($dataItem.element === 'Tags') {
+      $item.value = ref.props.value;
       // } else if (item.element === 'DatePicker') {
       // 	$item.value = ref.state.value;
-    } else if (item.element === 'Camera') {
+    } else if ($dataItem.element === 'Camera') {
       $item.value = ref.state.img;
-    } else if (item.element === 'FileUpload') {
+    } else if ($dataItem.element === 'FileUpload') {
       $item.value = ref.state.fileUpload;
+    } else if ($dataItem.element === 'Signature') {
+      $item.value = ref.state.value;
     } else if (ref && ref.inputField && ref.inputField.current) {
       $item = _reactDom["default"].findDOMNode(ref.inputField.current);
       if ($item && typeof $item.value === 'string') {
@@ -145,37 +151,37 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     }
     return $item;
   };
-  var _isIncorrect = function _isIncorrect(item) {
+  var _isIncorrect = function _isIncorrect($dataItem) {
     var incorrect = false;
-    if (item.canHaveAnswer) {
-      var ref = inputs.current[item.fieldName];
-      if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
-        item.options.forEach(function (option) {
+    if ($dataItem.canHaveAnswer) {
+      var ref = inputs.current[$dataItem.fieldName];
+      if ($dataItem.element === 'Checkboxes' || $dataItem.element === 'RadioButtons') {
+        $dataItem.options.forEach(function (option) {
           var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
           if (option.hasOwnProperty('correct') && !$option.checked || !option.hasOwnProperty('correct') && $option.checked) {
             incorrect = true;
           }
         });
       } else {
-        var $item = _getItemValue(item, ref);
-        if (item.element === 'Rating') {
-          if ($item.value.toString() !== item.correct) {
+        var $item = _getItemValue($dataItem, ref);
+        if ($dataItem.element === 'Rating') {
+          if ($item.value.toString() !== $dataItem.correct) {
             incorrect = true;
           }
-        } else if ($item.value.toLowerCase() !== item.correct.trim().toLowerCase()) {
+        } else if ($item.value.toLowerCase() !== $dataItem.correct.trim().toLowerCase()) {
           incorrect = true;
         }
       }
     }
     return incorrect;
   };
-  var _isInvalid = function _isInvalid(item) {
+  var _isInvalid = function _isInvalid($dataItem) {
     var invalid = false;
-    if (item.required === true) {
-      var ref = inputs.current[item.fieldName];
-      if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
+    if ($dataItem.required === true) {
+      var ref = inputs.current[$dataItem.fieldName];
+      if ($dataItem.element === 'Checkboxes' || $dataItem.element === 'RadioButtons') {
         var checked_options = 0;
-        item.options.forEach(function (option) {
+        $dataItem.options.forEach(function (option) {
           var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
           if ($option.checked) {
             checked_options += 1;
@@ -186,8 +192,8 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           invalid = true;
         }
       } else {
-        var $item = _getItemValue(item, ref);
-        if (item.element === 'Rating') {
+        var $item = _getItemValue($dataItem, ref);
+        if ($dataItem.element === 'Rating') {
           if ($item.value === 0) {
             invalid = true;
           }
@@ -198,33 +204,32 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     }
     return invalid;
   };
-  var _collect = function _collect(item) {
+  var _collect = function _collect($dataItem) {
     var itemData = {
-      id: item.id,
-      name: item.fieldName,
-      customName: item.customName || item.fieldName,
-      help: item.help,
-      label: item.label !== null && item.label !== undefined && item.label !== '' ? item.label.trim() : ''
+      id: $dataItem.id,
+      name: $dataItem.fieldName,
+      customName: $dataItem.customName || $dataItem.fieldName,
+      label: $dataItem.label !== null && $dataItem.label !== undefined && $dataItem.label !== '' ? $dataItem.label.trim() : ''
     };
     if (!itemData.name) return null;
-    var ref = inputs.current[item.fieldName];
-    if (item.element === 'Checkboxes') {
+    var ref = inputs.current[$dataItem.fieldName];
+    if ($dataItem.element === 'Checkboxes') {
       var checkedOptions = [];
-      item.options.forEach(function (option) {
+      $dataItem.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) {
+    } else if ($dataItem.element === 'RadioButtons') {
+      $dataItem.options.forEach(function (option) {
         var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
         if ($option.checked) {
           itemData.value = option.value;
         }
       });
-    } else if (item.element === 'Checkbox') {
+    } else if ($dataItem.element === 'Checkbox') {
       if (!ref || !ref.inputField || !ref.inputField.current) {
         itemData.value = false;
       } else {
@@ -232,14 +237,14 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
       }
     } else {
       if (!ref) return null;
-      itemData.value = _getItemValue(item, ref).value;
+      itemData.value = _getItemValue($dataItem, ref).value;
     }
-    itemData.required = item.required || false;
+    itemData.required = $dataItem.required || false;
     return itemData;
   };
-  var _collectFormData = function _collectFormData($data) {
+  var _collectFormData = function _collectFormData($dataItems) {
     var formData = [];
-    $data.forEach(function (item) {
+    $dataItems.forEach(function (item) {
       var itemData = _collect(item);
       if (itemData) {
         formData.push(itemData);
@@ -247,21 +252,21 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     });
     return formData;
   };
-  var _getSignatureImg = function _getSignatureImg(item) {
-    var ref = inputs.current[item.fieldName];
-    var $canvas_sig = ref.canvas.current;
-    if ($canvas_sig) {
-      var base64 = $canvas_sig.toDataURL().replace('data:image/png;base64,', '');
-      var _isEmpty = $canvas_sig.isEmpty();
-      var $input_sig = _reactDom["default"].findDOMNode(ref.inputField.current);
-      if (_isEmpty) {
-        $input_sig.value = '';
-        methods.setValue(item.fieldName, '');
-      } else {
-        $input_sig.value = base64;
-        methods.setValue(item.fieldName, base64);
-      }
-    }
+  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
@@ -280,7 +285,7 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     // Only submit if there are no errors.
     if (errors.length < 1) {
       if (onSubmit) {
-        var $data = _collectFormData(data);
+        var $data = _collectFormData(items);
         onSubmit($data);
       } else {
         var $form = _reactDom["default"].findDOMNode(form.current);
@@ -292,15 +297,15 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     // console.log('handleChange');
     // Call submit function on change
     if (onChange) {
-      var $data = _collectFormData(data);
+      var $data = _collectFormData(items);
       onChange($data);
     }
   };
   var validateForm = function validateForm() {
     var errors = [];
-    var dataItems = data;
+    var dataItems = items;
     if (displayShort) {
-      dataItems = data.filter(function (i) {
+      dataItems = items.filter(function (i) {
         return i.alternateForm === true;
       });
     }
@@ -356,10 +361,26 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     // eslint-disable-next-line no-useless-escape
     /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
   };
+  var toE164PhoneNumber = function toE164PhoneNumber(phoneNumberValue) {
+    if (phoneNumberValue !== undefined && phoneNumberValue !== null) {
+      //Filter only numbers from the input
+      var cleaned = ('' + phoneNumberValue).replace(/\D/g, '');
+
+      //Check if the input is of correct
+      var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
+      if (match) {
+        //Remove the matched extension code
+        //Change this to format for any country code.
+        var intlCode = match[1] ? '+1' : '+1';
+        return [intlCode, match[2], match[3], match[4]].join('');
+      }
+      return '';
+    } else {
+      return '';
+    }
+  };
   var validatePhone = function validatePhone(phone) {
-    return phone.match(
-    // eslint-disable-next-line no-useless-escape
-    /^[+]?(1\-|1\s|1|\d{3}\-|\d{3}\s|)?((\(\d{3}\))|\d{3})(\-|\s)?(\d{3})(\-|\s)?(\d{4})$/g);
+    return (0, _reactPhoneNumberInput.isValidPhoneNumber)(toE164PhoneNumber(phone), 'US');
   };
   var validateDate = function validateDate(dateString) {
     if (dateString !== undefined && dateString !== null && dateString !== "") {
@@ -409,29 +430,39 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     }
     return true;
   };
-  var getDataById = function getDataById(id) {
-    return data.find(function (x) {
+  var getDataItemById = function getDataItemById(id) {
+    var $dataItem = items.find(function (x) {
       return x.id === id;
     });
+    if ($dataItem !== undefined) {
+      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,
+        mutable: true
+      });
+    }
+    return null;
   };
   var getInputElement = function getInputElement(item) {
+    if (!item) return null;
     if (item.custom) {
       return getCustomElement(item);
     }
     var Input = _surveyElements["default"][item.element];
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-      key: "form_fragment_".concat(item.id)
-    }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+    return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
       key: "form_".concat(item.id),
       control: methods.control,
       name: item.fieldName,
       rules: item.fieldRules,
       defaultValue: _getDefaultValue(item),
-      disabled: readOnly || item.readOnly,
+      disabled: item.disabled,
       required: item.required,
       render: function render(_ref3) {
         var _ref3$field = _ref3.field,
-          onChange = _ref3$field.onChange,
+          _onChange = _ref3$field.onChange,
           onBlur = _ref3$field.onBlur,
           value = _ref3$field.value,
           name = _ref3$field.name,
@@ -444,34 +475,30 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           formState = _ref3.formState;
         return /*#__PURE__*/_react["default"].createElement(Input, {
           onBlur: onBlur,
-          onChange: onChange,
+          onChange: function onChange(e) {
+            _onChange(e);
+            handleChange(e);
+          },
           value: value,
           name: name,
           ref: function ref(c) {
             return inputs.current[item.fieldName] = c;
           },
           isInvalid: invalid,
-          handleChange: handleChange,
-          mutable: true,
-          data: item,
-          readOnly: readOnly || item.readOnly,
-          hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
+          item: item
         });
       }
-    }), /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
-      name: item.fieldName
-    }));
+    });
   };
   var getContainerElement = function getContainerElement(item, Element) {
-    var controls = item.childItems.map(function (x) {
-      return x ? getInputElement(getDataById(x)) : /*#__PURE__*/_react["default"].createElement("div", null, "\xA0");
+    var controls = item.childItems.map(function (childItem) {
+      return childItem ? getInputElement(getDataItemById(childItem)) : /*#__PURE__*/_react["default"].createElement("div", null, "\xA0");
     });
     return /*#__PURE__*/_react["default"].createElement(Element, {
       mutable: true,
       key: "form_".concat(item.id),
-      data: item,
-      controls: controls,
-      hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
+      item: item,
+      controls: controls
     });
   };
   var getSimpleElement = function getSimpleElement(item) {
@@ -479,8 +506,7 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     return /*#__PURE__*/_react["default"].createElement(Element, {
       mutable: true,
       key: "form_".concat(item.id),
-      data: item,
-      hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
+      item: item
     });
   };
   var getCustomElement = function getCustomElement(item) {
@@ -492,26 +518,17 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
         })));
       }
     }
-    var inputProps = item.forwardRef && {
-      handleChange: handleChange,
-      defaultValue: _getDefaultValue(item),
-      ref: function ref(c) {
-        return inputs.current[item.fieldName] = c;
-      }
-    };
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-      key: "form_fragment_".concat(item.id)
-    }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+    return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
       key: "form_".concat(item.id),
       control: methods.control,
       name: item.fieldName,
       rules: item.fieldRules,
       defaultValue: _getDefaultValue(item),
-      disabled: readOnly || item.readOnly,
+      disabled: item.disabled,
       required: item.required,
       render: function render(_ref4) {
         var _ref4$field = _ref4.field,
-          onChange = _ref4$field.onChange,
+          _onChange2 = _ref4$field.onChange,
           onBlur = _ref4$field.onBlur,
           value = _ref4$field.value,
           name = _ref4$field.name,
@@ -522,25 +539,22 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           isDirty = _ref4$fieldState.isDirty,
           error = _ref4$fieldState.error,
           formState = _ref4.formState;
-        return /*#__PURE__*/_react["default"].createElement(_customElement["default"], (0, _extends2["default"])({
+        return /*#__PURE__*/_react["default"].createElement(_customElement["default"], {
           onBlur: onBlur,
-          onChange: onChange,
+          onChange: function onChange(e) {
+            _onChange2(e);
+            handleChange(e);
+          },
           value: value,
           name: name,
           ref: function ref(c) {
             return inputs.current[item.fieldName] = c;
           },
           isInvalid: invalid,
-          handleChange: handleChange,
-          mutable: true,
-          data: item,
-          readOnly: readOnly || item.readOnly,
-          hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
-        }, inputProps));
+          item: item
+        });
       }
-    }), /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
-      name: item.fieldName
-    }));
+    });
   };
   var getFieldRules = function getFieldRules(item) {
     var fieldRules = {};
@@ -563,18 +577,21 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
             id: 'message.invalid-email'
           }));
         };
+        break;
       case 'PhoneNumber':
         fieldRules.validate = function (value) {
           return validatePhone(value) || "".concat(item.label, " ").concat(intl.formatMessage({
             id: 'message.invalid-phone-number'
           }));
         };
+        break;
       case 'DatePicker':
         fieldRules.validate = function (value) {
           return validateDate(value) || "".concat(item.label, " ").concat(intl.formatMessage({
             id: 'message.invalid-date'
           }));
         };
+        break;
       default:
         break;
     }
@@ -602,9 +619,9 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
 
   //#endregion
 
-  var dataItems = data;
+  var dataItems = items;
   if (displayShort) {
-    dataItems = data.filter(function (i) {
+    dataItems = items.filter(function (i) {
       return i.alternateForm === true;
     });
   }
@@ -613,11 +630,16 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
       answerData.current[item.fieldName] = variables[item.variableKey];
     }
   });
-  var items = dataItems.filter(function (x) {
+  var fieldItems = dataItems.filter(function (x) {
     return !x.parentId;
   }).map(function (item) {
     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.mutable = true;
     switch (item.element) {
       case 'TextInput':
       case 'EmailInput':
@@ -643,19 +665,17 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
       case 'FieldSet':
         return getContainerElement(item, _fieldset.FieldSet);
       case 'Signature':
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-          key: "form_fragment_".concat(item.id)
-        }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+        return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
           key: "form_".concat(item.id),
           control: methods.control,
           name: item.fieldName,
           rules: item.fieldRules,
           defaultValue: _getDefaultValue(item),
-          disabled: readOnly || item.readOnly,
+          disabled: item.disabled,
           required: item.required,
           render: function render(_ref5) {
             var _ref5$field = _ref5.field,
-              onChange = _ref5$field.onChange,
+              _onChange3 = _ref5$field.onChange,
               onBlur = _ref5$field.onBlur,
               value = _ref5$field.value,
               name = _ref5$field.name,
@@ -669,36 +689,31 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
             return /*#__PURE__*/_react["default"].createElement(Signature, {
               methods: methods,
               onBlur: onBlur,
-              onChange: onChange,
+              onChange: function onChange(e) {
+                _onChange3(e);
+                handleChange(e);
+              },
               value: value,
               name: name,
               ref: function ref(c) {
                 return inputs.current[item.fieldName] = c;
               },
-              handleChange: handleChange,
-              mutable: true,
-              data: item,
-              readOnly: readOnly || item.readOnly,
-              hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
+              item: item
             });
           }
-        }), /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
-          name: item.fieldName
-        }));
+        });
       case 'Checkboxes':
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-          key: "form_fragment_".concat(item.id)
-        }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+        return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
           key: "form_".concat(item.id),
           control: methods.control,
           name: item.fieldName,
           rules: item.fieldRules,
           defaultValue: _optionsDefaultValue(item),
-          disabled: readOnly || item.readOnly,
+          disabled: item.disabled,
           required: item.required,
           render: function render(_ref6) {
             var _ref6$field = _ref6.field,
-              onChange = _ref6$field.onChange,
+              _onChange4 = _ref6$field.onChange,
               onBlur = _ref6$field.onBlur,
               value = _ref6$field.value,
               name = _ref6$field.name,
@@ -711,58 +726,46 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
               formState = _ref6.formState;
             return /*#__PURE__*/_react["default"].createElement(Checkboxes, {
               onBlur: onBlur,
-              onChange: onChange,
+              onChange: function onChange(e) {
+                _onChange4(e);
+                handleChange(e);
+              },
               value: value,
               name: name,
               ref: function ref(c) {
                 return inputs.current[item.fieldName] = c;
               },
               isInvalid: invalid,
-              handleChange: handleChange,
-              mutable: true,
-              data: item,
-              readOnly: readOnly || item.readOnly,
-              hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
+              item: item
             });
           }
-        }), /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
-          name: item.fieldName
-        }));
+        });
       case 'Image':
         return /*#__PURE__*/_react["default"].createElement(Image, {
           ref: function ref(c) {
             return inputs.current[item.fieldName] = c;
           },
-          handleChange: handleChange,
-          mutable: true,
           key: "form_".concat(item.id),
-          data: item,
-          defaultValue: _getDefaultValue(item),
-          hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
+          item: item
         });
-        ;
       case 'Download':
         return /*#__PURE__*/_react["default"].createElement(Download, {
           downloadPath: downloadPath,
-          mutable: true,
           key: "form_".concat(item.id),
-          data: item,
-          hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
+          item: item
         });
       case 'Camera':
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-          key: "form_fragment_".concat(item.id)
-        }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+        return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
           key: "form_".concat(item.id),
           control: methods.control,
           name: item.fieldName,
           rules: item.fieldRules,
           defaultValue: _getDefaultValue(item),
-          disabled: readOnly || item.readOnly,
+          disabled: item.disabled,
           required: item.required,
           render: function render(_ref7) {
             var _ref7$field = _ref7.field,
-              onChange = _ref7$field.onChange,
+              _onChange5 = _ref7$field.onChange,
               onBlur = _ref7$field.onBlur,
               value = _ref7$field.value,
               name = _ref7$field.name,
@@ -775,38 +778,32 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
               formState = _ref7.formState;
             return /*#__PURE__*/_react["default"].createElement(Camera, {
               onBlur: onBlur,
-              onChange: onChange,
+              onChange: function onChange(e) {
+                _onChange5(e);
+                handleChange(e);
+              },
               value: value,
               name: name,
               ref: function ref(c) {
                 return inputs.current[item.fieldName] = c;
               },
               isInvalid: invalid,
-              defaultValue: _getDefaultValue(item),
-              handleChange: handleChange,
-              mutable: true,
-              data: item,
-              readOnly: readOnly || item.readOnly,
-              hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
+              item: item
             });
           }
-        }), /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
-          name: item.fieldName
-        }));
+        });
       case 'FileUpload':
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-          key: "form_fragment_".concat(item.id)
-        }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+        return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
           key: "form_".concat(item.id),
           control: methods.control,
           name: item.fieldName,
           rules: item.fieldRules,
           defaultValue: _getDefaultValue(item),
-          disabled: readOnly || item.readOnly,
+          disabled: item.disabled,
           required: item.required,
           render: function render(_ref8) {
             var _ref8$field = _ref8.field,
-              onChange = _ref8$field.onChange,
+              _onChange6 = _ref8$field.onChange,
               onBlur = _ref8$field.onBlur,
               value = _ref8$field.value,
               name = _ref8$field.name,
@@ -819,24 +816,20 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
               formState = _ref8.formState;
             return /*#__PURE__*/_react["default"].createElement(FileUpload, {
               onBlur: onBlur,
-              onChange: onChange,
+              onChange: function onChange(e) {
+                _onChange6(e);
+                handleChange(e);
+              },
               value: value,
               name: name,
               ref: function ref(c) {
                 return inputs.current[item.fieldName] = c;
               },
               isInvalid: invalid,
-              defaultValue: _getDefaultValue(item),
-              handleChange: handleChange,
-              mutable: true,
-              data: item,
-              readOnly: readOnly || item.readOnly,
-              hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
+              item: item
             });
           }
-        }), /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
-          name: item.fieldName
-        }));
+        });
       default:
         return getSimpleElement(item);
     }
@@ -849,7 +842,7 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     className: "react-survey-builder-form"
   }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.FormProvider, methods, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form, (0, _extends2["default"])({
     onSubmit: methods.handleSubmit(handleSubmit)
-  }, formProps), items, /*#__PURE__*/_react["default"].createElement("div", {
+  }, formProps), fieldItems, /*#__PURE__*/_react["default"].createElement("div", {
     className: buttonClassName ? buttonClassName : 'btn-toolbar'
   }, !hideActions && handleRenderSubmit(), !hideActions && backAction && handleRenderBack())))));
 };