feat(editor): allow tabbing between stop times

Author: evansiroky

lib/editor/components/timetable/EditableCell.js

@@ -9,7 +9,8 @@ import { TIMETABLE_FORMATS } from '../../util/timetable'
  */
 export default class EditableCell extends Component {
   static propTypes = {
-    isEditing: PropTypes.bool
+    isEditing: PropTypes.bool,
+    offsetScrollCol: PropTypes.func.isRequired
   }
 
   state = {
@@ -67,7 +68,8 @@ export default class EditableCell extends Component {
       onRight,
       onRowSelect,
       onUp,
-      renderTime
+      renderTime,
+      offsetScrollCol
     } = this.props
     const {isEditing} = this.state
     switch (evt.keyCode) {
@@ -109,19 +111,17 @@ export default class EditableCell extends Component {
         }
         break
       case 9: // Tab
+        // save and advance to next cell if editing
+        this.save()
+        offsetScrollCol(evt.shiftKey ? -1 : 1)
         evt.preventDefault()
-        // handle shift
-        if (evt.shiftKey) {
-          this.save(evt)
-        } else {
-          this.save(evt)
-        }
+        evt.stopPropagation()
         break
       case 27: // Esc
         this.cancel()
         break
       case 39: // right
-        // do nothing if cell is being edited
+        // cancel event propogation if cell is being edited
         if (isEditing) {
           evt.stopPropagation()
           return
@@ -168,6 +168,10 @@ export default class EditableCell extends Component {
   _onOuterKeyDown = (e) => {
     if (document.activeElement === e.target && e.which === 13) {
       this.handleClick(e)
+    } else if (e.keyCode === 9) {
+      this.props.offsetScrollCol(e.shiftKey ? -1 : 1)
+      e.stopPropagation()
+      e.preventDefault()
     }
   }
 
@@ -213,6 +217,7 @@ export default class EditableCell extends Component {
       }
     }
   }
+
   cellRenderer (value) {
     if (this.props.cellRenderer) {
       return this.props.cellRenderer(this.props.column, value)
@@ -311,7 +316,8 @@ export default class EditableCell extends Component {
         onFocus={this._onInputFocus}
         onBlur={this.cancel} />
       : <div
-        style={divStyle}>
+        style={divStyle}
+        >
         {this.cellRenderer(this.state.data)}
       </div>
     return (

lib/editor/components/timetable/TimetableGrid.js

@@ -7,7 +7,23 @@ import objectPath from 'object-path'
 
 import HeaderCell from './HeaderCell'
 import EditableCell from './EditableCell'
-import {getCellRenderer, getHeaderColumns, isTimeFormat, parseTime, OVERSCAN_ROW_COUNT, OVERSCAN_COLUMN_COUNT, HEADER_GRID_WRAPPER_STYLE, HEADER_GRID_STYLE, LEFT_GRID_WRAPPER_STYLE, LEFT_COLUMN_WIDTH, ROW_HEIGHT, LEFT_GRID_STYLE, TOP_LEFT_STYLE, MAIN_GRID_WRAPPER_STYLE, WRAPPER_STYLE} from '../../util/timetable'
+import {
+  getCellRenderer,
+  getHeaderColumns,
+  isTimeFormat,
+  parseTime,
+  OVERSCAN_ROW_COUNT,
+  OVERSCAN_COLUMN_COUNT,
+  HEADER_GRID_WRAPPER_STYLE,
+  HEADER_GRID_STYLE,
+  LEFT_GRID_WRAPPER_STYLE,
+  LEFT_COLUMN_WIDTH,
+  ROW_HEIGHT,
+  LEFT_GRID_STYLE,
+  TOP_LEFT_STYLE,
+  MAIN_GRID_WRAPPER_STYLE,
+  WRAPPER_STYLE
+} from '../../util/timetable'
 
 export default class TimetableGrid extends Component {
   static propTypes = {
@@ -169,7 +185,9 @@ export default class TimetableGrid extends Component {
         rowIndex={rowIndex}
         style={style}
         onStopEditing={this.handleEndEditing}
-        onChange={this._onCellChange} />
+        onChange={this._onCellChange}
+        offsetScrollCol={this.offsetScrollCol}
+        />
     )
   }
 
@@ -200,9 +218,27 @@ export default class TimetableGrid extends Component {
       : 90
   }
 
+  /**
+   * A helper method to move the active column a certain amount of cells left or right.
+   * This was initially added to help with handling tab and shift + tab events.
+   * @param {number} offset the number of columns to offset, can be positive or negative
+   */
+  offsetScrollCol = (offset) => {
+    const {scrollToColumn, scrollToRow, updateScroll} = this.props
+    updateScroll(
+      scrollToRow,
+      Math.max(Math.min(scrollToColumn + offset, this._getColumnCount() - 1), 0)
+    )
+  }
+
+  _getColumnCount() {
+    const {columns, hideDepartureTimes} = this.props
+    return hideDepartureTimes ? getHeaderColumns(columns).length : columns.length
+  }
+
   render () {
     const {onScroll, scrollLeft, scrollTop, onSectionRendered, scrollToColumn, scrollToRow} = this.props
-    const {style, data, columns, hideDepartureTimes, selected} = this.props
+    const {style, data, columns, selected} = this.props
     const selectAll = selected.length === data.length
     const columnHeaderCount = getHeaderColumns(columns).length
     return (
@@ -267,7 +303,7 @@ export default class TimetableGrid extends Component {
                     ref={Grid => { this.grid = Grid }}
                     style={{outline: 'none'}}
                     columnWidth={this._getColumnWidth}
-                    columnCount={hideDepartureTimes ? columnHeaderCount : columns.length}
+                    columnCount={this._getColumnCount()}
                     height={height}
                     onScroll={onScroll}
                     overscanColumnCount={OVERSCAN_COLUMN_COUNT}