diff --git a/packages/xpub-faraday/app/component-wizard/components/SortableList.js b/packages/xpub-faraday/app/component-wizard/components/SortableList.js index 2cccc49a6fe28b35de719070b5cc73a9c8e988f1..cf32e605a7f6eb53c05b1640704dd43506fb58df 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 34f0e30a194b9ff42f08d30319268b5922abe095..aae52993701db3d1378c29ac82aee8601c72bb34 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> )