diff options
author | 2022-10-25 12:51:28 +0530 | |
---|---|---|
committer | 2022-10-25 07:21:28 +0000 | |
commit | f79727a8632490f11c1423773fdd6adfb6337a7b (patch) | |
tree | a80943f4e4e571359c8104341a3957f6e763dce4 /src/components/ui/InfoBar.js | |
parent | add balajiv113 as a contributor for code (#701) [skip ci] (diff) | |
download | ferdium-app-f79727a8632490f11c1423773fdd6adfb6337a7b.tar.gz ferdium-app-f79727a8632490f11c1423773fdd6adfb6337a7b.tar.zst ferdium-app-f79727a8632490f11c1423773fdd6adfb6337a7b.zip |
Transform 'AuthLayoutContainer' component hierarchy to tsx (#699)
Co-authored-by: Muhamed <>
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/components/ui/InfoBar.js')
-rw-r--r-- | src/components/ui/InfoBar.js | 105 |
1 files changed, 0 insertions, 105 deletions
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js deleted file mode 100644 index d73491da0..000000000 --- a/src/components/ui/InfoBar.js +++ /dev/null | |||
@@ -1,105 +0,0 @@ | |||
1 | import { 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 | import { defineMessages, injectIntl } from 'react-intl'; | ||
7 | |||
8 | import { mdiClose } from '@mdi/js'; | ||
9 | import Appear from './effects/Appear'; | ||
10 | import Icon from './icon'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | hide: { | ||
14 | id: 'infobar.hide', | ||
15 | defaultMessage: 'Hide', | ||
16 | }, | ||
17 | }); | ||
18 | |||
19 | // Should this file be converted into the coding style similar to './toggle/index.tsx'? | ||
20 | class InfoBar extends Component { | ||
21 | static propTypes = { | ||
22 | // eslint-disable-next-line react/forbid-prop-types | ||
23 | children: PropTypes.any.isRequired, | ||
24 | onClick: PropTypes.func, | ||
25 | type: PropTypes.string, | ||
26 | className: PropTypes.string, | ||
27 | ctaLabel: PropTypes.string, | ||
28 | ctaLoading: PropTypes.bool, | ||
29 | position: PropTypes.string, | ||
30 | sticky: PropTypes.bool, | ||
31 | onHide: PropTypes.func, | ||
32 | }; | ||
33 | |||
34 | static defaultProps = { | ||
35 | onClick: () => null, | ||
36 | type: 'primary', | ||
37 | className: '', | ||
38 | ctaLabel: '', | ||
39 | ctaLoading: false, | ||
40 | position: 'bottom', | ||
41 | sticky: false, | ||
42 | onHide: () => null, | ||
43 | }; | ||
44 | |||
45 | render() { | ||
46 | const { | ||
47 | children, | ||
48 | type, | ||
49 | className, | ||
50 | ctaLabel, | ||
51 | ctaLoading, | ||
52 | onClick, | ||
53 | position, | ||
54 | sticky, | ||
55 | onHide, | ||
56 | } = this.props; | ||
57 | |||
58 | const { intl } = this.props; | ||
59 | |||
60 | let transitionName = 'slideUp'; | ||
61 | if (position === 'top') { | ||
62 | transitionName = 'slideDown'; | ||
63 | } | ||
64 | |||
65 | return ( | ||
66 | <Appear | ||
67 | transitionName={transitionName} | ||
68 | className={classnames({ | ||
69 | 'info-bar': true, | ||
70 | [`info-bar--${type}`]: true, | ||
71 | [`info-bar--${position}`]: true, | ||
72 | [`${className}`]: true, | ||
73 | })} | ||
74 | > | ||
75 | <div className="info-bar__content"> | ||
76 | {children} | ||
77 | {ctaLabel && ( | ||
78 | <button type="button" className="info-bar__cta" onClick={onClick}> | ||
79 | <Loader | ||
80 | loaded={!ctaLoading} | ||
81 | lines={10} | ||
82 | scale={0.3} | ||
83 | color="#FFF" | ||
84 | component="span" | ||
85 | /> | ||
86 | {ctaLabel} | ||
87 | </button> | ||
88 | )} | ||
89 | </div> | ||
90 | {!sticky && ( | ||
91 | <button | ||
92 | type="button" | ||
93 | className="info-bar__close" | ||
94 | onClick={onHide} | ||
95 | aria-label={intl.formatMessage(messages.hide)} | ||
96 | > | ||
97 | <Icon icon={mdiClose} /> | ||
98 | </button> | ||
99 | )} | ||
100 | </Appear> | ||
101 | ); | ||
102 | } | ||
103 | } | ||
104 | |||
105 | export default injectIntl(observer(InfoBar)); | ||