diff --git a/README.md b/README.md
index bd36b5cf3..88a5c1bf9 100644
--- a/README.md
+++ b/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%"`
diff --git a/package.json b/package.json
index e1fd09dca..1b668ecd0 100644
--- a/package.json
+++ b/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.1",
"redux": "^3.5.2",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.0",
diff --git a/src/.stories/index.js b/src/.stories/index.js
index b3301919d..2c5280b2b 100644
--- a/src/.stories/index.js
+++ b/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 (
+ 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) => }
+ width={width}
+ >
+
+
+
+ );
+ }
+}
+
const SortableInfiniteList = SortableContainer(({className, items, itemClass, sortingIndex, useWindowAsScrollContainer}) => {
return (
);
})
+.add('FlexTable usage', () => {
+ return (
+
+
+
+ );
+})
storiesOf('React Infinite', module)
.add('Basic usage', () => {
diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js
index 89ac9fca1..03588d731 100644
--- a/src/SortableContainer/index.js
+++ b/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;