react-survey-builder 1.0.20 → 1.0.22

package/lib/toolbar.js

@@ -161,7 +161,6 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         icon: _fa.FaArrowsAltH
       }, {
         key: 'Dropdown',
-        canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'dropdown'
         }),
@@ -170,17 +169,13 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         fieldName: 'dropdown_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
+        canHaveHelp: true,
         options: [],
         placeholder: 'Select One',
-        hideRequiredAlert: true,
-        showLabelLocationPicker: true,
+        canHaveLabelLocation: true,
         answerType: 'ARRAY'
       }, {
         key: 'Tags',
-        canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'tags'
         }),
@@ -189,17 +184,13 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         fieldName: 'tags_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
+        canHaveHelp: true,
         options: [],
         placeholder: 'Select...',
-        hideRequiredAlert: true,
-        showLabelLocationPicker: true,
+        canHaveLabelLocation: true,
         answerType: 'ARRAY'
       }, {
         key: 'Checkboxes',
-        canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'checkboxes'
         }),
@@ -208,15 +199,11 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         fieldName: 'checkboxes_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
+        canHaveHelp: true,
         options: [],
-        hideRequiredAlert: true,
         answerType: 'ARRAY'
       }, {
         key: 'Checkbox',
-        canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'checkbox'
         }),
@@ -225,17 +212,13 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         fieldName: 'checkbox_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
-        boxLabel: 'Agree To Rules & Regs',
-        hideRequiredAlert: true,
+        canHaveHelp: true,
+        boxLabel: 'Pick me',
         answerType: 'BOOLEAN',
         canHideLabel: true,
-        showLabel: false
+        hideLabel: true
       }, {
         key: 'RadioButtons',
-        canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'multiple-choice'
         }),
@@ -244,15 +227,11 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         fieldName: 'radiobuttons_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
+        canHaveHelp: true,
         options: [],
-        hideRequiredAlert: true,
         answerType: 'STRING'
       }, {
         key: 'TextInput',
-        canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'text-input'
         }),
@@ -261,18 +240,14 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaFont,
         fieldName: 'text_input_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
+        canHaveHelp: true,
         placeholder: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        hideRequiredAlert: true,
-        showLabelLocationPicker: true,
+        canHaveLabelLocation: true,
         answerType: 'STRING'
       }, {
         key: 'EmailInput',
-        canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'email-input'
         }),
@@ -281,18 +256,14 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaEnvelope,
         fieldName: 'email_input_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
+        canHaveHelp: true,
         placeholder: intl.formatMessage({
           id: 'place-holder-email'
         }),
-        hideRequiredAlert: true,
-        showLabelLocationPicker: true,
+        canHaveLabelLocation: true,
         answerType: 'STRING'
       }, {
         key: 'PhoneNumber',
-        canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'phone-input'
         }),
@@ -301,21 +272,14 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaPhone,
         fieldName: 'phone_input_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
-        hideRequiredAlert: true,
-        showLabelLocationPicker: true,
+        canHaveHelp: true,
+        canHaveLabelLocation: true,
         answerType: 'STRING'
       }, {
         key: 'DatePicker',
         canDefaultToday: true,
         canReadOnly: true,
         dateFormat: 'MM/DD/YYYY',
-        timeFormat: 'hh:mm aa',
-        showTimeSelect: false,
-        showTimeSelectOnly: false,
-        showTimeInput: false,
         name: intl.formatMessage({
           id: 'date'
         }),
@@ -324,15 +288,11 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'place-holder-label'
         }),
         fieldName: 'date_picker_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
-        hideRequiredAlert: true,
-        showLabelLocationPicker: true,
+        canHaveHelp: true,
+        canHaveLabelLocation: true,
         answerType: 'STRING'
       }, {
         key: 'TextArea',
-        canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'multi-line-input'
         }),
@@ -341,15 +301,11 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaTextHeight,
         fieldName: 'text_area_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
-        hideRequiredAlert: true,
-        showLabelLocationPicker: true,
+        canHaveHelp: true,
+        canHaveLabelLocation: true,
         answerType: 'STRING'
       }, {
         key: 'NumberInput',
-        canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'number-input'
         }),
@@ -358,18 +314,14 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaPlus,
         fieldName: 'number_input_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
+        canHaveHelp: true,
         step: 1,
         minValue: 0,
         maxValue: 5,
-        hideRequiredAlert: true,
-        showLabelLocationPicker: true,
+        canHaveLabelLocation: true,
         answerType: 'NUMBER'
       }, {
         key: 'Rating',
-        canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'rating'
         }),
