From 908038b307c0e9bcef1b5fd21ac78aa350a41f7d Mon Sep 17 00:00:00 2001
From: Andrew Monks <a@monks.co>
Date: Sun, 5 Feb 2017 21:19:48 -0600
Subject: [PATCH] add onRemove

---
 README.md                | 5 +++--
 demo/src/index.js        | 3 ++-
 src/SortableContainer.js | 5 +++++
 src/SortableItem.js      | 4 ++--
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index ccde5e5..d4415d7 100644
--- 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
index 82d84cf..be78ef1 100644
--- 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
index 9acb3f5..6635897 100644
--- 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
index cb80ba0..939d97f 100644
--- 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>
     )
   }