react-survey-builder 1.0.76 → 1.0.78

package/lib/survey-elements/header-bar.js

@@ -7,12 +7,14 @@ var HeaderBar = function HeaderBar(_ref) {
     editModeOn = _ref.editModeOn,
     onDestroy = _ref.onDestroy,
     setAsChild = _ref.setAsChild,
-    index = _ref.index;
+    index = _ref.index,
+    _ref$isStep = _ref.isStep,
+    isStep = _ref$isStep === void 0 ? false : _ref$isStep;
   return /*#__PURE__*/React.createElement(ButtonToolbar, {
     className: "d-flex toolbar-header align-items-center justify-content-between p-2"
   }, /*#__PURE__*/React.createElement(Badge, {
     bg: "secondary"
-  }, item.text), /*#__PURE__*/React.createElement("div", {
+  }, item.text, isStep ? ' ' + (Number(index) + 1) : '', isStep && (item === null || item === void 0 ? void 0 : item.conditional) === true ? ' (Conditional)' : ''), /*#__PURE__*/React.createElement("div", {
     className: "toolbar-header-buttons"
   }, item.element !== 'LineBreak' && /*#__PURE__*/React.createElement(Button, {
     variant: "default",

package/lib/survey-elements/index.js

@@ -101,6 +101,9 @@ export var Paragraph = function Paragraph(props) {
   if (props.item.italic) {
     classNames += ' italic';
   }
+  if (props.paragraphClassName) {
+    classNames += " ".concat(props.paragraphClassName);
+  }
   var baseClasses = 'SortableItem rfb-item';
   if (props.item.pageBreakBefore) {
     baseClasses += ' alwaysbreak';
@@ -2060,7 +2063,7 @@ export var RadioButtons = /*#__PURE__*/function (_React$Component4) {
         className: "form-group mb-3"
       }, /*#__PURE__*/React.createElement(ComponentLabel, self.props), self.props.item.options.map(function (option) {
         var _self$props$checkboxB, _self$props7, _self$props8, _self$props10, _self$props11;
-        console.log('option', option);
+        // console.log('option', option);
         return /*#__PURE__*/React.createElement(ToggleButton, {
           label: option.text,
           type: "radio",

package/lib/survey-elements-edit.js

@@ -115,16 +115,15 @@ var SurveyElementsEdit = function SurveyElementsEdit(_ref2) {
       });
     }
   };
-  React.useEffect(function () {
-    if (dirty) {
-      var thisElement = isObjectNotEmpty(element) ? _objectSpread(_objectSpread({}, element), {}, {
-        dirty: true
-      }) : {
-        dirty: true
-      };
-      updateElement(thisElement);
-    }
-  }, [dirty, element]);
+
+  // React.useEffect(() => {
+  // 	if (dirty) {
+  // 		const thisElement = isObjectNotEmpty(element) ? { ...element, dirty: true } : { dirty: true };
+
+  // 		updateElement(thisElement);
+  // 	}
+  // }, [dirty, element]);
+
   var thisRequiredChecked = element.hasOwnProperty('required') ? element.required : false;
   var thisDefaultChecked = element.hasOwnProperty('defaultChecked') ? element.defaultChecked : false;
   var thisReadOnly = element.hasOwnProperty('readOnly') ? element.readOnly : false;
@@ -154,7 +153,11 @@ var SurveyElementsEdit = function SurveyElementsEdit(_ref2) {
   }, element.text), /*#__PURE__*/React.createElement(FaTimes, {
     className: "float-end dismiss-edit",
     onClick: manualEditModeOff
-  })), element.hasOwnProperty('content') && (element.element === 'Header' || element.element === 'Label' || element.element === 'Paragraph' || element.element === 'ContentBody') && /*#__PURE__*/React.createElement(Form.Group, {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "clearfix"
+  }, /*#__PURE__*/React.createElement(Form.Label, {
+    className: "fw-bold"
+  }, "Field Id: ", element.fieldName)), element.hasOwnProperty('content') && (element.element === 'Header' || element.element === 'Label' || element.element === 'Paragraph' || element.element === 'ContentBody') && /*#__PURE__*/React.createElement(Form.Group, {
     className: "form-group mb-5"
   }, /*#__PURE__*/React.createElement(Form.Label, {
     className: "fw-bold"
@@ -595,6 +598,7 @@ var SurveyElementsEdit = function SurveyElementsEdit(_ref2) {
     type: "checkbox",
     checked: thisCheckedConditional,
     value: true,
+    onBlur: onUpdateElement,
     onChange: function onChange(e) {
       editElementProp('conditional', 'checked', e);
     }
@@ -690,6 +694,9 @@ var SurveyElementsEdit = function SurveyElementsEdit(_ref2) {
     canHaveOptionValue: canHaveOptionValue,
     updateElement: updateElement,
     element: element,
+    setElement: setElement,
+    dirty: dirty,
+    setDirty: setDirty,
     key: element === null || element === void 0 || (_element$options = element.options) === null || _element$options === void 0 ? void 0 : _element$options.length
   }));
 };

package/lib/toolbar.js

@@ -394,57 +394,57 @@ var Toolbar = function Toolbar(_ref) {
     switch (element) {
       case 'Dropdown':
         return [{
-          value: 'place_holder_option_1',
+          value: 'PLACE_HOLDER_OPTION_1',
           text: "Place holder option 1",
           key: "dropdown_option_".concat(ID.uuid())
         }, {
-          value: 'place_holder_option_2',
+          value: 'PLACE_HOLDER_OPTION_2',
           text: "Place holder option 2",
           key: "dropdown_option_".concat(ID.uuid())
         }, {
-          value: 'place_holder_option_3',
+          value: 'PLACE_HOLDER_OPTION_3',
           text: "Place holder option 3",
           key: "dropdown_option_".concat(ID.uuid())
         }];
       case 'Tags':
         return [{
-          value: 'place_holder_tag_1',
+          value: 'PLACE_HOLDER_TAG_1',
           text: "Place holder option 1",
           key: "tags_option_".concat(ID.uuid())
         }, {
-          value: 'place_holder_tag_2',
+          value: 'PLACE_HOLDER_TAG_2',
           text: "Place holder option 2",
           key: "tags_option_".concat(ID.uuid())
         }, {
-          value: 'place_holder_tag_3',
+          value: 'PLACE_HOLDER_TAG_3',
           text: "Place holder option 3",
           key: "tags_option_".concat(ID.uuid())
         }];
       case 'Checkboxes':
         return [{
-          value: 'place_holder_option_1',
+          value: 'PLACE_HOLDER_OPTION_1',
           text: "Place holder option 1",
           key: "checkboxes_option_".concat(ID.uuid())
         }, {
-          value: 'place_holder_option_2',
+          value: 'PLACE_HOLDER_OPTION_2',
           text: "Place holder option 2",
           key: "checkboxes_option_".concat(ID.uuid())
         }, {
-          value: 'place_holder_option_3',
+          value: 'PLACE_HOLDER_OPTION_3',
           text: "Place holder option 3",
           key: "checkboxes_option_".concat(ID.uuid())
         }];
       case 'RadioButtons':
         return [{
-          value: 'place_holder_option_1',
+          value: 'PLACE_HOLDER_OPTION_1',
           text: "Place holder option 1",
           key: "radiobuttons_option_".concat(ID.uuid())
         }, {
-          value: 'place_holder_option_2',
+          value: 'PLACE_HOLDER_OPTION_2',
           text: "Place holder option 2",
           key: "radiobuttons_option_".concat(ID.uuid())
         }, {
-          value: 'place_holder_option_3',
+          value: 'PLACE_HOLDER_OPTION_3',
           text: "Place holder option 3",
           key: "radiobuttons_option_".concat(ID.uuid())
         }];

package/package.json

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

package/types/index.d.ts

@@ -141,6 +141,10 @@ export interface SurveyBuilderProps {
   saveAlways?: boolean;
   editMode?: boolean;
   renderEditForm?: (props: BaseElement) => React.ReactNode;
+  checkboxButtonClassName?: string;
+  headerClassName?: string;
+  labelClassName?: string;
+  paragraphClassName?: string;
 }
 
 export class ReactSurveyBuilder extends React.Component<SurveyBuilderProps> {}