react-survey-builder 1.0.16 → 1.0.18

package/lib/stores/store.js

@@ -12,23 +12,23 @@ var _onPost;
 var _onLoad;
 var store = new _beedle["default"]({
   actions: {
-    setData: function setData(context, data, saveData) {
-      context.commit('setData', data);
-      if (saveData) this.save(data);
+    setData: function setData(context, items, saveData) {
+      context.commit('setData', items);
+      if (saveData) this.save(items);
     },
     load: function load(context, _ref) {
       var _this = this;
       var loadUrl = _ref.loadUrl,
         saveUrl = _ref.saveUrl,
-        data = _ref.data,
+        items = _ref.items,
         saveAlways = _ref.saveAlways;
       _saveUrl = saveUrl;
       var saveA = saveAlways || saveAlways === undefined;
       context.commit('setSaveAlways', saveA);
       if (_onLoad) {
         _onLoad().then(function (x) {
-          if (data && data.length > 0 && x.length === 0) {
-            data.forEach(function (y) {
+          if (items && items.length > 0 && x.length === 0) {
+            items.forEach(function (y) {
               return x.push(y);
             });
           }
@@ -36,30 +36,30 @@ var store = new _beedle["default"]({
         });
       } else if (loadUrl) {
         (0, _requests.get)(loadUrl).then(function (x) {
-          if (data && data.length > 0 && x.length === 0) {
-            data.forEach(function (y) {
+          if (items && items.length > 0 && x.length === 0) {
+            items.forEach(function (y) {
               return x.push(y);
             });
           }
           _this.setData(context, x);
         });
       } else {
-        this.setData(context, data);
+        this.setData(context, items);
       }
     },
     create: function create(context, element) {
       var _context$state = context.state,
-        data = _context$state.data,
+        items = _context$state.items,
         saveAlways = _context$state.saveAlways;
-      data.push(element);
-      this.setData(context, data, saveAlways);
+      items.push(element);
+      this.setData(context, items, saveAlways);
     },
     "delete": function _delete(context, element) {
       var _context$state2 = context.state,
-        data = _context$state2.data,
+        items = _context$state2.items,
         saveAlways = _context$state2.saveAlways;
-      data.splice(data.indexOf(element), 1);
-      this.setData(context, data, saveAlways);
+      items.splice(items.indexOf(element), 1);
+      this.setData(context, items, saveAlways);
     },
     deleteLastItem: function deleteLastItem(context) {
       var lastItem = context.state.lastItem;
@@ -76,8 +76,8 @@ var store = new _beedle["default"]({
       }
     },
     post: function post(context) {
-      var data = context.state.data;
-      this.setData(context, data, true);
+      var items = context.state.items;
+      this.setData(context, items, true);
     },
     updateOrder: function updateOrder(context, elements) {
       var saveAlways = context.state.saveAlways;
@@ -95,14 +95,14 @@ var store = new _beedle["default"]({
       // console.log('insertItem', item);
       context.commit('setLastItem', item.isContainer ? null : item);
     },
-    save: function save(data) {
+    save: function save(items) {
       if (_onPost) {
         _onPost({
-          task_data: data
+          task_data: items
         });
       } else if (_saveUrl) {
         (0, _requests.post)(_saveUrl, {
-          task_data: data
+          task_data: items
         });
       }
     }
@@ -110,7 +110,7 @@ var store = new _beedle["default"]({
   mutations: {
     setData: function setData(state, payload) {
       // eslint-disable-next-line no-param-reassign
-      state.data = payload;
+      state.items = payload;
       return state;
     },
     setSaveAlways: function setSaveAlways(state, payload) {
@@ -126,7 +126,7 @@ var store = new _beedle["default"]({
     }
   },
   initialState: {
-    data: [],
+    items: [],
     saveAlways: true,
     lastItem: null
   }

package/lib/survey-elements/component-drag-handle.js

@@ -29,21 +29,21 @@ var style = {
 };
 var dragHandleSource = {
   beginDrag: function beginDrag(props) {
-    var data = props.data,
+    var item = props.item,
       index = props.index,
       onDestroy = props.onDestroy,
       setAsChild = props.setAsChild,
       getDataById = props.getDataById;
     return {
       itemType: _ItemTypes["default"].BOX,
-      index: data.parentId ? -1 : index,
-      parentIndex: data.parentIndex,
-      id: data.id,
-      col: data.col,
+      index: item.parentId ? -1 : index,
+      parentIndex: item.parentIndex,
+      id: item.id,
+      col: item.col,
       onDestroy: onDestroy,
       setAsChild: setAsChild,
       getDataById: getDataById,
-      data: data
+      data: item
     };
   }
 };

package/lib/survey-elements/component-drag-layer.js

@@ -18,9 +18,9 @@ var layerStyles = {
   width: '100%',
   height: '100%'
 };
-function getItemStyles(props) {
-  var initialOffset = props.initialOffset,
-    currentOffset = props.currentOffset;
+function getItemStyles(_ref) {
+  var initialOffset = _ref.initialOffset,
+    currentOffset = _ref.currentOffset;
   if (!initialOffset || !currentOffset) {
     return {
       display: 'none'

package/lib/survey-elements/component-drag-preview.js

@@ -36,7 +36,7 @@ var BoxDragPreview = exports.BoxDragPreview = function BoxDragPreview(_ref2) {
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     tickTock = _React$useState2[0],
     setTickTock = _React$useState2[1];
-  var text = item.data.content ? item.data.content : item.data.label ? item.data.label : item.data.text;
+  var text = item.item.content ? item.item.content : item.item.label ? item.item.label : item.item.text;
   var isLongText = text.length > 20;
   var previewText = isLongText ? "".concat(text.slice(0, 20), "...") : text;
 

package/lib/survey-elements/component-error-message.js

@@ -29,6 +29,7 @@ var getError = exports.getError = function getError(errors, name) {
 var ComponentErrorMessage = function ComponentErrorMessage(_ref) {
   var name = _ref.name;
   var methods = (0, _reactHookForm.useFormContext)();
+  if (!methods) return null;
   if (getError(methods.formState.errors, name) !== undefined) {
     return /*#__PURE__*/_react["default"].createElement(_errorMessage.ErrorMessage, {
       errors: methods.formState.errors,

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

@@ -8,22 +8,22 @@ exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _headerBar = _interopRequireDefault(require("./header-bar"));
 var ComponentHeader = function ComponentHeader(props) {
-  if (props.mutable) {
+  if (props.item.mutable) {
     return null;
   }
-  return /*#__PURE__*/_react["default"].createElement("div", null, props.data.pageBreakBefore && /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", null, props.item.pageBreakBefore && /*#__PURE__*/_react["default"].createElement("div", {
     className: "preview-page-break"
   }, "Page Break"), /*#__PURE__*/_react["default"].createElement(_headerBar["default"], {
     isFieldSet: props.isFieldSet,
     parent: props.parent,
     editModeOn: props.editModeOn,
-    data: props.data,
+    item: props.item,
     index: props.index,
     setAsChild: props.setAsChild,
     onDestroy: props._onDestroy,
     onEdit: props.onEdit,
-    "static": props.data["static"],
-    required: props.data.required
+    "static": props.item["static"],
+    required: props.item.required
   }));
 };
 var _default = exports["default"] = ComponentHeader;

package/lib/survey-elements/component-label.js

@@ -8,17 +8,23 @@ exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _myxss = _interopRequireDefault(require("./myxss"));
 var _reactBootstrap = require("react-bootstrap");
-var ComponentLabel = function ComponentLabel(props) {
-  var _props$hideRequiredAl;
-  var hasRequiredLabel = props.data.hasOwnProperty('required') && props.data.required === true && !props.readOnly;
-  var labelText = _myxss["default"].process(props.data.label);
+var ComponentLabel = function ComponentLabel(_ref) {
+  var _item$hideLabel;
+  var item = _ref.item,
+    className = _ref.className,
+    htmlFor = _ref.htmlFor;
+  var hasRequiredLabel = item.hasOwnProperty('required') && item.required === true && !item.readOnly;
+  var labelText = _myxss["default"].process(item.label);
   if (!labelText || !labelText.trim()) {
     return null;
   }
   labelText = "".concat(labelText).concat(hasRequiredLabel ? '*' : '');
-  var hideRequiredAlert = (_props$hideRequiredAl = props.hideRequiredAlert) !== null && _props$hideRequiredAl !== void 0 ? _props$hideRequiredAl : props.data.hideRequiredAlert;
+  var hideRequiredAlert = item.hideRequiredAlert;
+  var hideLabel = (_item$hideLabel = item.hideLabel) !== null && _item$hideLabel !== void 0 ? _item$hideLabel : false;
+  if (hideLabel) return null;
   return /*#__PURE__*/_react["default"].createElement("label", {
-    className: props.className || ''
+    className: className || '',
+    htmlFor: htmlFor
   }, /*#__PURE__*/_react["default"].createElement("span", {
     dangerouslySetInnerHTML: {
       __html: labelText

package/lib/survey-elements/custom-element.js

@@ -16,6 +16,7 @@ var _react = _interopRequireDefault(require("react"));
 var _componentHeader = _interopRequireDefault(require("./component-header"));
 var _componentLabel = _interopRequireDefault(require("./component-label"));
 var _reactBootstrap = require("react-bootstrap");
+var _componentErrorMessage = _interopRequireDefault(require("./component-error-message"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
@@ -33,34 +34,44 @@ var CustomElement = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(CustomElement, [{
     key: "render",
     value: function render() {
-      var bare = this.props.data.bare;
+      var bare = this.props.item.bare;
       var props = {};
-      props.name = this.props.data.fieldName;
+      props.name = this.props.item.fieldName;
       props.defaultValue = this.props.defaultValue;
-      if (this.props.mutable && this.props.data.forwardRef) {
+      if (this.props.item.forwardRef) {
         props.ref = this.inputField;
       }
-      if (this.props.readOnly) {
+      if (this.props.item.disabled) {
         props.disabled = 'disabled';
       }
 
       // Return if component is invalid.
-      if (!this.props.data.component) return null;
-      var Element = this.props.data.component;
+      if (!this.props.item.component) return null;
+      var Element = this.props.item.component;
       var baseClasses = 'SortableItem rfb-item';
-      if (this.props.data.pageBreakBefore) {
+      if (this.props.item.pageBreakBefore) {
         baseClasses += ' alwaysbreak';
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: baseClasses,
         style: _objectSpread({}, this.props.style)
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), bare ? /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
-        data: this.props.data
-      }, this.props.data.props, props)) : /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
+        id: props.name,
+        item: this.props.item
+      }, this.props.item.props, props)) : /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
+        className: "form-group mb-3"
+      }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
         className: "form-label"
-      }, this.props)), /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
-        data: this.props.data
-      }, this.props.data.props, props))));
+      }, this.props, {
+        htmlFor: props.name
+      })), /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({
+        id: props.name,
+        item: this.props.item
+      }, this.props.item.props, props)), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
+        muted: true
+      }, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
+        name: props.name
+      })));
     }
   }]);
   return CustomElement;

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

@@ -32,22 +32,22 @@ var HeaderBar = exports["default"] = /*#__PURE__*/function (_React$Component) {
         className: "d-flex toolbar-header align-items-center justify-content-between p-2"
       }, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Badge, {
         bg: "secondary"
-      }, this.props.data.text), /*#__PURE__*/_react["default"].createElement("div", {
+      }, this.props.item.text), /*#__PURE__*/_react["default"].createElement("div", {
         className: "toolbar-header-buttons"
-      }, this.props.data.element !== 'LineBreak' && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
+      }, this.props.item.element !== 'LineBreak' && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
         variant: "default",
         className: "is-isolated",
-        onClick: this.props.editModeOn.bind(this.props.parent, this.props.data)
+        onClick: this.props.editModeOn.bind(this.props.parent, this.props.item)
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaEdit, {
         className: "is-isolated"
       })), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Button, {
         variant: "default",
         className: "is-isolated",
-        onClick: this.props.onDestroy.bind(this, this.props.data)
+        onClick: this.props.onDestroy.bind(this, this.props.item)
       }, /*#__PURE__*/_react["default"].createElement(_fa.FaTrash, {
         className: "is-isolated"
       })), /*#__PURE__*/_react["default"].createElement(_componentDragHandle["default"], {
-        data: this.props.data,
+        item: this.props.item,
         index: this.props.index,
         onDestroy: this.props.onDestroy,
         setAsChild: this.props.setAsChild