Allow stepper to be used as a controlled component

source/ArrowKeyStepper/ArrowKeyStepper.example.css

@@ -20,3 +20,11 @@
 .Radio {
   margin-left: 0.5rem;
 }
+
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+}
+.checkbox {
+  margin-right: 5px;
+}

source/ArrowKeyStepper/ArrowKeyStepper.example.js

@@ -12,16 +12,21 @@ export default class ArrowKeyStepperExample extends PureComponent {
     super(props)
 
     this.state = {
-      mode: 'edges'
+      mode: 'edges',
+      isClickable: true,
+      scrollToColumn: 0,
+      scrollToRow: 0
     }
 
     this._getColumnWidth = this._getColumnWidth.bind(this)
     this._getRowHeight = this._getRowHeight.bind(this)
     this._cellRenderer = this._cellRenderer.bind(this)
+    this._selectCell = this._selectCell.bind(this)
+    this._onClickableChange = this._onClickableChange.bind(this)
   }
 
   render () {
-    const { mode } = this.state
+    const { mode, isClickable, scrollToColumn, scrollToRow } = this.state
 
     return (
       <ContentBox>
@@ -66,10 +71,28 @@ export default class ArrowKeyStepperExample extends PureComponent {
           </label>
         </ContentBoxParagraph>
 
+        <ContentBoxParagraph>
+          <label className={styles.checkboxLabel}>
+            <input
+              aria-label='Enable click selection? (resets selection)'
+              className={styles.checkbox}
+              type='checkbox'
+              checked={isClickable}
+              onChange={this._onClickableChange}
+            />
+            Enable click selection? (resets selection)
+          </label>
+        </ContentBoxParagraph>
+
         <ArrowKeyStepper
           columnCount={100}
+          key={isClickable}
+          isControlled={isClickable}
+          onScrollToChange={isClickable ? this._selectCell : undefined}
           mode={mode}
           rowCount={100}
+          scrollToColumn={scrollToColumn}
+          scrollToRow={scrollToRow}
         >
           {({ onSectionRendered, scrollToColumn, scrollToRow }) => (
             <div>
@@ -118,10 +141,23 @@ export default class ArrowKeyStepperExample extends PureComponent {
       <div
         className={className}
         key={key}
+        onClick={this.state.isClickable && (() => this._selectCell({ scrollToColumn: columnIndex, scrollToRow: rowIndex }))}
         style={style}
       >
         {`r:${rowIndex}, c:${columnIndex}`}
       </div>
     )
   }
+
+  _selectCell ({ scrollToColumn, scrollToRow }) {
+    this.setState({ scrollToColumn, scrollToRow })
+  }
+
+  _onClickableChange (event) {
+    this.setState({
+      isClickable: event.target.checked,
+      scrollToColumn: 0,
+      scrollToRow: 0
+    })
+  }
 }

source/ArrowKeyStepper/ArrowKeyStepper.jest.js

@@ -152,6 +152,47 @@ describe('ArrowKeyStepper', () => {
     assertCurrentScrollTo(node, 0, 0)
   })
 
+  it('should call :onScrollToChange for key down', () => {
+    let numCalls = 0
+    let scrollToColumn
+    let scrollToRow
+    const onScrollToChange = params => {
+      scrollToColumn = params.scrollToColumn
+      scrollToRow = params.scrollToRow
+      numCalls++
+    }
+    const { node } = renderHelper({
+      isControlled: true,
+      onScrollToChange
+    })
+
+    Simulate.keyDown(node, {key: 'ArrowDown'})
+    expect(numCalls).toEqual(1)
+    expect(scrollToColumn).toEqual(0)
+    expect(scrollToRow).toEqual(1)
+  })
+
+  it('should not call :onScrollToChange for prop update', () => {
+    let numCalls = 0
+    const onScrollToChange = params => {
+      numCalls++
+    }
+    const { node } = renderHelper({
+      onScrollToChange,
+      scrollToColumn: 0,
+      scrollToRow: 0
+    })
+
+    renderHelper({
+      isControlled: true,
+      onScrollToChange,
+      node,
+      scrollToColumn: 0,
+      scrollToRow: 1
+    })
+    expect(numCalls).toEqual(0)
+  })
+
   describe('mode === "edges"', () => {
     it('should update :scrollToColumn and :scrollToRow relative to the most recent :onSectionRendered event', () => {
       const { node, onSectionRendered } = renderHelper()

source/ArrowKeyStepper/ArrowKeyStepper.js

@@ -8,6 +8,7 @@ import React, { PureComponent } from 'react'
 export default class ArrowKeyStepper extends PureComponent {
   static defaultProps = {
     disabled: false,
+    isControlled: false,
     mode: 'edges',
     scrollToColumn: 0,
     scrollToRow: 0
@@ -18,7 +19,9 @@ export default class ArrowKeyStepper extends PureComponent {
     className: PropTypes.string,
     columnCount: PropTypes.number.isRequired,
     disabled: PropTypes.bool.isRequired,
+    isControlled: PropTypes.bool.isRequired,
     mode: PropTypes.oneOf(['cells', 'edges']),
+    onScrollToChange: PropTypes.func,
     rowCount: PropTypes.number.isRequired,
     scrollToColumn: PropTypes.number.isRequired,
     scrollToRow: PropTypes.number.isRequired
@@ -42,6 +45,10 @@ export default class ArrowKeyStepper extends PureComponent {
   }
 
   componentWillReceiveProps (nextProps) {
+    if (this.props.isControlled) {
+      return
+    }
+
     const { scrollToColumn, scrollToRow } = nextProps
 
     const {
@@ -76,7 +83,7 @@ export default class ArrowKeyStepper extends PureComponent {
 
   render () {
     const { className, children } = this.props
-    const { scrollToColumn, scrollToRow } = this.state
+    const { scrollToColumn, scrollToRow } = this._getScrollState()
 
     return (
       <div
@@ -102,9 +109,9 @@ export default class ArrowKeyStepper extends PureComponent {
     const {
       scrollToColumn: scrollToColumnPrevious,
       scrollToRow: scrollToRowPrevious
-    } = this.state
+    } = this._getScrollState()
 
-    let { scrollToColumn, scrollToRow } = this.state
+    let { scrollToColumn, scrollToRow } = this._getScrollState()
 
     // The above cases all prevent default event event behavior.
     // This is to keep the grid from scrolling after the snap-to update.
@@ -137,7 +144,7 @@ export default class ArrowKeyStepper extends PureComponent {
     ) {
       event.preventDefault()
 
-      this.setState({ scrollToColumn, scrollToRow })
+      this._updateScrollState({ scrollToColumn, scrollToRow })
     }
   }
 
@@ -147,4 +154,16 @@ export default class ArrowKeyStepper extends PureComponent {
     this._rowStartIndex = rowStartIndex
     this._rowStopIndex = rowStopIndex
   }
+
+  _getScrollState () {
+    return this.props.isControlled ? this.props : this.state
+  }
+
+  _updateScrollState ({ scrollToColumn, scrollToRow }) {
+    if (this.props.isControlled) {
+      this.props.onScrollToChange({ scrollToColumn, scrollToRow })
+    } else {
+      this.setState({ scrollToColumn, scrollToRow })
+    }
+  }
 }

source/AutoSizer/AutoSizer.example.js

@@ -45,7 +45,7 @@ export default class AutoSizerExample extends PureComponent {
               aria-label='Hide description (to show resize)?'
               className={styles.checkbox}
               type='checkbox'
-              value={hideDescription}
+              checked={hideDescription}
               onChange={event => this.setState({ hideDescription: event.target.checked })}
             />
             Hide description (to show resize)?