react-survey-builder 1.0.27 → 1.0.29

package/lib/form-fields.js

@@ -63,6 +63,7 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
     authenticity_token = _ref.authenticity_token,
     task_id = _ref.task_id,
     buttonClassName = _ref.buttonClassName,
+    checkboxButtonClassName = _ref.checkboxButtonClassName,
     formId = _ref.formId,
     methods = _ref.methods,
     _ref$print = _ref.print,
@@ -444,7 +445,8 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
             return inputs.current[item.fieldName] = c;
           },
           isInvalid: invalid,
-          item: item
+          item: item,
+          className: item.element === 'RadioButtons' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null
         });
       }
     });
@@ -695,7 +697,8 @@ var ReactSurveyFormFields = function ReactSurveyFormFields(_ref) {
                 return inputs.current[item.fieldName] = c;
               },
               isInvalid: invalid,
-              item: item
+              item: item,
+              className: checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null
             });
           }
         });

package/lib/form.js

@@ -63,6 +63,7 @@ var ReactSurvey = function ReactSurvey(_ref) {
     authenticity_token = _ref.authenticity_token,
     task_id = _ref.task_id,
     buttonClassName = _ref.buttonClassName,
+    checkboxButtonClassName = _ref.checkboxButtonClassName,
     formId = _ref.formId,
     _ref$print = _ref.print,
     print = _ref$print === void 0 ? false : _ref$print;
@@ -452,7 +453,8 @@ var ReactSurvey = function ReactSurvey(_ref) {
             return inputs.current[item.fieldName] = c;
           },
           isInvalid: invalid,
-          item: item
+          item: item,
+          className: item.element === 'RadioButtons' || item.element === 'Checkbox' ? checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null : null
         });
       }
     });
@@ -703,7 +705,8 @@ var ReactSurvey = function ReactSurvey(_ref) {
                 return inputs.current[item.fieldName] = c;
               },
               isInvalid: invalid,
-              item: item
+              item: item,
+              className: checkboxButtonClassName !== null && checkboxButtonClassName !== void 0 ? checkboxButtonClassName : null
             });
           }
         });

package/lib/survey-elements/index.js

@@ -34,6 +34,7 @@ var _componentErrorMessage = _interopRequireDefault(require("./component-error-m
 var _ipUtils = require("../utils/ipUtils");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _ri = require("react-icons/ri");
+var _UUID = _interopRequireDefault(require("../UUID"));
 var _excluded = ["onChange"],
   _excluded2 = ["onChange", "formatMask"]; // eslint-disable-next-line max-classes-per-file
 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); }
