react-survey-builder 1.0.69 → 1.0.71

package/lib/form-fields.js

@@ -13,7 +13,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
 import ReactDOM from 'react-dom';
-import SurveyElements, { Image, Checkboxes, Signature, Download, Camera, FileUpload, PhoneNumber, DatePicker, TextInput, EmailInput, NumberInput, TextArea } from './survey-elements';
+import SurveyElements, { Image, Checkboxes, Signature, Download, Camera, FileUpload, PhoneNumber, DatePicker, TextInput, EmailInput, NumberInput, TextArea, Dropdown, Tags } from './survey-elements';
 import { TwoColumnRow, ThreeColumnRow, MultiColumnRow } from './multi-column';
 import FieldSet from './fieldset';
 import CustomElement from './survey-elements/custom-element';
@@ -40,6 +40,8 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     backAction = _ref$backAction === void 0 ? null : _ref$backAction,
     _ref$hideActions = _ref.hideActions,
     hideActions = _ref$hideActions === void 0 ? false : _ref$hideActions,
+    _ref$hideLabels = _ref.hideLabels,
+    hideLabels = _ref$hideLabels === void 0 ? false : _ref$hideLabels,
     variables = _ref.variables,
     buttonClassName = _ref.buttonClassName,
     checkboxButtonClassName = _ref.checkboxButtonClassName,
@@ -47,8 +49,6 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     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($dataAnswers) {
@@ -117,14 +117,16 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     return defaultChecked;
   };
   var _getItemValue = function _getItemValue($dataItem, ref) {
+    var _ref$inputField;
     var $item = {
       element: $dataItem.element,
       value: ''
     };
+    var $formData = methods === null || methods === void 0 ? void 0 : methods.getValues();
     if ($dataItem.element === 'Rating') {
       $item.value = ref.inputField.current.state.rating;
     } else if ($dataItem.element === 'Tags') {
-      $item.value = ref.props.value;
+      $item.value = $formData[$dataItem.fieldName];
       // } else if (item.element === 'DatePicker') {
       // 	$item.value = ref.state.value;
     } else if ($dataItem.element === 'Camera') {
@@ -133,11 +135,13 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
       $item.value = ref.state.fileUpload;
     } else if ($dataItem.element === 'Signature') {
       $item.value = ref.state.value;
-    } else if (ref && ref.inputField && ref.inputField.current) {
+    } else if (ref && ref !== null && ref !== void 0 && ref.inputField && ref !== null && ref !== void 0 && (_ref$inputField = ref.inputField) !== null && _ref$inputField !== void 0 && _ref$inputField.current) {
       $item = ReactDOM.findDOMNode(ref.inputField.current);
       if ($item && typeof $item.value === 'string') {
         $item.value = $item.value.trim();
       }
+    } else {
+      $item.value = $formData[$dataItem.fieldName];
     }
     return $item;
   };
@@ -172,77 +176,17 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     }
     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.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($dataItem, ref);
