1  import React from 'react'
 2  import PropTypes from 'prop-types'
 3  import styles from './Alert.module.scss'
 4  
 5  class Alert extends React.Component {
 6    constructor(props) {
 7      super(props)
 8      this.onClickPositive = this.onClickPositive.bind(this)
 9      this.onClickNegative = this.onClickNegative.bind(this)
10    }
11    onClickPositive() {
12      const { hideAlert, positiveListener } = this.props
13      hideAlert()
14      if (positiveListener !== null) positiveListener()
15    }
16    onClickNegative() {
17      const { hideAlert, negativeListener } = this.props
18      hideAlert()
19      if (negativeListener !== null) negativeListener()
20    }
21    render() {
22      const { visible, msg, positiveLabel, negativeLabel } = this.props
23      const cssClassActive = visible ? styles.active : ''
24  
25      return (
26        <div className={`${styles.alertWrapper} ${cssClassActive}`}>
27          <div className={styles.alert}>
28            <div className={styles.msg}>{msg}</div>
29            <div className={styles.actions}>
30              <div className={styles.textButton} onClick={this.onClickPositive}>
31                {positiveLabel}
32              </div>
33              {negativeLabel !== '' && (
34                <div className={styles.textButton} onClick={this.onClickNegative}>
35                  {negativeLabel}
36                </div>
37              )}
38            </div>
39          </div>
40        </div>
41      )
42    }
43  }
44  
45  Alert.defaultProps = {
46    negativeLabel: '',
47    positiveListener: null,
48    negativeListener: null,
49  }
50  
51  Alert.propTypes = {
52    visible: PropTypes.bool.isRequired,
53    msg: PropTypes.string.isRequired,
54    positiveLabel: PropTypes.string.isRequired,
55    negativeLabel: PropTypes.string,
56    positiveListener: PropTypes.func,
57    negativeListener: PropTypes.func,
58    hideAlert: PropTypes.func.isRequired,
59  }
60  
61  export default Alert