react-survey-builder 1.0.1

package/lib/sortable-element.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = _default;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactDom = require("react-dom");
+var _reactDnd = require("react-dnd");
+var _ItemTypes = _interopRequireDefault(require("./ItemTypes"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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); }; }
+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 = {
+  border: '1px dashed gray',
+  padding: '0.5rem 1rem',
+  marginBottom: '.5rem',
+  backgroundColor: 'white',
+  cursor: 'pointer'
+};
+var cardSource = {
+  beginDrag: function beginDrag(props) {
+    return {
+      itemType: _ItemTypes["default"].CARD,
+      id: props.id,
+      index: props.index
+    };
+  }
+};
+var cardTarget = {
+  drop: function drop(props, monitor, component) {
+    if (!component) {
+      return;
+    }
+    var item = monitor.getItem();
+    var hoverIndex = props.index;
+    var dragIndex = item.index;
+    if (props.data && props.data.isContainer || item.itemType === _ItemTypes["default"].CARD) {
+      // console.log('cardTarget -  Drop', item.itemType);
+      return;
+    }
+    if (item.data && typeof item.setAsChild === 'function') {
+      // console.log('BOX', item);
+      if (dragIndex === -1) {
+        props.insertCard(item, hoverIndex, item.id);
+      }
+    }
+  },
+  hover: function hover(props, monitor, component) {
+    var _props$data, _item$data;
+    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;
+    var dragIndex = item.index;
+    var hoverIndex = props.index;
+
+    // Don't replace items with themselves
+    if (dragIndex === hoverIndex) {
+      return;
+    }
+    if (dragIndex === -1) {
+      if (props.data && props.data.isContainer) {
+        return;
+      }
+      // console.log('CARD', item);
+      item.index = hoverIndex;
+      props.insertCard(item.onCreate(item.data), hoverIndex);
+    }
+
+    // Determine rectangle on screen
+    var hoverBoundingRect = (0, _reactDom.findDOMNode)(component).getBoundingClientRect();
+
+    // Get vertical middle
+    var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+    // Determine mouse position
+    var clientOffset = monitor.getClientOffset();
+
+    // Get pixels to the top
+    var hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+    // Only perform the move when the mouse has crossed half of the items height
+    // When dragging downwards, only move when the cursor is below 50%
+    // When dragging upwards, only move when the cursor is above 50%
+
+    // Dragging downwards
+    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+      return;
+    }
+
+    // Dragging upwards
+    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+      return;
+    }
+
+    // Time to actually perform the action
+    props.moveCard(dragIndex, hoverIndex);
+
+    // Note: we're mutating the monitor item here!
+    // Generally it's better to avoid mutations,
+    // but it's good here for the sake of performance
+    // to avoid expensive index searches.
+
+    // if (item.itemType == ItemTypes.BOX) item.cardIndex = hoverIndex;
+    // else
+    item.index = hoverIndex;
+  }
+};
+
+// eslint-disable-next-line no-unused-vars
+function _default(ComposedComponent) {
+  var Card = /*#__PURE__*/function (_Component) {
+    (0, _inherits2["default"])(Card, _Component);
+    var _super = _createSuper(Card);
+    function Card() {
+      (0, _classCallCheck2["default"])(this, Card);
+      return _super.apply(this, arguments);
+    }
+    (0, _createClass2["default"])(Card, [{
+      key: "render",
+      value: function render() {
+        var _this$props = this.props,
+          isDragging = _this$props.isDragging,
+          connectDragPreview = _this$props.connectDragPreview,
+          connectDropTarget = _this$props.connectDropTarget;
+        var opacity = isDragging ? 0 : 1;
+        return connectDragPreview(connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(ComposedComponent, (0, _extends2["default"])({}, this.props, {
+          style: _objectSpread(_objectSpread({}, style), {}, {
+            opacity: opacity
+          })
+        })))));
+      }
+    }]);
+    return Card;
+  }(_react.Component);
+  (0, _defineProperty2["default"])(Card, "propTypes", {
+    connectDragSource: _propTypes["default"].func,
+    connectDragPreview: _propTypes["default"].func,
+    connectDropTarget: _propTypes["default"].func,
+    index: _propTypes["default"].number.isRequired,
+    isDragging: _propTypes["default"].bool,
+    id: _propTypes["default"].any.isRequired,
+    // text: PropTypes.string.isRequired,
+    moveCard: _propTypes["default"].func.isRequired,
+    seq: _propTypes["default"].number
+  });
+  (0, _defineProperty2["default"])(Card, "defaultProps", {
+    seq: -1
+  });
+  var x = (0, _reactDnd.DropTarget)([_ItemTypes["default"].CARD, _ItemTypes["default"].BOX], cardTarget, function (connect) {
+    return {
+      connectDropTarget: connect.dropTarget()
+    };
+  })(Card);
+  return (0, _reactDnd.DragSource)(_ItemTypes["default"].CARD, cardSource, function (connect, monitor) {
+    return {
+      connectDragSource: connect.dragSource(),
+      connectDragPreview: connect.dragPreview(),
+      isDragging: monitor.isDragging()
+    };
+  })(x);
+}

