react-survey-builder 1.0.16 → 1.0.17

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,20 @@ 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 = _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;
   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