react-survey-builder 1.0.16 → 1.0.18

package/lib/form.js

@@ -6,27 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _fbemitter = require("fbemitter");
 var _reactIntl = require("react-intl");
-var _surveyValidator = _interopRequireDefault(require("./survey-validator"));
 var _surveyElements = _interopRequireDefault(require("./survey-elements"));
 var _multiColumn = require("./multi-column");
 var _fieldset = require("./fieldset");
 var _customElement = _interopRequireDefault(require("./survey-elements/custom-element"));
 var _registry = _interopRequireDefault(require("./stores/registry"));
 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; } } /**
-  * <Form />
+var _reactHookForm = require("react-hook-form");
+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 />
   */
 var Image = _surveyElements["default"].Image,
   Checkboxes = _surveyElements["default"].Checkboxes,
@@ -34,593 +30,828 @@ var Image = _surveyElements["default"].Image,
   Download = _surveyElements["default"].Download,
   Camera = _surveyElements["default"].Camera,
   FileUpload = _surveyElements["default"].FileUpload;
-var ReactSurvey = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(ReactSurvey, _React$Component);
-  var _super = _createSuper(ReactSurvey);
-  function ReactSurvey(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, ReactSurvey);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "form", void 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputs", {});
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "answerData", void 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRenderSubmit", function () {
-      var name = _this.props.actionName || _this.props.actionName;
-      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"
-      }, actionName);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRenderBack", function () {
-      var name = _this.props.backName || _this.props.backName;
-      var backName = name || 'Cancel';
-      var _this$props$backButto = _this.props.backButton,
-        backButton = _this$props$backButto === void 0 ? false : _this$props$backButto;
-      return backButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
-        variant: "secondary",
-        onClick: _this.props.backAction,
-        className: "btn-cancel"
-      }, backName);
-    });
-    _this.answerData = _this._convert(props.answerData);
-    _this.emitter = new _fbemitter.EventEmitter();
-    _this.getDataById = _this.getDataById.bind((0, _assertThisInitialized2["default"])(_this));
+var ReactSurvey = function ReactSurvey(_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,
+    intl = _ref.intl,
+    answers = _ref.answers,
+    onSubmit = _ref.onSubmit,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    items = _ref.items,
+    _ref$submitButton = _ref.submitButton,
+    submitButton = _ref$submitButton === void 0 ? false : _ref$submitButton,
+    _ref$backButton = _ref.backButton,
+    backButton = _ref$backButton === void 0 ? false : _ref$backButton,
+    _ref$actionName = _ref.actionName,
+    actionName = _ref$actionName === void 0 ? null : _ref$actionName,
+    _ref$backName = _ref.backName,
+    backName = _ref$backName === void 0 ? null : _ref$backName,
+    _ref$backAction = _ref.backAction,
+    backAction = _ref$backAction === void 0 ? null : _ref$backAction,
+    _ref$hideActions = _ref.hideActions,
+    hideActions = _ref$hideActions === void 0 ? false : _ref$hideActions,
+    formAction = _ref.formAction,
+    formMethod = _ref.formMethod,
+    variables = _ref.variables,
+    authenticity_token = _ref.authenticity_token,
+    task_id = _ref.task_id,
+    buttonClassName = _ref.buttonClassName,
+    formId = _ref.formId,
+    _ref$print = _ref.print,
+    print = _ref$print === void 0 ? false : _ref$print;
+  //#region useForms
 
-    // Bind handleBlur and handleChange methods
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleSubmit = _this.handleSubmit.bind((0, _assertThisInitialized2["default"])(_this));
-    return _this;
-  }
-  (0, _createClass2["default"])(ReactSurvey, [{
-    key: "_convert",
-    value: function _convert(answers) {
-      if (Array.isArray(answers)) {
-        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;
-          }
-        });
-        return result;
-      }
-      return answers || {};
+  var methods = (0, _reactHookForm.useForm)({
+    mode: 'all',
+    reValidateMode: 'onChange',
+    criteriaMode: 'all',
+    shouldFocusError: true,
+    shouldUnregister: true
+  });
+
+  //#endregion
+  //#region helper functions
+
+  var _convert = function _convert($dataAnswers) {
+    if (Array.isArray($dataAnswers)) {
+      var result = {};
+      $dataAnswers.forEach(function (answer) {
+        result[answer.name] = answer.value;
+      });
+      return result;
     }
-  }, {
-    key: "_getDefaultValue",
-    value: function _getDefaultValue(item) {
-      return this.answerData[item.fieldName];
+    return $dataAnswers || {};
+  };
+  var form = _react["default"].useRef();
+  var inputs = _react["default"].useRef({});
+  var answerData = _react["default"].useRef(_convert(answers));
+  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);
+      }
     }
