react-survey-builder 1.0.16 → 1.0.18

package/lib/index.js

@@ -59,7 +59,7 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
   }
   (0, _createClass2["default"])(ReactSurveyBuilder, [{
     key: "editModeOn",
-    value: function editModeOn(data, e) {
+    value: function editModeOn($dataItem, e) {
       e.preventDefault();
       e.stopPropagation();
       if (this.state.editMode) {
@@ -70,7 +70,7 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
       } else {
         this.setState({
           editMode: !this.state.editMode,
-          editElement: data
+          editElement: $dataItem
         });
       }
     }
@@ -118,7 +118,7 @@ var ReactSurveyBuilder = exports.ReactSurveyBuilder = /*#__PURE__*/function (_Re
         manualEditModeOff: this.manualEditModeOff.bind(this),
         showCorrectColumn: this.props.showCorrectColumn,
         parent: this,
-        data: this.props.data,
+        items: this.props.items,
         url: this.props.url,
         saveUrl: this.props.saveUrl,
         onLoad: this.props.onLoad,

package/lib/language-provider/locales/en-us.json

@@ -54,6 +54,7 @@
 	"header-text": "Header Text",
 	"label": "Label",
 	"paragraph": "Paragraph",
+	"content-body": "Static Content",
 	"line-break": "Line Break",
 	"dropdown": "Dropdown",
 	"tags": "Tags",

package/lib/multi-column/MultiColumnRow.js

@@ -19,9 +19,9 @@ var _componentLabel = _interopRequireDefault(require("../survey-elements/compone
 var _dustbin = _interopRequireDefault(require("./dustbin"));
 var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
 var _reactBootstrap = require("react-bootstrap");
-var _excluded = ["data", "className"],
-  _excluded2 = ["data", "className"],
-  _excluded3 = ["data"];
+var _excluded = ["item", "className"],
+  _excluded2 = ["item", "className"],
+  _excluded3 = ["item"];
 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); }; }
@@ -39,7 +39,7 @@ var MultiColumnRowBase = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props = this.props,
         controls = _this$props.controls,
-        data = _this$props.data,
+        item = _this$props.item,
         editModeOn = _this$props.editModeOn,
         getDataById = _this$props.getDataById,
         setAsChild = _this$props.setAsChild,
@@ -47,8 +47,8 @@ var MultiColumnRowBase = /*#__PURE__*/function (_React$Component) {
         seq = _this$props.seq,
         className = _this$props.className,
         index = _this$props.index;
-      var childItems = data.childItems,
-        pageBreakBefore = data.pageBreakBefore;
+      var childItems = item.childItems,
+        pageBreakBefore = item.pageBreakBefore;
       var baseClasses = 'SortableItem rfb-item';
       if (pageBreakBefore) {
         baseClasses += ' alwaysbreak';
@@ -64,14 +64,14 @@ var MultiColumnRowBase = /*#__PURE__*/function (_React$Component) {
           style: {
             width: '100%'
           },
-          data: data,
+          item: item,
           accepts: accepts,
           items: childItems,
           col: i,
           parentIndex: index,
           editModeOn: editModeOn,
           _onDestroy: function _onDestroy() {
-            return removeChild(data, i);
+            return removeChild(item, i);
           },
           getDataById: getDataById,
           setAsChild: setAsChild,
@@ -83,51 +83,51 @@ var MultiColumnRowBase = /*#__PURE__*/function (_React$Component) {
   return MultiColumnRowBase;
 }(_react["default"].Component);
 var TwoColumnRow = exports.TwoColumnRow = function TwoColumnRow(_ref) {
-  var data = _ref.data,
+  var item = _ref.item,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var classNameVal = className || 'col-md-6';
-  if (!data.childItems) {
+  if (!item.childItems) {
     // eslint-disable-next-line no-param-reassign
-    data.childItems = [null, null];
-    data.isContainer = true;
+    item.childItems = [null, null];
+    item.isContainer = true;
   }
   return /*#__PURE__*/_react["default"].createElement(MultiColumnRowBase, (0, _extends2["default"])({}, rest, {
     className: classNameVal,
-    data: data
+    item: item
   }));
 };
 var ThreeColumnRow = exports.ThreeColumnRow = function ThreeColumnRow(_ref2) {
-  var data = _ref2.data,
+  var item = _ref2.item,
     className = _ref2.className,
     rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
   var classNameVal = className || 'col-md-4';
-  if (!data.childItems) {
+  if (!item.childItems) {
     // eslint-disable-next-line no-param-reassign
-    data.childItems = [null, null, null];
-    data.isContainer = true;
+    item.childItems = [null, null, null];
+    item.isContainer = true;
   }
   return /*#__PURE__*/_react["default"].createElement(MultiColumnRowBase, (0, _extends2["default"])({}, rest, {
     className: classNameVal,
-    data: data
+    item: item
   }));
 };
 var MultiColumnRow = exports.MultiColumnRow = function MultiColumnRow(_ref3) {
-  var data = _ref3.data,
+  var item = _ref3.item,
     rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
-  var colCount = data.colCount || 4;
-  var classNameVal = data.className || (colCount === 4 ? 'col-md-3' : 'col');
-  if (!data.childItems) {
+  var colCount = item.colCount || 4;
+  var classNameVal = item.className || (colCount === 4 ? 'col-md-3' : 'col');
+  if (!item.childItems) {
     // eslint-disable-next-line no-param-reassign
-    data.childItems = Array.from({
+    item.childItems = Array.from({
       length: colCount
     }, function (v, i) {
       return null;
     });
-    data.isContainer = true;
+    item.isContainer = true;
   }
   return /*#__PURE__*/_react["default"].createElement(MultiColumnRowBase, (0, _extends2["default"])({}, rest, {
     className: classNameVal,
-    data: data
+    item: item
   }));
 };

package/lib/multi-column/dustbin.js

@@ -25,7 +25,7 @@ function getCustomElement(item, props) {
   return /*#__PURE__*/_react["default"].createElement(_customElement["default"], (0, _extends2["default"])({}, props, {
     mutable: false,
     key: "form_".concat(item.id),
-    data: item
+    item: item
   }));
 }
 function getElement(item, props) {
@@ -36,7 +36,7 @@ function getElement(item, props) {
   var Element = _surveyElements["default"][item.element || item.key];
   return /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({}, props, {
     key: "form_".concat(item.id),
-    data: item
+    item: item
   }));
 }
 function getStyle(backgroundColor) {
@@ -50,15 +50,15 @@ function getStyle(backgroundColor) {
     "float": 'left'
   };
 }
-function isContainer(item) {
-  if (item.itemType !== _ItemTypes["default"].CARD) {
-    var data = item.data;
-    if (data) {
-      if (data.isContainer) {
+function isContainer($containerItem) {
+  if ($containerItem.itemType !== _ItemTypes["default"].CARD) {
+    var item = $containerItem.item;
+    if (item) {
+      if (item.isContainer) {
         return true;
       }
-      if (data.fieldName) {
-        return data.fieldName.indexOf('_col_row') > -1;
+      if (item.fieldName) {
+        return item.fieldName.indexOf('_col_row') > -1;
       }
     }
   }
@@ -82,8 +82,8 @@ var Dustbin = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     return {
       onDrop: function onDrop(dropped) {
         console.log("dropped ites");
-        var data = dropped.data;
-        if (data) {
+        var item = dropped.item;
+        if (item) {
           onDropSuccess && onDropSuccess();
           _store["default"].dispatch('deleteLastItem');
         }
@@ -98,7 +98,7 @@ var Dustbin = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   // console.log('SameCard:',sameCard)
 
   var backgroundColor = 'rgba(0, 0, 0, .03)';
-  if (!sameCard && isOver && canDrop && !draggedItem.data.isContainer) {
+  if (!sameCard && isOver && canDrop && !draggedItem.item.isContainer) {
     backgroundColor = '#F7F589';
   }
 
@@ -132,10 +132,10 @@ var _default = exports["default"] = (0, _reactDnd.DropTarget)(function (props) {
     if (!isContainer(item)) {
       component.onDrop(item);
       console.log("calling on Drop from 137", item);
-      if (item.data && typeof props.setAsChild === 'function') {
-        var isNew = !item.data.id;
-        var data = isNew ? item.onCreate(item.data) : item.data;
-        props.setAsChild(props.data, data, props.col, isBusy);
+      if (item.item && typeof props.setAsChild === 'function') {
+        var isNew = !item.item.id;
+        var $dataItem = isNew ? item.onCreate(item.item) : item.item;
+        props.setAsChild(props.item, $dataItem, props.col, isBusy);
       }
     }
   }

package/lib/multi-column/grip.js

@@ -18,21 +18,21 @@ var style = {
 };
 var gripSource = {
   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
+      item: item
     };
   }
 };

package/lib/preview.js

@@ -32,7 +32,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     (0, _classCallCheck2["default"])(this, Preview);
     _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      data: [],
+      items: [],
       answerData: {}
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "editModeOff", function (e) {
@@ -53,7 +53,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     _store["default"].setExternalHandler(onLoad, onPost);
     _this.editForm = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
-      data: props.data || [],
+      items: props.items || [],
       answerData: {}
     };
     _this.seq = 0;
@@ -71,17 +71,17 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       var _this2 = this;
       var _this$props = this.props,
-        data = _this$props.data,
+        items = _this$props.items,
         url = _this$props.url,
         saveUrl = _this$props.saveUrl,
         saveAlways = _this$props.saveAlways;
       _store["default"].subscribe(function (state) {
-        return _this2._onUpdate(state.data);
+        return _this2._onUpdate(state.items);
       });
       _store["default"].dispatch('load', {
         loadUrl: url,
         saveUrl: saveUrl,
-        data: data || [],
+        items: items || [],
         saveAlways: saveAlways
       });
       document.addEventListener('mousedown', this.editModeOff);
@@ -99,32 +99,32 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "updateElement",
     value: function updateElement(element) {
-      var data = this.state.data;
+      var items = this.state.items;
       var found = false;
-      for (var i = 0, len = data.length; i < len; i++) {
-        if (element.id === data[i].id) {
-          data[i] = element;
+      for (var i = 0, len = items.length; i < len; i++) {
+        if (element.id === items[i].id) {
+          items[i] = element;
           found = true;
           break;
         }
       }
       if (found) {
         this.seq = this.seq > 100000 ? 0 : this.seq + 1;
-        _store["default"].dispatch('updateOrder', data);
+        _store["default"].dispatch('updateOrder', items);
       }
     }
   }, {
     key: "_onChange",
-    value: function _onChange(data) {
+    value: function _onChange($dataItems) {
       var _this3 = this;
       var answerData = {};
-      data.forEach(function (item) {
+      $dataItems.forEach(function (item) {
         if (item && item.readOnly && _this3.props.variables[item.variableKey]) {
           answerData[item.fieldName] = _this3.props.variables[item.variableKey];
         }
       });
       this.setState({
-        data: data,
+        items: $dataItems,
         answerData: answerData
       });
     }
@@ -145,14 +145,14 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getDataById",
     value: function getDataById(id) {
-      var data = this.state.data;
-      return data.find(function (x) {
+      var items = this.state.items;
+      return items.find(function (x) {
         return x && x.id === id;
       });
     }
   }, {
     key: "swapChildren",
-    value: function swapChildren(data, item, child, col) {
+    value: function swapChildren($dataItems, item, child, col) {
       if (child.col !== undefined && item.id !== child.parentId) {
         return false;
       }
@@ -169,14 +169,14 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
       // eslint-disable-next-line no-param-reassign
       item.childItems[col] = child.id;
       child.col = col;
-      _store["default"].dispatch('updateOrder', data);
+      _store["default"].dispatch('updateOrder', $dataItems);
       return true;
     }
   }, {
     key: "setAsChild",
     value: function setAsChild(item, child, col, isBusy) {
-      var data = this.state.data;
-      if (this.swapChildren(data, item, child, col)) {
+      var items = this.state.items;
+      if (this.swapChildren(items, item, child, col)) {
         return;
       }
       if (isBusy) {
@@ -190,20 +190,20 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
       // eslint-disable-next-line no-param-reassign
       child.parentId = item.id;
       // eslint-disable-next-line no-param-reassign
-      child.parentIndex = data.indexOf(item);
+      child.parentIndex = items.indexOf(item);
       if (oldParent) {
         oldParent.childItems[oldCol] = null;
       }
-      var list = data.filter(function (x) {
+      var list = items.filter(function (x) {
         return x && x.parentId === item.id;
       });
       var toRemove = list.filter(function (x) {
         return item.childItems.indexOf(x.id) === -1;
       });
-      var newData = data;
+      var newData = items;
       if (toRemove.length) {
         // console.log('toRemove', toRemove);
-        newData = data.filter(function (x) {
+        newData = items.filter(function (x) {
           return toRemove.indexOf(x) === -1;
         });
       }
@@ -215,11 +215,11 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "removeChild",
     value: function removeChild(item, col) {
-      var data = this.state.data;
+      var items = this.state.items;
       var oldId = item.childItems[col];
       var oldItem = this.getDataById(oldId);
       if (oldItem) {
-        var newData = data.filter(function (x) {
+        var newData = items.filter(function (x) {
           return x !== oldItem;
         });
         // eslint-disable-next-line no-param-reassign
@@ -228,19 +228,19 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
         this.seq = this.seq > 100000 ? 0 : this.seq + 1;
         _store["default"].dispatch('updateOrder', newData);
         this.setState({
-          data: newData
+          items: newData
         });
       }
     }
   }, {
     key: "restoreCard",
     value: function restoreCard(item, id) {
-      var data = this.state.data;
-      var parent = this.getDataById(item.data.parentId);
+      var items = this.state.items;
+      var parent = this.getDataById(item.item.parentId);
       var oldItem = this.getDataById(id);
       if (parent && oldItem) {
-        var newIndex = data.indexOf(oldItem);
-        var newData = (0, _toConsumableArray2["default"])(data); // data.filter(x => x !== oldItem);
+        var newIndex = items.indexOf(oldItem);
+        var newData = (0, _toConsumableArray2["default"])(items); // items.filter(x => x !== oldItem);
         // eslint-disable-next-line no-param-reassign
         parent.childItems[oldItem.col] = null;
         delete oldItem.parentId;
@@ -253,18 +253,18 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
         this.seq = this.seq > 100000 ? 0 : this.seq + 1;
         _store["default"].dispatch('updateOrder', newData);
         this.setState({
-          data: newData
+          items: newData
         });
       }
     }
   }, {
     key: "insertCard",
     value: function insertCard(item, hoverIndex, id) {
-      var data = this.state.data;
+      var items = this.state.items;
       if (id) {
         this.restoreCard(item, id);
       } else {
-        data.splice(hoverIndex, 0, item);
+        items.splice(hoverIndex, 0, item);
         this.saveData(item, hoverIndex, hoverIndex);
         _store["default"].dispatch('insertItem', item);
       }
@@ -272,8 +272,8 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "moveCard",
     value: function moveCard(dragIndex, hoverIndex) {
-      var data = this.state.data;
-      var dragCard = data[dragIndex];
+      var items = this.state.items;
+      var dragCard = items[dragIndex];
       this.saveData(dragCard, dragIndex, hoverIndex);
     }
 
@@ -287,12 +287,12 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
     key: "saveData",
     value: function saveData(dragCard, dragIndex, hoverIndex) {
       var newData = (0, _immutabilityHelper["default"])(this.state, {
-        data: {
+        items: {
           $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
         }
       });
       this.setState(newData);
-      _store["default"].dispatch('updateOrder', newData.data);
+      _store["default"].dispatch('updateOrder', newData.items);
     }
   }, {
     key: "getElement",
@@ -309,6 +309,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
       }
       return /*#__PURE__*/_react["default"].createElement(SortableFormElement, {
         id: item.id,
+        name: item.fieldName,
         seq: this.seq,
         index: index,
         moveCard: this.moveCard,
@@ -319,7 +320,7 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
         isDraggable: true,
         key: item.id,
         sortData: item.id,
-        data: item,
+        item: item,
         getDataById: this.getDataById,
         setAsChild: this.setAsChild,
         removeChild: this.removeChild,
@@ -352,10 +353,10 @@ var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
       if (this.props.editMode) {
         classes += ' is-editing';
       }
-      var data = this.state.data.filter(function (x) {
+      var $dataItems = this.state.items.filter(function (x) {
         return !!x && !x.parentId;
       });
-      var items = data.map(function (item, index) {
+      var items = $dataItems.map(function (item, index) {
         return _this6.getElement(item, index);
       });
       return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/sortable-element.js

@@ -48,11 +48,11 @@ var cardTarget = {
     var item = monitor.getItem();
     var hoverIndex = props.index;
     var dragIndex = item.index;
-    if (props.data && props.data.isContainer || item.itemType === _ItemTypes["default"].CARD) {
+    if (props.item && props.item.isContainer || item.itemType === _ItemTypes["default"].CARD) {
       // console.log('cardTarget -  Drop', item.itemType);
       return;
     }
-    if (item.data && typeof item.setAsChild === 'function') {
+    if (item.item && typeof item.setAsChild === 'function') {
       // console.log('BOX', item);
       if (dragIndex === -1) {
         props.insertCard(item, hoverIndex, item.id);
@@ -60,12 +60,12 @@ var cardTarget = {
     }
   },
   hover: function hover(props, monitor, component) {
-    var _props$data, _item$data;
+    var _props$item, _item$item;
     var item = monitor.getItem();
     if (item.itemType === _ItemTypes["default"].BOX && item.index === -1) return;
 
     // Don't replace multi-column component unless both drag & hover are multi-column
-    if ((_props$data = props.data) !== null && _props$data !== void 0 && _props$data.isContainer && !((_item$data = item.data) !== null && _item$data !== void 0 && _item$data.isContainer)) return;
+    if ((_props$item = props.item) !== null && _props$item !== void 0 && _props$item.isContainer && !((_item$item = item.item) !== null && _item$item !== void 0 && _item$item.isContainer)) return;
     var dragIndex = item.index;
     var hoverIndex = props.index;
 
@@ -74,12 +74,12 @@ var cardTarget = {
       return;
     }
     if (dragIndex === -1) {
-      if (props.data && props.data.isContainer) {
+      if (props.item && props.item.isContainer) {
         return;
       }
       // console.log('CARD', item);
       item.index = hoverIndex;
-      props.insertCard(item.onCreate(item.data), hoverIndex);
+      props.insertCard(item.onCreate(item.item), hoverIndex);
     }
 
     // Determine rectangle on screen

package/lib/sortable-form-elements.js

@@ -13,6 +13,7 @@ var _fieldset = require("./fieldset");
 var _customElement = _interopRequireDefault(require("./survey-elements/custom-element"));
 var Header = _surveyElements["default"].Header,
   Paragraph = _surveyElements["default"].Paragraph,
+  ContentBody = _surveyElements["default"].ContentBody,
   Label = _surveyElements["default"].Label,
   LineBreak = _surveyElements["default"].LineBreak,
   TextInput = _surveyElements["default"].TextInput,
@@ -37,6 +38,7 @@ var Header = _surveyElements["default"].Header,
 var SurveyElements = {};
 SurveyElements.Header = (0, _sortableElement["default"])(Header);
 SurveyElements.Paragraph = (0, _sortableElement["default"])(Paragraph);
+SurveyElements.ContentBody = (0, _sortableElement["default"])(ContentBody);
 SurveyElements.Label = (0, _sortableElement["default"])(Label);
 SurveyElements.LineBreak = (0, _sortableElement["default"])(LineBreak);
 SurveyElements.TextInput = (0, _sortableElement["default"])(TextInput);