merge upstream

Author: kjanoudi

examples/app.bundle.js

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "lodash": "^4.6.1",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-sortablejs": "latest",

examples/package.json

@@ -1,34 +1,77 @@
+import random from 'lodash/random';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Sortable from 'react-sortablejs';
 import SimpleList from './simple-list';
 import SharedGroup from './shared-group';
 
-ReactDOM.render(
-    <div>
-        <div className="container-fluid">
-            <div className="title">Simple List</div>
-            <div className="row">
-                <div className="col-sm-12">
-                    <SimpleList />
-                </div>
-            </div>
-        </div>
-        <div className="container-fluid">
-            <div className="title" style={{marginTop: 100}}>Shared Group</div>
-            <div className="row">
-                <div className="col-sm-6">
-                    <SharedGroup
-                        items={['Apple', 'Banaba', 'Cherry', 'Grape']}
-                    />
+const items = [
+    'Apple',
+    'Banana',
+    'Cherry',
+    'Guava',
+    'Grape',
+    'Kiwi',
+    'Lemon',
+    'Melon',
+    'Orange',
+    'Pear',
+    'Peach',
+    'Strawberry'
+];
+
+class App extends React.Component {
+    state = {
+        left: ['Apple', 'Banaba', 'Cherry', 'Grape'],
+        right: ['Lemon', 'Orange', 'Pear', 'Peach']
+    };
+
+    handleClick() {
+        const i = random(0, items.length - 1);
+        const state = this.state.left.concat(items[i]);
+        this.setState({ left: state });
+    }
+    render() {
+        return (
+            <div>
+                <div className="container-fluid">
+                    <div className="title">Simple List</div>
+                    <div className="row">
+                        <div className="col-sm-12">
+                            <SimpleList />
+                        </div>
+                    </div>
                 </div>
-                <div className="col-sm-6">
-                    <SharedGroup
-                        items={['Lemon', 'Orange', 'Pear', 'Peach']}
-                    />
+                <div className="container-fluid">
+                    <div className="title" style={{marginTop: 100}}>Shared Group</div>
+                    <div className="form-group">
+                        <button
+                            type="button"
+                            className="btn btn-default"
+                            onClick={::this.handleClick}
+                        >
+                            Add more items
+                        </button>
+                    </div>
+                    <div className="row">
+                        <div className="col-sm-6">
+                            <SharedGroup
+                                items={this.state.left}
+                            />
+                        </div>
+                        <div className="col-sm-6">
+                            <SharedGroup
+                                items={this.state.right}
+                            />
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
-    </div>,
+        );
+    }
+}
+
+ReactDOM.render(
+    <App />,
     document.getElementById('container')
 );

examples/src/index.jsx

@@ -4,7 +4,11 @@ import Sortable from 'react-sortablejs';
 const sortableOptions = {
     ref: 'list',
     model: 'items',
-    group: 'shared'
+    group: {
+        name: 'shared',
+        pull: true, //'clone',
+        put: true
+    }
 };
 
 @Sortable(sortableOptions)
@@ -24,7 +28,7 @@ export default class SharedGroup extends React.Component {
         const items = this.state.items.map((text, index) => (
             <li key={index}>{text}</li>
         ));
-        
+
         return (
             <ul ref="list" className="block-list">{items}</ul>
         );

examples/src/shared-group.jsx

@@ -41,7 +41,7 @@ const extend = (target, ...sources) => {
 };
 
 const SortableMixin = (options = defaultOptions) => (Component) => class extends React.Component {
-    
+
     state = {
         sortableInstance: null
     };
@@ -109,10 +109,8 @@ const SortableMixin = (options = defaultOptions) => (Component) => class extends
                 }, 0);
             };
         });
-
-        const domNode = ReactDOM.findDOMNode(sortableComponent.refs[this.sortableOptions.ref] || sortableComponent);
-        const sortableInstance = Sortable.create(domNode, copyOptions);
-        this.setState({sortableInstance});
+        this.populatedOptions = copyOptions
+        this.initSortable(sortableComponent);
     }
     componentWillReceiveProps(nextProps) {
         const sortableComponent = this.refs[refName];
@@ -125,7 +123,24 @@ const SortableMixin = (options = defaultOptions) => (Component) => class extends
             sortableComponent.setState(newState);
         }
     }
+    componentDidUpdate(prevProps) {
+        const model = this.sortableOptions.model;
+        const prevItems = prevProps[model];
+        const currItems = this.props[model];
+        if(prevItems !== currItems) {
+            this.initSortable(this.refs[refName]);
+        }
+    }
     componentWillUnmount() {
+        this.destroySortable();
+    }
+    initSortable(sortableComponent) {
+        this.destroySortable();
+        const domNode = ReactDOM.findDOMNode(sortableComponent.refs[this.sortableOptions.ref] || sortableComponent);
+        const sortableInstance = Sortable.create(domNode, this.populatedOptions);
+        this.setState({sortableInstance});
+    }
+    destroySortable() {
         if (this.state.sortableInstance) {
             this.state.sortableInstance.destroy();
             this.setState({sortableInstance: null});