react-survey-builder 1.0.9 → 1.0.10

package/lib/toolbar.js

@@ -20,7 +20,6 @@ var _UUID = _interopRequireDefault(require("./UUID"));
 var _store = _interopRequireDefault(require("./stores/store"));
 var _functions = require("./functions");
 var _fa = require("react-icons/fa");
-var _reactBootstrap = require("react-bootstrap");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 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; }
@@ -182,7 +181,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showDescription: true,
         showHelp: true,
         options: [],
-        hideRequiredAlert: true
+        placeholder: 'Select...',
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'Checkboxes',
         canHaveAnswer: true,
@@ -270,35 +271,38 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         hideRequiredAlert: true,
         showLabelLocationPicker: true
       }, {
-        key: 'NumberInput',
+        key: 'PhoneNumber',
         canHaveAnswer: true,
         name: intl.formatMessage({
-          id: 'number-input'
+          id: 'phone-input'
         }),
         label: intl.formatMessage({
-          id: 'place-holder-label'
+          id: 'place-holder-phone-number'
         }),
-        icon: _fa.FaPlus,
-        fieldName: 'number_input_',
+        icon: _fa.FaPhone,
+        fieldName: 'phone_input_',
         showCustomName: true,
         showDescription: true,
         showHelp: true,
-        step: 1,
-        minValue: 0,
-        maxValue: 5,
         hideRequiredAlert: true,
         showLabelLocationPicker: true
       }, {
-        key: 'PhoneNumber',
-        canHaveAnswer: true,
+        key: 'DatePicker',
+        canDefaultToday: true,
+        canReadOnly: true,
+        dateFormat: 'MM/DD/YYYY',
+        timeFormat: 'hh:mm aa',
+        showTimeSelect: false,
+        showTimeSelectOnly: false,
+        showTimeInput: false,
         name: intl.formatMessage({
-          id: 'phone-input'
+          id: 'date'
         }),
+        icon: _fa.FaRegCalendarAlt,
         label: intl.formatMessage({
-          id: 'place-holder-phone-number'
+          id: 'place-holder-label'
         }),
-        icon: _fa.FaPhone,
-        fieldName: 'phone_input_',
+        fieldName: 'date_picker_',
         showCustomName: true,
         showDescription: true,
         showHelp: true,
@@ -321,79 +325,24 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         hideRequiredAlert: true,
         showLabelLocationPicker: true
       }, {
-        key: 'FieldSet',
-        canHaveAnswer: false,
+        key: 'NumberInput',
+        canHaveAnswer: true,
         name: intl.formatMessage({
-          id: 'fieldset'
+          id: 'number-input'
         }),
         label: intl.formatMessage({
-          id: 'fieldset'
-        }),
-        icon: _fa.FaBars,
-        fieldName: 'fieldset-element'
-      }, {
-        key: 'TwoColumnRow',
-        canHaveAnswer: false,
-        name: intl.formatMessage({
-          id: 'two-columns-row'
-        }),
-        label: '',
-        icon: _fa.FaColumns,
-        fieldName: 'two_col_row_'
-      }, {
-        key: 'ThreeColumnRow',
-        canHaveAnswer: false,
-        name: intl.formatMessage({
-          id: 'three-columns-row'
-        }),
-        label: '',
-        icon: _fa.FaColumns,
-        fieldName: 'three_col_row_'
-      }, {
-        key: 'FourColumnRow',
-        element: 'MultiColumnRow',
-        canHaveAnswer: false,
-        name: intl.formatMessage({
-          id: 'four-columns-row'
-        }),
-        label: '',
-        icon: _fa.FaColumns,
-        fieldName: 'four_col_row_',
-        colCount: 4,
-        className: 'col-md-3'
-      }, {
-        key: 'FiveColumnRow',
-        element: 'MultiColumnRow',
-        canHaveAnswer: false,
-        name: intl.formatMessage({
-          id: 'five-columns-row'
-        }),
-        label: '',
-        icon: _fa.FaColumns,
-        fieldName: 'five_col_row_',
-        colCount: 5,
-        className: 'col'
-      }, {
-        key: 'SixColumnRow',
-        element: 'MultiColumnRow',
-        canHaveAnswer: false,
-        name: intl.formatMessage({
-          id: 'six-columns-row'
-        }),
-        label: '',
-        icon: _fa.FaColumns,
-        fieldName: 'six_col_row_',
-        colCount: 6,
-        className: 'col-md-2'
-      }, {
-        key: 'Image',
-        name: intl.formatMessage({
-          id: 'image'
+          id: 'place-holder-label'
         }),
-        label: '',
-        icon: _fa.FaRegImage,
-        fieldName: 'image_',
-        src: ''
+        icon: _fa.FaPlus,
+        fieldName: 'number_input_',
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true,
+        step: 1,
+        minValue: 0,
+        maxValue: 5,
+        hideRequiredAlert: true,
+        showLabelLocationPicker: true
       }, {
         key: 'Rating',
         canHaveAnswer: true,
@@ -409,22 +358,25 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showDescription: true,
         showHelp: true
       }, {
-        key: 'DatePicker',
-        canDefaultToday: true,
-        canReadOnly: true,
-        dateFormat: 'MM/dd/yyyy',
-        timeFormat: 'hh:mm aa',
-        showTimeSelect: false,
-        showTimeSelectOnly: false,
-        showTimeInput: false,
+        key: 'Range',
         name: intl.formatMessage({
-          id: 'date'
+          id: 'range'
         }),
-        icon: _fa.FaRegCalendarAlt,
+        icon: _fa.FaSlidersH,
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        fieldName: 'date_picker_',
+        fieldName: 'range_',
+        step: 1,
+        defaultValue: 3,
+        minValue: 1,
+        maxValue: 5,
+        minLabel: intl.formatMessage({
+          id: 'easy'
+        }),
+        maxLabel: intl.formatMessage({
+          id: 'difficult'
+        }),
         showCustomName: true,
         showDescription: true,
         showHelp: true,
@@ -439,7 +391,51 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'signature'
         }),
