@goldenpine/react-form-builder2 0.18.4-patch.1 → 0.20.3-build.1

package/lib/form.js

@@ -14,7 +14,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _fbemitter = require("fbemitter");
 var _reactIntl = require("react-intl");
 var _formValidator = _interopRequireDefault(require("./form-validator"));
@@ -24,7 +23,7 @@ var _fieldset = require("./fieldset");
 var _customElement = _interopRequireDefault(require("./form-elements/custom-element"));
 var _registry = _interopRequireDefault(require("./stores/registry"));
 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; } } /**
+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; } } /* eslint-disable arrow-body-style */ /* eslint-disable camelcase */ /**
   * <Form />
   */
 var Image = _formElements["default"].Image,
@@ -134,7 +133,7 @@ var ReactForm = /*#__PURE__*/function (_React$Component) {
       } else if (item.element === 'FileUpload') {
         $item.value = ref.state.fileUpload;
       } else if (ref && ref.inputField && ref.inputField.current) {
-        $item = _reactDom["default"].findDOMNode(ref.inputField.current);
+        $item = ref.inputField.current;
         if (trimValue && $item && typeof $item.value === 'string') {
           $item.value = $item.value.trim();
         }
@@ -149,7 +148,7 @@ var ReactForm = /*#__PURE__*/function (_React$Component) {
         var ref = this.inputs[item.field_name];
         if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
           item.options.forEach(function (option) {
-            var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
+            var $option = ref.options["child_ref_".concat(option.key)];
             if (option.hasOwnProperty('correct') && !$option.checked || !option.hasOwnProperty('correct') && $option.checked) {
               incorrect = true;
             }
@@ -176,7 +175,7 @@ var ReactForm = /*#__PURE__*/function (_React$Component) {
         if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
           var checked_options = 0;
           item.options.forEach(function (option) {
-            var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
+            var $option = ref.options["child_ref_".concat(option.key)];
             if ($option.checked) {
               checked_options += 1;
             }
@@ -212,7 +211,7 @@ var ReactForm = /*#__PURE__*/function (_React$Component) {
       if (item.element === 'Checkboxes' || item.element === 'RadioButtons') {
         var checked_options = [];
         item.options.forEach(function (option) {
-          var $option = _reactDom["default"].findDOMNode(ref.options["child_ref_".concat(option.key)]);
+          var $option = ref.options["child_ref_".concat(option.key)];
           if ($option.checked) {
             checked_options.push(_this3._getOptionKeyValue(option));
           }
@@ -245,7 +244,7 @@ var ReactForm = /*#__PURE__*/function (_React$Component) {
       if ($canvas_sig) {
         var base64 = $canvas_sig.toDataURL().replace('data:image/png;base64,', '');
         var isEmpty = $canvas_sig.isEmpty();
-        var $input_sig = _reactDom["default"].findDOMNode(ref.inputField.current);
+        var $input_sig = ref.inputField.current;
         if (isEmpty) {
           $input_sig.value = '';
         } else {
@@ -271,14 +270,14 @@ var ReactForm = /*#__PURE__*/function (_React$Component) {
           var data = this._collectFormData(this.props.data, true);
           onSubmit(data);
         } else {
-          var $form = _reactDom["default"].findDOMNode(this.form);
+          var $form = this.form;
           $form.submit();
         }
       }
     }
   }, {
     key: "handleBlur",
-    value: function handleBlur(event) {
+    value: function handleBlur() {
       // Call submit function on blur
       if (this.props.onBlur) {
         var onBlur = this.props.onBlur;
@@ -288,7 +287,7 @@ var ReactForm = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "handleChange",
-    value: function handleChange(event) {
+    value: function handleChange() {
       // Call submit function on change
       if (this.props.onChange) {
         var onChange = this.props.onChange;

package/lib/multi-column/dustbin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -15,7 +16,7 @@ var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
 var _customElement = _interopRequireDefault(require("../form-elements/custom-element"));
 var _registry = _interopRequireDefault(require("../stores/registry"));
 var _store = _interopRequireDefault(require("../stores/store"));
-var _excluded = ["onDropSuccess", "seq", "draggedItem", "parentIndex", "canDrop", "isOver", "isOverCurrent", "connectDropTarget", "items", "col", "getDataById"];
+var _excluded = ["onDropSuccess", "seq", "parentIndex", "items", "col", "getDataById", "accepts", "data", "setAsChild"];
 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 getCustomElement(item, props) {
@@ -67,90 +68,76 @@ function isContainer(item) {
   }
   return false;
 }
-var Dustbin = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+var Dustbin = function Dustbin(_ref) {
+  var _draggedItem$data;
   var onDropSuccess = _ref.onDropSuccess,
     seq = _ref.seq,
-    draggedItem = _ref.draggedItem,
     parentIndex = _ref.parentIndex,
-    canDrop = _ref.canDrop,
-    isOver = _ref.isOver,
-    isOverCurrent = _ref.isOverCurrent,
-    connectDropTarget = _ref.connectDropTarget,
     items = _ref.items,
     col = _ref.col,
     getDataById = _ref.getDataById,
+    accepts = _ref.accepts,
+    data = _ref.data,
+    setAsChild = _ref.setAsChild,
     rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var dropRef = (0, _react.useRef)(null);
   var item = getDataById(items[col]);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      onDrop: function onDrop(dropped) {
-        console.log("dropped ites");
-        var data = dropped.data;
-        if (data) {
-          onDropSuccess && onDropSuccess();
-          _store["default"].dispatch('deleteLastItem');
+  var _useDrop = (0, _reactDnd.useDrop)({
+      accept: accepts,
+      collect: function collect(monitor) {
+        return {
+          isOver: monitor.isOver(),
+          canDrop: monitor.canDrop(),
+          draggedItem: monitor.getItem()
+        };
+      },
+      drop: function drop(droppedItem) {
+        // Do nothing when moving the box inside the same column
+        if (col === droppedItem.col && items[col] === droppedItem.id) return;
+
+        // Do not allow replace component other than both items in same multi column row
+        if (droppedItem.col === undefined && items[col]) {
+          _store["default"].dispatch('resetLastItem');
+          return;
+        }
+        if (!isContainer(droppedItem)) {
+          console.log("Item dropped", droppedItem);
+          var isBusy = !!items[col];
+          if (droppedItem.data) {
+            var isNew = !droppedItem.data.id;
+            var itemData = isNew ? droppedItem.onCreate(droppedItem.data) : droppedItem.data;
+            if (typeof setAsChild === 'function') {
+              setAsChild(data, itemData, col, isBusy);
+            }
+            onDropSuccess && onDropSuccess();
+            _store["default"].dispatch('deleteLastItem');
+          }
         }
+      },
+      canDrop: function canDrop(item) {
+        // Add any custom logic for when an item can be dropped
+        return true;
       }
-    };
-  }, []);
+    }),
+    _useDrop2 = (0, _slicedToArray2["default"])(_useDrop, 2),
+    _useDrop2$ = _useDrop2[0],
+    isOver = _useDrop2$.isOver,
+    canDrop = _useDrop2$.canDrop,
+    draggedItem = _useDrop2$.draggedItem,
+    drop = _useDrop2[1];
   var element = getElement(item, rest);
   var sameCard = draggedItem ? draggedItem.index === parentIndex : false;
-
-  // console.log('dragIndex:',draggedItem?.index)
-  // console.log('HoverIndex:',parentIndex)
-  // console.log('SameCard:',sameCard)
-
   var backgroundColor = 'rgba(0, 0, 0, .03)';
-  if (!sameCard && isOver && canDrop && !draggedItem.data.isContainer) {
+  if (!sameCard && isOver && canDrop && draggedItem && !((_draggedItem$data = draggedItem.data) !== null && _draggedItem$data !== void 0 && _draggedItem$data.isContainer)) {
     backgroundColor = '#F7F589';
   }
 
-  // console.log('sameCard, canDrop', sameCard, canDrop);
-  return connectDropTarget(/*#__PURE__*/_react["default"].createElement("div", {
-    style: !sameCard ? getStyle(backgroundColor) : getStyle('rgba(0, 0, 0, .03')
-  }, !element && /*#__PURE__*/_react["default"].createElement("span", null, "Drop your element here "), element));
-});
-var _default = (0, _reactDnd.DropTarget)(function (props) {
-  return props.accepts;
-}, {
-  drop: function drop(props, monitor, component) {
-    if (!component) {
-      return;
-    }
-
-    // //Do nothing whith busy dustbin
-    // if(props.items[props.col]) return;
-    // Allow swap column if target and source are in same multi column row
-    var isBusy = !!props.items[props.col];
-    var item = monitor.getItem();
-
-    // Do nothing when moving the box inside the same column
-    if (props.col === item.col && props.items[props.col] === item.id) return;
-
-    // Do not allow replace component other than both items in same multi column row
-    if (item.col === undefined && props.items[props.col]) {
-      _store["default"].dispatch('resetLastItem');
-      return;
-    }
-    if (!isContainer(item)) {
-      component.onDrop(item);
-      console.log("calling on Drop from 137", item);
-      if (item.data && typeof props.setAsChild === 'function') {
-        var isNew = !item.data.id;
-        var data = isNew ? item.onCreate(item.data) : item.data;
-        props.setAsChild(props.data, data, props.col, isBusy);
-      }
-    }
-  }
-}, function (connect, monitor) {
-  return {
-    connectDropTarget: connect.dropTarget(),
-    draggedItem: monitor.getItem() ? monitor.getItem() : null,
-    isOver: monitor.isOver(),
-    isOverCurrent: monitor.isOver({
-      shallow: true
-    }),
-    canDrop: monitor.canDrop()
-  };
-})(Dustbin);
+  // Connect the drop ref to the DOM element
+  drop(dropRef);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: dropRef,
+    style: !sameCard ? getStyle(backgroundColor) : getStyle('rgba(0, 0, 0, .03)')
+  }, !element && /*#__PURE__*/_react["default"].createElement("span", null, "Drop your element here"), element);
+};
+var _default = Dustbin;
 exports["default"] = _default;

package/lib/sortable-element.js

@@ -5,25 +5,20 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = _default;
+exports["default"] = createDraggableCard;
 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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"));
+var _excluded = ["index", "id", "moveCard", "seq"];
 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; }
-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',
@@ -31,147 +26,179 @@ var style = {
   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;
+
+// Modern approach using a custom hook for DnD logic
+var useDragAndDrop = function useDragAndDrop(props) {
+  var _ref = (0, _react.useRef)(null);
+
+  // Setup drag
+  var _useDrag = (0, _reactDnd.useDrag)({
+      type: _ItemTypes["default"].CARD,
+      item: function item() {
+        return {
+          itemType: _ItemTypes["default"].CARD,
+          id: props.id,
+          index: props.index
+        };
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
       }
-      // console.log('CARD', item);
-      item.index = hoverIndex;
-      props.insertCard(item.onCreate(item.data), hoverIndex);
-    }
+    }),
+    _useDrag2 = (0, _slicedToArray2["default"])(_useDrag, 3),
+    isDragging = _useDrag2[0].isDragging,
+    drag = _useDrag2[1],
+    preview = _useDrag2[2];
 
-    // Determine rectangle on screen
-    var hoverBoundingRect = (0, _reactDom.findDOMNode)(component).getBoundingClientRect();
+  // Setup drop
+  var _useDrop = (0, _reactDnd.useDrop)({
+      accept: [_ItemTypes["default"].CARD, _ItemTypes["default"].BOX],
+      drop: function drop(item) {
+        // Don't handle drops if we're a container and this is a card drop
+        if (props.data && props.data.isContainer || item.itemType === _ItemTypes["default"].CARD) {
+          return;
+        }
+        var hoverIndex = props.index;
+        var dragIndex = item.index;
 
-    // Get vertical middle
-    var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+        // Handle box drops
+        if (item.data && typeof item.setAsChild === 'function') {
+          if (dragIndex === -1) {
+            props.insertCard(item, hoverIndex, item.id);
+          }
+        }
+      },
+      hover: function hover(item, monitor) {
+        var _props$data, _item$data;
+        // Don't replace items being dragged from box with index -1
+        if (item.itemType === _ItemTypes["default"].BOX && item.index === -1) return;
 
-    // Determine mouse position
-    var clientOffset = monitor.getClientOffset();
+        // 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;
 
-    // Get pixels to the top
-    var hoverClientY = clientOffset.y - hoverBoundingRect.top;
+        // Don't replace items with themselves
+        if (dragIndex === hoverIndex) {
+          return;
+        }
 
-    // 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%
+        // Handle new items being created
+        if (dragIndex === -1) {
+          if (props.data && props.data.isContainer) {
+            return;
+          }
+          item.index = hoverIndex;
+          props.insertCard(item.onCreate(item.data), hoverIndex);
+          return;
+        }
 
-    // Dragging downwards
-    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-      return;
-    }
+        // Skip if no ref available
+        if (!_ref.current) {
+          return;
+        }
 
-    // Dragging upwards
-    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-      return;
-    }
+        // Determine rectangle on screen
+        var hoverBoundingRect = _ref.current.getBoundingClientRect();
 
-    // Time to actually perform the action
-    props.moveCard(dragIndex, hoverIndex);
+        // Get vertical middle
+        var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
 
-    // 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.
+        // Determine mouse position
+        var clientOffset = monitor.getClientOffset();
+        if (!clientOffset) return;
 
-    // if (item.itemType == ItemTypes.BOX) item.cardIndex = hoverIndex;
-    // else
-    item.index = hoverIndex;
-  }
-};
+        // 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);
 
-// 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
-          })
-        })))));
+        // 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.
+        item.index = hoverIndex;
       }
-    }]);
-    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);
+    }),
+    _useDrop2 = (0, _slicedToArray2["default"])(_useDrop, 2),
+    drop = _useDrop2[1];
+
+  // Connect the drag and drop refs to the same element
+  return {
+    ref: function ref(node) {
+      _ref.current = node;
+      drop(node);
+      drag(node);
+    },
+    previewRef: preview,
+    isDragging: isDragging
+  };
+};
+
+// Modern approach using a functional component wrapper instead of HOC
+var DraggableCard = function DraggableCard(props) {
+  var index = props.index,
+    id = props.id,
+    moveCard = props.moveCard,
+    _props$seq = props.seq,
+    seq = _props$seq === void 0 ? -1 : _props$seq,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useDragAndDrop = useDragAndDrop(props),
+    ref = _useDragAndDrop.ref,
+    previewRef = _useDragAndDrop.previewRef,
+    isDragging = _useDragAndDrop.isDragging;
+  var opacity = isDragging ? 0 : 1;
+
+  // Use the ComposedComponent passed in props
+  var ComposedComponent = props.component;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: previewRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/_react["default"].createElement(ComposedComponent, (0, _extends2["default"])({}, restProps, {
+    index: index,
+    id: id,
+    moveCard: moveCard,
+    seq: seq,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      opacity: opacity
+    })
+  }))));
+};
+DraggableCard.propTypes = {
+  component: _propTypes["default"].elementType.isRequired,
+  index: _propTypes["default"].number.isRequired,
+  isDragging: _propTypes["default"].bool,
+  id: _propTypes["default"].any.isRequired,
+  moveCard: _propTypes["default"].func.isRequired,
+  seq: _propTypes["default"].number
+};
+DraggableCard.defaultProps = {
+  seq: -1
+};
+
+// This replaces the HOC pattern with a component that takes the component as a prop
+function createDraggableCard(ComposedComponent) {
+  return function (props) {
+    return /*#__PURE__*/_react["default"].createElement(DraggableCard, (0, _extends2["default"])({}, props, {
+      component: ComposedComponent
+    }));
+  };
 }