Add list item render prop to sortable list

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

@@ -37,11 +37,9 @@ const itemTarget = {
   },
 }
 
-const Item = ({ name, isDragging, connectDragSource, connectDropTarget }) =>
+const Item = ({ connectDragSource, connectDropTarget, listItem, ...rest }) =>
   connectDragSource(
-    connectDropTarget(
-      <div style={{ backgroundColor: 'wheat', margin: 5 }}>{name}</div>,
-    ),
+    connectDropTarget(<div>{React.createElement(listItem, rest)}</div>),
   )
 
 const DecoratedItem = compose(
@@ -54,12 +52,13 @@ const DecoratedItem = compose(
   })),
 )(Item)
 
-const SortableList = ({ items, moveItem }) => (
+const SortableList = ({ items, moveItem, listItem }) => (
   <div>
     {items.map((item, i) => (
       <DecoratedItem
         index={i}
         key={item.name}
+        listItem={listItem}
         moveItem={moveItem}
         name={item.name}
       />

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

@@ -21,6 +21,13 @@ const items = [
   { name: '5gicuta' },
 ]
 
+const AnItem = props => (
+  <div style={{ backgroundColor: 'salmon', marginBottom: 10 }}>
+    Un item aici: {props.name}
+    {props.isDragging && <span>ma trag</span>}
+  </div>
+)
+
 const Wizard = ({
   journal: { wizard },
   getSteps,
@@ -40,7 +47,7 @@ const Wizard = ({
       ))}
     </Steps>
     <hr style={{ marginTop: 40 }} />
-    <SortableList items={listItems} moveItem={moveItem} />
+    <SortableList items={listItems} listItem={AnItem} moveItem={moveItem} />
   </div>
 )