-        fieldName: 'signature_'
+        fieldName: 'signature_',
+        showCustomName: true,
+        showDescription: true,
+        showHelp: true,
+        hideRequiredAlert: true
+      }, {
+        key: 'Camera',
+        name: intl.formatMessage({
+          id: 'camera'
+        }),
+        icon: _fa.FaCamera,
+        label: intl.formatMessage({
+          id: 'place-holder-label'
+        }),
+        fieldName: 'camera_'
+      }, {
+        key: 'FileUpload',
+        name: intl.formatMessage({
+          id: 'file-upload'
+        }),
+        icon: _fa.FaFile,
+        label: intl.formatMessage({
+          id: 'place-holder-label'
+        }),
+        fieldName: 'file_upload_'
+      }, {
+        key: 'FieldSet',
+        canHaveAnswer: false,
+        name: intl.formatMessage({
+          id: 'fieldset'
+        }),
+        label: intl.formatMessage({
+          id: 'fieldset'
+        }),
+        icon: _fa.FaBars,
+        fieldName: 'fieldset-element'
+      }, {
+        key: 'Image',
+        name: intl.formatMessage({
+          id: 'image'
+        }),
+        label: '',
+        icon: _fa.FaRegImage,
+        fieldName: 'image_',
+        src: ''
       }, {
         key: 'HyperLink',
         name: intl.formatMessage({
@@ -465,49 +461,59 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         filePath: '',
         _href: ''
       }, {
-        key: 'Range',
+        key: 'TwoColumnRow',
+        canHaveAnswer: false,
         name: intl.formatMessage({
-          id: 'range'
-        }),
-        icon: _fa.FaSlidersH,
-        label: intl.formatMessage({
-          id: 'place-holder-label'
-        }),
-        fieldName: 'range_',
-        step: 1,
-        defaultValue: 3,
-        minValue: 1,
-        maxValue: 5,
-        minLabel: intl.formatMessage({
-          id: 'easy'
-        }),
-        maxLabel: intl.formatMessage({
-          id: 'difficult'
+          id: 'two-columns-row'
         }),
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
-        hideRequiredAlert: true
+        label: '',
+        icon: _fa.FaColumns,
+        fieldName: 'two_col_row_'
       }, {
-        key: 'Camera',
+        key: 'ThreeColumnRow',
+        canHaveAnswer: false,
         name: intl.formatMessage({
-          id: 'camera'
+          id: 'three-columns-row'
         }),
-        icon: _fa.FaCamera,
-        label: intl.formatMessage({
-          id: 'place-holder-label'
+        label: '',
+        icon: _fa.FaColumns,
+        fieldName: 'three_col_row_'
+      }, {
+        key: 'FourColumnRow',
+        element: 'MultiColumnRow',
+        canHaveAnswer: false,
+        name: intl.formatMessage({
+          id: 'four-columns-row'
         }),
-        fieldName: 'camera_'
+        label: '',
+        icon: _fa.FaColumns,
+        fieldName: 'four_col_row_',
+        colCount: 4,
+        className: 'col-md-3'
       }, {
-        key: 'FileUpload',
+        key: 'FiveColumnRow',
+        element: 'MultiColumnRow',
+        canHaveAnswer: false,
         name: intl.formatMessage({
-          id: 'file-upload'
+          id: 'five-columns-row'
         }),
-        icon: _fa.FaFile,
-        label: intl.formatMessage({
-          id: 'place-holder-label'
+        label: '',
+        icon: _fa.FaColumns,
+        fieldName: 'five_col_row_',
+        colCount: 5,
+        className: 'col'
+      }, {
+        key: 'SixColumnRow',
+        element: 'MultiColumnRow',
+        canHaveAnswer: false,
+        name: intl.formatMessage({
+          id: 'six-columns-row'
         }),
-        fieldName: 'file_upload_'
+        label: '',
+        icon: _fa.FaColumns,
+        fieldName: 'six_col_row_',
+        colCount: 6,
+        className: 'col-md-2'
       }];
     }
   }, {
@@ -542,7 +548,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       }
 
       // add placeholder to form input
-      if (['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown'].indexOf(element) !== -1) {
+      if (['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags'].indexOf(element) !== -1) {
         elementOptions.showPlaceholder = true;
       }
       elementOptions.placeholder = item.placeholder;
@@ -665,8 +671,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         items = _buildGroupItems.items,
         grouped = _buildGroupItems.grouped,
         groupKeys = _buildGroupItems.groupKeys;
-      return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Col, {
-        md: 3,
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: "react-survey-builder-toolbar"
       }, /*#__PURE__*/_react["default"].createElement("h4", null, this.props.intl.formatMessage({
         id: 'toolbox'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-survey-builder",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A complete survey builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
@@ -28,8 +28,10 @@
   },
   "author": "Garrett Lang",
   "dependencies": {
+    "@hookform/error-message": ">=2.0.1",
     "beedle": "^0.8.1",
     "classnames": "^2.2.6",
+    "create-react-class": "^15.7.0",
     "date-fns": "^2.16.1",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
@@ -39,14 +41,18 @@
     "immutability-helper": "^3.1.1",
     "isomorphic-fetch": "^3.0.0",
     "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.44",
     "prop-types": "^15.7.2",
-    "react-bootstrap": "^2.9.2",
+    "react-bootstrap": ">=2.9.2",
     "react-bootstrap-range-slider": "^3.0.8",
+    "react-bootstrap-typeahead": "^6.3.2",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
     "react-draft-wysiwyg": "^1.15.0",
-    "react-icons": "^5.0.1",
-    "react-imask": "^7.0.1",
+    "react-hook-form": ">=7.45.4",
+    "react-icons": ">=5.0.1",
+    "react-imask": ">=7.0.1",
     "react-intl": "^5.24.3",
     "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.3",
@@ -54,9 +60,11 @@
     "xss": "^1.0.8"
   },
   "peerDependencies": {
+    "@hookform/error-message": ">=2.0.1",
     "react": ">=18.2.0",
     "react-bootstrap": ">=2.9.2",
     "react-dom": ">=18.2.0",
+    "react-hook-form": ">=7.45.4",
     "react-icons": ">=5.0.1",
     "react-imask": ">=7.0.1"
   },

package/types/index.d.ts

@@ -123,6 +123,7 @@ export type ToolbarItem = {
 };
 
 export interface SurveyBuilderProps {
+  formName?: string;
   toolbarItems?: ToolbarItem[];
   files?: any[];
   url?: string;
@@ -170,6 +171,7 @@ export interface SurveyGeneratorProps {
   backButton?: JSX.Element;
   buttons?: JSX.Element;
   buttonClassName?: string;
+  formId?: string;
 }
 
 export class ReactSurveyGenerator extends React.Component<SurveyGeneratorProps> {}