All files / components/select-box/story basic-usage.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
74
75
76
77
78
79
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { PureComponent } from 'react'
import { SelectBox } from './../index'
 
class BasicUsage extends PureComponent {
  constructor() {
    super()
 
    this.state = {
      options: [
        { key: 1, value: 'Hoje' },
        { key: 2, value: 'Últimos 30 dias' },
        { key: 3, value: 'Todos' }
      ],
      value: {}
    }
  }
 
  _onChange = (value) => {
    this.setState({
      value: value
    })
  }
 
  render () {
    const { options, value } = this.state
 
    return (
      <div>
        <SelectBox
          placeholder='Selecione uma opção'
          label='selectbox'
          options={options}
          value={value}
          valueKey='key'
          labelKey='value'
          onChange={this._onChange}
        />
 
        <SelectBox
          placeholder='Selecione uma opção'
          label='Select 2'
          type='success'
          options={options}
          value={value}
          valueKey='key'
          labelKey='value'
          onChange={this._onChange}
        />
 
        <SelectBox
          placeholder='Selecione uma opção'
          label='Select 3'
          type='alert'
          message='Atenção esse valor é perigoso'
          options={options}
          value={value}
          valueKey='key'
          labelKey='value'
          onChange={this._onChange}
        />
 
        <SelectBox
          placeholder='Selecione uma opção'
          label='Select 4'
          type='error'
          message='Erro ao validar o campo'
          options={options}
          value={value}
          valueKey='key'
          labelKey='value'
          onChange={this._onChange}
        />
      </div>
    )
  }
}
 
export { BasicUsage }