All files / components/modal/story modal-form.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { PureComponent } from 'react'
import { Button, Input, SelectBox, Modal } from 'components'
 
class ModalForm extends PureComponent {
  constructor() {
    super()
 
    this.state = {
      show: false
    }
  }
 
  toggleModal = () => {
    this.setState({
      show: !this.state.show
    })
  }
 
  render () {
    const { show } = this.state
 
    return (
      <div>
        <h2>Modal Form</h2>
 
        <Button type='primary' width='150px' onClick={this.toggleModal} >Abrir Modal</Button>
 
        <Modal visible={show} closeModal={this.toggleModal}>
          <Modal.Header>
            <h2>Editar</h2>
          </Modal.Header>
 
          <Modal.Content>
            <Input label='Campo 1' />
            <SelectBox
              placeholder='Selecione uma opção'
              label='selectbox'
              options={[
                { key: 1, value: 'Hoje' },
                { key: 2, value: 'Últimos 30 dias' },
                { key: 3, value: 'Todos' },
                { key: 4, value: 'Todos' },
                { key: 5, value: 'Todos' },
                { key: 6, value: 'Todos' }
              ]}
              valueKey='key'
              labelKey='value'
            />
          </Modal.Content>
 
          <Modal.Footer align="space">
            <Modal.Button width='162px' value='Fechar' onClick={this.toggleModal} />
            <Modal.Button width='162px' type='primary' value='Salvar' />
          </Modal.Footer>
        </Modal>
      </div>
    )
  }
}
 
export default ModalForm