react-survey-builder 1.0.106 → 1.0.108

package/lib/survey-elements-edit.js

@@ -138,9 +138,13 @@ var SurveyElementsEdit = function SurveyElementsEdit(_ref2) {
   var thisCheckedConditional = element.hasOwnProperty('conditional') ? element.conditional : false;
   var thisCheckedHideNextStepButton = element.hasOwnProperty('hideNextStepButton') ? element.hideNextStepButton : false;
   var thisCheckedSubmitOnSelection = element.hasOwnProperty('submitOnSelection') ? element.submitOnSelection : false;
+  var thisCheckedShowRadio = element.hasOwnProperty('showRadio') ? element.showRadio : false;
   var canHaveAnswer = ['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags', 'Checkboxes', 'Checkbox', 'ButtonList', 'Rating', 'Range'].indexOf(element.element) !== -1;
   var canHaveOptionValue = ['Dropdown', 'Tags', 'Checkboxes', 'RadioButtons', 'ButtonList'].indexOf(element.element) !== -1;
   var canHaveOptionCorrect = canHaveAnswer && canHaveOptionValue;
+  var canHaveIcon = ['Checkboxes', 'RadioButtons', 'ButtonList'].indexOf(element.element) !== -1;
+  var canHaveImage = ['Checkboxes', 'RadioButtons', 'ButtonList'].indexOf(element.element) !== -1;
+  var canHaveDescription = ['Checkboxes', 'RadioButtons', 'ButtonList'].indexOf(element.element) !== -1;
   var thisFiles = isListNotEmpty(files) ? _toConsumableArray(files) : [];
   if (thisFiles.length < 1 || thisFiles.length > 0 && thisFiles[0].id !== '') {
     thisFiles.unshift({
@@ -587,7 +591,7 @@ var SurveyElementsEdit = function SurveyElementsEdit(_ref2) {
     value: "ABOVE"
   }, "Above Form Field"), /*#__PURE__*/React.createElement("option", {
     value: "FLOATING"
-  }, "Floating Inside Form Field"))), element.hasOwnProperty('hideLabel') && /*#__PURE__*/React.createElement(Form.Group, {
+  }, "Floating Inside Form Field"))), (element.hasOwnProperty('hideLabel') || ['Dropdown', 'Tags', 'Checkboxes', 'Checkbox', 'RadioButtons', 'ButtonList', 'TextInput', 'EmailInput', 'PhoneNumber', 'DatePicker', 'TextArea', 'NumberInput', 'Rating', 'Range', 'Signature', 'Camera', 'FileUpload'].includes(element.element)) && /*#__PURE__*/React.createElement(Form.Group, {
     className: "form-group mb-5"
   }, /*#__PURE__*/React.createElement(Form.Label, {
     className: "fw-bold"
@@ -684,6 +688,137 @@ var SurveyElementsEdit = function SurveyElementsEdit(_ref2) {
     onChange: function onChange(e) {
       editElementProp('submitOnSelection', 'checked', e);
     }
+  })), element.element === 'RadioButtons' && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Show Radio by Default:"), /*#__PURE__*/React.createElement(Form.Check, {
+    id: "showRadio",
+    label: "Show Radio by Default:",
+    type: "checkbox",
+    checked: thisCheckedShowRadio,
+    value: true,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('showRadio', 'checked', e);
+    }
+  })), element.hasOwnProperty('bgColor') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "bgColor"
+  }, "Background Color:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "bgColor",
+    defaultValue: element.bgColor,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('bgColor', 'value', e);
+    }
+  })), element.hasOwnProperty('textColor') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "textColor"
+  }, "Text Color:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "textColor",
+    defaultValue: element.textColor,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('textColor', 'value', e);
+    }
+  })), element.hasOwnProperty('className') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "className"
+  }, "ClassName:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "className",
+    defaultValue: element.className,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('className', 'value', e);
+    }
+  })), element.hasOwnProperty('fieldLabelClassName') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "fieldLabelClassName"
+  }, "Label ClassName:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "fieldLabelClassName",
+    defaultValue: element.fieldLabelClassName,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('fieldLabelClassName', 'value', e);
+    }
+  })), element.hasOwnProperty('fieldDescriptionClassName') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "fieldDescriptionClassName"
+  }, "Description ClassName:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "fieldDescriptionClassName",
+    defaultValue: element.fieldDescriptionClassName,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('fieldDescriptionClassName', 'value', e);
+    }
+  })), element.hasOwnProperty('selectedClassName') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "selectedClassName"
+  }, "Selected ClassName:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "selectedClassName",
+    defaultValue: element.selectedClassName,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('selectedClassName', 'value', e);
+    }
+  })), element.hasOwnProperty('unselectedClassName') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "unselectedClassName"
+  }, "Unselected ClassName:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "unselectedClassName",
+    defaultValue: element.unselectedClassName,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('unselectedClassName', 'value', e);
+    }
+  })), element.hasOwnProperty('selectedColor') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "selectedColor"
+  }, "Selected Color:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "selectedColor",
+    defaultValue: element.selectedColor,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('selectedColor', 'value', e);
+    }
+  })), element.hasOwnProperty('unselectedColor') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold",
+    htmlFor: "unselectedColor"
+  }, "Unselected Color:"), /*#__PURE__*/React.createElement(Form.Control, {
+    type: "text",
+    id: "unselectedColor",
+    defaultValue: element.unselectedColor,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('unselectedColor', 'value', e);
+    }
   })), element.hasOwnProperty('help') && /*#__PURE__*/React.createElement(Form.Group, {
     className: "form-group mb-5"
   }, /*#__PURE__*/React.createElement(Form.Label, {
@@ -748,6 +883,9 @@ var SurveyElementsEdit = function SurveyElementsEdit(_ref2) {
     showCorrectColumn: showCorrectColumn,
     canHaveOptionCorrect: canHaveOptionCorrect,
     canHaveOptionValue: canHaveOptionValue,
+    canHaveIcon: canHaveIcon,
+    canHaveImage: canHaveImage,
+    canHaveDescription: canHaveDescription,
     updateElement: updateElement,
     element: element,
     setElement: setElement,

package/lib/toolbar.js

@@ -86,7 +86,18 @@ var _defaultItems = [{
   canHaveHelp: true,
   options: [],
   answerType: 'ARRAY',
-  hideLabel: false
+  hideLabel: false,
+  canHaveDisplayHorizontal: true,
+  bgColor: 'light',
+  textColor: 'black',
+  className: "p-2 shadow-none rounded-3 text-black border border-2 w-100",
+  fieldLabelClassName: "text-start text-black fs-3",
+  fieldDescriptionClassName: "text-start text-muted fs-6",
+  selectedClassName: "",
+  unselectedClassName: "",
+  unselectedColor: "black",
+  selectedColor: "black",
+  inline: false
 }, {
   key: 'Checkbox',
   name: "Checkbox",
@@ -97,7 +108,10 @@ var _defaultItems = [{
   boxLabel: 'Pick me',
   answerType: 'BOOLEAN',
   canHideLabel: true,
-  hideLabel: true
+  hideLabel: true,
+  bgColor: 'light',
+  textColor: 'black',
+  className: "p-2 shadow-none rounded-3 text-black border border-2 w-100"
 }, {
   key: 'RadioButtons',
   name: "Radio Buttons",
@@ -108,7 +122,19 @@ var _defaultItems = [{
   options: [],
   answerType: 'STRING',
   hideLabel: false,
-  submitOnSelection: false
+  submitOnSelection: false,
+  canHaveDisplayHorizontal: true,
+  bgColor: 'light',
+  textColor: 'black',
+  className: "p-2 shadow-none rounded-3 text-black border border-2 w-100",
+  fieldLabelClassName: "text-start text-black fs-3",
+  fieldDescriptionClassName: "text-start text-muted fs-6",
+  selectedClassName: "",
+  unselectedClassName: "",
+  unselectedColor: "black",
+  selectedColor: "black",
+  showRadio: true,
+  inline: false
 }, {
   key: 'ButtonList',
   name: "Button List",
@@ -119,7 +145,18 @@ var _defaultItems = [{
   options: [],
   answerType: 'STRING',
   hideLabel: false,
-  submitOnSelection: true
+  submitOnSelection: true,
+  bgColor: 'light',
+  textColor: 'black',
+  className: "p-2 shadow-none rounded-3 text-black border border-2 w-100",
+  fieldLabelClassName: "text-start text-black fs-3",
+  fieldDescriptionClassName: "text-start text-muted fs-6",
+  selectedClassName: "",
+  unselectedClassName: "",
+  unselectedColor: "black",
+  selectedColor: "black",
+  showRadio: false,
+  inline: false
 }, {
   key: 'TextInput',
   name: "Text Input",
@@ -620,6 +657,37 @@ var Toolbar = function Toolbar(_ref) {
       var _item$submitOnSelecti;
       elementOptions.submitOnSelection = (_item$submitOnSelecti = item.submitOnSelection) !== null && _item$submitOnSelecti !== void 0 ? _item$submitOnSelecti : false;
     }
+    if (element === 'RadioButtons') {
+      var _item$showRadio;
+      elementOptions.showRadio = (_item$showRadio = item.showRadio) !== null && _item$showRadio !== void 0 ? _item$showRadio : true;
+    }
+    if (item.bgColor) {
+      elementOptions.bgColor = item.bgColor;
+    }
+    if (item.textColor) {
+      elementOptions.textColor = item.textColor;
+    }
+    if (item.className) {
+      elementOptions.className = item.className;
+    }
+    if (item.fieldLabelClassName) {
+      elementOptions.fieldLabelClassName = item.fieldLabelClassName;
+    }
+    if (item.fieldDescriptionClassName) {
+      elementOptions.fieldDescriptionClassName = item.fieldDescriptionClassName;
+    }
+    if (item.selectedClassName) {
+      elementOptions.selectedClassName = item.selectedClassName;
+    }
+    if (item.unselectedClassName) {
+      elementOptions.unselectedClassName = item.unselectedClassName;
+    }
+    if (item.selectedColor) {
+      elementOptions.selectedColor = item.selectedColor;
+    }
+    if (item.unselectedColor) {
+      elementOptions.unselectedColor = item.unselectedColor;
+    }
     if (item.defaultValue) {
       elementOptions.defaultValue = item.defaultValue;
     }

package/lib/utils/objectUtils.js

@@ -20,6 +20,12 @@ export var replaceInText = function replaceInText(content) {
 export var isListNotEmpty = function isListNotEmpty(list) {
   return isArrayLikeObject(list) && list !== undefined && list !== null && list.length > 0;
 };
+export var isNotNullOrUndefined = function isNotNullOrUndefined(obj) {
+  if (obj !== undefined && obj !== null) {
+    return true;
+  }
+  return false;
+};
 export var isObjectNotEmpty = function isObjectNotEmpty(obj) {
   if (obj !== undefined && obj !== null && !isEmpty(obj)) {
     return true;
@@ -30,7 +36,7 @@ export var isTrueLike = function isTrueLike(value) {
   if (value !== undefined && value !== null) {
     if (typeof value === 'boolean' && value === true) {
       return true;
-    } else if (typeof value === 'string' && (value === 'true' || value === 'True' || value === '1' || value === 'Yes' || value === 'yes')) {
+    } else if (typeof value === 'string' && (value === 'true' || value === 'True' || value === '1' || value === 'Yes' || value === 'yes' || value === 'YES')) {
       return true;
     } else if (typeof value === 'number' && value === 1) {
       return true;
@@ -42,7 +48,7 @@ export var isFalseLike = function isFalseLike(value) {
   if (value !== undefined && value !== null) {
     if (typeof value === 'boolean' && value === false) {
       return true;
-    } else if (typeof value === 'string' && (value === 'false' || value === 'False' || value === '0' || value === 'No' || value === 'no')) {
+    } else if (typeof value === 'string' && (value === 'false' || value === 'False' || value === '0' || value === 'No' || value === 'no' || value === 'NO')) {
       return true;
     } else if (typeof value === 'number' && value === 0) {
       return true;

package/package.json

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

package/types/index.d.ts

@@ -4,30 +4,30 @@ import * as React from 'react';
 type BaseElement = {
   id: string;
   element:
-    | "Header Text"
-    | "Label"
-    | "Paragraph"
-    | "Static Content"
-    | "Line Break"
-    | "Dropdown"
-    | "Tags"
-    | "Checkboxes"
-    | "Multiple Choice"
-    | "Text Input"
-    | "Number Input"
-    | "Multi-line Input"
-    | "Two Column Row"
-    | "Three Column Row"
-    | "Multi Column Row"
-    | "Image"
-    | "Rating"
-    | "Date"
-    | "Signature"
-    | "Web site"
-    | "Fieldset"
-    | "File Attachment"
-    | "Range"
-    | "Camera";
+  | "Header Text"
+  | "Label"
+  | "Paragraph"
+  | "Static Content"
+  | "Line Break"
+  | "Dropdown"
+  | "Tags"
+  | "Checkboxes"
+  | "Multiple Choice"
+  | "Text Input"
+  | "Number Input"
+  | "Multi-line Input"
+  | "Two Column Row"
+  | "Three Column Row"
+  | "Multi Column Row"
+  | "Image"
+  | "Rating"
+  | "Date"
+  | "Signature"
+  | "Web site"
+  | "Fieldset"
+  | "File Attachment"
+  | "Range"
+  | "Camera";
   canHaveLabelLocation?: boolean;
   labelLocation?: string;
   canHaveHelp?: boolean;
@@ -48,6 +48,16 @@ type BaseElement = {
   conditionalFieldValue?: string;
   hideNextStepButton?: boolean;
   rows?: number;
+  showRadio?: boolean;
+  bgColor?: string;
+  textColor?: string;
+  className?: string;
+  fieldLabelClassName?: string;
+  fieldDescriptionClassName?: string;
+  selectedClassName?: string;
+  unselectedClassName?: string;
+  selectedColor?: string;
+  unselectedColor?: string;
 };
 export type StaticElement = {
   bold: boolean;
@@ -65,6 +75,9 @@ export type Option = {
   label?: string;
   text: string;
   value: string;
+  icon?: string;
+  image?: string;
+  description?: string;
 };
 export type SelectableElement = {
   options: Option[];
@@ -150,7 +163,7 @@ export interface SurveyBuilderProps {
   helpClassName?: string;
 }
 
-export class ReactSurveyBuilder extends React.Component<SurveyBuilderProps> {}
+export class ReactSurveyBuilder extends React.Component<SurveyBuilderProps> { }
 
 export interface SurveyGeneratorOnSubmitParams {
   id: number;
@@ -197,7 +210,7 @@ export interface SurveyGeneratorProps {
   print?: boolean;
 }
 
-export class ReactSurveyGenerator extends React.Component<SurveyGeneratorProps> {}
+export class ReactSurveyGenerator extends React.Component<SurveyGeneratorProps> { }
 
 export type ActionType = "load" | "updateOrder" | "delete";