diff --git a/docs/WindowScroller.md b/docs/WindowScroller.md index 1251d7c3f..00faca9f9 100644 --- a/docs/WindowScroller.md +++ b/docs/WindowScroller.md @@ -1,16 +1,16 @@ WindowScroller --------------- -High-order component that enables a `Table` or `List` component to be scrolled based on the window's scroll positions. +A component that enables a `Table` or `List` component to be scrolled based on the window's scroll positions. This can be used to create layouts similar to Facebook or Twitter news feeds. -**Note** that this HOC does not currently work with a horizontally-scrolling `Grid` as horizontal scrolls reset the internal `scrollTop`. -This may change with a future release but for the time being this HOC is should be used with `Table` or `List` only. +**Note** that this component does not currently work with a horizontally-scrolling `Grid` as horizontal scrolls reset the internal `scrollTop`. +This may change with a future release but for the time being this component is should be used with `Table` or `List` only. ### Prop Types | Property | Type | Required? | Description | |:---|:---|:---:|:---| -| children | Function | ✓ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number, isScrolling: boolean, scrollTop: number, onChildScroll: function }) => PropTypes.element` | +| children | Function | ✓ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number, isScrolling: boolean, scrollTop: number, registerChild: function, onChildScroll: function }) => PropTypes.element` | | onResize | Function | | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`. | | onScroll | Function | | Callback to be invoked on-scroll; it is passed the following named parameters: `({ scrollTop: number, scrollLeft: number })`. | | scrollElement | any | | Element to attach scroll event listeners. Defaults to `window`. | @@ -53,3 +53,37 @@ ReactDOM.render( document.getElementById('example') ); ``` + +or using `registerChild` you can specify grid container deeper in layout (by default `WindowScroller` uses `ReactDOM.findDOMNode` function) + +```javascript +import React from 'react'; +import ReactDOM from 'react-dom'; +import { List, WindowScroller } from 'react-virtualized'; +import 'react-virtualized/styles.css'; // only needs to be imported once + +ReactDOM.render( + + {({ height, isScrolling, registerChild, scrollTop }) => ( +
+
+ Table header +
+
+ +
+
+ )} +
, + document.getElementById('example') +); +``` diff --git a/source/WindowScroller/WindowScroller.example.js b/source/WindowScroller/WindowScroller.example.js index 4374c12a9..278f729c8 100644 --- a/source/WindowScroller/WindowScroller.example.js +++ b/source/WindowScroller/WindowScroller.example.js @@ -86,11 +86,11 @@ export default class WindowScrollerExample extends PureComponent<{}, State> { - {({height, isScrolling, childRef, onChildScroll, scrollTop}) => ( + {({height, isScrolling, registerChild, onChildScroll, scrollTop}) => (
{({width}) => ( -
+
{ window.listEl = el; diff --git a/source/WindowScroller/WindowScroller.jest.js b/source/WindowScroller/WindowScroller.jest.js index adb7a815d..0c2b3fab4 100644 --- a/source/WindowScroller/WindowScroller.jest.js +++ b/source/WindowScroller/WindowScroller.jest.js @@ -82,7 +82,7 @@ describe('WindowScroller', () => { expect(component._positionFromLeft).toEqual(left); }); - it('should allow passing child element with childRef of children function param', () => { + it('should allow passing child element with registerChild of children function param', () => { const scrollElement = document.createElement('div'); scrollElement.scrollTop = 100; scrollElement.scrollLeft = 150; @@ -97,7 +97,7 @@ describe('WindowScroller', () => { }); const renderFn = jest.fn(); const component = render(getMarkup({scrollElement, renderFn})); - renderFn.mock.calls[0][0].childRef(child); + renderFn.mock.calls[0][0].registerChild(child); expect(component._positionFromTop).toEqual(300 + 100 - 200); expect(component._positionFromLeft).toEqual(350 + 150 - 250); }); diff --git a/source/WindowScroller/WindowScroller.js b/source/WindowScroller/WindowScroller.js index 4f8a742f9..e9d7e6b1a 100644 --- a/source/WindowScroller/WindowScroller.js +++ b/source/WindowScroller/WindowScroller.js @@ -20,9 +20,9 @@ type Props = { * This function should implement the following signature: * ({ height, isScrolling, scrollLeft, scrollTop, width }) => PropTypes.element */ - children: (params: { + children: ({ onChildScroll: ({scrollTop: number}) => void, - childRef: (?Element) => void, + registerChild: (?Element) => void, height: number, isScrolling: boolean, scrollLeft: number, @@ -31,10 +31,10 @@ type Props = { }) => React.Node, /** Callback to be invoked on-resize: ({ height, width }) */ - onResize: (params: {height: number, width: number}) => void, + onResize: ({height: number, width: number}) => void, /** Callback to be invoked on-scroll: ({ scrollLeft, scrollTop }) */ - onScroll: (params: {scrollLeft: number, scrollTop: number}) => void, + onScroll: ({scrollLeft: number, scrollTop: number}) => void, /** Element to attach scroll event listeners. Defaults to window. */ scrollElement: ?Element, @@ -173,7 +173,7 @@ export default class WindowScroller extends React.PureComponent { return children({ onChildScroll: this._onChildScroll, - childRef: this._childRef, + registerChild: this._registerChild, height, isScrolling, scrollLeft, @@ -182,7 +182,7 @@ export default class WindowScroller extends React.PureComponent { }); } - _childRef = element => { + _registerChild = element => { this._child = element; this.updatePosition(); };