Focus / keyboard experiments

src/components/button.js

@@ -6,6 +6,7 @@ const cn = require('classnames')
 
 const IconButton = ({ classes, icon, ...props }) => (
   <button {...props}
+    tabIndex="-1"
     className={cn({ ...classes, 'btn': true, 'btn-icon': true })}>
     {icon}
   </button>

src/components/item/iterable.js

@@ -15,6 +15,12 @@ class ItemIterable extends PureComponent {
     this.props.dp(getEmptyImage())
   }
 
+  componentDidUpdate(props) {
+    if (this.props.hasFocus && !props.hasFocus) {
+      this.container.focus()
+    }
+  }
+
 
   get classes() {
     return {
@@ -32,6 +38,10 @@ class ItemIterable extends PureComponent {
     return this.props.orientation === 'vertical'
   }
 
+  get tabIndex() {
+    return this.props.hasFocus ? 0 : -1
+  }
+
 
   handleOpen = () => {
     const { item, onItemOpen } = this.props
@@ -62,6 +72,20 @@ class ItemIterable extends PureComponent {
     this.props.onContextMenu(event, this.props.item)
   }
 
+  handleKeyDown = (event) => {
+    const { index, isSelected, onSelectAt } = this.props
+
+    switch (event.key) {
+      case 'ArrowUp':
+        onSelectAt(isSelected ? index - 1 : index)
+        break
+      case 'ArrowDown':
+        onSelectAt(isSelected ? index + 1 : index)
+        break
+    }
+  }
+
+
   setContainer = (container) => {
     this.container = container
   }
@@ -131,6 +155,7 @@ class ItemIterable extends PureComponent {
 
 
   static propTypes = {
+    hasFocus: bool,
     isDragging: bool,
     isLast: bool,
     isOver: bool,
@@ -144,6 +169,7 @@ class ItemIterable extends PureComponent {
       photos: arrayOf(number)
     }).isRequired,
 
+    index: number.isRequired,
     size: number.isRequired,
     orientation: oneOf(['horizontal', 'vertical']),
 
@@ -156,7 +182,8 @@ class ItemIterable extends PureComponent {
     onContextMenu: func.isRequired,
     onDropPhotos: func.isRequired,
     onItemOpen: func.isRequired,
-    onSelect: func.isRequired
+    onSelect: func.isRequired,
+    onSelectAt: func.isRequired
   }
 
   static defaultProps = {

src/components/item/iterator.js

@@ -17,6 +17,13 @@ class ItemIterator extends PureComponent {
     return this.props.selection.includes(item.id)
   }
 
+  hasFocus(item, index) {
+    const { selection } = this.props
+
+    return selection.length ?
+      selection[selection.length - 1] === item.id : index === 0
+  }
+
   getSelection = () => this.props.selection
 
   handleClickOutside = (event) => {
@@ -51,23 +58,34 @@ class ItemIterator extends PureComponent {
     onContextMenu(event, context.join('-'), target)
   }
 
+  handleSelectAt = (index) => {
+    const { items, onSelect } = this.props
+
+    if (index >= 0 && index < items.length) {
+      onSelect(items[index].id, 'replace')
+    }
+  }
+
   connect(element) {
     return (this.props.isDisabled) ? element : this.props.dt(element)
   }
 
   map(fn) {
-    return this.props.items.map((item, idx) => fn({
+    return this.props.items.map((item, index) => fn({
       item,
+      index,
       cache: this.props.cache,
       size: this.size,
-      isLast: idx === this.props.items.length - 1,
+      hasFocus: this.hasFocus(item, index),
+      isLast: index === this.props.items.length - 1,
       isSelected: this.isSelected(item),
       isDisabled: this.props.isDisabled,
       getSelection: this.getSelection,
       onContextMenu: this.handleContextMenu,
       onDropPhotos: this.props.onPhotoMove,
       onItemOpen: this.props.onItemOpen,
-      onSelect: this.props.onSelect
+      onSelect: this.props.onSelect,
+      onSelectAt: this.handleSelectAt
     }))
   }
 

src/components/item/table-row.js

@@ -29,9 +29,12 @@ class ItemTableRow extends ItemIterable {
 
     return this.connect(
       <tr
+        ref={this.setContainer}
+        tabIndex={this.tabIndex}
         className={cn(this.classes)}
         onMouseDown={this.handleMouseDown}
         onDoubleClick={this.handleOpen}
+        onKeyDown={this.handleKeyDown}
         onContextMenu={this.handleContextMenu}>{
           columns.map(({ property, width }) =>
             <ItemTableCell {...pick(props, CellProps)}