All files / list index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
1x
1x
 
 
 
 
 
 
 
4x
 
 
 
 
 
90x
10x
 
 
 
 
 
 
 
 
 
 
 
 
10x
 
 
 
 
10x
 
 
 
 
10x
 
 
 
 
10x
 
10x
 
 
 
 
 
10x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react'
import classNames from 'classnames'
 
/**
 * List components
 * TODO:
 *  - borders (spec not clear about borders)
 *  - condensed
 */
export const List = ({children, style}) => (
  <ol className='List' style={style}>
    {children}
  </ol>
)
 
export const Row = ({primary, secondary, subheader, avatar, icon, onClick, onFocus, onBlur, style}) => {
  const onKeyDown = (event) => {
    const arrowUp = 38
    const arrowDown = 40
 
    if (event.which === arrowDown && event.target.nextSibling) {
      event.preventDefault()
      event.target.nextSibling.focus()
    } else if (event.which === arrowUp && event.target.previousSibling) {
      event.preventDefault()
      event.target.previousSibling.focus()
    }
  }
 
  const avatarElement = avatar &&
    <div className='List-row-avatar'>
      {(typeof avatar === 'string' ? <img src={avatar} /> : avatar)}
    </div>
 
  const iconLeftElement = !avatar && icon &&
    <div className='List-row-icon-left'>
      {icon}
    </div>
 
  const iconRightElement = avatar && icon &&
    <div className='List-row-icon-right'>
      {icon}
    </div>
 
  const isSelectable = onFocus || onBlur
 
  const dynamicClasses = {
    'List-row--oneline': (!secondary && !subheader),
    'List-row--twoline': (secondary && !subheader),
    'List-row--threeline': (secondary && subheader),
    'List-row--selectable': isSelectable
  }
  return (
    <li
      className={classNames('List-row', dynamicClasses)}
      onClick={onClick}
      style={style}
      onKeyDown={onKeyDown}
      onFocus={onFocus}
      onBlur={onBlur}
      tabIndex={isSelectable ? '0' : null} >
      {avatarElement}
      {iconLeftElement}
      <div className='List-row-text'>
        <h3 className='List-row-text-primary'>{primary}</h3>
        {subheader && <h4 className='List-row-text-subheader'>{subheader}</h4>}
        {secondary && <span className='List-row-text-secondary'>{secondary}</span>}
      </div>
      {iconRightElement}
    </li>
  )
}