diff options
Diffstat (limited to 'src/components/ui/InfoBar.js')
-rw-r--r-- | src/components/ui/InfoBar.js | 25 |
1 files changed, 19 insertions, 6 deletions
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js index 612399e9f..bd2af2296 100644 --- a/src/components/ui/InfoBar.js +++ b/src/components/ui/InfoBar.js | |||
@@ -3,11 +3,21 @@ 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 | // import { oneOrManyChildElements } from '../../prop-types'; | 8 | // import { oneOrManyChildElements } from '../../prop-types'; |
8 | import Appear from './effects/Appear'; | 9 | import Appear from './effects/Appear'; |
9 | 10 | ||
10 | export default @observer class InfoBar extends Component { | 11 | const messages = defineMessages({ |
12 | hide: { | ||
13 | id: 'infobar.hide', | ||
14 | defaultMessage: '!!!Hide', | ||
15 | }, | ||
16 | }); | ||
17 | |||
18 | export default | ||
19 | @observer | ||
20 | class InfoBar extends Component { | ||
11 | static propTypes = { | 21 | static propTypes = { |
12 | // eslint-disable-next-line | 22 | // eslint-disable-next-line |
13 | children: PropTypes.any.isRequired, | 23 | children: PropTypes.any.isRequired, |
@@ -32,6 +42,10 @@ export default @observer class InfoBar extends Component { | |||
32 | onHide: () => null, | 42 | onHide: () => null, |
33 | }; | 43 | }; |
34 | 44 | ||
45 | static contextTypes = { | ||
46 | intl: intlShape, | ||
47 | }; | ||
48 | |||
35 | render() { | 49 | render() { |
36 | const { | 50 | const { |
37 | children, | 51 | children, |
@@ -45,6 +59,8 @@ export default @observer class InfoBar extends Component { | |||
45 | onHide, | 59 | onHide, |
46 | } = this.props; | 60 | } = this.props; |
47 | 61 | ||
62 | const { intl } = this.context; | ||
63 | |||
48 | let transitionName = 'slideUp'; | 64 | let transitionName = 'slideUp'; |
49 | if (position === 'top') { | 65 | if (position === 'top') { |
50 | transitionName = 'slideDown'; | 66 | transitionName = 'slideDown'; |
@@ -63,11 +79,7 @@ export default @observer class InfoBar extends Component { | |||
63 | <div className="info-bar__content"> | 79 | <div className="info-bar__content"> |
64 | {children} | 80 | {children} |
65 | {ctaLabel && ( | 81 | {ctaLabel && ( |
66 | <button | 82 | <button type="button" className="info-bar__cta" onClick={onClick}> |
67 | type="button" | ||
68 | className="info-bar__cta" | ||
69 | onClick={onClick} | ||
70 | > | ||
71 | <Loader | 83 | <Loader |
72 | loaded={!ctaLoading} | 84 | loaded={!ctaLoading} |
73 | lines={10} | 85 | lines={10} |
@@ -84,6 +96,7 @@ export default @observer class InfoBar extends Component { | |||
84 | type="button" | 96 | type="button" |
85 | className="info-bar__close mdi mdi-close" | 97 | className="info-bar__close mdi mdi-close" |
86 | onClick={onHide} | 98 | onClick={onHide} |
99 | aria-label={intl.formatMessage(messages.hide)} | ||
87 | /> | 100 | /> |
88 | )} | 101 | )} |
89 | </Appear> | 102 | </Appear> |