docs: update demo

.eslintrc

@@ -1,73 +1,19 @@
 {
   "parser": "babel-eslint",
-  "plugins": ["react"],
-  "ecmaFeatures": {
-    "jsx": true,
-    "objectLiteralShorthandMethods": true
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true
+  "extends": "airbnb",
+  "globals": {
+    "chai": true,
+    "describe": true,
+    "it": true
   },
   "rules": {
-    "quotes": [0],
-    "new-parens": [1],
-    "no-alert": [1],
-    "handle-callback-err": [1],
-    "strict": [1],
-    "no-script-url": [0],
-    "space-unary-ops": [0],
-    "consistent-return": [0],
-    "comma-dangle": 1,
-    "no-mixed-requires": [1],
-    "no-underscore-dangle": [0],
-    "no-multi-spaces": [1],
-    "no-unused-vars": [1],
-    "key-spacing": [0],
-    "no-empty": [1],
-    "no-shadow": [0],
-    "no-use-before-define": [0],
-    "no-unused-expressions": [1],
-    "no-new-func": [0],
-    "new-cap": [0],
-    "eqeqeq": [0],
-    "curly": [0],
-    "strict": [0],
-    "no-new": [1],
-    "eol-last": [1],
-    "space-infix-ops": [1],
-    "no-return-assign": [1],
-    "comma-spacing": [1],
-    "no-extra-boolean-cast": [1],
-    "no-constant-condition": [1],
-
-    "react/display-name": 0,
-    "react/jsx-boolean-value": 1,
-    "react/jsx-no-duplicate-props": 1,
-    "react/jsx-no-undef": 1,
-    "react/jsx-quotes": 1,
-    "react/jsx-sort-prop-types": 0,
-    "react/jsx-sort-props": 0,
-    "react/jsx-uses-react": 1,
-    "react/jsx-uses-vars": 1,
-    "react/no-danger": 1,
-    "react/no-did-mount-set-state": 0,
-    "react/no-did-update-set-state": 1,
-    "react/no-multi-comp": 1,
-    "react/no-unknown-property": 1,
-    "react/prop-types": 0,
-    "react/react-in-jsx-scope": 0,
-    "react/require-extension": 1,
-    "react/self-closing-comp": 1,
-    "react/sort-comp": 1,
-    "react/wrap-multilines": 1
-  },
-  "globals": {
-    "describe": false,
-    "chai": false,
-    "beforeEach": false,
-    "afterEach": false,
-    "it": false
+    "comma-dangle": 0,
+    "no-console": 0,
+    "react/prefer-stateless-function": 1,
+    "react/jsx-no-bind": 0,
+    "arrow-body-style": 1,
+    "no-nested-ternary": 0,
+    "no-param-reassign": 0,
+    "prefer-rest-params": 0
   }
 }

README.md

@@ -9,7 +9,7 @@
 
 ## Quick Demo
 
-[Live Demo](http://jasonslyvia.github.io/react-anything-sortable/demo/index.html)
+[Live Demo](http://jasonslyvia.github.io/react-anything-sortable/demo/)
 
 **Sort custom style children**
 
@@ -30,12 +30,17 @@
 ```
 $ npm install --save react-anything-sortable
 
-// if you're using React v0.13, try
-$ npm install --save react-anything-sortable@0.x
-
 // UMD build is provided as well, but please do consider use modern module bundlers like webpack or browserify.
 ```
 
+You have to add necessary styles for sortable working properly, if you're using bundle tools like webpack, just 
+
+```javascript
+import 'react-anything-sortable/sortable.css';
+```
+
+Or copy this css to your own style base.
+
 ## How to use
 
 You can check the straight-forward demo by examining `demo` folder, or here's a brief example.

demo/app.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Route, IndexRoute, hashHistory, Link, Redirect } from 'react-router';
+
+import Containment from './pages/containment';
+import Dynamic from './pages/dynamic';
+import HOC from './pages/hoc';
+import Image from './pages/image';
+
+const App = ({ children }) => (
+  <div className="wrapper">
+    <ul>
+      <li><Link to="/normal" activeClassName="active">Normal</Link></li>
+      <li><Link to="/image" activeClassName="active">Image</Link></li>
+      <li><Link to="/dynamic" activeClassName="active">Dynamic</Link></li>
+      <li><Link to="/containment" activeClassName="active">Containment</Link></li>
+    </ul>
+    {children}
+  </div>
+);
+
+const routes = (
+  <Router history={hashHistory}>
+    <Route path="/" component={App}>
+      <Route path="/normal" component={HOC} />
+      <Route path="/image" component={Image} />
+      <Route path="/dynamic" component={Dynamic} />
+      <Route path="/containment" component={Containment} />
+      <Redirect to="/normal" />
+    </Route>
+  </Router>
+);
+
+ReactDOM.render(routes, document.getElementById('app'));

demo/ActionItem.js → demo/components/ActionItem.js

@@ -1,29 +1,27 @@
-'use strict';
-
 import React from 'react';
-import { SortableItemMixin } from '../src/index.js';
+import { SortableItemMixin } from '../../src/index.js';
 
-export default React.createClass({
+export default React.createClass({  //eslint-disable-line
   mixins: [SortableItemMixin],
-  getDefaultProps () {
+  getDefaultProps() {
     return {
       className: 'action-item'
     };
   },
 
-  getInitialState (){
+  getInitialState() {
     return {
       clicked: false
     };
   },
 
-  handleClick () {
+  handleClick() {
     this.setState({
       clicked: !this.state.clicked
     });
   },
 
-  render () {
+  render() {
     return this.renderWithSortable(
       <div className={this.props.className}>
         {this.props.children}

demo/DemoHOCItem.js → demo/components/DemoHOCItem.js

@@ -1,11 +1,9 @@
-'use strict';
-
 import React from 'react';
-import { sortable } from '../src/index.js';
+import { sortable } from '../../src/index.js';
 
 @sortable
 class DemoHOCItem extends React.Component {
-  render () {
+  render() {
     return (
       <div {...this.props}>
         {this.props.children}

demo/DemoItem.js → demo/components/DemoItem.js

@@ -1,20 +1,20 @@
-'use strict';
-
 import React from 'react';
-import { SortableItemMixin } from '../src/index.js';
+import { SortableItemMixin } from '../../src/index.js';
 
 export default React.createClass({
   mixins: [SortableItemMixin],
-  getDefaultProps () {
+
+  getDefaultProps() {
     return {
       className: 'demo-item'
     };
   },
 
-  render () {
+  render() {
+    const { className, children } = this.props;
     return this.renderWithSortable(
-      <div className={this.props.className}>
-        {this.props.children}
+      <div className={className}>
+        {children}
       </div>
     );
   }

demo/ImageItem.js → demo/components/ImageItem.js

@@ -1,17 +1,15 @@
-'use strict';
-
 import React from 'react';
-import { SortableItemMixin } from '../src/index.js';
+import { SortableItemMixin } from '../../src/index.js';
 
 export default React.createClass({
   mixins: [SortableItemMixin],
-  getDefaultProps () {
+  getDefaultProps() {
     return {
       className: 'img-item'
     };
   },
 
-  render () {
+  render() {
     return this.renderWithSortable(
       <img draggable={false} src={this.props.src} className={this.props.className} />
     );

demo/index.html

@@ -12,37 +12,11 @@
   <![endif]-->
 </head>
 <body>
-<div class="section">
-  <div id="react"></div>
-  <div id="resultWrapper">
-    <span>sort result:</span>
-    <span id="result"></span>
-  </div>
-</div>
 
-<div class="section">
-  <div id="react1"></div>
-  <div id="resultWrapper1">
-    <span>sort result:</span>
-    <span id="result1"></span>
-  </div>
-</div>
+<a href="https://github.com/jasonslyvia/react-anything-sortable/" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
 
-<div class="section">
-  <div id="react2"></div>
-</div>
+<div id="app"></div>
 
-
-<div class="section">
-  <span>Dynamic demo, click a item to delete it</span>
-  <div id="react3"></div>
-</div>
-
-<div class="section">
-  <span>Constrain the dragging area by setting <code>containment</code></span>
-  <div id="react4"></div>
-</div>
-
-<script type="text/javascript" src="bundle.js"></script>
+<script type="text/javascript" src="js/bundle.min.js"></script>
 </body>
 </html>