react-survey-builder 1.0.27 → 1.0.28

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

@@ -1165,7 +1165,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 +1176,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 +1189,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,7 +1222,8 @@ var Checkbox = /*#__PURE__*/function (_React$Component16) {
     key: "render",
     value: function render() {
       var _this22 = this,
-        _this$props$item$inli;
+        _this$props$item$inli,
+        _this$props$checkboxB;
       var baseClasses = 'SortableItem rfb-item';
       if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -1266,11 +1268,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 +1334,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 +1346,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.28",
   "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;