Fakultas Ilmu Komputer UI

ModalAlert.jsx 1.22 KB
Newer Older
1
import React from 'react';
2
import { Modal, Button, Icon, Header } from 'semantic-ui-react';
3
4
5
6

export default class ModalAlert extends React.Component {
  static propTypes = {
    onChangeValue: React.PropTypes.func.isRequired,
7
    coverLetter: React.PropTypes.string.isRequired,
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    header: React.PropTypes.oneOfType([
      React.PropTypes.node,
      React.PropTypes.string,
    ]).isRequired,
    content: React.PropTypes.oneOfType([
      React.PropTypes.node,
      React.PropTypes.string,
    ]).isRequired,
  };

  state = { open: false };

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

  render() {
    const { open } = this.state;

    return (
      <Modal
        open={open}
        onOpen={this.open}
        onClose={this.close}
        size="small"
32
33
        basic
        trigger={<Button color="blue" > Proceed <Icon name="right chevron" /></Button>}
34
35
36
37
38
39
      >
        <Modal.Header>{this.props.header}</Modal.Header>
        <Modal.Content>
          <p>{this.props.content}</p>
        </Modal.Content>
        <Modal.Actions>
40
          <Button icon='checkmark' color="green" content="All Done" onClick={this.props.onChangeValue} />
41
42
43
44
45
        </Modal.Actions>
      </Modal>
    );
  }
}