@@ -378,9 +330,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: _fa.FaStar,
         fieldName: 'rating_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
+        canHaveHelp: true,
         answerType: 'NUMBER'
       }, {
         key: 'Range',
@@ -402,10 +352,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         maxLabel: intl.formatMessage({
           id: 'difficult'
         }),
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
-        hideRequiredAlert: true,
+        canHaveHelp: true,
         answerType: 'NUMBER'
       }, {
         key: 'Signature',
@@ -418,10 +365,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'signature'
         }),
         fieldName: 'signature_',
-        showCustomName: true,
-        showDescription: true,
-        showHelp: true,
-        hideRequiredAlert: true,
+        canHaveHelp: true,
         answerType: 'IMAGE'
       }, {
         key: 'Camera',
@@ -447,7 +391,6 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         answerType: 'FILE'
       }, {
         key: 'FieldSet',
-        canHaveAnswer: false,
         name: intl.formatMessage({
           id: 'fieldset'
         }),
@@ -455,7 +398,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'fieldset'
         }),
         icon: _fa.FaBars,
-        fieldName: 'fieldset-element'
+        fieldName: 'fieldset-element',
+        "static": true
       }, {
         key: 'Image',
         name: intl.formatMessage({
@@ -464,53 +408,53 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: '',
         icon: _fa.FaRegImage,
         fieldName: 'image_',
-        src: ''
+        src: '',
+        "static": true
       }, {
         key: 'HyperLink',
         name: intl.formatMessage({
           id: 'website'
         }),
         icon: _fa.FaLink,
-        "static": true,
         content: intl.formatMessage({
           id: 'place-holder-website-link'
         }),
-        href: 'http://www.example.com'
+        href: 'http://www.example.com',
+        "static": true
       }, {
         key: 'Download',
         name: intl.formatMessage({
           id: 'file-attachment'
         }),
         icon: _fa.FaFile,
-        "static": true,
         content: intl.formatMessage({
           id: 'place-holder-file-name'
         }),
         fieldName: 'download_',
         filePath: '',
-        _href: ''
+        href: '',
+        "static": true
       }, {
         key: 'TwoColumnRow',
-        canHaveAnswer: false,
         name: intl.formatMessage({
           id: 'two-columns-row'
         }),
         label: '',
         icon: _fa.FaColumns,
-        fieldName: 'two_col_row_'
+        fieldName: 'two_col_row_',
+        "static": true
       }, {
         key: 'ThreeColumnRow',
-        canHaveAnswer: false,
         name: intl.formatMessage({
           id: 'three-columns-row'
         }),
         label: '',
         icon: _fa.FaColumns,
-        fieldName: 'three_col_row_'
+        fieldName: 'three_col_row_',
+        "static": true
       }, {
         key: 'FourColumnRow',
         element: 'MultiColumnRow',
-        canHaveAnswer: false,
         name: intl.formatMessage({
           id: 'four-columns-row'
         }),
@@ -518,11 +462,11 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         icon: _fa.FaColumns,
         fieldName: 'four_col_row_',
         colCount: 4,
-        className: 'col-md-3'
+        className: 'col-md-3',
+        "static": true
       }, {
         key: 'FiveColumnRow',
         element: 'MultiColumnRow',
-        canHaveAnswer: false,
         name: intl.formatMessage({
           id: 'five-columns-row'
         }),
@@ -530,11 +474,11 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         icon: _fa.FaColumns,
         fieldName: 'five_col_row_',
         colCount: 5,
-        className: 'col'
+        className: 'col',
+        "static": true
       }, {
         key: 'SixColumnRow',
         element: 'MultiColumnRow',
-        canHaveAnswer: false,
         name: intl.formatMessage({
           id: 'six-columns-row'
         }),
@@ -542,7 +486,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         icon: _fa.FaColumns,
         fieldName: 'six_col_row_',
         colCount: 6,
-        className: 'col-md-2'
+        className: 'col-md-2',
+        "static": true
       }];
     }
   }, {
@@ -560,27 +505,28 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "create",
     value: function create(item) {
+      var _item$static;
       var intl = this.props.intl;
       var element = item.element || item.key;
       var elementOptions = this.addCustomOptions(item, {
         id: _UUID["default"].uuid(),
         element: element,
         text: item.name,
-        groupName: item.groupName,
-        "static": item["static"],
-        required: false,
-        showDescription: item.showDescription,
-        hideRequiredAlert: item.hideRequiredAlert
+        "static": (_item$static = item["static"]) !== null && _item$static !== void 0 ? _item$static : false
       });
-      if (this.props.showDescription === true && !item["static"]) {
-        elementOptions.showDescription = true;
+      if (item.groupName) {
+        var _item$groupName;
+        elementOptions.groupName = (_item$groupName = item.groupName) !== null && _item$groupName !== void 0 ? _item$groupName : null;
+      }
+      if (!item["static"]) {
+        elementOptions.required = false;
       }
 
       // add placeholder to form input
       if (['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags'].indexOf(element) !== -1) {
-        elementOptions.showPlaceholder = true;
+        var _item$placeholder;
+        elementOptions.placeholder = (_item$placeholder = item.placeholder) !== null && _item$placeholder !== void 0 ? _item$placeholder : '';
       }
-      elementOptions.placeholder = item.placeholder;
       if (item.type === 'custom') {
         elementOptions.key = item.key;
         elementOptions.custom = true;
@@ -594,23 +540,25 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         elementOptions.bold = false;
         elementOptions.italic = false;
       }
-      elementOptions.showCustomName = item.showCustomName;
-      elementOptions.customName = item.customName;
-      elementOptions.showLabelLocationPicker = item.showLabelLocationPicker;
-      elementOptions.labelLocation = item.labelLocation;
-      elementOptions.showHelp = item.showHelp;
-      elementOptions.help = item.help;
-      elementOptions.hideRequiredAlert = item.hideRequiredAlert;
-      elementOptions.canHideLabel = item.canHideLabel;
-      elementOptions.hideLabel = item.hideLabel;
-      if (item.canHaveAnswer) {
-        elementOptions.canHaveAnswer = item.canHaveAnswer;
+      if (item.canHaveLabelLocation || item.labelLocation !== undefined) {
+        var _item$labelLocation;
+        elementOptions.labelLocation = (_item$labelLocation = item.labelLocation) !== null && _item$labelLocation !== void 0 ? _item$labelLocation : 'ABOVE';
       }
-      if (item.canReadOnly) {
-        elementOptions.readOnly = false;
+      if (item.canHaveHelp || item.help !== undefined) {
+        var _item$help;
+        elementOptions.help = (_item$help = item.help) !== null && _item$help !== void 0 ? _item$help : '';
       }
-      if (item.canDefaultToday) {
-        elementOptions.defaultToday = false;
+      if (item.canHideLabel || item.hideLabel !== undefined) {
+        var _item$hideLabel;
+        elementOptions.hideLabel = (_item$hideLabel = item.hideLabel) !== null && _item$hideLabel !== void 0 ? _item$hideLabel : false;
+      }
+      if (item.canReadOnly || item.readOnly !== undefined) {
+        var _item$readOnly;
+        elementOptions.readOnly = (_item$readOnly = item.readOnly) !== null && _item$readOnly !== void 0 ? _item$readOnly : false;
+      }
+      if (item.canDefaultToday || item.defaultToday !== undefined) {
+        var _item$defaultToday;
+        elementOptions.defaultToday = (_item$defaultToday = item.defaultToday) !== null && _item$defaultToday !== void 0 ? _item$defaultToday : false;
       }
       if (item.content) {
         elementOptions.content = item.content;
@@ -621,15 +569,30 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       if (item.inherited !== undefined) {
         elementOptions.inherited = item.inherited;
       }
-      elementOptions.canHavePageBreakBefore = item.canHavePageBreakBefore !== false;
-      elementOptions.canHaveAlternateForm = item.canHaveAlternateForm !== false;
-      elementOptions.canHaveDisplayHorizontal = item.canHaveDisplayHorizontal !== false;
-      if (elementOptions.canHaveDisplayHorizontal) {
-        elementOptions.inline = item.inline;
+      if (item.canHavePageBreakBefore || item.pageBreakBefore !== undefined) {
+        var _item$pageBreakBefore;
+        elementOptions.pageBreakBefore = (_item$pageBreakBefore = item.pageBreakBefore) !== null && _item$pageBreakBefore !== void 0 ? _item$pageBreakBefore : false;
+      }
+      if (item.canHaveAlternateForm || item.alternateForm !== undefined) {
+        var _item$alternateForm;
+        elementOptions.alternateForm = (_item$alternateForm = item.alternateForm) !== null && _item$alternateForm !== void 0 ? _item$alternateForm : false;
+      }
+      if (item.canHaveDisplayHorizontal || item.inline !== undefined) {
+        var _item$inline;
+        elementOptions.inline = (_item$inline = item.inline) !== null && _item$inline !== void 0 ? _item$inline : false;
+      }
+      if (item.canHaveOptionCorrect) {
+        var _item$canHaveOptionCo;
+        elementOptions.canHaveOptionCorrect = (_item$canHaveOptionCo = item.canHaveOptionCorrect) !== null && _item$canHaveOptionCo !== void 0 ? _item$canHaveOptionCo : false;
+      }
+      if (item.canHaveOptionValue) {
+        var _item$canHaveOptionVa;
+        elementOptions.canHaveOptionValue = (_item$canHaveOptionVa = item.canHaveOptionValue) !== null && _item$canHaveOptionVa !== void 0 ? _item$canHaveOptionVa : false;
+      }
+      if (item.canPopulateFromApi) {
+        var _item$canPopulateFrom;
+        elementOptions.canPopulateFromApi = (_item$canPopulateFrom = item.canPopulateFromApi) !== null && _item$canPopulateFrom !== void 0 ? _item$canPopulateFrom : false;
       }
-      elementOptions.canHaveOptionCorrect = item.canHaveOptionCorrect !== false;
-      elementOptions.canHaveOptionValue = item.canHaveOptionValue !== false;
-      elementOptions.canPopulateFromApi = item.canPopulateFromApi !== false;
       if (item.className) {
         elementOptions.className = item.className;
       }
@@ -638,13 +601,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       }
       if (element === 'DatePicker') {
         elementOptions.dateFormat = item.dateFormat;
-        elementOptions.timeFormat = item.timeFormat;
-        elementOptions.showTimeSelect = item.showTimeSelect;
-        elementOptions.showTimeSelectOnly = item.showTimeSelectOnly;
-        elementOptions.showTimeInput = item.showTimeInput;
       }
       if (element === 'Download') {
-        elementOptions._href = item._href;
+        elementOptions.href = item.href;
         elementOptions.filePath = item.filePath;
       }
       if (element === 'NumberInput') {
@@ -669,8 +628,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       if (item.fieldName) {
         elementOptions.fieldName = item.fieldName + _UUID["default"].uuid();
       }
-      if (item.customName) {
-        elementOptions.fieldName = item.customName;
+      if (!item["static"]) {
+        var _item$customName;
+        elementOptions.customName = (_item$customName = item.customName) !== null && _item$customName !== void 0 ? _item$customName : elementOptions.fieldName;
       }
       if (item.label) {
         elementOptions.label = item.label.trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-survey-builder",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "A complete survey builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",

package/types/index.d.ts

@@ -28,18 +28,19 @@ type BaseElement = {
     | "File Attachment"
     | "Range"
     | "Camera";
-  showDescription?: boolean;
-  showLabelLocationPicker?: boolean;
-  showHelp?: boolean;
-  hideLabel?: boolean;
+  canHaveLabelLocation?: boolean;
+  labelLocation?: string;
+  canHaveHelp?: boolean;
+  help?: string;
   canHideLabel: boolean;
-	hideRequiredAlert?: boolean;
-  required: boolean;
+  hideLabel?: boolean;
+  required?: boolean;
   canHaveAlternateForm: boolean;
+  alternateForm?: boolean;
   canHaveDisplayHorizontal: boolean;
-  canHaveOptionCorrect: boolean;
-  canHaveOptionValue: boolean;
+  inline?: boolean;
   canHavePageBreakBefore: boolean;
+  pageBreakBefore?: boolean;
   canPopulateFromApi: boolean;
   text: string;
 };
@@ -51,7 +52,6 @@ export type StaticElement = {
   static: true;
 };
 export type SurveyBuilderInput = {
-  canHaveAnswer?: true;
   fieldName: string;
   label: string;
 };
@@ -72,10 +72,6 @@ export type DateElement = {
   dateFormat: string;
   defaultToday: boolean;
   readOnly: boolean;
-  showTimeSelect: boolean;
-  showTimeSelectOnly: boolean;
-  showTimeInput: boolean;
-  timeFormat: string;
 } & SurveyBuilderInput;
 export type RangeElement = {
   maxLabel: string;
@@ -85,7 +81,7 @@ export type RangeElement = {
   step: number;
 } & SurveyBuilderInput;
 export type FileElement = {
-  _href: string;
+  href: string;
   filePath: string;
   fieldName: string;
 } & StaticElement;