feat(editor): better tab handling in timetable grid

Author: evansiroky

lib/editor/components/timetable/EditableCell.js

@@ -127,6 +127,9 @@ export default class EditableCell extends Component {
           return
         }
 
+        // update scroll position in TimetableGrid
+        offsetScrollCol(1)
+
         // save and move to next cell if at end of string
         if (input.selectionStart === input.value.length) {
           this.save(evt)
@@ -141,6 +144,9 @@ export default class EditableCell extends Component {
           return
         }
 
+        // update scroll position in TimetableGrid
+        offsetScrollCol(-1)
+
         // save and move to next cell if at start of string
         if (input.selectionStart === 0 && input.selectionEnd === input.value.length) {
           this.save(evt)
@@ -166,12 +172,23 @@ 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()
+    const {offsetScrollCol} = this.props
+    switch (e.keyCode) {
+      case 9:  // tab
+        // update scroll position in TimetableGrid
+        offsetScrollCol(e.shiftKey ? -1 : 1)
+        // prevent other listeners and default browser tabbing
+        e.stopPropagation()
+        e.preventDefault()
+        break
+      case 37: // left
+        // update scroll position in TimetableGrid
+        offsetScrollCol(-1)
+        break
+      case 39: // right
+        // update scroll position in TimetableGrid
+        offsetScrollCol(1)
+        break
     }
   }
 

lib/editor/components/timetable/TimetableGrid.js

@@ -43,16 +43,20 @@ export default class TimetableGrid extends Component {
   handleKeyPress = (evt) => {
     const {activeCell, setActiveCell, scrollToColumn, scrollToRow} = this.props
     switch (evt.keyCode) {
+      case 8: // DELETE
+        // TODO: add delete cell value
+        // updateCellValue('', rowIndex, `${scrollToRow}.${col.key}`)
+        break
+      case 9:  // tab
+        this.offsetScrollCol(evt.shiftKey ? -1 : 1)
+        evt.preventDefault()
+        break
       case 13: // Enter
         if (!activeCell) {
           return setActiveCell(`${scrollToRow}-${scrollToColumn}`)
         } else {
           return setActiveCell(null)
         }
-      case 8: // DELETE
-        // TODO: add delete cell value
-        // updateCellValue('', rowIndex, `${scrollToRow}.${col.key}`)
-        break
       case 67:
         // handle copy
         if (evt.ctrlKey) {
@@ -166,27 +170,26 @@ export default class TimetableGrid extends Component {
     const isInvalid = isTimeFormat(col.type) && val >= 0 && val < previousValue && val !== null
     return (
       <EditableCell
-        key={key}
-        onClick={updateScroll}
-        // duplicateLeft={(evt) => updateCellValue(previousValue, rowIndex, `${rowIndex}.${col.key}`)}
+        cellRenderer={getCellRenderer}
+        column={col}
+        columnIndex={columnIndex} // pass original index to prevent issues with updateScroll/scrollsync
+        data={val}
         handlePastedRows={this.handlePastedRows}
+        hideDepartureTimes={hideDepartureTimes}
         invalidData={isInvalid}
         isEditing={isEditing}
-        isSelected={rowIsChecked}
         isFocused={isFocused}
-        hideDepartureTimes={hideDepartureTimes}
+        isSelected={rowIsChecked}
+        key={key}
         lightText={col.type === 'DEPARTURE_TIME'}
+        offsetScrollCol={this.offsetScrollCol}
+        onChange={this._onCellChange}
+        onClick={updateScroll}
+        onStopEditing={this.handleEndEditing}
         placeholder={col.placeholder}
         renderTime={isTimeFormat(col.type)}
-        cellRenderer={getCellRenderer}
-        data={val}
-        column={col}
-        columnIndex={columnIndex} // pass original index to prevent issues with updateScroll/scrollsync
         rowIndex={rowIndex}
         style={style}
-        onStopEditing={this.handleEndEditing}
-        onChange={this._onCellChange}
-        offsetScrollCol={this.offsetScrollCol}
         />
     )
   }