@goldenpine/react-form-builder2 0.18.4-patch.1

package/lib/ItemTypes.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  CARD: 'card',
+  BOX: 'box'
+};
+exports["default"] = _default;

package/lib/UUID.js

@@ -0,0 +1,67 @@
+"use strict";
+
+/* eslint-disable */
+// Private array of chars to use
+var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+var ID = {};
+ID.uuid = function (len, radix) {
+  var chars = CHARS,
+    uuid = [],
+    i;
+  radix = radix || chars.length;
+  if (len) {
+    // Compact form
+    for (i = 0; i < len; i++) {
+      uuid[i] = chars[0 | Math.random() * radix];
+    }
+  } else {
+    // rfc4122, version 4 form
+    var r;
+
+    // rfc4122 requires these characters
+    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+    uuid[14] = '4';
+
+    // Fill in random data.  At i==19 set the high bits of clock sequence as
+    // per rfc4122, sec. 4.1.5
+    for (i = 0; i < 36; i++) {
+      if (!uuid[i]) {
+        r = 0 | Math.random() * 16;
+        uuid[i] = chars[i == 19 ? r & 0x3 | 0x8 : r];
+      }
+    }
+  }
+  return uuid.join('');
+};
+
+// A more performant, but slightly bulkier, RFC4122v4 solution.  We boost performance
+// by minimizing calls to random()
+ID.uuidFast = function () {
+  var chars = CHARS,
+    uuid = new Array(36),
+    rnd = 0,
+    r;
+  for (var i = 0; i < 36; i++) {
+    if (i == 8 || i == 13 || i == 18 || i == 23) {
+      uuid[i] = '-';
+    } else if (i == 14) {
+      uuid[i] = '4';
+    } else {
+      if (rnd <= 0x02) rnd = 0x2000000 + Math.random() * 0x1000000 | 0;
+      r = rnd & 0xf;
+      rnd = rnd >> 4;
+      uuid[i] = chars[i == 19 ? r & 0x3 | 0x8 : r];
+    }
+  }
+  return uuid.join('');
+};
+
+// A more compact, but less performant, RFC4122v4 solution:
+ID.uuidCompact = function () {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = Math.random() * 16 | 0,
+      v = c == 'x' ? r : r & 0x3 | 0x8;
+    return v.toString(16);
+  });
+};
+module.exports = ID;

