Update examples

Author: cheton

examples/src/index.jsx

@@ -1,34 +1,77 @@
+import _ from 'lodash';
 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/shared-group.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,6 +28,8 @@ export default class SharedGroup extends React.Component {
         const items = this.state.items.map((text, index) => (
             <li key={index}>{text}</li>
         ));
+
+        console.log('##', this.state.items);
 
         return (
             <ul ref="list" className="block-list">{items}</ul>