react-survey-builder 1.0.71 → 1.0.73

package/lib/dynamic-option-list.js

@@ -1,168 +1,153 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+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) { _defineProperty(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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React from 'react';
 import { FaMinusCircle, FaPlusCircle } from 'react-icons/fa';
-import { Button, Col, Form, Row } from 'react-bootstrap/esm';
+import { Button, Col, Form, Row } from 'react-bootstrap';
 import ID from './UUID';
-var DynamicOptionList = /*#__PURE__*/function (_React$Component) {
-  function DynamicOptionList(props) {
-    var _this;
-    _classCallCheck(this, DynamicOptionList);
-    _this = _callSuper(this, DynamicOptionList, [props]);
-    _this.state = {
-      element: _this.props.element,
-      item: _this.props.item,
-      dirty: false
-    };
-    return _this;
-  }
-  _inherits(DynamicOptionList, _React$Component);
-  return _createClass(DynamicOptionList, [{
-    key: "_setValue",
-    value: function _setValue(text) {
-      return text.replace(/[^A-Z0-9]+/ig, '_').toLowerCase();
+import { isObjectNotEmpty } from './utils/objectUtils';
+var DynamicOptionList = function DynamicOptionList(props) {
+  var _props$element;
+  var _React$useState = React.useState((_props$element = props.element) !== null && _props$element !== void 0 ? _props$element : {}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    element = _React$useState2[0],
+    setElement = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    dirty = _React$useState4[0],
+    setDirty = _React$useState4[1];
+  var _setValue = function _setValue(text) {
+    return text.replace(/[^A-Z0-9]+/ig, '_').toLowerCase();
+  };
+  var editOption = function editOption(optionIndex, e) {
+    var thisElement = isObjectNotEmpty(element) ? _objectSpread({}, element) : {};
+    var val = thisElement.options[optionIndex].value !== _setValue(thisElement.options[optionIndex].text) ? thisElement.options[optionIndex].value : _setValue(e.target.value);
+    thisElement.options[optionIndex].text = e.target.value;
+    thisElement.options[optionIndex].value = val;
+    setElement(thisElement);
+    setDirty(true);
+  };
+  var editValue = function editValue(optionIndex, e) {
+    var thisElement = isObjectNotEmpty(element) ? _objectSpread({}, element) : {};
+    var val = e.target.value === '' ? _setValue(thisElement.options[optionIndex].text) : e.target.value;
+    thisElement.options[optionIndex].value = val;
+    setElement(thisElement);
+    setDirty(true);
+  };
+
+  // eslint-disable-next-line no-unused-vars
+  var editOptionCorrect = function editOptionCorrect(optionIndex, e) {
+    var thisElement = isObjectNotEmpty(element) ? _objectSpread({}, element) : {};
+    if (thisElement.options[optionIndex].hasOwnProperty('correct')) {
+      delete thisElement.options[optionIndex].correct;
+    } else {
+      thisElement.options[optionIndex].correct = true;
     }
-  }, {
-    key: "editOption",
-    value: function editOption(optionIndex, e) {
-      var thisElement = this.state.element;
-      var val = thisElement.options[optionIndex].value !== this._setValue(thisElement.options[optionIndex].text) ? thisElement.options[optionIndex].value : this._setValue(e.target.value);
-      thisElement.options[optionIndex].text = e.target.value;
-      thisElement.options[optionIndex].value = val;
-      this.setState({
-        element: thisElement,
-        dirty: true
-      });
+    setElement(thisElement);
+    props.updateElement(thisElement);
+  };
+  var updateOption = function updateOption() {
+    var thisElement = isObjectNotEmpty(element) ? _objectSpread({}, element) : {};
+    // to prevent ajax calls with no change
+    if (dirty) {
+      props.updateElement(thisElement);
+      setDirty(false);
     }
-  }, {
-    key: "editValue",
-    value: function editValue(optionIndex, e) {
-      var thisElement = this.state.element;
-      var val = e.target.value === '' ? this._setValue(thisElement.options[optionIndex].text) : e.target.value;
-      thisElement.options[optionIndex].value = val;
-      this.setState({
-        element: thisElement,
+  };
+  var addOption = function addOption(index) {
+    var thisElement = isObjectNotEmpty(element) ? _objectSpread({}, element) : {};
+    thisElement.options.splice(index + 1, 0, {
+      value: '',
+      text: '',
+      key: ID.uuid()
+    });
+    props.updateElement(thisElement);
+  };
+  var removeOption = function removeOption(index) {
+    var thisElement = isObjectNotEmpty(element) ? _objectSpread({}, element) : {};
+    thisElement.options.splice(index, 1);
+    props.updateElement(thisElement);
+  };
+  React.useEffect(function () {
+    if (dirty) {
+      var thisElement = isObjectNotEmpty(element) ? _objectSpread(_objectSpread({}, element), {}, {
+        dirty: true
+      }) : {
         dirty: true
-      });
+      };
+      props.updateElement(thisElement);
     }
-
-    // eslint-disable-next-line no-unused-vars
-  }, {
-    key: "editOptionCorrect",
-    value: function editOptionCorrect(optionIndex, e) {
-      var thisElement = this.state.element;
-      if (thisElement.options[optionIndex].hasOwnProperty('correct')) {
-        delete thisElement.options[optionIndex].correct;
-      } else {
-        thisElement.options[optionIndex].correct = true;
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dynamic-option-list"
+  }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    sm: 6
+  }, /*#__PURE__*/React.createElement("b", null, "Options")), props.canHaveOptionValue && /*#__PURE__*/React.createElement(Col, {
+    sm: 2
+  }, /*#__PURE__*/React.createElement("b", null, "Value")), props.canHaveOptionValue && props.canHaveOptionCorrect && /*#__PURE__*/React.createElement(Col, {
+    sm: 4
+  }, /*#__PURE__*/React.createElement("b", null, "Correct")))), props.element.options.map(function (option, index) {
+    var val = option.value !== _setValue(option.text) ? option.value : '';
+    return /*#__PURE__*/React.createElement("li", {
+      className: "clearfix",
+      key: "edit_".concat(option.key)
+    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+      sm: 6
+    }, /*#__PURE__*/React.createElement(Form.Control, {
+      tabIndex: index + 1,
+      style: {
+        width: '100%'
+      },
+      type: "text",
+      name: "text_".concat(index),
+      placeholder: "Option text",
+      value: option.text,
+      onBlur: updateOption,
+      onChange: function onChange(e) {
+        editOption(index, e);
       }
-      this.setState({
-        element: thisElement
-      });
-      this.props.updateElement.call(this.props.preview, thisElement);
-    }
-  }, {
-    key: "updateOption",
-    value: function updateOption() {
-      var thisElement = this.state.element;
-      // to prevent ajax calls with no change
-      if (this.state.dirty) {
-        this.props.updateElement.call(this.props.preview, thisElement);
-        this.setState({
-          dirty: false
-        });
+    })), props.canHaveOptionValue && /*#__PURE__*/React.createElement(Col, {
+      sm: 2
+    }, /*#__PURE__*/React.createElement(Form.Control, {
+      type: "text",
+      name: "value_".concat(index),
+      value: val,
+      onChange: function onChange(e) {
+        editValue(index, e);
       }
-    }
-  }, {
-    key: "addOption",
-    value: function addOption(index) {
-      var thisElement = this.state.element;
-      thisElement.options.splice(index + 1, 0, {
-        value: '',
-        text: '',
-        key: ID.uuid()
-      });
-      this.props.updateElement.call(this.props.preview, thisElement);
-    }
-  }, {
-    key: "removeOption",
-    value: function removeOption(index) {
-      var thisElement = this.state.element;
-      thisElement.options.splice(index, 1);
-      this.props.updateElement.call(this.props.preview, thisElement);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      if (this.state.dirty) {
-        this.state.element.dirty = true;
+    })), props.canHaveOptionValue && props.canHaveOptionCorrect && /*#__PURE__*/React.createElement(Col, {
+      sm: 1
+    }, /*#__PURE__*/React.createElement(Form.Check, {
+      type: "checkbox",
+      value: "1",
+      onChange: function onChange(e) {
+        editOptionCorrect(index, e);
+      },
+      checked: option.hasOwnProperty('correct')
+    })), /*#__PURE__*/React.createElement(Col, {
+      sm: 3
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "dynamic-options-actions-buttons"
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "success",
+      onClick: function onClick() {
+        addOption(index);
       }
-      return /*#__PURE__*/React.createElement("div", {
-        className: "dynamic-option-list"
-      }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
-        sm: 6
-      }, /*#__PURE__*/React.createElement("b", null, "Options")), this.props.canHaveOptionValue && /*#__PURE__*/React.createElement(Col, {
-        sm: 2
-      }, /*#__PURE__*/React.createElement("b", null, "Value")), this.props.canHaveOptionValue && this.props.canHaveOptionCorrect && /*#__PURE__*/React.createElement(Col, {
-        sm: 4
-      }, /*#__PURE__*/React.createElement("b", null, "Correct")))), this.props.element.options.map(function (option, index) {
-        var thisKey = "edit_".concat(option.key);
-        var val = option.value !== _this2._setValue(option.text) ? option.value : '';
-        return /*#__PURE__*/React.createElement("li", {
-          className: "clearfix",
-          key: thisKey
-        }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
-          sm: 6
-        }, /*#__PURE__*/React.createElement(Form.Control, {
-          tabIndex: index + 1,
-          style: {
-            width: '100%'
-          },
-          type: "text",
-          name: "text_".concat(index),
-          placeholder: "Option text",
-          value: option.text,
-          onBlur: _this2.updateOption.bind(_this2),
-          onChange: _this2.editOption.bind(_this2, index)
-        })), _this2.props.canHaveOptionValue && /*#__PURE__*/React.createElement(Col, {
-          sm: 2
-        }, /*#__PURE__*/React.createElement(Form.Control, {
-          type: "text",
-          name: "value_".concat(index),
-          value: val,
-          onChange: _this2.editValue.bind(_this2, index)
-        })), _this2.props.canHaveOptionValue && _this2.props.canHaveOptionCorrect && /*#__PURE__*/React.createElement(Col, {
-          sm: 1
-        }, /*#__PURE__*/React.createElement(Form.Check, {
-          type: "checkbox",
-          value: "1",
-          onChange: _this2.editOptionCorrect.bind(_this2, index),
-          checked: option.hasOwnProperty('correct')
-        })), /*#__PURE__*/React.createElement(Col, {
-          sm: 3
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "dynamic-options-actions-buttons"
-        }, /*#__PURE__*/React.createElement(Button, {
-          variant: "success",
-          onClick: _this2.addOption.bind(_this2, index)
-        }, /*#__PURE__*/React.createElement(FaPlusCircle, null)), index > 0 && /*#__PURE__*/React.createElement(Button, {
-          variant: "danger",
-          onClick: _this2.removeOption.bind(_this2, index)
-        }, /*#__PURE__*/React.createElement(FaMinusCircle, null))))));
-      })));
-    }
-  }]);
-}(React.Component);
-export { DynamicOptionList as default };
+    }, /*#__PURE__*/React.createElement(FaPlusCircle, null)), index > 0 && /*#__PURE__*/React.createElement(Button, {
+      variant: "danger",
+      onClick: function onClick() {
+        removeOption(index);
+      }
+    }, /*#__PURE__*/React.createElement(FaMinusCircle, null))))));
+  })));
+};
+export default DynamicOptionList;

