All files / radiobutton 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
 
1x
 
 
 
 
5x
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
8x
 
 
6x
6x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react'
 
/**
 * Radio button off - ic_radio_button_off_24px.svg
 */
const RadioButtonOff = () => (
  <svg width='24' height='24' viewBox='0 0 24 24'>
    <path
      d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'
    />
  </svg>
)
 
/**
 * Radio button on - ic_radio_button_on_24px.svg
 */
const RadioButtonOn = () => (
  <svg width='24' height='24' viewBox='0 0 24 24'>
    <path
      d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'
    />
  </svg>
)
 
const RadioButton = ({name, selectedValue, items, onChange}) => (
  <div className='RadioButton'>
    {items.map((item, index) => {
      var checked = item.toLowerCase() === selectedValue.toLowerCase()
      return (
        <label key={index} className='RadioButton-item'>
          <input
            checked={checked}
            className='RadioButton-input'
            name={name}
            onChange={onChange.bind(this, item)}
            type='radio'
            value={item}
          />
          <div className='RadioButton-icon'>
            {checked
              ? <RadioButtonOn />
              : <RadioButtonOff />
            }
          </div>
          <span className='RadioButton-label'>
            {item}
          </span>
        </label>
      )
    })}
  </div>
)
 
RadioButton.propTypes = {
  name: React.PropTypes.string.isRequired,
  selectedValue: React.PropTypes.string,
  items: React.PropTypes.array,
  onChange: React.PropTypes.func.isRequired
}
 
RadioButton.defaultProps = {
  selectedValue: 'two',
  items: ['one', 'two', 'three']
}
 
export default RadioButton