diff options
Diffstat (limited to 'src/components/ui/Infobox.js')
-rw-r--r-- | src/components/ui/Infobox.js | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js new file mode 100644 index 000000000..2d063c7ef --- /dev/null +++ b/src/components/ui/Infobox.js | |||
@@ -0,0 +1,87 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import classnames from 'classnames'; | ||
5 | import Loader from 'react-loader'; | ||
6 | |||
7 | @observer | ||
8 | export default class Infobox extends Component { | ||
9 | static propTypes = { | ||
10 | children: PropTypes.any.isRequired, // eslint-disable-line | ||
11 | icon: PropTypes.string, | ||
12 | type: PropTypes.string, | ||
13 | ctaOnClick: PropTypes.func, | ||
14 | ctaLabel: PropTypes.string, | ||
15 | ctaLoading: PropTypes.bool, | ||
16 | dismissable: PropTypes.bool, | ||
17 | }; | ||
18 | |||
19 | static defaultProps = { | ||
20 | icon: '', | ||
21 | type: 'primary', | ||
22 | dismissable: false, | ||
23 | ctaOnClick: () => null, | ||
24 | ctaLabel: '', | ||
25 | ctaLoading: false, | ||
26 | }; | ||
27 | |||
28 | state = { | ||
29 | dismissed: false, | ||
30 | }; | ||
31 | |||
32 | render() { | ||
33 | const { | ||
34 | children, | ||
35 | icon, | ||
36 | type, | ||
37 | ctaLabel, | ||
38 | ctaLoading, | ||
39 | ctaOnClick, | ||
40 | dismissable, | ||
41 | } = this.props; | ||
42 | |||
43 | if (this.state.dismissed) { | ||
44 | return null; | ||
45 | } | ||
46 | |||
47 | return ( | ||
48 | <div | ||
49 | className={classnames({ | ||
50 | infobox: true, | ||
51 | [`infobox--${type}`]: type, | ||
52 | 'infobox--default': !type, | ||
53 | })} | ||
54 | > | ||
55 | {icon && ( | ||
56 | <i className={`mdi mdi-${icon}`} /> | ||
57 | )} | ||
58 | <div className="infobox__content"> | ||
59 | {children} | ||
60 | </div> | ||
61 | {ctaLabel && ( | ||
62 | <button | ||
63 | className="infobox__cta" | ||
64 | onClick={ctaOnClick} | ||
65 | > | ||
66 | <Loader | ||
67 | loaded={!ctaLoading} | ||
68 | lines={10} | ||
69 | scale={0.3} | ||
70 | color="#FFF" | ||
71 | component="span" | ||
72 | /> | ||
73 | {ctaLabel} | ||
74 | </button> | ||
75 | )} | ||
76 | {dismissable && ( | ||
77 | <button | ||
78 | onClick={() => this.setState({ | ||
79 | dismissed: true, | ||
80 | })} | ||
81 | className="infobox__delete mdi mdi-close" | ||
82 | /> | ||
83 | )} | ||
84 | </div> | ||
85 | ); | ||
86 | } | ||
87 | } | ||