package/lib/fieldset/FieldSet.js

@@ -0,0 +1,118 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["item", "controls", "items", "editModeOn", "getItemById", "setAsChild", "removeChild", "seq", "index", "style"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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) { _defineProperty(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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+/* eslint-disable camelcase */
+import React from "react";
+import ComponentHeader from "../survey-elements/component-header";
+import FieldsetDustbin from '../multi-column/dustbin';
+import ItemTypes from "../ItemTypes";
+import { Col, Container, Row } from "react-bootstrap";
+import myxss from "../survey-elements/myxss";
+import { isListNotEmpty, isObjectNotEmpty } from "../utils/objectUtils";
+var accepts = [ItemTypes.BOX, ItemTypes.CARD];
+var ComponentLegend = function ComponentLegend(_ref) {
+  var item = _ref.item;
+  var labelText = myxss.process(item.label);
+  if (!labelText || !labelText.trim()) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("legend", {
+    dangerouslySetInnerHTML: {
+      __html: labelText
+    }
+  });
+};
+var FieldSetBase = function FieldSetBase(_ref2) {
+  var item = _ref2.item,
+    controls = _ref2.controls,
+    items = _ref2.items,
+    editModeOn = _ref2.editModeOn,
+    getItemById = _ref2.getItemById,
+    setAsChild = _ref2.setAsChild,
+    removeChild = _ref2.removeChild,
+    seq = _ref2.seq,
+    index = _ref2.index,
+    style = _ref2.style,
+    otherProps = _objectWithoutProperties(_ref2, _excluded);
+  var pageBreakBefore = item.pageBreakBefore;
+  var baseClasses = "SortableItem rfb-item";
+  if (pageBreakBefore) {
+    baseClasses += " alwaysbreak";
+  }
+  var _React$useState = React.useState(isObjectNotEmpty(item) && isListNotEmpty(item === null || item === void 0 ? void 0 : item.childItems) ? _toConsumableArray(item === null || item === void 0 ? void 0 : item.childItems) : [null]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    childItemIds = _React$useState2[0],
+    setChildItemIds = _React$useState2[1];
+  var _onDropSuccess = function onDropSuccess(droppedIndex) {
+    // let updatedItem = isObjectNotEmpty(item) ? { ...item } : {};
+    // let existingChildItemIds = isListNotEmpty(updatedItem.childItems) ? [...updatedItem.childItems] : [null];
+    // const isLastChild = existingChildItemIds === (droppedIndex + 1);
+    // console.log('onDropSuccess', droppedIndex, existingChildItemIds, childItemIds, item, isLastChild);
+
+    // if (isLastChild) {
+    //     let updatedChildItemIds = Array.from({ length: existingChildItemIds.length + 1 }, (v, i) => { return existingChildItemIds[i] ? existingChildItemIds[i] : null });
+    //     setChildItemIds(updatedChildItemIds);
+    // }
+  };
+  React.useEffect(function () {
+    if (isObjectNotEmpty(item) && isListNotEmpty(item === null || item === void 0 ? void 0 : item.childItems)) {
+      setChildItemIds([].concat(_toConsumableArray(item === null || item === void 0 ? void 0 : item.childItems), [null]));
+    } else {
+      setChildItemIds([null]);
+    }
+  }, [item]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread({}, style),
+    className: baseClasses
+  }, /*#__PURE__*/React.createElement(ComponentHeader, _extends({
+    item: item,
+    index: index,
+    editModeOn: editModeOn,
+    setAsChild: setAsChild
+  }, otherProps)), /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement(ComponentLegend, {
+    item: item
+  }), childItemIds === null || childItemIds === void 0 ? void 0 : childItemIds.map(function (childItemId, childItemIndex) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "".concat(childItemIndex, "_").concat(childItemId || "_")
+    }, controls ? controls[childItemIndex] : /*#__PURE__*/React.createElement(FieldsetDustbin, {
+      style: {
+        width: "100%"
+      },
+      item: item,
+      accepts: accepts,
+      items: childItemIds,
+      key: childItemIndex,
+      col: childItemIndex,
+      onDropSuccess: function onDropSuccess() {
+        _onDropSuccess(childItemIndex);
+      },
+      parentIndex: index,
+      editModeOn: editModeOn,
+      _onDestroy: function _onDestroy() {
+        removeChild(item, childItemIndex);
+      },
+      getItemById: getItemById,
+      setAsChild: setAsChild,
+      seq: seq,
+      rowNo: childItemIndex
+    }));
+  })));
+};
+export default FieldSetBase;

