react-survey-builder 1.0.68 → 1.0.70

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';
@@ -47,8 +47,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 +115,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 +133,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 +174,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 +205,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 +220,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);
     }
   };
@@ -319,6 +261,19 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     }
     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) {
@@ -482,73 +437,20 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     item.disabled = (_ref7 = readOnly || item.readOnly) !== null && _ref7 !== void 0 ? _ref7 : 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':

package/lib/form.js

@@ -125,14 +125,16 @@ var ReactSurvey = function ReactSurvey(_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') {
@@ -141,11 +143,13 @@ var ReactSurvey = function ReactSurvey(_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;
   };
@@ -180,77 +184,17 @@ var ReactSurvey = function ReactSurvey(_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);
       }
@@ -271,7 +215,7 @@ var ReactSurvey = function ReactSurvey(_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
@@ -286,7 +230,7 @@ var ReactSurvey = function ReactSurvey(_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);
     }
   };
@@ -327,6 +271,19 @@ var ReactSurvey = function ReactSurvey(_ref) {
     }
     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) {
@@ -490,73 +447,20 @@ var ReactSurvey = function ReactSurvey(_ref) {
     item.disabled = (_ref7 = readOnly || item.readOnly) !== null && _ref7 !== void 0 ? _ref7 : 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':