react-survey-builder 1.0.94 → 1.0.96

package/lib/survey-elements/index.js

@@ -2132,6 +2132,100 @@ export var RadioButtons = /*#__PURE__*/function (_React$Component4) {
     }
   }]);
 }(React.Component);
+export var ButtonList = /*#__PURE__*/function (_React$Component5) {
+  function ButtonList(props) {
+    var _this9;
+    _classCallCheck(this, ButtonList);
+    _this9 = _callSuper(this, ButtonList, [props]);
+    _this9.options = {};
+    return _this9;
+  }
+  _inherits(ButtonList, _React$Component5);
+  return _createClass(ButtonList, [{
+    key: "render",
+    value: function render() {
+      var _ref23,
+        _self$props$name3,
+        _self$props12,
+        _self$props13,
+        _self$props14,
+        _this10 = this,
+        _self$props$item$help2,
+        _self$props$item2;
+      var self = this;
+      var name = (_ref23 = (_self$props$name3 = self === null || self === void 0 || (_self$props12 = self.props) === null || _self$props12 === void 0 ? void 0 : _self$props12.name) !== null && _self$props$name3 !== void 0 ? _self$props$name3 : self === null || self === void 0 || (_self$props13 = self.props) === null || _self$props13 === void 0 || (_self$props13 = _self$props13.item) === null || _self$props13 === void 0 ? void 0 : _self$props13.customName) !== null && _ref23 !== void 0 ? _ref23 : self === null || self === void 0 || (_self$props14 = self.props) === null || _self$props14 === void 0 || (_self$props14 = _self$props14.item) === null || _self$props14 === void 0 ? void 0 : _self$props14.fieldName;
+      var baseClasses = 'SortableItem rfb-item';
+      if (this.props.item.pageBreakBefore) {
+        baseClasses += ' alwaysbreak';
+      }
+      if (this.props.item.print === true) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: _objectSpread({}, this.props.style),
+          className: baseClasses
+        }, /*#__PURE__*/React.createElement(Form.Group, {
+          className: "form-group mb-3"
+        }, /*#__PURE__*/React.createElement(ComponentLabel, _extends({}, this.props, {
+          htmlFor: this.props.name
+        })), /*#__PURE__*/React.createElement("div", null, this.props.item.options.filter(function (option) {
+          return _this10.props.value === option.value;
+        }).map(function (option) {
+          return option.text;
+        }).join(', '))));
+      }
+      // console.log('self.props', self.props);
+
+      return /*#__PURE__*/React.createElement("div", {
+        style: _objectSpread({}, self.props.style),
+        className: baseClasses
+      }, /*#__PURE__*/React.createElement(ComponentHeader, self.props), /*#__PURE__*/React.createElement(Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/React.createElement(ComponentLabel, self.props), self.props.item.help ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form.Text, {
+        className: (_self$props$item$help2 = (_self$props$item2 = self.props.item) === null || _self$props$item2 === void 0 ? void 0 : _self$props$item2.helpClassName) !== null && _self$props$item$help2 !== void 0 ? _self$props$item$help2 : 'text-muted'
+      }, self.props.item.help)) : null, self.props.item.options.map(function (option) {
+        var _self$props$checkboxB2, _self$props15, _self$props16;
+        // console.log('option', option);
+        return /*#__PURE__*/React.createElement(ToggleButton, {
+          label: option.text,
+          type: "radio",
+          variant: (_self$props$checkboxB2 = self.props.checkboxButtonClassName) !== null && _self$props$checkboxB2 !== void 0 ? _self$props$checkboxB2 : "outline-light",
+          className: "btn-survey-builder-checkbox w-100",
+          key: "preview_".concat(option.key),
+          id: name + '-' + ID.uuid(),
+          inputRef: function inputRef(c) {
+            if (c && self.props.item.mutable) {
+              self.options["child_ref_".concat(option.key)] = c;
+            }
+          },
+          disabled: self === null || self === void 0 || (_self$props15 = self.props) === null || _self$props15 === void 0 || (_self$props15 = _self$props15.item) === null || _self$props15 === void 0 ? void 0 : _self$props15.disabled,
+          name: name,
+          value: option.value,
+          checked: (self === null || self === void 0 || (_self$props16 = self.props) === null || _self$props16 === void 0 ? void 0 : _self$props16.value) === option.value,
+          onChange: function onChange(e) {
+            var _self$props17, _self$props18;
+            if ((self === null || self === void 0 || (_self$props17 = self.props) === null || _self$props17 === void 0 ? void 0 : _self$props17.onChange) !== undefined) {
+              console.log(e.target.value);
+              self.props.onChange(e.target.value);
+            }
+            if ((self === null || self === void 0 || (_self$props18 = self.props) === null || _self$props18 === void 0 ? void 0 : _self$props18.onSelect) !== undefined) {
+              console.log(e.target.value);
+              self.props.onSelect(e.target.value);
+            }
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "d-flex align-items-center justify-content-start text-black text-survey-builder-checkbox"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "text-start"
+        }, /*#__PURE__*/React.createElement("span", {
+          dangerouslySetInnerHTML: {
+            __html: option.text
+          }
+        }))));
+      }), /*#__PURE__*/React.createElement(ComponentErrorMessage, {
+        name: name
+      })));
+    }
+  }]);
+}(React.Component);
 export var Image = function Image(props) {
   var style = props.item.center ? {
     textAlign: 'center'
@@ -2151,14 +2245,14 @@ export var Image = function Image(props) {
     className: "no-image"
   }, "No Image"));
 };