package/lib/sortable-form-elements.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _sortableElement = _interopRequireDefault(require("./sortable-element"));
+var _surveyPlaceHolder = _interopRequireDefault(require("./survey-place-holder"));
+var _surveyElements = _interopRequireDefault(require("./survey-elements"));
+var _multiColumn = require("./multi-column");
+var _fieldset = require("./fieldset");
+var _customElement = _interopRequireDefault(require("./survey-elements/custom-element"));
+var Header = _surveyElements["default"].Header,
+  Paragraph = _surveyElements["default"].Paragraph,
+  Label = _surveyElements["default"].Label,
+  LineBreak = _surveyElements["default"].LineBreak,
+  TextInput = _surveyElements["default"].TextInput,
+  EmailInput = _surveyElements["default"].EmailInput,
+  PhoneNumber = _surveyElements["default"].PhoneNumber,
+  NumberInput = _surveyElements["default"].NumberInput,
+  TextArea = _surveyElements["default"].TextArea,
+  Dropdown = _surveyElements["default"].Dropdown,
+  Checkboxes = _surveyElements["default"].Checkboxes,
+  DatePicker = _surveyElements["default"].DatePicker,
+  RadioButtons = _surveyElements["default"].RadioButtons,
+  Image = _surveyElements["default"].Image,
+  Rating = _surveyElements["default"].Rating,
+  Tags = _surveyElements["default"].Tags,
+  Signature = _surveyElements["default"].Signature,
+  HyperLink = _surveyElements["default"].HyperLink,
+  Download = _surveyElements["default"].Download,
+  Camera = _surveyElements["default"].Camera,
+  Range = _surveyElements["default"].Range,
+  FileUpload = _surveyElements["default"].FileUpload,
+  Checkbox = _surveyElements["default"].Checkbox;
+var SurveyElements = {};
+SurveyElements.Header = (0, _sortableElement["default"])(Header);
+SurveyElements.Paragraph = (0, _sortableElement["default"])(Paragraph);
+SurveyElements.Label = (0, _sortableElement["default"])(Label);
+SurveyElements.LineBreak = (0, _sortableElement["default"])(LineBreak);
+SurveyElements.TextInput = (0, _sortableElement["default"])(TextInput);
+SurveyElements.EmailInput = (0, _sortableElement["default"])(EmailInput);
+SurveyElements.PhoneNumber = (0, _sortableElement["default"])(PhoneNumber);
+SurveyElements.NumberInput = (0, _sortableElement["default"])(NumberInput);
+SurveyElements.TextArea = (0, _sortableElement["default"])(TextArea);
+SurveyElements.Dropdown = (0, _sortableElement["default"])(Dropdown);
+SurveyElements.Signature = (0, _sortableElement["default"])(Signature);
+SurveyElements.Checkboxes = (0, _sortableElement["default"])(Checkboxes);
+SurveyElements.Checkbox = (0, _sortableElement["default"])(Checkbox);
+SurveyElements.DatePicker = (0, _sortableElement["default"])(DatePicker);
+SurveyElements.RadioButtons = (0, _sortableElement["default"])(RadioButtons);
+SurveyElements.Image = (0, _sortableElement["default"])(Image);
+SurveyElements.Rating = (0, _sortableElement["default"])(Rating);
+SurveyElements.Tags = (0, _sortableElement["default"])(Tags);
+SurveyElements.HyperLink = (0, _sortableElement["default"])(HyperLink);
+SurveyElements.Download = (0, _sortableElement["default"])(Download);
+SurveyElements.Camera = (0, _sortableElement["default"])(Camera);
+SurveyElements.FileUpload = (0, _sortableElement["default"])(FileUpload);
+SurveyElements.Range = (0, _sortableElement["default"])(Range);
+SurveyElements.PlaceHolder = (0, _sortableElement["default"])(_surveyPlaceHolder["default"]);
+SurveyElements.FieldSet = (0, _sortableElement["default"])(_fieldset.FieldSet);
+SurveyElements.TwoColumnRow = (0, _sortableElement["default"])(_multiColumn.TwoColumnRow);
+SurveyElements.ThreeColumnRow = (0, _sortableElement["default"])(_multiColumn.ThreeColumnRow);
+SurveyElements.MultiColumnRow = (0, _sortableElement["default"])(_multiColumn.MultiColumnRow);
+SurveyElements.CustomElement = (0, _sortableElement["default"])(_customElement["default"]);
+var _default = exports["default"] = SurveyElements;