-        if ($dataItem.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($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.findDOMNode(ref.options["child_ref_".concat(option.key)]);
-        if ($option.checked) {
-          checkedOptions.push(option.value);
-        }
-      });
-      itemData.value = checkedOptions;
-    } else if ($dataItem.element === 'RadioButtons') {
-      $dataItem.options.forEach(function (option) {
-        var $option = ReactDOM.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;
-    }
-    itemData.required = $dataItem.required || false;
-    return itemData;
-  };
-  var _collectFormData = function _collectFormData($dataItems) {
+  var _collectFormData = function _collectFormData($dataItems, $formData) {
     var formData = [];
     $dataItems.forEach(function (item) {
-      var itemData = _collect(item);
+      var itemData = {
+        id: item.id,
+        name: item.fieldName,
+        customName: item.customName || item.fieldName,
+        label: item.label !== null && item.label !== undefined && item.label !== '' ? item.label.trim() : '',
+        value: $formData[item.fieldName],
+        required: item.required || false
+      };
       if (itemData) {
         formData.push(itemData);
       }
@@ -263,7 +207,7 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     // Only submit if there are no errors.
     if (hasErrors === false) {
       if (onSubmit) {
-        var $data = _collectFormData(items);
+        var $data = _collectFormData(items, $formData);
         onSubmit({
           formData: $formData,
           answers: $data
@@ -278,7 +222,7 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     // console.log('handleChange');
     // Call submit function on change
     if (onChange) {
-      var $data = _collectFormData(items);
+      var $data = _collectFormData(items, (methods === null || methods === void 0 ? void 0 : methods.getValues()) || []);
       onChange($data);
     }
   };
@@ -308,17 +252,31 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
       return x.id === id;
     });
     if ($dataItem !== undefined) {
-      var _ref2, _ref3;
+      var _ref2, _ref3, _ref4;
       return _objectSpread(_objectSpread({}, $dataItem), {}, {
         fieldRules: getFieldRules($dataItem),
         print: print !== null && print !== void 0 ? print : false,
         readOnly: (_ref2 = readOnly || $dataItem.readOnly) !== null && _ref2 !== void 0 ? _ref2 : false,
-        disabled: (_ref3 = readOnly || $dataItem.readOnly) !== null && _ref3 !== void 0 ? _ref3 : false,
+        hideLabel: (_ref3 = hideLabels || $dataItem.hideLabel) !== null && _ref3 !== void 0 ? _ref3 : false,
+        disabled: (_ref4 = readOnly || $dataItem.readOnly) !== null && _ref4 !== void 0 ? _ref4 : false,
         mutable: true
       });
     }
     return null;
   };
+  var getStandardElement = function getStandardElement(item) {
+    if (!item) return null;
+    if (item.custom) {
+      return getCustomElement(item);
+    }
+    var Input = SurveyElements[item.element];
+    return /*#__PURE__*/React.createElement(Input, {
+      name: item.fieldName,
+      key: "form_".concat(item.id),
+      item: item,
+      value: _getDefaultValue(item)
+    });
+  };
   var getInputElement = function getInputElement(item) {
     if (!item) return null;
     if (item.custom) {
@@ -333,19 +291,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
       defaultValue: _getDefaultValue(item),
       disabled: item.disabled,
       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;
+      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.createElement(Input, {
           onBlur: onBlur,
           onChange: function onChange(e) {
@@ -398,19 +356,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
       defaultValue: _getDefaultValue(item),
       disabled: item.disabled,
       required: item.required,
-      render: function render(_ref5) {
-        var _ref5$field = _ref5.field,
-          _onChange2 = _ref5$field.onChange,
-          onBlur = _ref5$field.onBlur,
-          value = _ref5$field.value,
-          name = _ref5$field.name,
-          ref = _ref5$field.ref,
-          _ref5$fieldState = _ref5.fieldState,
-          invalid = _ref5$fieldState.invalid,
-          isTouched = _ref5$fieldState.isTouched,
-          isDirty = _ref5$fieldState.isDirty,
-          error = _ref5$fieldState.error,
-          formState = _ref5.formState;
+      render: function render(_ref6) {
+        var _ref6$field = _ref6.field,
+          _onChange2 = _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.createElement(CustomElement, {
           onBlur: onBlur,
           onChange: function onChange(e) {
@@ -474,81 +432,29 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
   var fieldItems = dataItems.filter(function (x) {
     return !x.parentId;
   }).map(function (item) {
-    var _ref6, _ref7;
+    var _ref7, _ref8, _ref9;
     if (!item) return null;
     item.fieldRules = getFieldRules(item);
     item.print = print !== null && print !== void 0 ? print : false;
-    item.readOnly = (_ref6 = readOnly || item.readOnly) !== null && _ref6 !== void 0 ? _ref6 : false;
-    item.disabled = (_ref7 = readOnly || item.readOnly) !== null && _ref7 !== void 0 ? _ref7 : false;
+    item.readOnly = (_ref7 = readOnly || item.readOnly) !== null && _ref7 !== void 0 ? _ref7 : false;
+    item.hideLabel = (_ref8 = hideLabels || item.hideLabel) !== null && _ref8 !== void 0 ? _ref8 : false;
+    item.disabled = (_ref9 = readOnly || item.readOnly) !== null && _ref9 !== void 0 ? _ref9 : false;
     item.mutable = true;
     switch (item.element) {
-      case 'Dropdown':
       case 'RadioButtons':
       case 'Rating':
-      case 'Tags':
       case 'Range':
       case 'Checkbox':
         return getInputElement(item);
+      case 'Tags':
+      case 'Dropdown':
       case 'TextInput':
-        return /*#__PURE__*/React.createElement(TextInput, {
-          name: item.fieldName,
-          ref: function ref(c) {
-            return inputs.current[item.fieldName] = c;
-          },
-          key: "form_".concat(item.id),
-          item: item,
-          value: _getDefaultValue(item)
-        });
       case 'EmailInput':
-        return /*#__PURE__*/React.createElement(EmailInput, {
-          name: item.fieldName,
-          ref: function ref(c) {
-            return inputs.current[item.fieldName] = c;
-          },
-          key: "form_".concat(item.id),
-          item: item,
-          value: _getDefaultValue(item)
-        });
       case 'NumberInput':
-        return /*#__PURE__*/React.createElement(NumberInput, {
-          name: item.fieldName,
-          ref: function ref(c) {
-            return inputs.current[item.fieldName] = c;
-          },
-          key: "form_".concat(item.id),
-          item: item,
-          value: _getDefaultValue(item)
-        });
       case 'TextArea':
-        return /*#__PURE__*/React.createElement(TextArea, {
-          name: item.fieldName,
-          ref: function ref(c) {
-            return inputs.current[item.fieldName] = c;
-          },
-          key: "form_".concat(item.id),
-          item: item,
-          value: _getDefaultValue(item)
-        });
       case 'PhoneNumber':
-        return /*#__PURE__*/React.createElement(PhoneNumber, {
-          name: item.fieldName,
-          ref: function ref(c) {
-            return inputs.current[item.fieldName] = c;
-          },
-          key: "form_".concat(item.id),
-          item: item,
-          value: _getDefaultValue(item)
-        });
       case 'DatePicker':
-        return /*#__PURE__*/React.createElement(DatePicker, {
-          name: item.fieldName,
-          ref: function ref(c) {
-            return inputs.current[item.fieldName] = c;
-          },
-          key: "form_".concat(item.id),
-          item: item,
-          value: _getDefaultValue(item)
-        });
+        return getStandardElement(item);
       case 'CustomElement':
         return getCustomElement(item);
       case 'MultiColumnRow':
@@ -568,19 +474,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           defaultValue: _getDefaultValue(item),
           disabled: item.disabled,
           required: item.required,
-          render: function render(_ref8) {
-            var _ref8$field = _ref8.field,
-              _onChange3 = _ref8$field.onChange,
-              onBlur = _ref8$field.onBlur,
-              value = _ref8$field.value,
-              name = _ref8$field.name,
-              ref = _ref8$field.ref,
-              _ref8$fieldState = _ref8.fieldState,
-              invalid = _ref8$fieldState.invalid,
-              isTouched = _ref8$fieldState.isTouched,
-              isDirty = _ref8$fieldState.isDirty,
-              error = _ref8$fieldState.error,
-              formState = _ref8.formState;
+          render: function render(_ref10) {
+            var _ref10$field = _ref10.field,
+              _onChange3 = _ref10$field.onChange,
+              onBlur = _ref10$field.onBlur,
+              value = _ref10$field.value,
+              name = _ref10$field.name,
+              ref = _ref10$field.ref,
+              _ref10$fieldState = _ref10.fieldState,
+              invalid = _ref10$fieldState.invalid,
+              isTouched = _ref10$fieldState.isTouched,
+              isDirty = _ref10$fieldState.isDirty,
+              error = _ref10$fieldState.error,
+              formState = _ref10.formState;
             return /*#__PURE__*/React.createElement(Signature, {
               methods: methods,
               onBlur: onBlur,
@@ -606,19 +512,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           defaultValue: _optionsDefaultValue(item),
           disabled: item.disabled,
           required: item.required,
-          render: function render(_ref9) {
-            var _ref9$field = _ref9.field,
-              _onChange4 = _ref9$field.onChange,
-              onBlur = _ref9$field.onBlur,
-              value = _ref9$field.value,
-              name = _ref9$field.name,
-              ref = _ref9$field.ref,
-              _ref9$fieldState = _ref9.fieldState,
-              invalid = _ref9$fieldState.invalid,
-              isTouched = _ref9$fieldState.isTouched,
-              isDirty = _ref9$fieldState.isDirty,
-              error = _ref9$fieldState.error,
-              formState = _ref9.formState;
+          render: function render(_ref11) {
+            var _ref11$field = _ref11.field,
+              _onChange4 = _ref11$field.onChange,
+              onBlur = _ref11$field.onBlur,
+              value = _ref11$field.value,
+              name = _ref11$field.name,
+              ref = _ref11$field.ref,
+              _ref11$fieldState = _ref11.fieldState,
+              invalid = _ref11$fieldState.invalid,
+              isTouched = _ref11$fieldState.isTouched,
+              isDirty = _ref11$fieldState.isDirty,
+              error = _ref11$fieldState.error,
+              formState = _ref11.formState;
             return /*#__PURE__*/React.createElement(Checkboxes, {
               onBlur: onBlur,
               onChange: function onChange(e) {
@@ -659,19 +565,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           defaultValue: _getDefaultValue(item),
           disabled: item.disabled,
           required: item.required,
-          render: function render(_ref10) {
-            var _ref10$field = _ref10.field,
-              _onChange5 = _ref10$field.onChange,
-              onBlur = _ref10$field.onBlur,
-              value = _ref10$field.value,
-              name = _ref10$field.name,
-              ref = _ref10$field.ref,
-              _ref10$fieldState = _ref10.fieldState,
-              invalid = _ref10$fieldState.invalid,
-              isTouched = _ref10$fieldState.isTouched,
-              isDirty = _ref10$fieldState.isDirty,
-              error = _ref10$fieldState.error,
-              formState = _ref10.formState;
+          render: function render(_ref12) {
+            var _ref12$field = _ref12.field,
+              _onChange5 = _ref12$field.onChange,
+              onBlur = _ref12$field.onBlur,
+              value = _ref12$field.value,
+              name = _ref12$field.name,
+              ref = _ref12$field.ref,
+              _ref12$fieldState = _ref12.fieldState,
+              invalid = _ref12$fieldState.invalid,
+              isTouched = _ref12$fieldState.isTouched,
+              isDirty = _ref12$fieldState.isDirty,
+              error = _ref12$fieldState.error,
+              formState = _ref12.formState;
             return /*#__PURE__*/React.createElement(Camera, {
               onBlur: onBlur,
               onChange: function onChange(e) {
@@ -697,19 +603,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           defaultValue: _getDefaultValue(item),
           disabled: item.disabled,
           required: item.required,
-          render: function render(_ref11) {
-            var _ref11$field = _ref11.field,
-              _onChange6 = _ref11$field.onChange,
-              onBlur = _ref11$field.onBlur,
-              value = _ref11$field.value,
-              name = _ref11$field.name,
-              ref = _ref11$field.ref,
-              _ref11$fieldState = _ref11.fieldState,
-              invalid = _ref11$fieldState.invalid,
-              isTouched = _ref11$fieldState.isTouched,
-              isDirty = _ref11$fieldState.isDirty,
-              error = _ref11$fieldState.error,
-              formState = _ref11.formState;
+          render: function render(_ref13) {
+            var _ref13$field = _ref13.field,
+              _onChange6 = _ref13$field.onChange,
+              onBlur = _ref13$field.onBlur,
+              value = _ref13$field.value,
+              name = _ref13$field.name,
+              ref = _ref13$field.ref,
+              _ref13$fieldState = _ref13.fieldState,
+              invalid = _ref13$fieldState.invalid,
+              isTouched = _ref13$fieldState.isTouched,
+              isDirty = _ref13$fieldState.isDirty,
+              error = _ref13$fieldState.error,
+              formState = _ref13.formState;
             return /*#__PURE__*/React.createElement(FileUpload, {
               onBlur: onBlur,
               onChange: function onChange(e) {