-export var Rating = function Rating(_ref23) {
+export var Rating = function Rating(_ref24) {
   var _item$required25, _item$disabled17, _item$required26, _item$helpClassName18;
-  var name = _ref23.name,
-    onChange = _ref23.onChange,
-    value = _ref23.value,
-    style = _ref23.style,
-    item = _ref23.item,
-    props = _objectWithoutProperties(_ref23, _excluded9);
+  var name = _ref24.name,
+    onChange = _ref24.onChange,
+    value = _ref24.value,
+    style = _ref24.style,
+    item = _ref24.item,
+    props = _objectWithoutProperties(_ref24, _excluded9);
   var methods = useFormContext();
   var onChangeHandler = function onChangeHandler(value) {
     if (onChange !== undefined) {
@@ -2180,23 +2274,23 @@ export var Rating = function Rating(_ref23) {
     name: name,
     rules: fieldRules
   };
-  controllerProps.render = function (_ref24) {
-    var _ref24$field = _ref24.field,
-      onChange = _ref24$field.onChange,
-      onBlur = _ref24$field.onBlur,
-      value = _ref24$field.value,
-      name = _ref24$field.name,
-      ref = _ref24$field.ref,
-      _ref24$fieldState = _ref24.fieldState,
-      invalid = _ref24$fieldState.invalid,
-      isTouched = _ref24$fieldState.isTouched,
-      isDirty = _ref24$fieldState.isDirty,
-      error = _ref24$fieldState.error,
-      formState = _ref24.formState;
+  controllerProps.render = function (_ref25) {
+    var _ref25$field = _ref25.field,
+      onChange = _ref25$field.onChange,
+      onBlur = _ref25$field.onBlur,
+      value = _ref25$field.value,
+      name = _ref25$field.name,
+      ref = _ref25$field.ref,
+      _ref25$fieldState = _ref25.fieldState,
+      invalid = _ref25$fieldState.invalid,
+      isTouched = _ref25$fieldState.isTouched,
+      isDirty = _ref25$fieldState.isDirty,
+      error = _ref25$fieldState.error,
+      formState = _ref25.formState;
     return /*#__PURE__*/React.createElement(StarRating, _extends({
       onBlur: onBlur,
-      onRatingClick: function onRatingClick(event, _ref25) {
-        var rating = _ref25.rating;
+      onRatingClick: function onRatingClick(event, _ref26) {
+        var rating = _ref26.rating;
         onChange(rating);
         onChangeHandler(rating);
       },
@@ -2238,8 +2332,8 @@ export var Rating = function Rating(_ref23) {
       className: item === null || item === void 0 ? void 0 : item.labelClassName,
       htmlFor: name
     }), /*#__PURE__*/React.createElement(StarRating, _extends({
-      onRatingClick: function onRatingClick(event, _ref26) {
-        var rating = _ref26.rating;
+      onRatingClick: function onRatingClick(event, _ref27) {
+        var rating = _ref27.rating;
         onChange(rating);
         onChangeHandler(rating);
       },
@@ -2316,41 +2410,41 @@ export var Download = function Download(props) {
     href: "".concat(props.downloadPath, "?id=").concat(props.item.filePath)
   }, props.item.content)));
 };
-export var Camera = /*#__PURE__*/function (_React$Component5) {
+export var Camera = /*#__PURE__*/function (_React$Component6) {
   function Camera(props) {
-    var _this9;
+    var _this11;
     _classCallCheck(this, Camera);
-    _this9 = _callSuper(this, Camera, [props]);
-    _defineProperty(_this9, "handleChange", function (event) {
+    _this11 = _callSuper(this, Camera, [props]);
+    _defineProperty(_this11, "handleChange", function (event) {
       if (event.target.files && event.target.files.length > 0) {
-        _this9.setState({
+        _this11.setState({
           img: event.target.files[0]
         });
-        if (_this9.props.onChange) {
-          _this9.props.onChange(event.target.files[0]);
+        if (_this11.props.onChange) {
+          _this11.props.onChange(event.target.files[0]);
         }
       }
     });
-    _defineProperty(_this9, "clearImage", function () {
-      _this9.setState({
+    _defineProperty(_this11, "clearImage", function () {
+      _this11.setState({
         img: null
       });
-      if (_this9.props.onChange) {
-        _this9.props.onChange(null);
+      if (_this11.props.onChange) {
+        _this11.props.onChange(null);
       }
     });
-    _this9.inputField = /*#__PURE__*/React.createRef();
-    _this9.state = {
+    _this11.inputField = /*#__PURE__*/React.createRef();
+    _this11.state = {
       img: props.value
     };
-    return _this9;
+    return _this11;
   }
-  _inherits(Camera, _React$Component5);
+  _inherits(Camera, _React$Component6);
   return _createClass(Camera, [{
     key: "getImageSizeProps",
-    value: function getImageSizeProps(_ref27) {
-      var width = _ref27.width,
-        height = _ref27.height;
+    value: function getImageSizeProps(_ref28) {
+      var width = _ref28.width,
+        height = _ref28.height;
       var imgProps = {
         width: '100%'
       };
@@ -2446,37 +2540,37 @@ export var Camera = /*#__PURE__*/function (_React$Component5) {
     }
   }]);
 }(React.Component);
-export var FileUpload = /*#__PURE__*/function (_React$Component6) {
+export var FileUpload = /*#__PURE__*/function (_React$Component7) {
   function FileUpload(props) {
-    var _this10;
+    var _this12;
     _classCallCheck(this, FileUpload);
-    _this10 = _callSuper(this, FileUpload, [props]);
-    _defineProperty(_this10, "handleChange", function (event) {
+    _this12 = _callSuper(this, FileUpload, [props]);
+    _defineProperty(_this12, "handleChange", function (event) {
       if (event.target.files && event.target.files.length > 0) {
-        _this10.setState({
+        _this12.setState({
           fileUpload: event.target.files[0]
         });
-        if (_this10.props.onChange) {
-          _this10.props.onChange(event.target.files[0]);
+        if (_this12.props.onChange) {
+          _this12.props.onChange(event.target.files[0]);
         }
       }
     });
-    _defineProperty(_this10, "clearFileUpload", function () {
-      _this10.setState({
+    _defineProperty(_this12, "clearFileUpload", function () {
+      _this12.setState({
         fileUpload: null
       });
-      if (_this10.props.onChange) {
-        _this10.props.onChange(null);
+      if (_this12.props.onChange) {
+        _this12.props.onChange(null);
       }
     });
-    _defineProperty(_this10, "saveFile", /*#__PURE__*/function () {
-      var _ref28 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
+    _defineProperty(_this12, "saveFile", /*#__PURE__*/function () {
+      var _ref29 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
         var sourceUrl, response, dispositionHeader, resBlob, blob, fileName, _fileName;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               e.preventDefault();
-              sourceUrl = _this10.props.value;
+              sourceUrl = _this12.props.value;
               _context2.next = 4;
               return fetch(sourceUrl, {
                 method: 'GET',
@@ -2495,7 +2589,7 @@ export var FileUpload = /*#__PURE__*/function (_React$Component6) {
               resBlob = _context2.sent;
               // eslint-disable-next-line no-undef
               blob = new Blob([resBlob], {
-                type: _this10.props.item.fileType || response.headers.get('Content-Type')
+                type: _this12.props.item.fileType || response.headers.get('Content-Type')
               });
               if (dispositionHeader && dispositionHeader.indexOf(';filename=') > -1) {
                 fileName = dispositionHeader.split(';filename=')[1];
@@ -2511,16 +2605,16 @@ export var FileUpload = /*#__PURE__*/function (_React$Component6) {
         }, _callee2);
       }));
       return function (_x) {
-        return _ref28.apply(this, arguments);
+        return _ref29.apply(this, arguments);
       };
     }());
-    _this10.inputField = /*#__PURE__*/React.createRef();
-    _this10.state = {
+    _this12.inputField = /*#__PURE__*/React.createRef();
+    _this12.state = {
       fileUpload: props.value
     };
-    return _this10;
+    return _this12;
   }
-  _inherits(FileUpload, _React$Component6);
+  _inherits(FileUpload, _React$Component7);
   return _createClass(FileUpload, [{
     key: "render",
     value: function render() {
@@ -2596,19 +2690,19 @@ export var FileUpload = /*#__PURE__*/function (_React$Component6) {
     }
   }]);
 }(React.Component);
-export var Range = /*#__PURE__*/function (_React$Component7) {
+export var Range = /*#__PURE__*/function (_React$Component8) {
   function Range(props) {
-    var _this11;
+    var _this13;
     _classCallCheck(this, Range);
-    _this11 = _callSuper(this, Range, [props]);
-    _this11.inputField = /*#__PURE__*/React.createRef();
-    return _this11;
+    _this13 = _callSuper(this, Range, [props]);
+    _this13.inputField = /*#__PURE__*/React.createRef();
+    return _this13;
   }
-  _inherits(Range, _React$Component7);
+  _inherits(Range, _React$Component8);
   return _createClass(Range, [{
     key: "render",
     value: function render() {
-      var _this12 = this,
+      var _this14 = this,
         _this$props$item$help6,
         _this$props$item6;
       var props = {};
@@ -2616,7 +2710,7 @@ export var Range = /*#__PURE__*/function (_React$Component7) {
       props.name = this.props.name;
       props.value = this.props.value;
       props.onChange = function (event) {
-        _this12.props.onChange(event.target.value);
+        _this14.props.onChange(event.target.value);
       };
       if (this.props.item.disabled) {
         props.disabled = true;
@@ -2718,6 +2812,7 @@ SurveyElements.Checkboxes = Checkboxes;
 SurveyElements.Checkbox = Checkbox;
 SurveyElements.DatePicker = DatePicker;
 SurveyElements.RadioButtons = RadioButtons;
+SurveyElements.ButtonList = ButtonList;
 SurveyElements.Image = Image;
 SurveyElements.Rating = Rating;
 SurveyElements.Tags = Tags;

package/lib/survey-elements-edit.js

@@ -136,8 +136,9 @@ var SurveyElementsEdit = function SurveyElementsEdit(_ref2) {
   var thisCheckedAlternateForm = element.hasOwnProperty('alternateForm') ? element.alternateForm : false;
   var thisCheckedHideLabel = element.hasOwnProperty('hideLabel') ? element.hideLabel : false;
   var thisCheckedConditional = element.hasOwnProperty('conditional') ? element.conditional : false;
-  var canHaveAnswer = ['NumberInput', 'EmailInput', 'TextInput', 'PhoneNumber', 'TextArea', 'DatePicker', 'Dropdown', 'Tags', 'Checkboxes', 'Checkbox', 'RadioButtons', 'Rating', 'Range'].indexOf(element.element) !== -1;
-  var canHaveOptionValue = ['Dropdown', 'Tags', 'Checkboxes', 'RadioButtons'].indexOf(element.element) !== -1;
+  var thisCheckedHideNextStepButton = element.hasOwnProperty('hideNextStepButton') ? element.hideNextStepButton : 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 thisFiles = isListNotEmpty(files) ? _toConsumableArray(files) : [];
   if (thisFiles.length < 1 || thisFiles.length > 0 && thisFiles[0].id !== '') {
@@ -654,6 +655,20 @@ var SurveyElementsEdit = function SurveyElementsEdit(_ref2) {
     onChange: function onChange(e) {
       editElementProp('conditionalFieldValue', 'value', e);
     }
+  })), element.hasOwnProperty('hideNextStepButton') && /*#__PURE__*/React.createElement(Form.Group, {
+    className: "form-group mb-5"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Hide the Next Step/Submit Button for this Step (typically set true when the step has a Button List component):"), /*#__PURE__*/React.createElement(Form.Check, {
+    id: "hideNextStepButton",
+    label: "Hide the Next Step/Submit Button for this Step",
+    type: "checkbox",
+    checked: thisCheckedHideNextStepButton,
+    value: true,
+    onBlur: onUpdateElement,
+    onChange: function onChange(e) {
+      editElementProp('hideNextStepButton', 'checked', e);
+    }
   })), element.hasOwnProperty('help') && /*#__PURE__*/React.createElement(Form.Group, {
     className: "form-group mb-5"
   }, /*#__PURE__*/React.createElement(Form.Label, {

package/lib/toolbar.js

@@ -23,6 +23,7 @@ import { PiFileHtml } from 'react-icons/pi';
 import ID from './UUID';
 import { GrSteps } from 'react-icons/gr';
 import { isListNotEmpty } from './utils/objectUtils';
+import { IoReorderTwo } from 'react-icons/io5';
 var _defaultItems = [{
   key: 'Header',
   name: "Header Text",
@@ -107,6 +108,16 @@ var _defaultItems = [{
   options: [],
   answerType: 'STRING',
   hideLabel: false
+}, {
+  key: 'ButtonList',
+  name: "Radio Buttons",
+  icon: IoReorderTwo,
+  label: "Label",
+  fieldName: 'buttonlist_',
+  canHaveHelp: true,
+  options: [],
+  answerType: 'STRING',
+  hideLabel: false
 }, {
   key: 'TextInput',
   name: "Text Input",
@@ -317,7 +328,8 @@ var _defaultItems = [{
   conditional: false,
   conditionalFieldName: '',
   conditionalFieldValue: '',
-  isContainer: true
+  isContainer: true,
+  hideNextStepButton: false
 }];
 var groupBy = function groupBy(list, keyGetter) {
   var map = new Map();
@@ -449,6 +461,16 @@ var Toolbar = function Toolbar(_ref) {
           text: "Place holder option 3",
           key: "radiobuttons_option_".concat(ID.uuid())
         }];
+      case 'ButtonList':
+        return [{
+          value: 'YES',
+          text: "Yes",
+          key: "buttonlist_option_".concat(ID.uuid())
+        }, {
+          value: 'NO',
+          text: "No",
+          key: "buttonlist_option_".concat(ID.uuid())
+        }];
       default:
         return [];
     }
@@ -564,6 +586,7 @@ var Toolbar = function Toolbar(_ref) {
       elementOptions.conditional = item.conditional;
       elementOptions.conditionalFieldName = item.conditionalFieldName;
       elementOptions.conditionalFieldValue = item.conditionalFieldValue;
+      elementOptions.hideNextStepButton = item.hideNextStepButton;
     }
     if (element === 'Image') {
       elementOptions.src = item.src;

package/package.json

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

package/types/index.d.ts

@@ -46,6 +46,7 @@ type BaseElement = {
   conditional?: boolean;
   conditionalFieldName?: string;
   conditionalFieldValue?: string;
+  hideNextStepButton?: boolean;
   rows?: number;
 };
 export type StaticElement = {
@@ -167,6 +168,7 @@ export interface SurveyGeneratorProps {
   onBlur?: (info: SurveyGeneratorOnSubmitParams[]) => void;
   onSubmit?: (info: SurveyGeneratorOnSubmitParams[]) => void;
   onChange?: (info: SurveyGeneratorOnSubmitParams[]) => void;
+  onSelect?: (info: SurveyGeneratorOnSubmitParams[]) => void;
   items: any[];
   backAction?: string;
   backName?: string;