@@ -1165,7 +1166,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         htmlFor: this.props.name
       })), this.props.item.options.map(function (option) {
-        var _self$props$item$inli;
+        var _self$props$item$inli, _this20$props$checkbo;
         var props = {};
         props.name = "option_".concat(option.key);
         props.value = option.value;
@@ -1176,7 +1177,8 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
         }
         return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.ToggleButton, (0, _extends2["default"])({
           type: "checkbox",
-          variant: "survey-builder-checkbox",
+          variant: (_this20$props$checkbo = _this20.props.checkboxButtonClassName) !== null && _this20$props$checkbo !== void 0 ? _this20$props$checkbo : "outline-light",
+          className: "btn-survey-builder-checkbox",
           key: "preview_".concat(option.key),
           id: "fid_preview_".concat(option.key),
           inputRef: function inputRef(c) {
@@ -1188,7 +1190,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
             self.onCheckboxChange(option.value, e);
           }
         }, props), /*#__PURE__*/_react["default"].createElement("div", {
-          className: "d-flex align-items-center justify-content-between text-survey-builder-checkbox"
+          className: "d-flex align-items-center justify-content-between text-black text-survey-builder-checkbox"
         }, props.checked !== true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxBlankLine, {
           size: "40px",
           className: "me-3 flex-shrink-0"
@@ -1221,28 +1223,31 @@ var Checkbox = /*#__PURE__*/function (_React$Component16) {
     key: "render",
     value: function render() {
       var _this22 = this,
-        _this$props$item$inli;
+        _this$props$checkboxB;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       var props = {};
       // eslint-disable-next-line no-undef
-      props.name = this.props.name;
+      props.name = this.props.name + '-' + _UUID["default"].uuid();
       props.onChange = function (event) {
-        _this22.props.onChange(event.target.checked);
+        if (_this22.props.onChange) {
+          _this22.props.onChange(event.target.checked);
+        }
       };
-      props.isInvalid = this.props.isInvalid;
+      //props.isInvalid = this.props.isInvalid;
       props.onBlur = this.props.onBlur;
       props.autoComplete = "new-password";
       if (this.props.item.disabled) {
         props.disabled = 'disabled';
       }
       if (this.props.item.mutable) {
-        props.ref = this.inputField;
+        props.inputRef = this.inputField;
       }
       props.checked = this.props.value;
-      props.inline = (_this$props$item$inli = this.props.item.inline) !== null && _this$props$item$inli !== void 0 ? _this$props$item$inli : false;
+      //props.inline = this.props.item.inline ?? false;
+
       if (this.props.item.print === true) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           style: _objectSpread({}, this.props.style),
@@ -1266,11 +1271,12 @@ var Checkbox = /*#__PURE__*/function (_React$Component16) {
         className: "form-label"
       }, this.props)), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.ToggleButton, (0, _extends2["default"])({
         type: "checkbox",
-        variant: "survey-builder-checkbox",
+        variant: (_this$props$checkboxB = this.props.checkboxButtonClassName) !== null && _this$props$checkboxB !== void 0 ? _this$props$checkboxB : "outline-light",
+        className: "btn-survey-builder-checkbox",
         value: props.name,
         id: props.name
       }, props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "d-flex align-items-center justify-content-between text-survey-builder-checkbox"
+        className: "d-flex align-items-center justify-content-between text-black text-survey-builder-checkbox"
       }, props.checked !== true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxBlankLine, {
         size: "40px",
         className: "me-3 flex-shrink-0"
@@ -1331,7 +1337,7 @@ var RadioButtons = /*#__PURE__*/function (_React$Component17) {
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
         className: "form-group mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.item.options.map(function (option) {
-        var _self$props$item$inli2;
+        var _self$props$item$inli2, _this24$props$checkbo;
         var props = {};
         props.name = self.props.name;
         props.value = option.value;
@@ -1343,17 +1349,33 @@ var RadioButtons = /*#__PURE__*/function (_React$Component17) {
           props.disabled = 'disabled';
         }
         props.inline = (_self$props$item$inli2 = self.props.item.inline) !== null && _self$props$item$inli2 !== void 0 ? _self$props$item$inli2 : false;
-        return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Check, (0, _extends2["default"])({
+        return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.ToggleButton, (0, _extends2["default"])({
           label: option.text,
           type: "radio",
+          variant: (_this24$props$checkbo = _this24.props.checkboxButtonClassName) !== null && _this24$props$checkbo !== void 0 ? _this24$props$checkbo : "outline-light",
+          className: "btn-survey-builder-checkbox",
           key: "preview_".concat(option.key),
           id: "fid_preview_".concat(option.key),
-          ref: function ref(c) {
+          inputRef: function inputRef(c) {
             if (c && self.props.item.mutable) {
               self.options["child_ref_".concat(option.key)] = c;
             }
           }
-        }, props));
+        }, props), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "d-flex align-items-center justify-content-between text-black text-survey-builder-checkbox"
+        }, props.checked !== true && /*#__PURE__*/_react["default"].createElement(_ri.RiRadioButtonLine, {
+          size: "40px",
+          className: "me-3 flex-shrink-0"
+        }), props.checked === true && /*#__PURE__*/_react["default"].createElement(_ri.RiRadioButtonFill, {
+          size: "40px",
+          className: "me-3 flex-shrink-0"
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "text-start"
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          dangerouslySetInnerHTML: {
+            __html: _this24.props.item.boxLabel
+          }
+        }))));
       }), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
         muted: true
       }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {

package/package.json

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

package/types/index.d.ts

@@ -174,6 +174,7 @@ export interface SurveyGeneratorProps {
   backButton?: JSX.Element;
   buttons?: JSX.Element;
   buttonClassName?: string;
+  checkboxButtonClassName?: string;
   formId?: string;
   methods?: Record<any, any>;
   print?: boolean;