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;