diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/components/ui/InfoBar.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/ui/InfoBar.js')
-rw-r--r-- | src/components/ui/InfoBar.js | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js new file mode 100644 index 000000000..aea2bd888 --- /dev/null +++ b/src/components/ui/InfoBar.js | |||
@@ -0,0 +1,88 @@ | |||
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 | // import { oneOrManyChildElements } from '../../prop-types'; | ||
8 | import Appear from '../ui/effects/Appear'; | ||
9 | |||
10 | @observer | ||
11 | export default class InfoBar extends Component { | ||
12 | static propTypes = { | ||
13 | // eslint-disable-next-line | ||
14 | children: PropTypes.any.isRequired, | ||
15 | onClick: PropTypes.func, | ||
16 | type: PropTypes.string, | ||
17 | className: PropTypes.string, | ||
18 | ctaLabel: PropTypes.string, | ||
19 | ctaLoading: PropTypes.bool, | ||
20 | position: PropTypes.string, | ||
21 | sticky: PropTypes.bool, | ||
22 | onHide: PropTypes.func, | ||
23 | }; | ||
24 | |||
25 | static defaultProps = { | ||
26 | onClick: () => null, | ||
27 | type: 'primary', | ||
28 | className: '', | ||
29 | ctaLabel: '', | ||
30 | ctaLoading: false, | ||
31 | position: 'bottom', | ||
32 | sticky: false, | ||
33 | onHide: () => null, | ||
34 | }; | ||
35 | |||
36 | render() { | ||
37 | const { | ||
38 | children, | ||
39 | type, | ||
40 | className, | ||
41 | ctaLabel, | ||
42 | ctaLoading, | ||
43 | onClick, | ||
44 | position, | ||
45 | sticky, | ||
46 | onHide, | ||
47 | } = this.props; | ||
48 | |||
49 | let transitionName = 'slideUp'; | ||
50 | if (position === 'top') { | ||
51 | transitionName = 'slideDown'; | ||
52 | } | ||
53 | |||
54 | return ( | ||
55 | <Appear | ||
56 | transitionName={transitionName} | ||
57 | className={classnames({ | ||
58 | 'info-bar': true, | ||
59 | [`info-bar--${type}`]: true, | ||
60 | [`info-bar--${position}`]: true, | ||
61 | [`${className}`]: true, | ||
62 | })} | ||
63 | > | ||
64 | <div onClick={onClick} className="info-bar__content"> | ||
65 | {children} | ||
66 | {ctaLabel && ( | ||
67 | <button className="info-bar__cta"> | ||
68 | <Loader | ||
69 | loaded={!ctaLoading} | ||
70 | lines={10} | ||
71 | scale={0.3} | ||
72 | color="#FFF" | ||
73 | component="span" | ||
74 | /> | ||
75 | {ctaLabel} | ||
76 | </button> | ||
77 | )} | ||
78 | </div> | ||
79 | {!sticky && ( | ||
80 | <button | ||
81 | className="info-bar__close mdi mdi-close" | ||
82 | onClick={onHide} | ||
83 | /> | ||
84 | )} | ||
85 | </Appear> | ||
86 | ); | ||
87 | } | ||
88 | } | ||