package/lib/fieldset/index.js

@@ -1,132 +1,2 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["item", "className"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-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) { _defineProperty(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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-/* eslint-disable camelcase */
-import React from "react";
-import ComponentHeader from "../survey-elements/component-header";
-import FieldsetDustbin from '../multi-column/dustbin';
-import ItemTypes from "../ItemTypes";
-import { Col, Container, Row } from "react-bootstrap/esm";
-import myxss from "../survey-elements/myxss";
-var accepts = [ItemTypes.BOX, ItemTypes.CARD];
-var ComponentLegend = function ComponentLegend(_ref) {
-  var item = _ref.item;
-  var labelText = myxss.process(item.label);
-  if (!labelText || !labelText.trim()) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("legend", {
-    dangerouslySetInnerHTML: {
-      __html: labelText
-    }
-  });
-};
-var FieldSet = function FieldSet(props) {
-  var _React$useState = React.useState({}),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    childItem = _React$useState2[0],
-    setChildItem = _React$useState2[1];
-  var _React$useState3 = React.useState(null),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    childItems = _React$useState4[0],
-    setChildItems = _React$useState4[1];
-  React.useEffect(function () {
-    var item = props.item,
-      className = props.className,
-      rest = _objectWithoutProperties(props, _excluded);
-    setChildItem(item);
-    var count = 1;
-    createChild(count, item);
-  }, [props]);
-  var addNewChild = function addNewChild() {
-    var $dataItem = props.item;
-    var colCount = $dataItem.childItems.length + 1;
-    var oldChilds = $dataItem.childItems;
-    $dataItem.childItems = Array.from({
-      length: colCount
-    }, function (v, i) {
-      return oldChilds[i] ? oldChilds[i] : null;
-    });
-    setChildItems($dataItem.childItems);
-  };
-  var _onDropSuccess = function onDropSuccess(droppedIndex) {
-    var totalChild = childItems ? childItems.length : 0;
-    var isLastChild = totalChild === droppedIndex + 1;
-    if (isLastChild) {
-      addNewChild();
-    }
-  };
-  var createChild = function createChild(count, $dataItem) {
-    var colCount = count;
-    if (!$dataItem.childItems) {
-      // eslint-disable-next-line no-param-reassign
-      $dataItem.childItems = Array.from({
-        length: colCount
-      }, function (v, i) {
-        return null;
-      });
-      $dataItem.isContainer = true;
-    }
-    setChildItems($dataItem.childItems);
-  };
-  var controls = props.controls,
-    editModeOn = props.editModeOn,
-    getItemById = props.getItemById,
-    setAsChild = props.setAsChild,
-    removeChild = props.removeChild,
-    seq = props.seq,
-    index = props.index;
-  var pageBreakBefore = childItem.pageBreakBefore;
-  var baseClasses = "SortableItem rfb-item";
-  if (pageBreakBefore) {
-    baseClasses += " alwaysbreak";
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    style: _objectSpread({}, props.style),
-    className: baseClasses
-  }, /*#__PURE__*/React.createElement(ComponentHeader, _extends({}, props, {
-    isFieldSet: true
-  })), /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement(ComponentLegend, props), /*#__PURE__*/React.createElement(Container, {
-    fluid: true
-  }, /*#__PURE__*/React.createElement(Row, null, childItems === null || childItems === void 0 ? void 0 : childItems.map(function (x, i) {
-    return /*#__PURE__*/React.createElement(Col, {
-      key: "".concat(i, "_").concat(x || "_"),
-      md: 12
-    }, controls ? controls[i] : /*#__PURE__*/React.createElement(FieldsetDustbin, {
-      style: {
-        width: "100%"
-      },
-      item: childItem,
-      accepts: accepts,
-      items: childItems,
-      key: i,
-      col: i,
-      onDropSuccess: function onDropSuccess() {
-        return _onDropSuccess(i);
-      },
-      parentIndex: index,
-      editModeOn: editModeOn,
-      _onDestroy: function _onDestroy() {
-        return removeChild(childItem, i);
-      },
-      getItemById: getItemById,
-      setAsChild: setAsChild,
-      seq: seq,
-      rowNo: i
-    }));
-  })))));
-};
-export default FieldSet;
+import FieldSet from './FieldSet';
+export { FieldSet };