add onRemove

zgrannan · Feb 6, 2017 · 908038b · 908038b
1 parent b65f945
commit 908038b
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -25,10 +25,11 @@ class Demo extends React.Component {
     }
   }
 
-  Item ({value, index, onChange, decorateHandle}) {
+  Item ({value, index, onChange, onRemove, decorateHandle}) {
     return (
       <div>
-        {decorateHandle(<span>+ </span>)}
+        <span onClick={onRemove}>X</span>
+        {decorateHandle(<span>+</span>)}
         <input
           onChange={e => {
             const val = e.target.value

diff --git a/demo/src/index.js b/demo/src/index.js
@@ -18,9 +18,10 @@ class Demo extends React.Component {
     }
   }
 
-  Item ({value, index, onChange, decorateHandle}) {
+  Item ({value, index, onRemove, onChange, decorateHandle}) {
     return (
       <div>
+        <span onClick={onRemove}>X</span>
         {decorateHandle(<span>+ </span>)}
         <input
           onChange={e => {

diff --git a/src/SortableContainer.js b/src/SortableContainer.js
@@ -90,6 +90,11 @@ class SortableContainer extends React.Component {
         key={key}
         id={key}
         index={index}
+        onRemove={() => {
+          const index = R.findIndex(i => i.key === key, collection)
+          const newCollection = R.remove(index, 1, collection)
+          onChange(newCollection)
+        }}
         onChange={value => {
           const index = R.findIndex(i => i.key === key, collection)
           const newCollection = R.adjust(R.assoc('value', value), index, collection)

diff --git a/src/SortableItem.js b/src/SortableItem.js
@@ -83,14 +83,14 @@ class SortableItem extends React.Component {
   }
 
   render () {
-    const { Component, isDragging, value, onChange, index, connectDragSource } = this.props
+    const { Component, isDragging, value, onChange, onRemove, index, connectDragSource } = this.props
     const opacity = isDragging ? 0 : 1
 
     console.log('render SortableItem')
 
     return this.decorateSortableItemElement(
       <div style={{opacity}}>
-        <Component value={value} onChange={onChange} index={index} decorateHandle={connectDragSource} />
+        <Component value={value} onRemove={onRemove} onChange={onChange} index={index} decorateHandle={connectDragSource} />
       </div>
     )
   }