Rework (v3)

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "react"
+  ],
+  "env": {
+    "mocha": {
+      "plugins": [
+        "istanbul"
+      ]
+    }
+  }
+}

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends":[
+    "jakesidsmith/base",
+    "jakesidsmith/browser"
+  ]
+}

.mocharc

@@ -0,0 +1,4 @@
+--require babel-core/register
+--require tests/helpers/test-setup.js
+--bail
+--recursive

.nvmrc

@@ -0,0 +1 @@
+6.10.3

.nycrc

@@ -0,0 +1,26 @@
+{
+  "lines": 100,
+  "statements": 100,
+  "functions": 100,
+  "branches": 100,
+  "require": [],
+  "include": [
+    "src/**/*.js",
+    "tests/helpers/mount.js",
+    "tests/helpers/children-stub.js"
+  ],
+  "exclude": [],
+  "extension": [
+    ".js"
+  ],
+  "reporter": [
+    "lcov",
+    "text-summary"
+  ],
+  "cache": true,
+  "all": true,
+  "check-coverage": false,
+  "sourceMap": false,
+  "instrument": false,
+  "report-dir": "coverage"
+}

README.md

@@ -1,188 +1,136 @@
-# React Reorder (v2)
+# React Reorder
 
 __Drag & drop, touch enabled, reorder / sortable list, React component__
 
