Update examples

Author: cheton

examples/.babelrc

@@ -0,0 +1,41 @@
+import _ from 'lodash';
+import events from 'events';
+
+class ImmutableStore extends events.EventEmitter {
+    state = {};
+
+    constructor(state = {}) {
+        super();
+
+        this.state = state;
+    }
+    get(key, defaultValue) {
+        return _.get(this.state, key, defaultValue);
+    }
+    set(key, value) {
+        this.state = _.merge({}, this.state, _.set({}, key, value));
+        this.emit('change', this.state);
+        return this.state;
+    }
+    unset(key, options) {
+        let state = _.extend({}, this.state);
+        _.unset(state, key);
+        this.state = state;
+        this.emit('change', this.state);
+        return this.state;
+    }
+    replace(key, value) {
+        let state = _.extend({}, this.state);
+        _.unset(state, key);
+        this.state = _.merge({}, state, _.set({}, key, value));
+        this.emit('change', this.state);
+        return this.state;
+    }
+    clear() {
+        this.state = {};
+        this.emit('change', this.state);
+        return this.state;
+    }
+}
+
+export default ImmutableStore;

examples/.eslintrc

@@ -1,35 +1,45 @@
+import extend from 'lodash/extend';
 import random from 'lodash/random';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Sortable from 'react-sortablejs';
+import Sortable from '../../src';
 import SimpleList from './simple-list';
 import SharedGroup from './shared-group';
-
-const items = [
-    'Apple',
-    'Banana',
-    'Cherry',
-    'Guava',
-    'Grape',
-    'Kiwi',
-    'Lemon',
-    'Melon',
-    'Orange',
-    'Pear',
-    'Peach',
-    'Strawberry'
-];
+import store from './store';
 
 class App extends React.Component {
     state = {
-        left: ['Apple', 'Banaba', 'Cherry', 'Grape'],
-        right: ['Lemon', 'Orange', 'Pear', 'Peach']
+        simpleList: store.get('simpleList'),
+        sharedGroup: store.get('sharedGroup')
     };
 
-    handleClick() {
+    componentDidMount() {
+        store.on('change', () => {
+            this.setState({
+                simpleList: store.get('simpleList'),
+                sharedGroup: store.get('sharedGroup')
+            });
+        });
+    }
+    addMoreItems() {
+        const items = [
+            'Apple',
+            'Banana',
+            'Cherry',
+            'Guava',
+            'Grape',
+            'Kiwi',
+            'Lemon',
+            'Melon',
+            'Orange',
+            'Pear',
+            'Peach',
+            'Strawberry'
+        ];
         const i = random(0, items.length - 1);
-        const state = this.state.left.concat(items[i]);
-        this.setState({ left: state });
+        const sharedGroup = extend({}, this.state.sharedGroup);
+        sharedGroup.left = sharedGroup.left.concat(items[i]);
+        this.setState({ sharedGroup: sharedGroup });
     }
     render() {
         return (
@@ -38,7 +48,12 @@ class App extends React.Component {
                     <div className="title">Simple List</div>
                     <div className="row">
                         <div className="col-sm-12">
-                            <SimpleList />
+                            <SimpleList
+                                items={this.state.simpleList}
+                                onChange={(items) => {
+                                    store.set('simpleList', items);
+                                }}
+                            />
                         </div>
                     </div>
                 </div>
@@ -48,20 +63,26 @@ class App extends React.Component {
                         <button
                             type="button"
                             className="btn btn-default"
-                            onClick={::this.handleClick}
+                            onClick={::this.addMoreItems}
                         >
                             Add more items
                         </button>
                     </div>
                     <div className="row">
                         <div className="col-sm-6">
                             <SharedGroup
-                                items={this.state.left}
+                                items={this.state.sharedGroup.left}
+                                onChange={(items) => {
+                                    store.replace('sharedGroup.left', items);
+                                }}
                             />
                         </div>
                         <div className="col-sm-6">
                             <SharedGroup
-                                items={this.state.right}
+                                items={this.state.sharedGroup.right}
+                                onChange={(items) => {
+                                    store.replace('sharedGroup.right', items);
+                                }}
                             />
                         </div>
                     </div>

examples/package.json

@@ -1,9 +1,9 @@
 import React from 'react';
-import Sortable from 'react-sortablejs';
+import Sortable from '../../src';
+import store from './store';
 
 const sortableOptions = {
     ref: 'list',
-    model: 'items',
     group: {
         name: 'shared',
         pull: true, //'clone',
@@ -13,19 +13,8 @@ const sortableOptions = {
 
 @Sortable(sortableOptions)
 export default class SharedGroup extends React.Component {
-    static propTypes = {
-        items: React.PropTypes.array
-    };
-    static defaultProps = {
-        items: []
-    };
-
-    state = {
-        items: this.props.items
-    };
-    
     render() {
-        const items = this.state.items.map((text, index) => (
+        const items = this.props.items.map((text, index) => (
             <li key={index}>{text}</li>
         ));
 

examples/src/immutable-store.js

@@ -1,19 +1,15 @@
 import React from 'react';
-import Sortable from 'react-sortablejs';
+import Sortable from '../../src';
+import store from './store';
 
 const sortableOptions = {
-    ref: 'list',
-    model: 'items'
+    ref: 'list'
 };
 
 @Sortable(sortableOptions)
 export default class SimpleList extends React.Component {
-    state = {
-        items: [1, 2, 3, 4, 5, 6]
-    };
-    
     render() {
-        const items = this.state.items.map((text, index) => (
+        const items = this.props.items.map((text, index) => (
             <li key={index}>List Item {text}</li>
         ));
 

examples/src/index.jsx

@@ -0,0 +1,11 @@
+import ImmutableStore from './immutable-store';
+
+const store = new ImmutableStore({
+    simpleList: [1, 2, 3, 4, 5, 6],
+    sharedGroup: {
+        left: ['Apple', 'Banaba', 'Cherry', 'Grape'],
+        right: ['Lemon', 'Orange', 'Pear', 'Peach']
+    }
+});
+
+export default store;