All files / components/select-box/story auto-complete-async.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { SelecBox, AutoComplete } from '../index'
 
class AutoCompleteAsync extends PureComponent {
  constructor() {
    super()
 
    this.state = {
      data: [
        { id: 1, desc: 'Renato Rocha' },
        { id: 2, desc: 'Marcos Pereira' },
        { id: 3, desc: 'Aparecida Silva Arantes' },
        { id: 4, desc: 'João batista' },
        { id: 5, desc: 'Josefina santos' }
      ],
      value: null
    }
  }
 
  _onChange = (value) => {
    this.setState({
      value: value
    })
  }
 
  render () {
    const { data, value } = this.state
    const { multi } = this.props
 
    return (
      <div>
        <AutoComplete
          label='Auto complete'
          placeholder="Pesquise por 're'"
          loadOptions={() => Promise.resolve({ options: data })}
          value={value}
          valueKey='id'
          labelKey='desc'
          multi={multi}
          onChange={this._onChange}
          creatable
        />
 
        <AutoComplete
          label='Auto complete'
          placeholder="Pesquise por 're'"
          type='success'
          message=''
          loadOptions={() => Promise.resolve({ options: data })}
          value={value}
          valueKey='id'
          labelKey='desc'
          multi={multi}
          onChange={this._onChange}
        />
 
        <AutoComplete
          label='Auto complete'
          placeholder="Pesquise por 're'"
          type='error'
          message='Campo com mensagem de explicação'
          loadOptions={() => Promise.resolve({ options: data })}
          value={value}
          valueKey='id'
          labelKey='desc'
          multi={multi}
          onChange={this._onChange}
        />
 
        <AutoComplete
          label='Auto complete'
          placeholder="Pesquise por 're'"
          type='alert'
          message='Campo com mensagem de explicação'
          options={[
            {
              id: '123',
              desc: 'AAAAAAAA'
            }
          ]}
          value={value}
          valueKey='id'
          labelKey='desc'
          multi={multi}
          onChange={this._onChange}
        />
      </div>
    )
  }
}
 
AutoCompleteAsync.propTypes = {
  multi: PropTypes.bool
}
 
export { AutoCompleteAsync }