-
Notifications
You must be signed in to change notification settings - Fork 5
/
Alert.js
90 lines (81 loc) · 2.01 KB
/
Alert.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
import * as React from "react";
import PropTypes from "prop-types";
import Button, { buttonTypes, buttonSizes } from "@crave/farmblocks-button";
import StyledAlert from "./styledComponents/Alert";
import AlertTypes from "./constants/alertTypes";
import BrieflyDisplay from "./BrieflyDisplay";
const DEFAULT_Z_INDEX = 2500;
class Alert extends React.Component {
static propTypes = {
text: PropTypes.string.isRequired,
type: PropTypes.oneOf(Object.keys(AlertTypes)),
dismissable: PropTypes.bool,
autoRemove: PropTypes.bool,
onDismiss: PropTypes.func,
visibleTime: PropTypes.number,
zIndex: PropTypes.number,
bottomAligned: PropTypes.bool,
className: PropTypes.string
};
static defaultProps = {
type: AlertTypes.NEWS,
dismissable: true,
autoRemove: true,
zIndex: DEFAULT_Z_INDEX,
onDismiss: () => null,
bottomAligned: false
};
state = {
isVisible: true
};
dismissHandler = () => {
this.setState({ isVisible: false });
this.props.onDismiss();
};
render() {
if (!this.state.isVisible && this.props.autoRemove) {
return null;
}
const {
visibleTime,
autoRemove,
onDismiss,
zIndex,
bottomAligned,
className
} = this.props;
const alert = (
<StyledAlert
className={className}
type={this.props.type}
zIndex={zIndex}
bottomAligned={bottomAligned}
>
<p>{this.props.text}</p>
{this.props.dismissable && (
<div className="dismiss-button">
<Button
icon="wg-close"
size={buttonSizes.SMALL}
type={buttonTypes.OFF_NEUTRAL}
onClick={this.dismissHandler}
/>
</div>
)}
</StyledAlert>
);
if (!visibleTime) {
return alert;
}
return (
<BrieflyDisplay
time={visibleTime}
autoRemove={autoRemove}
onTimeout={onDismiss}
>
{alert}
</BrieflyDisplay>
);
}
}
export default Alert;