package/lib/stores/registry.js

@@ -0,0 +1,42 @@
+"use strict";
+
+/* eslint-disable no-use-before-define */
+function regg() {
+  var registry = {};
+  var self = {
+    register: register,
+    list: list,
+    get: get
+  };
+
+  /**
+   * Registers a entry and make it read only
+   * @param {String} name To get the entry by
+   * @param {Object} entry What you want to register
+   */
+  function register(name, entry) {
+    if (!name) {
+      throw new Error('You must provide a valid name for this entry.');
+    }
+    if (registry[name] !== undefined) {
+      throw new Error("'".concat(name, "' already registered"));
+    }
+    if (!entry) {
+      throw new Error("You must provide something to register as '".concat(name, "'"));
+    }
+    registry[name] = entry;
+    return self;
+  }
+  function get(name) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!registry.hasOwnProperty(name)) {
+      console.error("No such entry '".concat(name, "'"));
+    }
+    return registry[name];
+  }
+  function list() {
+    return Object.keys(registry);
+  }
+  return self;
+}
+module.exports = regg();

package/lib/stores/requests.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.get = get;
+exports.post = post;
+var _isomorphicFetch = _interopRequireDefault(require("isomorphic-fetch"));
+var headers = {
+  Accept: 'application/json',
+  'Content-Type': 'application/json; charset=utf-8',
+  OPTIONS: ''
+};
+function post(url, data) {
+  return (0, _isomorphicFetch["default"])(url, {
+    method: 'POST',
+    headers: headers,
+    body: JSON.stringify(data)
+  }).then(function (response) {
+    return response;
+  });
+}
+function get(url) {
+  return (0, _isomorphicFetch["default"])(url, {
+    method: 'GET',
+    headers: headers
+  }).then(function (response) {
+    return response.json();
+  });
+}

