react-survey-builder 1.0.44 → 1.0.46

package/lib/form-fields.js

@@ -20,7 +20,7 @@ var _esm = require("react-bootstrap/esm");
 var _reactHookForm = require("react-hook-form");
 var _lodash = require("lodash");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-var _reactPhoneNumberInput = require("react-phone-number-input");
+var _validators = require("./utils/validators");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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; }
@@ -298,80 +298,6 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     });
     return hasErrors;
   };
-  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 '';
-    }
-  };
-  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;
-      }
-    }
-    return true;
-  };
   var getDataItemById = function getDataItemById(id) {
     var $dataItem = items.find(function (x) {
       return x.id === id;
@@ -512,17 +438,17 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
           message: "".concat(item.label, " must be at least 4 characters long")
         };
         fieldRules.validate = function (value) {
-          return validateEmail(value) || "".concat(item.label, " field requires valid email address");
+          return (0, _validators.validateEmail)(value) || "".concat(item.label, " field requires valid email address");
         };
         break;
       case 'PhoneNumber':
         fieldRules.validate = function (value) {
-          return validatePhone(value) || "".concat(item.label, " field requires a valid phone number");
+          return (0, _validators.validatePhone)(value) || "".concat(item.label, " field requires a valid phone number");
         };
         break;
       case 'DatePicker':
         fieldRules.validate = function (value) {
-          return validateDate(value) || "".concat(item.label, " field requires a valid date in the format MM/DD/YYYY");
+          return (0, _validators.validateDate)(value) || "".concat(item.label, " field requires a valid date in the format MM/DD/YYYY");
         };
         break;
       default:
@@ -574,19 +500,73 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     item.disabled = (_ref7 = readOnly || item.readOnly) !== null && _ref7 !== void 0 ? _ref7 : false;
     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 'TextInput':
+        return /*#__PURE__*/_react["default"].createElement(_surveyElements.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["default"].createElement(_surveyElements.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["default"].createElement(_surveyElements.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["default"].createElement(_surveyElements.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["default"].createElement(_surveyElements.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["default"].createElement(_surveyElements.DatePicker, {
+          name: item.fieldName,
+          ref: function ref(c) {
+            return inputs.current[item.fieldName] = c;
+          },
+          key: "form_".concat(item.id),
+          item: item,
+          value: _getDefaultValue(item)
+        });
       case 'CustomElement':
         return getCustomElement(item);
       case 'MultiColumnRow':

package/lib/form.js

@@ -20,7 +20,7 @@ var _esm = require("react-bootstrap/esm");
 var _reactHookForm = require("react-hook-form");
 var _lodash = require("lodash");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-var _reactPhoneNumberInput = require("react-phone-number-input");
+var _validators = require("./utils/validators");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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; }
@@ -306,80 +306,6 @@ var ReactSurvey = function ReactSurvey(_ref) {
     });
     return hasErrors;
   };
-  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 '';
-    }
-  };
-  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;
-      }
-    }
-    return true;
-  };
   var getDataItemById = function getDataItemById(id) {
     var $dataItem = items.find(function (x) {
       return x.id === id;
@@ -520,17 +446,17 @@ var ReactSurvey = function ReactSurvey(_ref) {
           message: "".concat(item.label, " must be at least 4 characters long")
         };
         fieldRules.validate = function (value) {
-          return validateEmail(value) || "".concat(item.label, " field requires valid email address");
+          return (0, _validators.validateEmail)(value) || "".concat(item.label, " field requires valid email address");
         };
         break;
       case 'PhoneNumber':
         fieldRules.validate = function (value) {
-          return validatePhone(value) || "".concat(item.label, " field requires a valid phone number");
+          return (0, _validators.validatePhone)(value) || "".concat(item.label, " field requires a valid phone number");
         };
         break;
       case 'DatePicker':
         fieldRules.validate = function (value) {
-          return validateDate(value) || "".concat(item.label, " field requires a valid date in the format MM/DD/YYYY");
+          return (0, _validators.validateDate)(value) || "".concat(item.label, " field requires a valid date in the format MM/DD/YYYY");
         };
         break;
       default:
@@ -584,17 +510,35 @@ var ReactSurvey = function ReactSurvey(_ref) {
     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 'PhoneNumber':
+        return /*#__PURE__*/_react["default"].createElement(_surveyElements.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["default"].createElement(_surveyElements.DatePicker, {
+          name: item.fieldName,
+          ref: function ref(c) {
+            return inputs.current[item.fieldName] = c;
+          },
+          key: "form_".concat(item.id),
+          item: item,
+          value: _getDefaultValue(item)
+        });
       case 'CustomElement':
         return getCustomElement(item);
       case 'MultiColumnRow':

package/lib/survey-elements/component-header.js

@@ -5,25 +5,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _headerBar = _interopRequireDefault(require("./header-bar"));
-var ComponentHeader = function ComponentHeader(props) {
-  if (props.item.mutable) {
+var _excluded = ["item"];
+var ComponentHeader = function ComponentHeader(_ref) {
+  var item = _ref.item,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  if (item !== null && item !== void 0 && item.mutable) {
     return null;
   }
-  return /*#__PURE__*/_react["default"].createElement("div", null, props.item.pageBreakBefore && /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", null, (item === null || item === void 0 ? void 0 : item.pageBreakBefore) && /*#__PURE__*/_react["default"].createElement("div", {
     className: "preview-page-break"
   }, "Page Break"), /*#__PURE__*/_react["default"].createElement(_headerBar["default"], {
     isFieldSet: props.isFieldSet,
     parent: props.parent,
     editModeOn: props.editModeOn,
-    item: props.item,
+    item: item,
     index: props.index,
     setAsChild: props.setAsChild,
     onDestroy: props._onDestroy,
     onEdit: props.onEdit,
-    "static": props.item["static"],
-    required: props.item.required
+    "static": item === null || item === void 0 ? void 0 : item["static"],
+    required: item === null || item === void 0 ? void 0 : item.required
   }));
 };
 var _default = exports["default"] = ComponentHeader;