Sortable refactor

packages/xpub-faraday/app/component-wizard/components/SortableList.js

@@ -10,9 +10,9 @@ const itemSource = {
 }
 
 const itemTarget = {
-  hover(props, monitor, component) {
+  hover({ moveItem, index }, monitor, component) {
     const dragIndex = monitor.getItem().index
-    const hoverIndex = props.index
+    const hoverIndex = index
 
     // Don't replace items with themselves
     if (dragIndex === hoverIndex) {
@@ -32,7 +32,7 @@ const itemTarget = {
       return
     }
 
-    props.moveItem(dragIndex, hoverIndex)
+    moveItem(dragIndex, hoverIndex)
     monitor.getItem().index = hoverIndex
   },
 }
@@ -43,8 +43,9 @@ const Item = ({ connectDragSource, connectDropTarget, listItem, ...rest }) =>
   )
 
 const DecoratedItem = compose(
-  DropTarget('item', itemTarget, connect => ({
+  DropTarget('item', itemTarget, (connect, monitor) => ({
     connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver(),
   })),
   DragSource('item', itemSource, (connect, monitor) => ({
     connectDragSource: connect.dragSource(),
@@ -66,4 +67,22 @@ const SortableList = ({ items, moveItem, listItem }) => (
   </div>
 )
 
+// helper function for sortable lists
+SortableList.moveItem = (items, dragIndex, hoverIndex) => {
+  if (dragIndex <= hoverIndex) {
+    return [
+      ...items.slice(0, dragIndex),
+      items[hoverIndex],
+      items[dragIndex],
+      ...items.slice(hoverIndex + 1),
+    ]
+  }
+  return [
+    ...items.slice(0, hoverIndex),
+    items[dragIndex],
+    items[hoverIndex],
+    ...items.slice(dragIndex + 1),
+  ]
+}
+
 export default SortableList

packages/xpub-faraday/app/component-wizard/components/Wizard.js

@@ -22,9 +22,16 @@ const items = [
 ]
 
 const AnItem = props => (
-  <div style={{ backgroundColor: 'salmon', marginBottom: 10 }}>
+  <div
+    style={{
+      backgroundColor: 'cyan',
+      marginBottom: 10,
+      opacity: props.isDragging ? 0 : 1,
+    }}
+  >
     Un item aici: {props.name}
     {props.isDragging && <span>ma trag</span>}
+    {props.isOver && <span>is over</span>}
   </div>
 )
 
@@ -59,22 +66,7 @@ export default compose(
     getSteps: ({ journal: { wizard } }) => () => wizard.map(w => w.label),
     incrementStep: ({ changeStep }) => () => changeStep(step => step + 1),
     moveItem: ({ changeItems }) => (dragIndex, hoverIndex) => {
-      changeItems(prev => {
-        if (dragIndex <= hoverIndex) {
-          return [
-            ...prev.slice(0, dragIndex),
-            prev[hoverIndex],
-            prev[dragIndex],
-            ...prev.slice(hoverIndex + 1),
-          ]
-        }
-        return [
-          ...prev.slice(0, hoverIndex),
-          prev[dragIndex],
-          prev[hoverIndex],
-          ...prev.slice(dragIndex + 1),
-        ]
-      })
+      changeItems(prev => SortableList.moveItem(prev, dragIndex, hoverIndex))
     },
   }),
 )(Wizard)