Fakultas Ilmu Komputer UI

ModalAlert.jsx 1.33 KB
Newer Older
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
import React from 'react';
import { Button, Header, Icon, Modal } from 'semantic-ui-react';

export default class ModalAlert extends React.Component {
  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.state = { open: false, header: '', content: '' };
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
  }

  componentWillUpdate() {
    this.fixBody();
  }

  componentDidUpdate() {
    this.fixBody();
  }

  fixBody = () => {
    const anotherModal = document.getElementsByClassName('ui page modals').length;
    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
  };

  open = (header = this.state.header, content = this.state.content) => {
    this.setState({ open: true, header, content });
  };

  close = () => {
    this.setState({ open: false });
  };

34
  render = () => {
35
    const style = { whiteSpace: 'pre-wrap' };
36
37
38
39
40
41
42
43
44
45
46
47
48
49
    return (
      <Modal open={this.state.open} basic size="small">
        <Header icon="warning sign" content={this.state.header} />
        <Modal.Content>
          <p style={style}>{this.state.content}</p>
        </Modal.Content>
        <Modal.Actions>
          <Button color="green" inverted onClick={this.close}>
            <Icon name="checkmark" /> OK
          </Button>
        </Modal.Actions>
      </Modal>
    );
  };
50
}