-  }, {
-    key: "_optionsDefaultValue",
-    value: function _optionsDefaultValue(item) {
-      var _this2 = this;
-      var defaultValue = this._getDefaultValue(item);
-      if (defaultValue) {
-        return defaultValue;
+    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;
       }
-      var defaultChecked = [];
-      item.options.forEach(function (option) {
-        if (_this2.answerData["option_".concat(option.key)]) {
-          defaultChecked.push(option.key);
-        }
-      });
-      return defaultChecked;
     }
-  }, {
-    key: "_getItemValue",
-    value: function _getItemValue(item, ref) {
-      var $item = {
-        element: item.element,
-        value: ''
-      };
-      if (item.element === 'Rating') {
-        $item.value = ref.inputField.current.state.rating;
-      } else if (item.element === 'Tags') {
-        $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') {
-        $item.value = ref.state.fileUpload;
-      } else if (ref && ref.inputField && ref.inputField.current) {
-        $item = _reactDom["default"].findDOMNode(ref.inputField.current);
-        if ($item && typeof $item.value === 'string') {
-          $item.value = $item.value.trim();
-        }
+    if (defaultValue === undefined) {
+      if ($dataItem.element === 'Checkboxes' || $dataItem.element === 'Tags') {
+        defaultValue = [];
+      } else {
+        defaultValue = '';
       }
-      return $item;
     }
-  }, {
-    key: "_isIncorrect",
-    value: function _isIncorrect(item) {
-      var incorrect = false;
-      if (item.canHaveAnswer) {
-        var ref = this.inputs[item.fieldName];
-        if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
-          item.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 = this._getItemValue(item, ref);
-          if (item.element === 'Rating') {
-            if ($item.value.toString() !== item.correct) {
-              incorrect = true;
-            }
-          } else if ($item.value.toLowerCase() !== item.correct.trim().toLowerCase()) {
-            incorrect = true;
-          }
-        }
+    return defaultValue;
+  };
+  var _optionsDefaultValue = function _optionsDefaultValue($dataItem) {
+    var defaultValue = _getDefaultValue($dataItem);
+    if (defaultValue) {
+      return defaultValue;
+    }
+    var defaultChecked = [];
+    $dataItem.options.forEach(function (option) {
+      if (answerData.current["option_".concat(option.key)]) {
+        defaultChecked.push(option.key);
+      }
+    });
+    return defaultChecked;
+  };
+  var _getItemValue = function _getItemValue($dataItem, ref) {
+    var $item = {
+      element: $dataItem.element,
+      value: ''
+    };
+    if ($dataItem.element === 'Rating') {
+      $item.value = ref.inputField.current.state.rating;
+    } else if ($dataItem.element === 'Tags') {
+      $item.value = ref.props.value;
+      // } else if (item.element === 'DatePicker') {
+      // 	$item.value = ref.state.value;
+    } else if ($dataItem.element === 'Camera') {
+      $item.value = ref.state.img;
+    } 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') {
+        $item.value = $item.value.trim();
       }
-      return incorrect;
     }
-  }, {
-    key: "_isInvalid",
-    value: function _isInvalid(item) {
-      var invalid = false;
-      if (item.required === true) {
-        var ref = this.inputs[item.fieldName];
-        if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
-          var checked_options = 0;
-          item.options.forEach(function (option) {
-            var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
-            if ($option.checked) {
-              checked_options += 1;
-            }
-          });
-          if (checked_options < 1) {
-            // errors.push(item.label + ' is required!');
-            invalid = true;
+    return $item;
+  };
+  var _isIncorrect = function _isIncorrect($dataItem) {
+    var incorrect = false;
+    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 = this._getItemValue(item, ref);
-          if (item.element === 'Rating') {
-            if ($item.value === 0) {
-              invalid = true;
-            }
-          } else if ($item.value === undefined || $item.value.length < 1) {
-            invalid = true;
+        });
+      } else {
+        var $item = _getItemValue($dataItem, ref);
+        if ($dataItem.element === 'Rating') {
+          if ($item.value.toString() !== $dataItem.correct) {
+            incorrect = true;
           }
+        } else if ($item.value.toLowerCase() !== $dataItem.correct.trim().toLowerCase()) {
+          incorrect = true;
         }
       }
-      return invalid;
     }
-  }, {
-    key: "_collect",
-    value: function _collect(item) {
-      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() : ''
-      };
-      if (!itemData.name) return null;
-      var ref = this.inputs[item.fieldName];
-      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) {
+    return incorrect;
+  };
+  var _isInvalid = function _isInvalid($dataItem) {
+    var invalid = false;
+    if ($dataItem.required === true) {
+      var ref = inputs.current[$dataItem.fieldName];
+      if ($dataItem.element === 'Checkboxes' || $dataItem.element === 'RadioButtons') {
+        var checked_options = 0;
+        $dataItem.options.forEach(function (option) {
           var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
           if ($option.checked) {
-            itemData.value = option.value;
+            checked_options += 1;
           }
         });
-      } else if (item.element === 'Checkbox') {
-        if (!ref || !ref.inputField || !ref.inputField.current) {
-          itemData.value = false;
-        } else {
-          itemData.value = ref.inputField.current.checked;
+        if (checked_options < 1) {
+          // errors.push(item.label + ' is required!');
+          invalid = true;
         }
       } else {
-        if (!ref) return null;
-        itemData.value = this._getItemValue(item, ref).value;
+        var $item = _getItemValue($dataItem, ref);
+        if ($dataItem.element === 'Rating') {
+          if ($item.value === 0) {
+            invalid = true;
+          }
+        } else if ($item.value === undefined || $item.value.length < 1) {
+          invalid = true;
+        }
       }
-      itemData.required = item.required || false;
-      return itemData;
     }
-  }, {
-    key: "_collectFormData",
-    value: function _collectFormData(data) {
-      var _this3 = this;
-      var formData = [];
-      data.forEach(function (item) {
-        var item_data = _this3._collect(item);
-        if (item_data) {
-          formData.push(item_data);
+    return invalid;
+  };
+  var _collect = function _collect($dataItem) {
+    var itemData = {
+      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[$dataItem.fieldName];
+    if ($dataItem.element === 'Checkboxes') {
+      var checkedOptions = [];
+      $dataItem.options.forEach(function (option) {
+        var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
+        if ($option.checked) {
+          checkedOptions.push(option.value);
         }
       });
-      return formData;
-    }
-  }, {
-    key: "_getSignatureImg",
-    value: function _getSignatureImg(item) {
-      var ref = this.inputs[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 = '';
-        } else {
-          $input_sig.value = base64;
+      itemData.value = checkedOptions;
+    } 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 ($dataItem.element === 'Checkbox') {
+      if (!ref || !ref.inputField || !ref.inputField.current) {
+        itemData.value = false;
+      } else {
+        itemData.value = ref.inputField.current.checked;
       }
+    } else {
+      if (!ref) return null;
+      itemData.value = _getItemValue($dataItem, ref).value;
     }
-  }, {
-    key: "handleSubmit",
-    value: function handleSubmit(e) {
-      e.preventDefault();
-      var errors = [];
-      if (!this.props.skipValidations) {
-        errors = this.validateForm();
-        // Publish errors, if any.
-        this.emitter.emit('surveyValidation', errors);
+    itemData.required = $dataItem.required || false;
+    return itemData;
+  };
+  var _collectFormData = function _collectFormData($dataItems) {
+    var formData = [];
+    $dataItems.forEach(function (item) {
+      var itemData = _collect(item);
+      if (itemData) {
+        formData.push(itemData);
       }
-
-      // Only submit if there are no errors.
-      if (errors.length < 1) {
-        var onSubmit = this.props.onSubmit;
-        if (onSubmit) {
-          var data = this._collectFormData(this.props.data);
-          onSubmit(data);
-        } else {
-          var $form = _reactDom["default"].findDOMNode(this.form);
-          $form.submit();
-        }
+    });
+    return formData;
+  };
+  var _getSignatureImg = function _getSignatureImg($dataItem) {
+    var ref = inputs.current[$dataItem.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($dataItem.fieldName, '');
+      } else {
+        $input_sig.value = base64;
+        methods.setValue($dataItem.fieldName, base64);
       }
     }
-  }, {
-    key: "handleBlur",
-    value: function handleBlur(event) {
-      // Call submit function on blur
-      if (this.props.onBlur) {
-        var onBlur = this.props.onBlur;
-        var data = this._collectFormData(this.props.data);
-        onBlur(data);
-      }
+  };
+
+  //#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);
     }
-  }, {
-    key: "handleChange",
-    value: function handleChange(event) {
-      // Call submit function on change
-      if (this.props.onChange) {
-        var onChange = this.props.onChange;
-        var data = this._collectFormData(this.props.data);
-        onChange(data);
+
+    // Only submit if there are no errors.
+    if (errors.length < 1) {
+      if (onSubmit) {
+        var $data = _collectFormData(items);
+        onSubmit($data);
+      } else {
+        var $form = _reactDom["default"].findDOMNode(form.current);
+        $form.submit();
       }
     }
-  }, {
-    key: "validateForm",
-    value: function validateForm() {
-      var _this4 = this;
-      var errors = [];
-      var data_items = this.props.data;
-      var intl = this.props.intl;
-      if (this.props.displayShort) {
-        data_items = this.props.data.filter(function (i) {
-          return i.alternateForm === true;
-        });
+  };
+  var handleChange = function handleChange(event) {
+    // console.log('handleChange');
+    // Call submit function on change
+    if (onChange) {
+      var $data = _collectFormData(items);
+      onChange($data);
+    }
+  };
+  var validateForm = function validateForm() {
+    var errors = [];
+    var dataItems = items;
+    if (displayShort) {
+      dataItems = items.filter(function (i) {
+        return i.alternateForm === true;
+      });
+    }
+    dataItems.forEach(function (item) {
+      if (item.element === 'Signature') {
+        _getSignatureImg(item);
       }
-      data_items.forEach(function (item) {
-        if (item.element === 'Signature') {
-          _this4._getSignatureImg(item);
-        }
-        if (_this4._isInvalid(item)) {
-          errors.push("".concat(item.label, " ").concat(intl.formatMessage({
-            id: 'message.is-required'
-          }), "!"));
-        }
-        if (item.element === 'EmailInput') {
-          var ref = _this4.inputs[item.fieldName];
-          var emailValue = _this4._getItemValue(item, ref).value;
-          if (emailValue) {
-            var validateEmail = function validateEmail(email) {
-              return email.match(
-              // 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 checkEmail = validateEmail(emailValue);
-            if (!checkEmail) {
-              errors.push("".concat(item.label, " ").concat(intl.formatMessage({
-                id: 'message.invalid-email'
-              })));
-            }
+      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 _ref = _this4.inputs[item.fieldName];
-          var phoneValue = _this4._getItemValue(item, _ref).value;
-          if (phoneValue) {
-            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);
-            };
-            var checkPhone = validatePhone(phoneValue);
-            if (!checkPhone) {
-              errors.push("".concat(item.label, " ").concat(intl.formatMessage({
-                id: 'message.invalid-phone-number'
-              })));
-            }
+      }
+      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 (_this4.props.validateForCorrectness && _this4._isIncorrect(item)) {
-          errors.push("".concat(item.label, " ").concat(intl.formatMessage({
+      }
+      if (validateForCorrectness && _isIncorrect(item)) {
+        methods.setError(item.fieldName, {
+          type: 'incorrect',
+          message: "".concat(item.label, " ").concat(intl.formatMessage({
             id: 'message.was-answered-incorrectly'
-          }), "!"));
-        }
-      });
-      return errors;
-    }
-  }, {
-    key: "getDataById",
-    value: function getDataById(id) {
-      var data = this.props.data;
-      return data.find(function (x) {
-        return x.id === id;
-      });
+          }))
+        });
+        errors.push("".concat(item.label, " ").concat(intl.formatMessage({
+          id: 'message.was-answered-incorrectly'
+        }), "!"));
+      }
+    });
+    return errors;
+  };
+  var validateEmail = function validateEmail(email) {
+    return email.match(
+    // 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 '';
     }
-  }, {
-    key: "getInputElement",
-    value: function getInputElement(item) {
-      var _this5 = this;
-      if (item.custom) {
-        return this.getCustomElement(item);
+  };
+  var validatePhone = function validatePhone(phone) {
+    return (0, _reactPhoneNumberInput.isValidPhoneNumber)(toE164PhoneNumber(phone), 'US');
+  };
+  var validateDate = function validateDate(dateString) {
+    if (dateString !== undefined && dateString !== null && dateString !== "") {
+      var dateformat = /^(0?[1-9]|1[0-2])[\/](0?[1-9]|[1-2][0-9]|3[01])[\/]\d{4}$/;
+
+      // Matching the date through regular expression      
+      if (dateString.match(dateformat)) {
+        var operator = dateString.split('/');
+
+        // Extract the string into month, date and year      
+        var datepart = [];
+        if (operator.length > 1) {
+          datepart = dateString.split('/');
+        }
+        var month = parseInt(datepart[0]);
+        var day = parseInt(datepart[1]);
+        var year = parseInt(datepart[2]);
+        if (day > 31 || day < 1) {
+          return false;
+        }
+        var currentYear = new Date().getFullYear();
+        if (year < 1900 || year > currentYear + 5) {
+          return false;
+        }
+
+        // Create a list of days of a month      
+        var ListofDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+        if (month === 1 || month > 2) {
+          if (day > ListofDays[month - 1]) {
+            // to check if the date is out of range     
+            return false;
+          }
+        } else if (month === 2) {
+          var leapYear = false;
+          if (!(year % 4) && year % 100 || !(year % 400)) leapYear = true;
+          if (leapYear === false && day >= 29) return false;else if (leapYear === true && day > 29) {
+            // console.log('Invalid date format!');
+            return false;
+          }
+        } else if (month > 12 || month < 1) {
+          return false;
+        }
+      } else {
+        // console.log("Invalid date format!");
+        return false;
       }
-      var Input = _surveyElements["default"][item.element];
-      return /*#__PURE__*/_react["default"].createElement(Input, {
-        handleChange: this.handleChange,
-        ref: function ref(c) {
-          return _this5.inputs[item.fieldName] = c;
-        },
-        mutable: true,
-        key: "form_".concat(item.id),
-        data: item,
-        readOnly: this.props.readOnly,
-        hideRequiredAlert: this.props.hideRequiredAlert || item.hideRequiredAlert,
-        defaultValue: this._getDefaultValue(item)
-      });
     }
-  }, {
-    key: "getContainerElement",
-    value: function getContainerElement(item, Element) {
-      var _this6 = this;
-      var controls = item.childItems.map(function (x) {
-        return x ? _this6.getInputElement(_this6.getDataById(x)) : /*#__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: this.props.hideRequiredAlert || item.hideRequiredAlert
+    return true;
+  };
+  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
       });
     }
-  }, {
-    key: "getSimpleElement",
-    value: function getSimpleElement(item) {
-      var Element = _surveyElements["default"][item.element];
-      return /*#__PURE__*/_react["default"].createElement(Element, {
-        mutable: true,
-        key: "form_".concat(item.id),
-        data: item,
-        hideRequiredAlert: this.props.hideRequiredAlert || item.hideRequiredAlert
-      });
+    return null;
+  };
+  var getInputElement = function getInputElement(item) {
+    if (!item) return null;
+    if (item.custom) {
+      return getCustomElement(item);
     }
-  }, {
-    key: "getCustomElement",
-    value: function getCustomElement(item) {
-      var _this7 = this;
-      var intl = this.props.intl;
-      if (!item.component || typeof item.component !== 'function') {
-        item.component = _registry["default"].get(item.key);
-        if (!item.component) {
-          console.error("".concat(item.element, " ").concat(intl.formatMessage({
-            id: 'message.was-not-registered'
-          })));
-        }
+    var Input = _surveyElements["default"][item.element];
+    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: 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;
+        return /*#__PURE__*/_react["default"].createElement(Input, {
+          onBlur: onBlur,
+          onChange: function onChange(e) {
+            _onChange(e);
+            handleChange(e);
+          },
+          value: value,
+          name: name,
+          ref: function ref(c) {
+            return inputs.current[item.fieldName] = c;
+          },
+          isInvalid: invalid,
+          item: item
+        });
+      }
+    });
+  };
+  var getContainerElement = function getContainerElement(item, Element) {
+    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),
+      item: item,
+      controls: controls
+    });
+  };
+  var getSimpleElement = function getSimpleElement(item) {
+    var Element = _surveyElements["default"][item.element];
+    return /*#__PURE__*/_react["default"].createElement(Element, {
+      mutable: true,
+      key: "form_".concat(item.id),
+      item: item
+    });
+  };
+  var getCustomElement = function getCustomElement(item) {
+    if (!item.component || typeof item.component !== 'function') {
+      item.component = _registry["default"].get(item.key);
+      if (!item.component) {
+        console.error("".concat(item.element, " ").concat(intl.formatMessage({
+          id: 'message.was-not-registered'
+        })));
       }
-      var inputProps = item.forwardRef && {
-        handleChange: this.handleChange,
-        defaultValue: this._getDefaultValue(item),
-        ref: function ref(c) {
-          return _this7.inputs[item.fieldName] = c;
-        }
-      };
-      return /*#__PURE__*/_react["default"].createElement(_customElement["default"], (0, _extends2["default"])({
-        mutable: true,
-        readOnly: this.props.readOnly,
-        hideRequiredAlert: this.props.hideRequiredAlert || item.hideRequiredAlert,
-        key: "form_".concat(item.id),
-        data: item
-      }, inputProps));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this8 = this;
-      var dataItems = this.props.data;
-      if (this.props.displayShort) {
-        dataItems = this.props.data.filter(function (i) {
-          return i.alternateForm === true;
+    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: 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;
+        return /*#__PURE__*/_react["default"].createElement(_customElement["default"], {
+          onBlur: onBlur,
+          onChange: function onChange(e) {
+            _onChange2(e);
+            handleChange(e);
+          },
+          value: value,
+          name: name,
+          ref: function ref(c) {
+            return inputs.current[item.fieldName] = c;
+          },
+          isInvalid: invalid,
+          item: 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 = dataItems.filter(function (x) {
-        return !x.parentId;
-      }).map(function (item) {
-        if (!item) return null;
-        switch (item.element) {
-          case 'TextInput':
-          case 'EmailInput':
-          case 'PhoneNumber':
-          case 'NumberInput':
-          case 'TextArea':
-          case 'Dropdown':
-          case 'DatePicker':
-          case 'RadioButtons':
-          case 'Rating':
-          case 'Tags':
-          case 'Range':
-          case 'Checkbox':
-            return _this8.getInputElement(item);
-          case 'CustomElement':
-            return _this8.getCustomElement(item);
-          case 'MultiColumnRow':
-            return _this8.getContainerElement(item, _multiColumn.MultiColumnRow);
-          case 'ThreeColumnRow':
-            return _this8.getContainerElement(item, _multiColumn.ThreeColumnRow);
-          case 'TwoColumnRow':
-            return _this8.getContainerElement(item, _multiColumn.TwoColumnRow);
-          case 'FieldSet':
-            return _this8.getContainerElement(item, _fieldset.FieldSet);
-          case 'Signature':
+    });
+  };
+  var getFieldRules = function getFieldRules(item) {
+    var fieldRules = {};
+    if (item.fieldRules !== undefined && item.fieldRules !== null && !(0, _lodash.isEmpty)(item.fieldRules)) {
+      fieldRules = _objectSpread({}, item.fieldRules);
+    }
+    if (item.required) {
+      fieldRules.required = "".concat(item.label, " ").concat(intl.formatMessage({
+        id: 'message.is-required'
+      }));
+    }
+    switch (item.element) {
+      case 'EmailInput':
+        fieldRules.minLength = {
+          value: 4,
+          message: "".concat(item.label, " must be at least 4 characters long")
+        };
+        fieldRules.validate = function (value) {
+          return validateEmail(value) || "".concat(item.label, " ").concat(intl.formatMessage({
+            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;
+    }
+    return fieldRules;
+  };
+  var handleRenderSubmit = function handleRenderSubmit() {
+    var actionName = actionName || 'Submit';
+    var buttonProps = {};
+    if (formId) {
+      buttonProps.form = formId;
+    }
+    return submitButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      variant: "primary",
+      type: "submit"
+    }, actionName);
+  };
+  var handleRenderBack = function handleRenderBack() {
+    var backName = backName || 'Cancel';
+    return backButton || /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      variant: "secondary",
+      onClick: backAction,
+      className: "btn-cancel"
+    }, backName);
+  };
+
+  //#endregion
+
+  var dataItems = items;
+  if (displayShort) {
+    dataItems = items.filter(function (i) {
+      return i.alternateForm === true;
+    });
+  }
+  dataItems.forEach(function (item) {
+    if (item && item.readOnly && item.variableKey && variables[item.variableKey]) {
+      answerData.current[item.fieldName] = variables[item.variableKey];
+    }
+  });
+  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':
+      case 'PhoneNumber':
+      case 'NumberInput':
+      case 'TextArea':
+      case 'Dropdown':
+      case 'DatePicker':
+      case 'RadioButtons':
+      case 'Rating':
+      case 'Tags':
+      case 'Range':
+      case 'Checkbox':
+        return getInputElement(item);
+      case 'CustomElement':
+        return getCustomElement(item);
+      case 'MultiColumnRow':
+        return getContainerElement(item, _multiColumn.MultiColumnRow);
+      case 'ThreeColumnRow':
+        return getContainerElement(item, _multiColumn.ThreeColumnRow);
+      case 'TwoColumnRow':
+        return getContainerElement(item, _multiColumn.TwoColumnRow);
+      case 'FieldSet':
+        return getContainerElement(item, _fieldset.FieldSet);
+      case 'Signature':
+        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: 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;
             return /*#__PURE__*/_react["default"].createElement(Signature, {
+              methods: methods,
+              onBlur: onBlur,
+              onChange: function onChange(e) {
+                _onChange3(e);
+                handleChange(e);
+              },
+              value: value,
+              name: name,
               ref: function ref(c) {
-                return _this8.inputs[item.fieldName] = c;
+                return inputs.current[item.fieldName] = c;
               },
-              readOnly: _this8.props.readOnly || item.readOnly,
-              mutable: true,
-              key: "form_".concat(item.id),
-              data: item,
-              defaultValue: _this8._getDefaultValue(item)
+              item: item
             });
-          case 'Checkboxes':
+          }
+        });
+      case 'Checkboxes':
+        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: 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;
             return /*#__PURE__*/_react["default"].createElement(Checkboxes, {
-              ref: function ref(c) {
-                return _this8.inputs[item.fieldName] = c;
+              onBlur: onBlur,
+              onChange: function onChange(e) {
+                _onChange4(e);
+                handleChange(e);
               },
-              readOnly: _this8.props.readOnly,
-              handleChange: _this8.handleChange,
-              mutable: true,
-              key: "form_".concat(item.id),
-              data: item,
-              defaultValue: _this8._optionsDefaultValue(item),
-              hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
-            });
-          case 'Image':
-            return /*#__PURE__*/_react["default"].createElement(Image, {
+              value: value,
+              name: name,
               ref: function ref(c) {
-                return _this8.inputs[item.fieldName] = c;
+                return inputs.current[item.fieldName] = c;
               },
-              handleChange: _this8.handleChange,
-              mutable: true,
-              key: "form_".concat(item.id),
-              data: item,
-              defaultValue: _this8._getDefaultValue(item),
-              hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
-            });
-          case 'Download':
-            return /*#__PURE__*/_react["default"].createElement(Download, {
-              downloadPath: _this8.props.downloadPath,
-              mutable: true,
-              key: "form_".concat(item.id),
-              data: item,
-              hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
+              isInvalid: invalid,
+              item: item
             });
-          case 'Camera':
+          }
+        });
+      case 'Image':
+        return /*#__PURE__*/_react["default"].createElement(Image, {
+          ref: function ref(c) {
+            return inputs.current[item.fieldName] = c;
+          },
+          key: "form_".concat(item.id),
+          item: item
+        });
+      case 'Download':
+        return /*#__PURE__*/_react["default"].createElement(Download, {
+          downloadPath: downloadPath,
+          key: "form_".concat(item.id),
+          item: item
+        });
+      case 'Camera':
+        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: 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;
             return /*#__PURE__*/_react["default"].createElement(Camera, {
+              onBlur: onBlur,
+              onChange: function onChange(e) {
+                _onChange5(e);
+                handleChange(e);
+              },
+              value: value,
+              name: name,
               ref: function ref(c) {
-                return _this8.inputs[item.fieldName] = c;
+                return inputs.current[item.fieldName] = c;
               },
-              readOnly: _this8.props.readOnly || item.readOnly,
-              mutable: true,
-              key: "form_".concat(item.id),
-              data: item,
-              defaultValue: _this8._getDefaultValue(item),
-              hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert
+              isInvalid: invalid,
+              item: item
             });
-          case 'FileUpload':
+          }
+        });
+      case 'FileUpload':
+        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: 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;
             return /*#__PURE__*/_react["default"].createElement(FileUpload, {
+              onBlur: onBlur,
+              onChange: function onChange(e) {
+                _onChange6(e);
+                handleChange(e);
+              },
+              value: value,
+              name: name,
               ref: function ref(c) {
-                return _this8.inputs[item.fieldName] = c;
+                return inputs.current[item.fieldName] = c;
               },
-              readOnly: _this8.props.readOnly || item.readOnly,
-              mutable: true,
-              key: "form_".concat(item.id),
-              data: item,
-              hideRequiredAlert: _this8.props.hideRequiredAlert || item.hideRequiredAlert,
-              defaultValue: _this8._getDefaultValue(item)
+              isInvalid: invalid,
+              item: item
             });
-          default:
-            return _this8.getSimpleElement(item);
-        }
-      });
-      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", (0, _extends2["default"])({
-        encType: "multipart/form-data",
-        ref: function ref(c) {
-          return _this8.form = c;
-        },
-        action: this.props.formAction,
-        onBlur: this.handleBlur,
-        onChange: this.handleChange,
-        onSubmit: this.handleSubmit,
-        method: this.props.formMethod
-      }, formProps), this.props.authenticity_token && /*#__PURE__*/_react["default"].createElement("div", {
-        style: formTokenStyle
-      }, /*#__PURE__*/_react["default"].createElement("input", {
-        name: "utf8",
-        type: "hidden",
-        value: "\u2713"
-      }), /*#__PURE__*/_react["default"].createElement("input", {
-        name: "authenticity_token",
-        type: "hidden",
-        value: this.props.authenticity_token
-      }), /*#__PURE__*/_react["default"].createElement("input", {
-        name: "task_id",
-        type: "hidden",
-        value: this.props.task_id
-      })), items, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.buttonClassName ? this.props.buttonClassName : 'btn-toolbar'
-      }, !this.props.hideActions && this.handleRenderSubmit(), !this.props.hideActions && this.props.backAction && this.handleRenderBack()))));
+          }
+        });
+      default:
+        return getSimpleElement(item);
     }
-  }]);
-  return ReactSurvey;
-}(_react["default"].Component);
-var _default = exports["default"] = (0, _reactIntl.injectIntl)(ReactSurvey);
-ReactSurvey.defaultProps = {
-  validateForCorrectness: false
-};
+  });
+  var formProps = {};
+  if (formId) {
+    formProps.id = formId;
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    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), fieldItems, /*#__PURE__*/_react["default"].createElement("div", {
+    className: buttonClassName ? buttonClassName : 'btn-toolbar'
+  }, !hideActions && handleRenderSubmit(), !hideActions && backAction && handleRenderBack())))));
+};
+var _default = exports["default"] = (0, _reactIntl.injectIntl)(ReactSurvey);