Add scrollToIndex support in WindowScroller

docs/WindowScroller.md

@@ -10,7 +10,7 @@ This may change with a future release but for the time being this HOC is should
 ### Prop Types
 | Property | Type | Required? | Description |
 |:---|:---|:---:|:---|
-| children | Function | ✓ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, isScrolling: boolean, scrollTop: number }) => PropTypes.element` |
+| children | Function | ✓ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, isScrolling: boolean, scrollTop: number, 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`. |
@@ -33,7 +33,7 @@ import 'react-virtualized/styles.css'; // only needs to be imported once
 
 ReactDOM.render(
   <WindowScroller>
-    {({ height, isScrolling, scrollTop }) => (
+    {({ height, isScrolling, scrollTop, onChildScroll }) => (
       <List
         autoHeight
         height={height}
@@ -42,6 +42,7 @@ ReactDOM.render(
         rowHeight={...}
         rowRenderer={...}
         scrollTop={scrollTop}
+        onScroll={onChildScroll}
         width={...}
       />
     )}

source/WindowScroller/WindowScroller.example.js

@@ -4,6 +4,7 @@ import Immutable from 'immutable'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
+import { LabeledInput, InputRow } from '../demo/LabeledInput'
 import WindowScroller from './WindowScroller'
 import List from '../List'
 import AutoSizer from '../AutoSizer'
@@ -21,18 +22,20 @@ export default class WindowScrollerExample extends PureComponent {
     super(props)
 
     this.state = {
-      showHeaderText: true
+      showHeaderText: true,
+      scrollToIndex: undefined
     }
 
     this._hideHeader = this._hideHeader.bind(this)
     this._rowRenderer = this._rowRenderer.bind(this)
     this._onCheckboxChange = this._onCheckboxChange.bind(this)
+    this._onScrollToRowChange = this._onScrollToRowChange.bind(this)
     this._setRef = this._setRef.bind(this)
   }
 
   render () {
     const { list, isScrollingCustomElement, customElement } = this.context
-    const { showHeaderText } = this.state
+    const { showHeaderText, scrollToIndex } = this.state
 
     return (
       <ContentBox>
@@ -69,16 +72,25 @@ export default class WindowScrollerExample extends PureComponent {
             Use custom element for scrolling
           </label>
         </ContentBoxParagraph>
-
+        <InputRow>
+          <LabeledInput
+            label='Scroll to'
+            name='onScrollToRow'
+            placeholder='Index...'
+            onChange={this._onScrollToRowChange}
+            value={scrollToIndex || ''}
+          />
+        </InputRow>
         <div className={styles.WindowScrollerWrapper}>
           <WindowScroller
             ref={this._setRef}
             scrollElement={isScrollingCustomElement ? customElement : null}
           >
-            {({ height, isScrolling, scrollTop }) => (
+            {({ height, isScrolling, scrollTop, onChildScroll }) => (
               <AutoSizer disableHeight>
                 {({ width }) => (
                   <List
+                    ref={(el) => { window.listEl = el }}
                     autoHeight
                     className={styles.List}
                     height={height}
@@ -88,7 +100,9 @@ export default class WindowScrollerExample extends PureComponent {
                     rowHeight={30}
                     rowRenderer={this._rowRenderer}
                     scrollTop={scrollTop}
+                    scrollToIndex={scrollToIndex}
                     width={width}
+                    onScroll={onChildScroll}
                   />
                 )}
               </AutoSizer>
@@ -135,4 +149,17 @@ export default class WindowScrollerExample extends PureComponent {
   _onCheckboxChange (event) {
     this.context.setScrollingCustomElement(event.target.checked)
   }
+
+  _onScrollToRowChange (event) {
+    const { list } = this.context
+    let scrollToIndex = Math.min(list.size - 1, parseInt(event.target.value, 10))
+
+    if (isNaN(scrollToIndex)) {
+      scrollToIndex = undefined
+    }
+
+    setTimeout(() => {
+      this.setState({ scrollToIndex })
+    }, 0)
+  }
 }

source/WindowScroller/WindowScroller.jest.js

@@ -6,10 +6,14 @@ import { render } from '../TestUtils'
 import { IS_SCROLLING_TIMEOUT } from './utils/onScroll'
 import WindowScroller from './WindowScroller'
 
-function ChildComponent ({ scrollTop, isScrolling, height }) {
-  return (
-    <div>{`scrollTop:${scrollTop}, isScrolling:${isScrolling}, height:${height}`}</div>
-  )
+class ChildComponent extends React.Component {
+  render () {
+    const { scrollTop, isScrolling, height } = this.props
+
+    return (
+      <div>{`scrollTop:${scrollTop}, isScrolling:${isScrolling}, height:${height}`}</div>
+    )
+  }
 }
 
 function mockGetBoundingClientRectForHeader ({
@@ -32,15 +36,18 @@ function mockGetBoundingClientRectForHeader ({
 function getMarkup ({
   headerElements,
   documentOffset,
+  childRef,
   ...props
 } = {}) {
   const windowScroller = (
     <WindowScroller {...props}>
-      {({ height, isScrolling, scrollTop }) => (
+      {({ height, isScrolling, scrollTop, onChildScroll }) => (
         <ChildComponent
+          ref={childRef}
           height={height}
           isScrolling={isScrolling}
           scrollTop={scrollTop}
+          onScroll={onChildScroll}
         />
       )}
     </WindowScroller>
@@ -316,4 +323,88 @@ describe('WindowScroller', () => {
       expect(windowScroller._positionFromLeft).toBe(300)
     })
   })
+
+  describe('when child scrolls', () => {
+    let originalScrollTo
+    beforeEach(() => {
+      originalScrollTo = window.scrollTo
+      window.scrollTo = (scrollX, scrollY) => simulateWindowScroll({ scrollX, scrollY })
+    })
+
+    afterEach(() => {
+      window.scrollTo = originalScrollTo
+      render.unmount()
+    })
+
+    it('should scroll the scrollElement (when it is window) the desired amount', () => {
+      let windowScroller, childComponent
+
+      render(getMarkup({
+        ref: (ref) => {
+          windowScroller = ref
+        },
+        childRef: (ref) => {
+          childComponent = ref
+        }
+      }))
+
+      childComponent.props.onScroll({ scrollTop: 200 })
+
+      expect(window.scrollY).toEqual(200 + windowScroller._positionFromTop)
+    })
+
+    it('should not scroll the scrollElement if trying to scroll to where we already are', () => {
+      let childComponent
+
+      render(getMarkup({
+        childRef: (ref) => {
+          childComponent = ref
+        }
+      }))
+
+      simulateWindowScroll({ scrollY: 200 })
+
+      window.scrollTo = jest.fn()
+
+      childComponent.props.onScroll({ scrollTop: 200 })
+
+      expect(window.scrollTo).not.toHaveBeenCalled()
+    })
+
+    it('should scroll the scrollElement (when it is an element) the desired amount', () => {
+      let windowScroller, childComponent
+      const divEl = document.createElement('div')
+
+      render(getMarkup({
+        ref: (ref) => {
+          windowScroller = ref
+        },
+        scrollElement: divEl,
+        childRef: (ref) => {
+          childComponent = ref
+        }
+      }))
+
+      childComponent.props.onScroll({ scrollTop: 200 })
+
+      expect(divEl.scrollTop).toEqual(200 + windowScroller._positionFromTop)
+    })
+
+    it('should update own scrollTop', () => {
+      let windowScroller, childComponent
+
+      render(getMarkup({
+        ref: (ref) => {
+          windowScroller = ref
+        },
+        childRef: (ref) => {
+          childComponent = ref
+        }
+      }))
+
+      childComponent.props.onScroll({ scrollTop: 200 })
+
+      expect(windowScroller.state.scrollTop).toEqual(200)
+    })
+  })
 })

source/WindowScroller/WindowScroller.js

@@ -46,6 +46,7 @@ export default class WindowScroller extends PureComponent {
     }
 
     this._onResize = this._onResize.bind(this)
+    this._onChildScroll = this._onChildScroll.bind(this)
     this.__handleWindowScrollEvent = this.__handleWindowScrollEvent.bind(this)
     this.__resetIsScrolling = this.__resetIsScrolling.bind(this)
   }
@@ -104,7 +105,6 @@ export default class WindowScroller extends PureComponent {
 
   componentWillUnmount () {
     unregisterScrollListener(this, this.props.scrollElement || window)
-
     window.removeEventListener('resize', this._onResize, false)
   }
 
@@ -117,14 +117,26 @@ export default class WindowScroller extends PureComponent {
       height,
       isScrolling,
       scrollLeft,
-      scrollTop
+      scrollTop,
+      onChildScroll: this._onChildScroll
     })
   }
 
   _onResize (event) {
     this.updatePosition()
   }
 
+  _onChildScroll ({ scrollTop }) {
+    if (this.state.scrollTop === scrollTop) return
+
+    const scrollElement = this.scrollElement
+    if (scrollElement.scrollTo) {
+      scrollElement.scrollTo(0, scrollTop + this._positionFromTop)
+    } else {
+      scrollElement.scrollTop = scrollTop + this._positionFromTop
+    }
+  }
+
   // Referenced by utils/onScroll
   __handleWindowScrollEvent (event) {
     const { onScroll } = this.props