package/lib/dynamic-option-list.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _react = _interopRequireDefault(require("react"));
+var _UUID = _interopRequireDefault(require("./UUID"));
+var _IntlMessages = _interopRequireDefault(require("./language-provider/IntlMessages"));
+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); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
+  * <DynamicOptionList />
+  */
+var DynamicOptionList = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(DynamicOptionList, _React$Component);
+  var _super = _createSuper(DynamicOptionList);
+  function DynamicOptionList(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, DynamicOptionList);
+    _this = _super.call(this, props);
+    _this.state = {
+      element: _this.props.element,
+      data: _this.props.data,
+      dirty: false
+    };
+    return _this;
+  }
+  (0, _createClass2["default"])(DynamicOptionList, [{
+    key: "_setValue",
+    value: function _setValue(text) {
+      return text.replace(/[^A-Z0-9]+/ig, '_').toLowerCase();
+    }
+  }, {
+    key: "editOption",
+    value: function editOption(option_index, e) {
+      var this_element = this.state.element;
+      var val = this_element.options[option_index].value !== this._setValue(this_element.options[option_index].text) ? this_element.options[option_index].value : this._setValue(e.target.value);
+      this_element.options[option_index].text = e.target.value;
+      this_element.options[option_index].value = val;
+      this.setState({
+        element: this_element,
+        dirty: true
+      });
+    }
+  }, {
+    key: "editValue",
+    value: function editValue(option_index, e) {
+      var this_element = this.state.element;
+      var val = e.target.value === '' ? this._setValue(this_element.options[option_index].text) : e.target.value;
+      this_element.options[option_index].value = val;
+      this.setState({
+        element: this_element,
+        dirty: true
+      });
+    }
+
+    // eslint-disable-next-line no-unused-vars
+  }, {
+    key: "editOptionCorrect",
+    value: function editOptionCorrect(option_index, e) {
+      var this_element = this.state.element;
+      if (this_element.options[option_index].hasOwnProperty('correct')) {
+        delete this_element.options[option_index].correct;
+      } else {
+        this_element.options[option_index].correct = true;
+      }
+      this.setState({
+        element: this_element
+      });
+      this.props.updateElement.call(this.props.preview, this_element);
+    }
+  }, {
+    key: "updateOption",
+    value: function updateOption() {
+      var this_element = this.state.element;
+      // to prevent ajax calls with no change
+      if (this.state.dirty) {
+        this.props.updateElement.call(this.props.preview, this_element);
+        this.setState({
+          dirty: false
+        });
+      }
+    }
+  }, {
+    key: "addOption",
+    value: function addOption(index) {
+      var this_element = this.state.element;
+      this_element.options.splice(index + 1, 0, {
+        value: '',
+        text: '',
+        key: _UUID["default"].uuid()
+      });
+      this.props.updateElement.call(this.props.preview, this_element);
+    }
+  }, {
+    key: "removeOption",
+    value: function removeOption(index) {
+      var this_element = this.state.element;
+      this_element.options.splice(index, 1);
+      this.props.updateElement.call(this.props.preview, this_element);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (this.state.dirty) {
+        this.state.element.dirty = true;
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "dynamic-option-list"
+      }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "row"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "col-sm-6"
+      }, /*#__PURE__*/_react["default"].createElement("b", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "options"
+      }))), this.props.canHaveOptionValue && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "col-sm-2"
+      }, /*#__PURE__*/_react["default"].createElement("b", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "value"
+      }))), this.props.canHaveOptionValue && this.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "col-sm-4"
+      }, /*#__PURE__*/_react["default"].createElement("b", null, /*#__PURE__*/_react["default"].createElement(_IntlMessages["default"], {
+        id: "correct"
+      }))))), this.props.element.options.map(function (option, index) {
+        var this_key = "edit_".concat(option.key);
+        var val = option.value !== _this2._setValue(option.text) ? option.value : '';
+        return /*#__PURE__*/_react["default"].createElement("li", {
+          className: "clearfix",
+          key: this_key
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "row"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "col-sm-6"
+        }, /*#__PURE__*/_react["default"].createElement("input", {
+          tabIndex: index + 1,
+          className: "form-control",
+          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["default"].createElement("div", {
+          className: "col-sm-2"
+        }, /*#__PURE__*/_react["default"].createElement("input", {
+          className: "form-control",
+          type: "text",
+          name: "value_".concat(index),
+          value: val,
+          onChange: _this2.editValue.bind(_this2, index)
+        })), _this2.props.canHaveOptionValue && _this2.props.canHaveOptionCorrect && /*#__PURE__*/_react["default"].createElement("div", {
+          className: "col-sm-1"
+        }, /*#__PURE__*/_react["default"].createElement("input", {
+          className: "form-control",
+          type: "checkbox",
+          value: "1",
+          onChange: _this2.editOptionCorrect.bind(_this2, index),
+          checked: option.hasOwnProperty('correct')
+        })), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "col-sm-3"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "dynamic-options-actions-buttons"
+        }, /*#__PURE__*/_react["default"].createElement("button", {
+          onClick: _this2.addOption.bind(_this2, index),
+          className: "btn btn-success"
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-plus-circle"
+        })), index > 0 && /*#__PURE__*/_react["default"].createElement("button", {
+          onClick: _this2.removeOption.bind(_this2, index),
+          className: "btn btn-danger"
+        }, /*#__PURE__*/_react["default"].createElement("i", {
+          className: "fas fa-minus-circle"
+        }))))));
+      })));
+    }
+  }]);
+  return DynamicOptionList;
+}(_react["default"].Component);
+exports["default"] = DynamicOptionList;

