From 58da213f713e2601915bff296a19ce5b8b659842 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munteanu@thinslices.com>
Date: Thu, 11 Jan 2018 11:12:49 +0200
Subject: [PATCH] Sortable refactor
---
.../components/SortableList.js | 27 ++++++++++++++++---
.../app/component-wizard/components/Wizard.js | 26 +++++++-----------
2 files changed, 32 insertions(+), 21 deletions(-)
diff --git a/packages/xpub-faraday/app/component-wizard/components/SortableList.js b/packages/xpub-faraday/app/component-wizard/components/SortableList.js
index cf32e605a..6646e4de7 100644
--- a/packages/xpub-faraday/app/component-wizard/components/SortableList.js
+++ b/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
diff --git a/packages/xpub-faraday/app/component-wizard/components/Wizard.js b/packages/xpub-faraday/app/component-wizard/components/Wizard.js
index aae529937..92523e4d3 100644
--- a/packages/xpub-faraday/app/component-wizard/components/Wizard.js
+++ b/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)
--
GitLab