react-survey-builder 1.0.9 → 1.0.10

package/lib/form-fields.js

@@ -0,0 +1,853 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactIntl = require("react-intl");
+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");
+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"));
+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,
+  Signature = _surveyElements["default"].Signature,
+  Download = _surveyElements["default"].Download,
+  Camera = _surveyElements["default"].Camera,
+  FileUpload = _surveyElements["default"].FileUpload;
+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,
+    intl = _ref.intl,
+    answers = _ref.answers,
+    onSubmit = _ref.onSubmit,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    data = _ref.data,
+    _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;
+  var methods = (0, _reactHookForm.useFormContext)();
+
+  //#region helper functions
+
+  var _convert = 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 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';
+      if (defaultToday && (defaultValue === '' || defaultValue === undefined)) {
+        defaultValue = (0, _momentTimezone["default"])().format(formatMask);
+      }
+    }
+    return defaultValue;
+  };
+  var _optionsDefaultValue = function _optionsDefaultValue(item) {
+    var defaultValue = _getDefaultValue(item);
+    if (defaultValue) {
+      return defaultValue;
+    }
+    var defaultChecked = [];
+    item.options.forEach(function (option) {
+      if (answerData.current["option_".concat(option.key)]) {
+        defaultChecked.push(option.key);
+      }
+    });
+    return defaultChecked;
+  };
+  var _getItemValue = 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();
+      }
+    }
+    return $item;
+  };
+  var _isIncorrect = function _isIncorrect(item) {
+    var incorrect = false;
+    if (item.canHaveAnswer) {
+      var ref = inputs.current[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 = _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 incorrect;
+  };
+  var _isInvalid = function _isInvalid(item) {
+    var invalid = false;
+    if (item.required === true) {
+      var ref = inputs.current[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;
+        }
+      } else {
+        var $item = _getItemValue(item, ref);
+        if (item.element === 'Rating') {
+          if ($item.value === 0) {
+            invalid = true;
+          }
+        } else if ($item.value === undefined || $item.value.length < 1) {
+          invalid = true;
+        }
+      }
+    }
+    return invalid;
+  };
+  var _collect = 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 = inputs.current[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) {
+        var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
+        if ($option.checked) {
+          itemData.value = option.value;
+        }
+      });
+    } else if (item.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(item, ref).value;
+    }
+    itemData.required = item.required || false;
+    return itemData;
+  };
+  var _collectFormData = function _collectFormData($data) {
+    var formData = [];
+    $data.forEach(function (item) {
+      var itemData = _collect(item);
+      if (itemData) {
+        formData.push(itemData);
+      }
+    });
+    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);
+      }
+    }
+  };
+
+  //#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);
+    }
+
+    // Only submit if there are no errors.
+    if (errors.length < 1) {
+      if (onSubmit) {
+        var $data = _collectFormData(data);
+        onSubmit($data);
+      } else {
+        var $form = _reactDom["default"].findDOMNode(form.current);
+        $form.submit();
+      }
+    }
+  };
+  var handleChange = function handleChange(event) {
+    // console.log('handleChange');
+    // Call submit function on change
+    if (onChange) {
+      var $data = _collectFormData(data);
+      onChange($data);
+    }
+  };
+  var validateForm = function validateForm() {
+    var errors = [];
+    var dataItems = data;
+    if (displayShort) {
+      dataItems = data.filter(function (i) {
+        return i.alternateForm === true;
+      });
+    }
+    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 (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'
+        }), "!"));
+      }
+    });
+    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 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 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;
+      }
+    }
+    return true;
+  };
+  var getDataById = function getDataById(id) {
+    return data.find(function (x) {
+      return x.id === id;
+    });
+  };
+  var getInputElement = function getInputElement(item) {
+    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, {
+      key: "form_".concat(item.id),
+      control: methods.control,
+      name: item.fieldName,
+      rules: item.fieldRules,
+      defaultValue: _getDefaultValue(item),
+      disabled: readOnly || item.readOnly,
+      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: onChange,
+          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
+        });
+      }
+    }), /*#__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");
+    });
+    return /*#__PURE__*/_react["default"].createElement(Element, {
+      mutable: true,
+      key: "form_".concat(item.id),
+      data: item,
+      controls: controls,
+      hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
+    });
+  };
+  var getSimpleElement = 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: hideRequiredAlert || item.hideRequiredAlert
+    });
+  };
+  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: 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, {
+      key: "form_".concat(item.id),
+      control: methods.control,
+      name: item.fieldName,
+      rules: item.fieldRules,
+      defaultValue: _getDefaultValue(item),
+      disabled: readOnly || item.readOnly,
+      required: item.required,
+      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(_customElement["default"], (0, _extends2["default"])({
+          onBlur: onBlur,
+          onChange: onChange,
+          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));
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+      name: item.fieldName
+    }));
+  };
+  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'
+          }));
+        };
+      case 'PhoneNumber':
+        fieldRules.validate = function (value) {
+          return validatePhone(value) || "".concat(item.label, " ").concat(intl.formatMessage({
+            id: 'message.invalid-phone-number'
+          }));
+        };
+      case 'DatePicker':
+        fieldRules.validate = function (value) {
+          return validateDate(value) || "".concat(item.label, " ").concat(intl.formatMessage({
+            id: 'message.invalid-date'
+          }));
+        };
+      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 = data;
+  if (displayShort) {
+    dataItems = data.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 items = dataItems.filter(function (x) {
+    return !x.parentId;
+  }).map(function (item) {
+    if (!item) return null;
+    item.fieldRules = getFieldRules(item);
+    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(_react["default"].Fragment, {
+          key: "form_fragment_".concat(item.id)
+        }, /*#__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,
+          required: item.required,
+          render: function render(_ref5) {
+            var _ref5$field = _ref5.field,
+              onChange = _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: onChange,
+              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
+            });
+          }
+        }), /*#__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, {
+          key: "form_".concat(item.id),
+          control: methods.control,
+          name: item.fieldName,
+          rules: item.fieldRules,
+          defaultValue: _optionsDefaultValue(item),
+          disabled: readOnly || item.readOnly,
+          required: item.required,
+          render: function render(_ref6) {
+            var _ref6$field = _ref6.field,
+              onChange = _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, {
+              onBlur: onBlur,
+              onChange: onChange,
+              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
+            });
+          }
+        }), /*#__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
+        });
+        ;
+      case 'Download':
+        return /*#__PURE__*/_react["default"].createElement(Download, {
+          downloadPath: downloadPath,
+          mutable: true,
+          key: "form_".concat(item.id),
+          data: item,
+          hideRequiredAlert: hideRequiredAlert || item.hideRequiredAlert
+        });
+      case 'Camera':
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          key: "form_fragment_".concat(item.id)
+        }, /*#__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,
+          required: item.required,
+          render: function render(_ref7) {
+            var _ref7$field = _ref7.field,
+              onChange = _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: onChange,
+              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
+            });
+          }
+        }), /*#__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, {
+          key: "form_".concat(item.id),
+          control: methods.control,
+          name: item.fieldName,
+          rules: item.fieldRules,
+          defaultValue: _getDefaultValue(item),
+          disabled: readOnly || item.readOnly,
+          required: item.required,
+          render: function render(_ref8) {
+            var _ref8$field = _ref8.field,
+              onChange = _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: onChange,
+              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
+            });
+          }
+        }), /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+          name: item.fieldName
+        }));
+      default:
+        return getSimpleElement(item);
+    }
+  });
+  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(_reactBootstrap.Form, (0, _extends2["default"])({
+    onSubmit: methods.handleSubmit(handleSubmit)
+  }, formProps), items, /*#__PURE__*/_react["default"].createElement("div", {
+    className: buttonClassName ? buttonClassName : 'btn-toolbar'
+  }, !hideActions && handleRenderSubmit(), !hideActions && backAction && handleRenderBack()))));
+};
+var _default = exports["default"] = (0, _reactIntl.injectIntl)(ReactSurveyFormFields);