-If you are using v3 alpha, please refer to [this documentation](https://github.com/JakeSidSmith/react-reorder/blob/rework/README.md).
+[![CircleCI](https://circleci.com/gh/JakeSidSmith/react-reorder.svg?style=svg)](https://circleci.com/gh/JakeSidSmith/react-reorder)
+
+If you are using v2, please refer to [this documentation](https://github.com/JakeSidSmith/react-reorder/blob/609de5a6be9ae7ea4b032b0b260b08bc524b362e/README.md).
 
 ## About
 
-React Reorder is a React component that allows the user to drag-and-drop items in a list (horizontal / vertical) or a grid.
+React Reorder is a React component that allows the user to drag-and-drop items in a list (horizontal / vertical), or a grid. You can also allow dragging items from one list to another.
 
-It fully supports touch devices and auto-scrolls when a component is being dragged (check out the demo, link below).
+It fully supports touch devices and auto-scrolls when a component is being dragged (check out the [demo](https://jakesidsmith.github.io/react-reorder/)).
 
 It also allows the user to set a hold time (duration before drag begins) allowing additional events like clicking / tapping to be applied.
 
-Although this project is very new, it has been thoroughly tested in all modern browsers (see supported browsers).
-
-__[Demo](http://jakesidsmith.github.io/react-reorder/)__
-
 ## Installation
 
-* Using npm
-  ```
-  npm install react-reorder
-  ```
-    Add `--save` or `-S` to update your package.json
+Using npm
 
-* Using bower
-  ```
-  bower install react-reorder
-  ```
-    Add `--save` or `-S` to update your bower.json
+Add `--save` or `-S` to update your package.json
 
-## Example
-
-1. If using requirejs: add `react-reorder` to your `require.config`
-
-  ```javascript
-  paths:
-    // <name> : <path/to/module>
-    'react-reorder': 'react-reorder/reorder'
-  }
-  ```
+```
+npm install react-reorder
+```
 
-2. If using a module loader (requirejs / browserfiy / commonjs): require `react-reorder` where it will be used in your project
-
-  ```javascript
-  var Reorder = require('react-reorder');
-  ```
-
-  If using requirejs you'll probably want to wrap your module e.g.
-
-  ```javascript
-  define(function (require) {
-    // Require react-reorder here
-  });
-  ```
-
-3. Configuration
-
-  **Note: If your array is an array of primitives (e.g. strings) then `itemKey` is not required as the string itself will be used as the key, however item keys must be unique in any case**
-
-  1. Using JSX
-
-    ```javascript
-    <Reorder
-      // The key of each object in your list to use as the element key
-      itemKey='name'
-      // Lock horizontal to have a vertical list
-      lock='horizontal'
-      // The milliseconds to hold an item for before dragging begins
-      holdTime='500'
-      // The list to display
-      list={[
-        {name: 'Item 1'},
-        {name: 'Item 2'},
-        {name: 'Item 3'}
-      ]}
-      // A template to display for each list item
-      template={ListItem}
-      // Function that is called once a reorder has been performed
-      callback={this.callback}
-      // Class to be applied to the outer list element
-      listClass='my-list'
-      // Class to be applied to each list item's wrapper element
-      itemClass='list-item'
-      // A function to be called if a list item is clicked (before hold time is up)
-      itemClicked={this.itemClicked}
-      // The item to be selected (adds 'selected' class)
-      selected={this.state.selected}
-      // The key to compare from the selected item object with each item object
-      selectedKey='uuid'
-      // Allows reordering to be disabled
-      disableReorder={false}/>
-    ```
-
-  2. Using standard Javascript
-
-    ```javascript
-    React.createElement(Reorder, {
-      // The key of each object in your list to use as the element key
-      itemKey: 'name',
-      // Lock horizontal to have a vertical list
-      lock: 'horizontal',
-      // The milliseconds to hold an item for before dragging begins
-      holdTime: '500',
-      // The list to display
-      list: [
-        {name: 'Item 1'},
-        {name: 'Item 2'},
-        {name: 'Item 3'}
-      ],
-      // A template to display for each list item
-      template: ListItem,
-      // Function that is called once a reorder has been performed
-      callback: this.callback,
-      // Class to be applied to the outer list element
-      listClass: 'my-list',
-      // Class to be applied to each list item's wrapper element
-      itemClass: 'list-item',
-      // A function to be called if a list item is clicked (before hold time is up)
-      itemClicked: this.itemClicked,
-      // The item to be selected (adds 'selected' class)
-      selected: this.state.selected,
-      // The key to compare from the selected item object with each item object
-      selectedKey: 'uuid',
-      // Allows reordering to be disabled
-      disableReorder: false
-    })
-    ```
-
-5. Callback functions
-
-  1. The `callback` function that is called once a reorder has been performed
-
-    ```javascript
-    function callback(event, itemThatHasBeenMoved, itemsPreviousIndex, itemsNewIndex, reorderedArray) {
-      // ...
-    }
-    ```
-
-  2. The `itemClicked` function that is called when an item is clicked before any dragging begins
-
-    ```javascript
-    function itemClicked(event, itemThatHasBeenClicked, itemsIndex) {
-      // ...
-    }
-    ```
-
-    **Note: `event` will be the synthetic React event for either `mouseup` or `touchend`, and both contain `clientX` & `clientY` values (for ease of use)**
-
-## Compatibility / Requirements
+Using bower
 
-* Version `2.x` tested and working with React `0.14`
+Add `--save` or `-S` to update your bower.json
 
-* Versions `1.x` tested and working with React `0.12` - `0.13`
+```
+bower install react-reorder
+```
 
-* requirejs / commonjs / browserify (__Optional, but recommended*__)
-
-\* Has only been tested with requirejs & browserify
-
-## Supported Browsers
-
-### Desktop
-
-* Internet Explorer 9+ (may support IE8**)
-
-* Google Chrome (tested in version 39.0.2171.95(64-bit))
-
-* Mozilla Firefox (tested in version 33.0)
+## Example
 
-* Opera (tested in version 26.0.1656.60)
+If using a module loader (requirejs / browserfiy / commonjs): require `react-reorder` where it will be used in your project
+
+```javascript
+var Reorder = require('react-reorder');
+var reorder = Reorder.reorder;
+var reorderImmutable = Reorder.reorderImmutable;
+var reorderFromTo = Reorder.reorderFromTo;
+var reorderFromToImmutable = Reorder.reorderFromToImmutable;
+
+// Or ES6
+
+import Reorder, {
+  reorder,
+  reorderImmutable,
+  reorderFromTo,
+  reorderFromToImmutable
+} from 'react-reorder';
+```
+
+### Configuration
+
+```javascript
+<Reorder
+  reorderId="my-list" // Unique ID that is used internally to track this list (required)
+  reorderGroup="reorder-group" // A group ID that allows items to be dragged between lists of the same group (optional)
+  getRef={this.storeRef.bind(this)} // Function that is passed a reference to the root node when mounted (optional)
+  component="ul" // Tag name or Component to be used for the wrapping element (optional), defaults to 'div'
+  placeholderClassName="placeholder" // Class name to be applied to placeholder elements (optional), defaults to 'placeholder'
+  draggedClassName="dragged" // Class name to be applied to dragged elements (optional), defaults to 'dragged'
+  lock="horizontal" // Lock the dragging direction (optional): vertical, horizontal (do not use with groups)
+  holdTime={500} // Default hold time before dragging begins (mouse & touch) (optional), defaults to 0
+  touchHoldTime={500} // Hold time before dragging begins on touch devices (optional), defaults to holdTime
+  mouseHoldTime={200} // Hold time before dragging begins with mouse (optional), defaults to holdTime
+  onReorder={this.onReorder.bind(this)} // Callback when an item is dropped (you will need this to update your state)
+  autoScroll={true} // Enable auto-scrolling when the pointer is close to the edge of the Reorder component (optional), defaults to true
+  disabled={false} // Disable reordering (optional), defaults to false
+  disableContextMenus={true} // Disable context menus when holding on touch devices (optional), defaults to true
+  placeholder={
+    <div className="custom-placeholder" /> // Custom placeholder element (optional), defaults to clone of dragged element
+  }
+>
+  {
+    this.state.list.map((item) => (
+      <li key={item.name}>
+        {item.name}
+      </li>
+    )).toArray()
+    /*
+    Note this example is an ImmutableJS List so we must convert it to an array.
+    I've left this up to you to covert to an array, as react-reorder updates a lot,
+    and if I called this internally it could get rather slow,
+    whereas you have greater control over your component updates.
+    */
+  }
+</Reorder>
+```
 
-* Safari (tested in version 7.1.2 (9537.85.11.5))
+### Callback functions
 
-\** Have not had a chance to test in IE8, but IE8 is supported by React
+The `onReorder` function that is called once a reorder has been performed.
 
+You can use our helper functions for reordering your arrays.
 
-### Mobile
+```javascript
+import { reorder, reorderImmutable, reorderFromTo, reorderFromToImmutable } from 'react-reorder';
 
-* Chrome (tested in version 40.0.2214.89)
+onReorder (event, previousIndex, nextIndex, fromId, toId) {
+  this.setState({
+    myList: reorder(this.state.myList, previousIndex, nextIndex);
+  });
+}
+
+onReorderGroup (event, previousIndex, nextIndex, fromId, toId) {
+  if (fromId === toId) {
+    const list = reorderImmutable(this.state[fromId], previousIndex, nextIndex);
+
+    this.setState({
+      [fromId]: list
+    });
+  } else {
+    const lists = reorderFromToImmutable({
+      from: this.state[fromId],
+      to: this.state[toId]
+    }, previousIndex, nextIndex);
+
+    this.setState({
+      [fromId]: lists.from,
+      [toId]: lists.to
+    });
+  }
+}
+```
 
-* Safari (tested on iOS 8)
+## Compatibility / Requirements
 
-## Untested Browsers
+* Version `3.x` tested and working with React `15`, but should be backward compatible at least a couple of versions.
 
-* Internet Explorer 8*** (the lowest version that React supports)
+## Weird Scrolling Behavior?
 
-\*** If anyone could confirm that this works in IE8, that'd be awesome
+It is recommended that you apply `overflow-anchor: none;` to any parent elements with overflow auto (including on either of just the x/y axis) to prevent unwanted auto-scrolling, or surprisingly fast auto-scrolling.

circle.yml

@@ -0,0 +1,15 @@
+machine:
+  node:
+    version: 6.9.1
+
+general:
+  branches:
+    ignore:
+      - gh-pages
+
+deployment:
+  master:
+    branch: master
+    commands:
+      - npm run build
+      - scripts/deploy.sh

examples/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ]
+}

examples/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends":[
+    "jakesidsmith/commonjs",
+    "jakesidsmith/es6",
+    "jakesidsmith/react",
+    "jakesidsmith/browser"
+  ]
+}