All files / components/modal/story modal-media.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { PureComponent } from 'react'
import styled from 'styled-components'
import { Button, Modal } from 'components'
 
const UlStyled = styled.ul`
  display: flex;
  list-style: none;
 
  .list-item
  {
    margin:0px 10px;
  }
`
class ModalStory extends PureComponent {
  constructor(props) {
    super()
    this.state = {
      showModalFull: false,
      showModalSemFooter: false,
      showModalOnlyContent: false
    }
  }
 
  toggleModal = (name) => {
    this.setState({
      [name]: !this.state[name]
    })
  }
 
  render () {
    const { showModalFull, showModalSemFooter, showModalOnlyContent } = this.state
 
    return (
      <div>
        <h2>Modal Media</h2>
        <UlStyled>
          <li className='list-item'>
            <Button type='primary' width='150px' onClick={() => this.toggleModal('showModalFull')} >
              Abrir Modal
            </Button>
          </li>
          <li className='list-item'>
            <Button type='primary' width='150px' onClick={() => this.toggleModal('showModalSemFooter')} >
              Sem Footer
            </Button>
          </li>
          <li className='list-item'>
            <Button type='primary' value='Apenas Conteudo' width='150px' onClick={() => this.toggleModal('showModalOnlyContent')} >
              Apenas Conteudo
            </Button>
          </li>
        </UlStyled>
 
        <Modal visible={showModalFull} closeModal={() => this.toggleModal('showModalFull')} size={Modal.Sizes.MEDIUM}>
          <Modal.Header>
            <h2>Titulo da Modal</h2>
          </Modal.Header>
          <Modal.Content>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor felis, bibendum non aliquet eget, tincidunt ac sapien. Aenean suscipit, odio ut dapibus ultricies, magna eros maximus magna, sit amet posuere nulla libero at nisi. Curabitur sit amet lacinia enim. Phasellus lorem sapien, tincidunt a consectetur ac, sollicitudin nec massa. Donec et magna arcu. Praesent purus tellus, convallis id purus in, luctus dictum erat. Aliquam ante dolor, laoreet malesuada est ac, ultrices semper elit. Vestibulum metus neque, semper at dui non, laoreet fermentum erat. Aliquam eget ex quis elit semper scelerisque. Mauris nisi nisi, faucibus ac cursus id, placerat quis orci. Suspendisse sollicitudin porttitor odio non posuere.
            </p>
          </Modal.Content>
          <Modal.Footer align='left'>
            <Modal.Button type='primary' value='Close' onClick={() => this.toggleModal('showModalFull')} />
          </Modal.Footer>
        </Modal>
 
        <Modal visible={showModalSemFooter} closeModal={() => this.toggleModal('showModalSemFooter')} size={Modal.Sizes.MEDIUM}>
          <Modal.Header>
            <h2> Modal Pequena Sem Footer</h2>
          </Modal.Header>
          <Modal.Content overflowY>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor felis, bibendum non aliquet eget, tincidunt ac sapien. Aenean suscipit, odio ut dapibus ultricies, magna eros maximus magna, sit amet posuere nulla libero at nisi. Curabitur sit amet lacinia enim. Phasellus lorem sapien, tincidunt a consectetur ac, sollicitudin nec massa. Donec et magna arcu. Praesent purus tellus, convallis id purus in, luctus dictum erat. Aliquam ante dolor, laoreet malesuada est ac, ultrices semper elit. Vestibulum metus neque, semper at dui non, laoreet fermentum erat. Aliquam eget ex quis elit semper scelerisque. Mauris nisi nisi, faucibus ac cursus id, placerat quis orci. Suspendisse sollicitudin porttitor odio non posuere.
            </p>
            <p>
              Vestibulum vel facilisis magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis a sem vel nulla gravida dapibus. Curabitur sit amet pretium eros. Donec felis purus, feugiat a urna vitae, euismod efficitur eros. Proin a felis id tellus bibendum imperdiet. Aenean eleifend nunc ut eros consectetur, sit amet sagittis lacus sodales. Curabitur maximus risus ligula, non rutrum metus auctor et. In nisl ex, auctor id vulputate vel, iaculis id massa. In ut neque ultrices, porttitor mauris ac, congue dolor. Donec a metus vitae purus volutpat lacinia. Nam eu felis felis. Etiam faucibus nisi in convallis consequat. Mauris ac erat nec est interdum interdum sed sed turpis.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor felis, bibendum non aliquet eget, tincidunt ac sapien. Aenean suscipit, odio ut dapibus ultricies, magna eros maximus magna, sit amet posuere nulla libero at nisi. Curabitur sit amet lacinia enim. Phasellus lorem sapien, tincidunt a consectetur ac, sollicitudin nec massa. Donec et magna arcu. Praesent purus tellus, convallis id purus in, luctus dictum erat. Aliquam ante dolor, laoreet malesuada est ac, ultrices semper elit. Vestibulum metus neque, semper at dui non, laoreet fermentum erat. Aliquam eget ex quis elit semper scelerisque. Mauris nisi nisi, faucibus ac cursus id, placerat quis orci. Suspendisse sollicitudin porttitor odio non posuere.
            </p>
          </Modal.Content>
        </Modal>
 
        <Modal visible={showModalOnlyContent} closeModal={() => this.toggleModal('showModalOnlyContent')} size={Modal.Sizes.MEDIUM}>
          <Modal.Content>
            Modal Conteudo
          </Modal.Content>
        </Modal>
      </div>
    )
  }
}
 
export default ModalStory