diff options
Diffstat (limited to 'src/components/ui/Infobox.js')
-rw-r--r-- | src/components/ui/Infobox.js | 33 |
1 files changed, 21 insertions, 12 deletions
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js index 0917ee9f0..73b48b957 100644 --- a/src/components/ui/Infobox.js +++ b/src/components/ui/Infobox.js | |||
@@ -3,8 +3,18 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import Loader from 'react-loader'; | 5 | import Loader from 'react-loader'; |
6 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | 7 | ||
7 | export default @observer class Infobox extends Component { | 8 | const messages = defineMessages({ |
9 | dismiss: { | ||
10 | id: 'infobox.dismiss', | ||
11 | defaultMessage: '!!!Dismiss', | ||
12 | }, | ||
13 | }); | ||
14 | |||
15 | export default | ||
16 | @observer | ||
17 | class Infobox extends Component { | ||
8 | static propTypes = { | 18 | static propTypes = { |
9 | children: PropTypes.any.isRequired, // eslint-disable-line | 19 | children: PropTypes.any.isRequired, // eslint-disable-line |
10 | icon: PropTypes.string, | 20 | icon: PropTypes.string, |
@@ -28,6 +38,10 @@ export default @observer class Infobox extends Component { | |||
28 | onSeen: () => null, | 38 | onSeen: () => null, |
29 | }; | 39 | }; |
30 | 40 | ||
41 | static contextTypes = { | ||
42 | intl: intlShape, | ||
43 | }; | ||
44 | |||
31 | state = { | 45 | state = { |
32 | dismissed: false, | 46 | dismissed: false, |
33 | }; | 47 | }; |
@@ -49,6 +63,8 @@ export default @observer class Infobox extends Component { | |||
49 | onDismiss, | 63 | onDismiss, |
50 | } = this.props; | 64 | } = this.props; |
51 | 65 | ||
66 | const { intl } = this.context; | ||
67 | |||
52 | if (this.state.dismissed) { | 68 | if (this.state.dismissed) { |
53 | return null; | 69 | return null; |
54 | } | 70 | } |
@@ -61,18 +77,10 @@ export default @observer class Infobox extends Component { | |||
61 | 'infobox--default': !type, | 77 | 'infobox--default': !type, |
62 | })} | 78 | })} |
63 | > | 79 | > |
64 | {icon && ( | 80 | {icon && <i className={`mdi mdi-${icon}`} />} |
65 | <i className={`mdi mdi-${icon}`} /> | 81 | <div className="infobox__content">{children}</div> |
66 | )} | ||
67 | <div className="infobox__content"> | ||
68 | {children} | ||
69 | </div> | ||
70 | {ctaLabel && ( | 82 | {ctaLabel && ( |
71 | <button | 83 | <button className="infobox__cta" onClick={ctaOnClick} type="button"> |
72 | className="infobox__cta" | ||
73 | onClick={ctaOnClick} | ||
74 | type="button" | ||
75 | > | ||
76 | <Loader | 84 | <Loader |
77 | loaded={!ctaLoading} | 85 | loaded={!ctaLoading} |
78 | lines={10} | 86 | lines={10} |
@@ -91,6 +99,7 @@ export default @observer class Infobox extends Component { | |||
91 | if (onDismiss) onDismiss(); | 99 | if (onDismiss) onDismiss(); |
92 | }} | 100 | }} |
93 | className="infobox__delete mdi mdi-close" | 101 | className="infobox__delete mdi mdi-close" |
102 | aria-label={intl.formatMessage(messages.dismiss)} | ||
94 | /> | 103 | /> |
95 | )} | 104 | )} |
96 | </div> | 105 | </div> |