Added support for a custom container (via getContainer prop)

This PR also updates the version of 'react-virtualized' used in 'devDependencies' to 7.15 so that a FlexTable example could be added using the new getContainer prop.
The PR also adds 'react' to 'devDependencies' since it was missing.

Author: bvaughn

README.md

@@ -104,6 +104,7 @@ More code examples are available [here](https://github.com/clauderic/react-sorta
 | hideSortableGhost          | Boolean  | `true`  | Whether to auto-hide the ghost element. By default, as a convenience, React Sortable List will automatically hide the element that is currently being sorted. Set this to false if you would like to apply your own styling. |
 | lockToContainerEdges       | Boolean  | `false` | You can lock movement of the sortable element to it's parent `SortableContainer`                                                                                                                                             |
 | lockOffset                 | `OffsetValue`\* \| [`OffsetValue`\*, `OffsetValue`\*] | `"50%"` | When `lockToContainerEdges` is set to `true`, this controls the offset distance between the sortable helper and the top/bottom edges of it's parent `SortableContainer`. Percentage values are relative to the height of the item currently being sorted. If you wish to specify different behaviours for locking to the *top* of the container vs the *bottom*, you may also pass in an `array` (For example: `["0%", "100%"]`). |
+| getContainer | Function |  | Optional function to return the scrollable container element. This property defaults to the `SortableContainer` element itself or (if `useWindowAsScrollContainer` is true) the window. Use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as `FlexTable`). This function is passed a single parameter (the `wrappedInstance` React element) and it is expected to return a DOM element. |
 
 \* `OffsetValue` is either a finite `Number` or a `String` made-up of a number and a unit (`px` or `%`).
 Examples: `10` (is the same as `"10px"`), `"50%"`

package.json

@@ -86,11 +86,12 @@
     "postcss-loader": "^0.9.1",
     "qs": "^6.2.0",
     "raw-loader": "^0.5.1",
+    "react": "^15.2.1",
     "react-addons-pure-render-mixin": "^15.0.2",
     "react-addons-shallow-compare": "^15.1.0",
     "react-addons-test-utils": "^15.1.0",
     "react-infinite": "^0.9.2",
-    "react-virtualized": "^7.3.1",
+    "react-virtualized": "^7.15.0",
     "redux": "^3.5.2",
     "rimraf": "^2.5.2",
     "sass-loader": "^3.2.0",

src/.stories/index.js

@@ -1,8 +1,9 @@
 import React, {Component, PropTypes} from 'react';
+import ReactDOM from 'react-dom';
 import {storiesOf} from '@kadira/storybook';
 import style from './Storybook.scss';
 import {SortableContainer, SortableElement, SortableHandle, arrayMove} from '../index';
-import {VirtualScroll} from 'react-virtualized';
+import {defaultFlexTableRowRenderer, FlexColumn, FlexTable, VirtualScroll} from 'react-virtualized';
 import 'react-virtualized/styles.css';
 import Infinite from 'react-infinite';
 import range from 'lodash/range';
@@ -95,6 +96,50 @@ class VirtualList extends Component {
 }
 const SortableVirtualList = SortableContainer(VirtualList, {withRef: true});
 
+const SortableFlexTable = SortableContainer(FlexTable, {withRef: true});
+const SortableRowRenderer = SortableElement(defaultFlexTableRowRenderer);
+
+class FlexTableWrapper extends Component {
+	render () {
+		const {
+			className,
+			height,
+			itemClass,
+			itemHeight,
+			items,
+			onSortEnd,
+			width
+		} = this.props
+
+		return (
+			<SortableFlexTable
+				getContainer={(wrappedInstance) => ReactDOM.findDOMNode(wrappedInstance._grid)}
+				gridClassName={className}
+				headerHeight={itemHeight}
+				height={height}
+				onSortEnd={onSortEnd}
+				rowClassName={itemClass}
+				rowCount={items.length}
+				rowGetter={({ index }) => items[index]}
+				rowHeight={itemHeight}
+				rowRenderer={(props) => <SortableRowRenderer {...props} />}
+				width={width}
+	    >
+				<FlexColumn
+					label='Index'
+					dataKey='value'
+					width={100}
+				/>
+				<FlexColumn
+					label='Height'
+					dataKey='height'
+					width={width - 100}
+				/>
+			</SortableFlexTable>
+		);
+	}
+}
+
 const SortableInfiniteList = SortableContainer(({className, items, itemClass, sortingIndex, useWindowAsScrollContainer}) => {
 	return (
 		<Infinite
@@ -224,6 +269,13 @@ storiesOf('React Virtualized', module)
 		</div>
 	);
 })
+.add('FlexTable usage', () => {
+	return (
+		<div className={style.root}>
+			<ListWrapper component={FlexTableWrapper} items={getItems(500, 40)} itemHeight={40} helperClass={style.stylizedHelper} />
+		</div>
+	);
+})
 
 storiesOf('React Infinite', module)
 .add('Basic usage', () => {

src/SortableContainer/index.js

@@ -47,6 +47,7 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
 				PropTypes.string,
 				PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
 			]),
+			getContainer: PropTypes.func
 		};
 		static childContextTypes = {
 			manager: PropTypes.object.isRequired
@@ -58,9 +59,9 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
 			};
 		}
 		componentDidMount() {
-			let {contentWindow} = this.props;
+			let {contentWindow, getContainer} = this.props;
 
-			this.container = ReactDOM.findDOMNode(this);
+			this.container = (typeof getContainer == 'function') ? getContainer(this.getWrappedInstance()) : ReactDOM.findDOMNode(this);
 			this.document = this.container.ownerDocument || document;
 			this.scrollContainer = (this.props.useWindowAsScrollContainer) ? this.document.body : this.container;
 			this.contentWindow = (typeof contentWindow == 'function') ? contentWindow() : contentWindow;