package/lib/fieldset/FieldSet.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = FieldSetBase;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _componentHeader = _interopRequireDefault(require("../form-elements/component-header"));
+var _componentLabel = _interopRequireDefault(require("../form-elements/component-label"));
+var _dustbin = _interopRequireDefault(require("../multi-column/dustbin"));
+var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
+var _excluded = ["data", "class_name"];
+/* eslint-disable camelcase */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var accepts = [_ItemTypes["default"].BOX, _ItemTypes["default"].CARD];
+function FieldSetBase(props) {
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    childData = _useState2[0],
+    setChildData = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    childItems = _useState4[0],
+    setChildItems = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var data = props.data,
+      class_name = props.class_name,
+      rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    setChildData(data);
+    var count = 1;
+    createChild(count, data);
+  }, [props]);
+  var addNewChild = function addNewChild() {
+    var data = props.data;
+    var colCount = data.childItems.length + 1;
+    var oldChilds = data.childItems;
+    data.childItems = Array.from({
+      length: colCount
+    }, function (v, i) {
+      return oldChilds[i] ? oldChilds[i] : null;
+    });
+    setChildItems(data.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, data) {
+    var colCount = count;
+    var className = data.class_name || "col-md-12";
+    if (!data.childItems) {
+      // eslint-disable-next-line no-param-reassign
+      data.childItems = Array.from({
+        length: colCount
+      }, function (v, i) {
+        return null;
+      });
+      data.isContainer = true;
+    }
+    setChildItems(data.childItems);
+  };
+  var controls = props.controls,
+    editModeOn = props.editModeOn,
+    getDataById = props.getDataById,
+    setAsChild = props.setAsChild,
+    removeChild = props.removeChild,
+    seq = props.seq,
+    className = props.className,
+    index = props.index;
+  var pageBreakBefore = childData.pageBreakBefore;
+  var baseClasses = "SortableItem rfb-item";
+  if (pageBreakBefore) {
+    baseClasses += " alwaysbreak";
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread({}, props.style),
+    className: baseClasses
+  }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], (0, _extends2["default"])({}, props, {
+    isFieldSet: true
+  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], props), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "row"
+  }, childItems === null || childItems === void 0 ? void 0 : childItems.map(function (x, i) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: "".concat(i, "_").concat(x || "_"),
+      className: "col-md-12"
+    }, controls ? controls[i] : /*#__PURE__*/_react["default"].createElement(_dustbin["default"], {
+      style: {
+        width: "100%"
+      },
+      data: childData,
+      accepts: accepts,
+      items: childItems,
+      key: i,
+      col: i,
+      onDropSuccess: function onDropSuccess() {
+        return _onDropSuccess(i);
+      },
+      parentIndex: index,
+      editModeOn: editModeOn,
+      _onDestroy: function _onDestroy() {
+        return removeChild(childData, i);
+      },
+      getDataById: getDataById,
+      setAsChild: setAsChild,
+      seq: seq,
+      rowNo: i
+    }));
+  }))));
+}

package/lib/fieldset/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FieldSet", {
+  enumerable: true,
+  get: function get() {
+    return _FieldSet["default"];
+  }
+});
+var _FieldSet = _interopRequireDefault(require("./FieldSet"));

