From bb529633eee94bb019da9ad166c6016e00a1592a Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munteanu@thinslices.com>
Date: Thu, 11 Jan 2018 10:50:48 +0200
Subject: [PATCH] Add list item render prop to sortable list
---
.../app/component-wizard/components/SortableList.js | 9 ++++-----
.../app/component-wizard/components/Wizard.js | 9 ++++++++-
2 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/packages/xpub-faraday/app/component-wizard/components/SortableList.js b/packages/xpub-faraday/app/component-wizard/components/SortableList.js
index 2cccc49a6..cf32e605a 100644
--- a/packages/xpub-faraday/app/component-wizard/components/SortableList.js
+++ b/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}
/>
diff --git a/packages/xpub-faraday/app/component-wizard/components/Wizard.js b/packages/xpub-faraday/app/component-wizard/components/Wizard.js
index 34f0e30a1..aae529937 100644
--- a/packages/xpub-faraday/app/component-wizard/components/Wizard.js
+++ b/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>
)
--
GitLab