package/lib/stores/store.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _beedle = _interopRequireDefault(require("beedle"));
+var _requests = require("./requests");
+var _saveUrl;
+var _onPost;
+var _onLoad;
+var store = new _beedle["default"]({
+  actions: {
+    setData: function setData(context, data, saveData) {
+      context.commit('setData', data);
+      if (saveData) this.save(data);
+    },
+    load: function load(context, _ref) {
+      var _this = this;
+      var loadUrl = _ref.loadUrl,
+        saveUrl = _ref.saveUrl,
+        data = _ref.data,
+        saveAlways = _ref.saveAlways;
+      _saveUrl = saveUrl;
+      var saveA = saveAlways || saveAlways === undefined;
+      context.commit('setSaveAlways', saveA);
+      if (_onLoad) {
+        _onLoad().then(function (x) {
+          if (data && data.length > 0 && x.length === 0) {
+            data.forEach(function (y) {
+              return x.push(y);
+            });
+          }
+          _this.setData(context, x);
+        });
+      } else if (loadUrl) {
+        (0, _requests.get)(loadUrl).then(function (x) {
+          if (data && data.length > 0 && x.length === 0) {
+            data.forEach(function (y) {
+              return x.push(y);
+            });
+          }
+          _this.setData(context, x);
+        });
+      } else {
+        this.setData(context, data);
+      }
+    },
+    create: function create(context, element) {
+      var _context$state = context.state,
+        data = _context$state.data,
+        saveAlways = _context$state.saveAlways;
+      data.push(element);
+      this.setData(context, data, saveAlways);
+    },
+    "delete": function _delete(context, element) {
+      var _context$state2 = context.state,
+        data = _context$state2.data,
+        saveAlways = _context$state2.saveAlways;
+      data.splice(data.indexOf(element), 1);
+      this.setData(context, data, saveAlways);
+    },
+    deleteLastItem: function deleteLastItem(context) {
+      var lastItem = context.state.lastItem;
+      if (lastItem) {
+        this["delete"](context, lastItem);
+        context.commit('setLastItem', null);
+      }
+    },
+    resetLastItem: function resetLastItem(context) {
+      var lastItem = context.state.lastItem;
+      if (lastItem) {
+        context.commit('setLastItem', null);
+        // console.log('resetLastItem');
+      }
+    },
+    post: function post(context) {
+      var data = context.state.data;
+      this.setData(context, data, true);
+    },
+    updateOrder: function updateOrder(context, elements) {
+      var saveAlways = context.state.saveAlways;
+      var newData = elements.filter(function (x) {
+        return x && !x.parentId;
+      });
+      elements.filter(function (x) {
+        return x && x.parentId;
+      }).forEach(function (x) {
+        return newData.push(x);
+      });
+      this.setData(context, newData, saveAlways);
+    },
+    insertItem: function insertItem(context, item) {
+      // console.log('insertItem', item);
+      context.commit('setLastItem', item.isContainer ? null : item);
+    },
+    save: function save(data) {
+      if (_onPost) {
+        _onPost({
+          task_data: data
+        });
+      } else if (_saveUrl) {
+        (0, _requests.post)(_saveUrl, {
+          task_data: data
+        });
+      }
+    }
+  },
+  mutations: {
+    setData: function setData(state, payload) {
+      // eslint-disable-next-line no-param-reassign
+      state.data = payload;
+      return state;
+    },
+    setSaveAlways: function setSaveAlways(state, payload) {
+      // eslint-disable-next-line no-param-reassign
+      state.saveAlways = payload;
+      return state;
+    },
+    setLastItem: function setLastItem(state, payload) {
+      // eslint-disable-next-line no-param-reassign
+      state.lastItem = payload;
+      // console.log('setLastItem', payload);
+      return state;
+    }
+  },
+  initialState: {
+    data: [],
+    saveAlways: true,
+    lastItem: null
+  }
+});
+store.setExternalHandler = function (onLoad, onPost) {
+  _onLoad = onLoad;
+  _onPost = onPost;
+};
+var _default = exports["default"] = store;

package/lib/survey-dynamic-edit.js

@@ -0,0 +1,54 @@
+"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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var SurveyElementsEditor = function SurveyElementsEditor(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('./survey-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 = exports["default"] = SurveyElementsEditor;

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

@@ -0,0 +1,90 @@
+"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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 = exports["default"] = (0, _reactDnd.DragSource)(_ItemTypes["default"].BOX, dragHandleSource, function (connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging()
+  };
+})(DragHandle);

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

@@ -0,0 +1,68 @@
+"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 = exports["default"] = (0, _reactDnd.DragLayer)(function (monitor) {
+  return {
+    item: monitor.getItem(),
+    itemType: monitor.getItemType(),
+    initialOffset: monitor.getInitialSourceClientOffset(),
+    currentOffset: monitor.getSourceClientOffset(),
+    isDragging: monitor.isDragging()
+  };
+})(CustomDragLayer);