package/lib/form-dynamic-edit.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var FormElementsEditor = function FormElementsEditor(props) {
+  var _React$useState = _react["default"].useState(null),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    dynamic = _React$useState2[0],
+    setDynamic = _React$useState2[1];
+  _react["default"].useEffect(function () {
+    var loadDynamic = /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var x;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return Promise.resolve().then(function () {
+                  return _interopRequireWildcard(require('./form-elements-edit'));
+                });
+              case 2:
+                x = _context.sent;
+                setDynamic(function () {
+                  return x["default"];
+                });
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+      return function loadDynamic() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    loadDynamic();
+  }, []);
+  if (!dynamic) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, "Loading...");
+  }
+  var Component = dynamic;
+  return /*#__PURE__*/_react["default"].createElement(Component, props);
+};
+var _default = FormElementsEditor;
+exports["default"] = _default;

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

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDnd = require("react-dnd");
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
+var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var style = {
+  // display: 'inline-block',
+  // border: '1px dashed gray',
+  // padding: '0.5rem 1rem',
+  // backgroundColor: 'white',
+  cursor: 'move'
+};
+var dragHandleSource = {
+  beginDrag: function beginDrag(props) {
+    var data = props.data,
+      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,
+      onDestroy: onDestroy,
+      setAsChild: setAsChild,
+      getDataById: getDataById,
+      data: data
+    };
+  }
+};
+var DragHandle = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2["default"])(DragHandle, _PureComponent);
+  var _super = _createSuper(DragHandle);
+  function DragHandle() {
+    (0, _classCallCheck2["default"])(this, DragHandle);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2["default"])(DragHandle, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var connectDragPreview = this.props.connectDragPreview;
+      if (connectDragPreview) {
+        // Use empty image as a drag preview so browsers don't draw it
+        // and we can draw whatever we want on the custom drag layer instead.
+        connectDragPreview((0, _reactDndHtml5Backend.getEmptyImage)(), {
+          // IE fallback: specify that we'd rather screenshot the node
+          // when it already knows it's being dragged so we can hide it with CSS.
+          captureDraggingState: true
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var connectDragSource = this.props.connectDragSource;
+      return connectDragSource(/*#__PURE__*/_react["default"].createElement("div", {
+        className: "btn is-isolated",
+        style: style
+      }, /*#__PURE__*/_react["default"].createElement("i", {
+        className: "is-isolated fas fa-grip-vertical"
+      })));
+    }
+  }]);
+  return DragHandle;
+}(_react.PureComponent);
+var _default = (0, _reactDnd.DragSource)(_ItemTypes["default"].BOX, dragHandleSource, function (connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging()
+  };
+})(DragHandle);
+exports["default"] = _default;

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDnd = require("react-dnd");
+var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
+var _componentDragPreview = require("./component-drag-preview");
+var layerStyles = {
+  position: 'fixed',
+  pointerEvents: 'none',
+  zIndex: 100,
+  left: 0,
+  top: 0,
+  width: '100%',
+  height: '100%'
+};
+function getItemStyles(props) {
+  var initialOffset = props.initialOffset,
+    currentOffset = props.currentOffset;
+  if (!initialOffset || !currentOffset) {
+    return {
+      display: 'none'
+    };
+  }
+  var x = currentOffset.x,
+    y = currentOffset.y;
+  var transform = "translate(".concat(x, "px, ").concat(y, "px)");
+  return {
+    transform: transform,
+    WebkitTransform: transform
+  };
+}
+var CustomDragLayer = function CustomDragLayer(props) {
+  var item = props.item,
+    itemType = props.itemType,
+    isDragging = props.isDragging;
+  function renderItem() {
+    switch (itemType) {
+      case _ItemTypes["default"].BOX:
+        return /*#__PURE__*/_react["default"].createElement(_componentDragPreview.BoxDragPreview, {
+          item: item
+        });
+      default:
+        return null;
+    }
+  }
+  if (!isDragging) {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: layerStyles
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: getItemStyles(props)
+  }, renderItem()));
+};
+var _default = (0, _reactDnd.DragLayer)(function (monitor) {
+  return {
+    item: monitor.getItem(),
+    itemType: monitor.getItemType(),
+    initialOffset: monitor.getInitialSourceClientOffset(),
+    currentOffset: monitor.getSourceClientOffset(),
+    isDragging: monitor.isDragging()
+  };
+})(CustomDragLayer);
+exports["default"] = _default;