react-js-banner 0.7.2 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +10 -10
- package/.github/FUNDING.yml +14 -0
- package/.github/workflows/webpack.yml +28 -0
- package/.nvmrc +1 -1
- package/LICENSE +21 -21
- package/README.md +195 -210
- package/build/index.js +1 -1
- package/build/index.js.LICENSE.txt +0 -2
- package/package.json +49 -48
- package/src/banner.css +78 -61
- package/src/index.js +118 -133
- package/webpack.config.js +22 -26
package/.babelrc
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
{
|
|
2
|
-
"presets":[
|
|
3
|
-
"@babel/preset-env",
|
|
4
|
-
[
|
|
5
|
-
"@babel/preset-react",
|
|
6
|
-
{
|
|
7
|
-
"runtime": "automatic"
|
|
8
|
-
}
|
|
9
|
-
]
|
|
10
|
-
]
|
|
1
|
+
{
|
|
2
|
+
"presets":[
|
|
3
|
+
"@babel/preset-env",
|
|
4
|
+
[
|
|
5
|
+
"@babel/preset-react",
|
|
6
|
+
{
|
|
7
|
+
"runtime": "automatic"
|
|
8
|
+
}
|
|
9
|
+
]
|
|
10
|
+
]
|
|
11
11
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
# These are supported funding model platforms
|
|
2
|
+
|
|
3
|
+
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
|
|
4
|
+
patreon: Jacware
|
|
5
|
+
open_collective: # Replace with a single Open Collective username
|
|
6
|
+
ko_fi: # Replace with a single Ko-fi username
|
|
7
|
+
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
|
|
8
|
+
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
|
|
9
|
+
liberapay: # Replace with a single Liberapay username
|
|
10
|
+
issuehunt: # Replace with a single IssueHunt username
|
|
11
|
+
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
|
|
12
|
+
polar: # Replace with a single Polar username
|
|
13
|
+
buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
|
|
14
|
+
custom: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2MSMEVFF9P33N
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
name: NodeJS with Webpack
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
branches: [ "master" ]
|
|
6
|
+
pull_request:
|
|
7
|
+
branches: [ "master" ]
|
|
8
|
+
|
|
9
|
+
jobs:
|
|
10
|
+
build:
|
|
11
|
+
runs-on: ubuntu-latest
|
|
12
|
+
|
|
13
|
+
strategy:
|
|
14
|
+
matrix:
|
|
15
|
+
node-version: [14.x, 16.x, 18.x]
|
|
16
|
+
|
|
17
|
+
steps:
|
|
18
|
+
- uses: actions/checkout@v4
|
|
19
|
+
|
|
20
|
+
- name: Use Node.js ${{ matrix.node-version }}
|
|
21
|
+
uses: actions/setup-node@v3
|
|
22
|
+
with:
|
|
23
|
+
node-version: ${{ matrix.node-version }}
|
|
24
|
+
|
|
25
|
+
- name: Build
|
|
26
|
+
run: |
|
|
27
|
+
npm install
|
|
28
|
+
npx webpack
|
package/.nvmrc
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
v6.10
|
|
1
|
+
v6.10
|
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2018 Jose
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2018 Jose
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,210 +1,195 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
# react-js-banner
|
|
8
|
-
|
|
9
|
-
Simple React JS
|
|
10
|
-
|
|
11
|
-
# Description
|
|
12
|
-
|
|
13
|
-
It is a simple
|
|
14
|
-
Styles (font and background) can be customized
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
### v0.
|
|
158
|
-
*
|
|
159
|
-
*
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
*
|
|
163
|
-
|
|
164
|
-
### v0.
|
|
165
|
-
*
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
### v0.
|
|
180
|
-
*
|
|
181
|
-
|
|
182
|
-
### v0.
|
|
183
|
-
*
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
*
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
* Prop types added
|
|
197
|
-
|
|
198
|
-
### v0.2.1
|
|
199
|
-
* Feature for adding images to banner added
|
|
200
|
-
|
|
201
|
-
### v0.2.0
|
|
202
|
-
* Visible time feature added
|
|
203
|
-
|
|
204
|
-
### v0.1.0
|
|
205
|
-
* Initial release
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
# License
|
|
209
|
-
|
|
210
|
-
Licensed under the MIT License © [jciccio](https://www.npmjs.com/~jciccio)
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
# react-js-banner
|
|
8
|
+
|
|
9
|
+
Simple React JS text banner component with fade in / out animation and customizable options.
|
|
10
|
+
|
|
11
|
+
# Description
|
|
12
|
+
|
|
13
|
+
It is a simple customizable text banner component (like warning, error, success).
|
|
14
|
+
Styles (font and background) can be customized or you can use the built-in variants.
|
|
15
|
+
By default the banner has a fade in and fade out animation of 1s (customizable).
|
|
16
|
+
This can be used in two ways:
|
|
17
|
+
1. Shown for a specific amount of time using `visibleTime` prop.
|
|
18
|
+
2. Handled manually with manual dismissal.
|
|
19
|
+
|
|
20
|
+
# How it looks
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
**How to thank me?**
|
|
25
|
+
Just click on ⭐️ button or buy me a tea using the donation button below :)
|
|
26
|
+
|
|
27
|
+
# Installation
|
|
28
|
+
|
|
29
|
+
Install it from npm and include it in your React build process (using Webpack, Browserify, etc).
|
|
30
|
+
|
|
31
|
+
``` console
|
|
32
|
+
npm i react-js-banner
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
# Usage
|
|
36
|
+
|
|
37
|
+
Import `Banner` in your react component.
|
|
38
|
+
|
|
39
|
+
``` javascript
|
|
40
|
+
import Banner from 'react-js-banner';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Basic Example:
|
|
44
|
+
|
|
45
|
+
```javascript
|
|
46
|
+
<Banner
|
|
47
|
+
id="banner1"
|
|
48
|
+
title="This is an example Banner Title"
|
|
49
|
+
css={{ color: "#000", backgroundColor: "grey", fontFamily: "arial" }}
|
|
50
|
+
/>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## New Features (v0.8.0)
|
|
54
|
+
|
|
55
|
+
### Variants
|
|
56
|
+
You can now use `variant` prop for predefined styles: `success`, `error`, `warning`, `info`.
|
|
57
|
+
|
|
58
|
+
```javascript
|
|
59
|
+
<Banner
|
|
60
|
+
title="Success!"
|
|
61
|
+
variant="success"
|
|
62
|
+
/>
|
|
63
|
+
<Banner
|
|
64
|
+
title="Error Occurred"
|
|
65
|
+
variant="error"
|
|
66
|
+
/>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Positioning
|
|
70
|
+
Fix the banner to the top or bottom of the screen using the `position` prop: `top`, `bottom`.
|
|
71
|
+
|
|
72
|
+
```javascript
|
|
73
|
+
<Banner
|
|
74
|
+
title="Fixed Top Banner"
|
|
75
|
+
variant="info"
|
|
76
|
+
position="top"
|
|
77
|
+
/>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Dismissible
|
|
81
|
+
Add a close button with the `dismissible` prop.
|
|
82
|
+
|
|
83
|
+
```javascript
|
|
84
|
+
<Banner
|
|
85
|
+
title="Closable Banner"
|
|
86
|
+
variant="warning"
|
|
87
|
+
dismissible={true}
|
|
88
|
+
/>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Advanced Examples
|
|
92
|
+
|
|
93
|
+
### Timed Visibility
|
|
94
|
+
If you want the banner to be available for a specific amount of time, `visibleTime` prop can be passed:
|
|
95
|
+
|
|
96
|
+
```javascript
|
|
97
|
+
<Banner
|
|
98
|
+
title="This banner disappears in 3 seconds"
|
|
99
|
+
visibleTime={3000}
|
|
100
|
+
/>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Image Support
|
|
104
|
+
Example of banner with image:
|
|
105
|
+
```javascript
|
|
106
|
+
import logo from './logo.svg';
|
|
107
|
+
```
|
|
108
|
+
``` html
|
|
109
|
+
<Banner
|
|
110
|
+
title="This is an example banner with Image"
|
|
111
|
+
image={logo}
|
|
112
|
+
imageClass="App-logo"
|
|
113
|
+
css={{ color: "white", backgroundColor: "#333" }}
|
|
114
|
+
/>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### Children Support
|
|
118
|
+
The banner accepts a list of children to display complex content.
|
|
119
|
+
``` html
|
|
120
|
+
<Banner>
|
|
121
|
+
<div>
|
|
122
|
+
<h1>h1</h1>
|
|
123
|
+
<h2>h2</h2>
|
|
124
|
+
</div>
|
|
125
|
+
</Banner>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
# Props
|
|
129
|
+
|
|
130
|
+
| Name | Type | Mandatory | Description
|
|
131
|
+
| ------------- |:-------------:| -----:|:-----|
|
|
132
|
+
| id | String | N | Banner Id (optional unless using callback) |
|
|
133
|
+
| title | String | N | Adding some text will make the banner appear |
|
|
134
|
+
| css | object | N| CSS customizations |
|
|
135
|
+
| variant | String | N | Predefined style: 'success', 'error', 'warning', 'info' |
|
|
136
|
+
| position | String | N | fixed position: 'top', 'bottom' |
|
|
137
|
+
| dismissible | bool | N | shows a close button |
|
|
138
|
+
| visibleTime | number | N| Time in milliseconds you want the banner to be visible |
|
|
139
|
+
| image | String | N| image to appear at the left of text |
|
|
140
|
+
| imageClass | String | N| image css class e.g "image-customized-class" |
|
|
141
|
+
| transitionAppearTime | number| N| time for the banner to appear |
|
|
142
|
+
| transitionTime | number | N| time for the transition to take |
|
|
143
|
+
| onHideCallback | function | N| callback when the popup hides (to be used with visible time prop or dismissible) |
|
|
144
|
+
|
|
145
|
+
# Donations
|
|
146
|
+
|
|
147
|
+
If you think that any information you obtained here is useful and worth of some money and are willing to pay for it, feel free to send any amount through Paypal :)
|
|
148
|
+
|
|
149
|
+
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2MSMEVFF9P33N)
|
|
150
|
+
|
|
151
|
+
You can also follow me on Patreon:
|
|
152
|
+
https://patreon.com/Jacware
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
# Changelog
|
|
156
|
+
|
|
157
|
+
### v0.8.0
|
|
158
|
+
* **Major Update**: Component refactored to Functional Component (Hooks).
|
|
159
|
+
* **New Feature**: `variant` prop added (success, error, warning, info).
|
|
160
|
+
* **New Feature**: `position` prop added (top, bottom).
|
|
161
|
+
* **New Feature**: `dismissible` prop added.
|
|
162
|
+
* **Update**: Dependencies updated to specific React 18/19 support and Webpack 5.
|
|
163
|
+
|
|
164
|
+
### v0.7.2
|
|
165
|
+
* Package size further optimized from ~118kb+ to <11kb packed / 31kb unpacked :)
|
|
166
|
+
|
|
167
|
+
### v0.7.1
|
|
168
|
+
* Package size optimized from ~600kb+ to <100kb
|
|
169
|
+
|
|
170
|
+
### v0.7.0
|
|
171
|
+
* New function callback when the popup hides.
|
|
172
|
+
* Enhanced fade in / out animations.
|
|
173
|
+
* Code optimizations.
|
|
174
|
+
|
|
175
|
+
### v0.6.0
|
|
176
|
+
* Bug Fixes
|
|
177
|
+
* Dependencies updated
|
|
178
|
+
|
|
179
|
+
### v0.5.0
|
|
180
|
+
* Added ability to accept children.
|
|
181
|
+
|
|
182
|
+
### v0.3.0
|
|
183
|
+
* Added ability to show / hide banner whenever is required via new showBanner prop
|
|
184
|
+
* Banner can render HTML snippets
|
|
185
|
+
|
|
186
|
+
### v0.2.0
|
|
187
|
+
* Visible time feature added
|
|
188
|
+
|
|
189
|
+
### v0.1.0
|
|
190
|
+
* Initial release
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
# License
|
|
194
|
+
|
|
195
|
+
Licensed under the MIT License © [jciccio](https://www.npmjs.com/~jciccio)
|
package/build/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see index.js.LICENSE.txt */
|
|
2
|
-
(()=>{var t={665:(t,e,r)=>{"use strict";r.d(e,{A:()=>i});var n=r(314),o=r.n(n)()((function(t){return t[1]}));o.push([t.id,"@keyframes opacityOn {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 25% {\r\n opacity: 0;\r\n }\r\n 50% {\r\n opacity: 1;\r\n }\r\n 85% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n opacity: 0;\r\n }\r\n}\r\n\r\n@keyframes noFadeOut {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 50% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n.banner{\r\n background-color: orange;\r\n text-align: center;\r\n padding: 10px 10px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n display: flex;\r\n margin-bottom: 10px;\r\n text-align: center;\r\n align-items: center;\r\n justify-content: center;\r\n animation: opacityOn 5s normal forwards;\r\n}\r\n\r\n.banner-transition-appear {\r\n opacity: 0.01;\r\n}\r\n\r\n.banner-transition-appear.banner-transition-appear-active {\r\n opacity: 1;\r\n transition: opacity 2s ease;\r\n}\r\n\r\n.banner-transition-leave {\r\n opacity: 1;\r\n}\r\n\r\n.banner-transition-leave.banner-transition-leave-active {\r\n opacity: 0.01;\r\n transition: opacity 2s ease;\r\n}\r\n",""]);const i=o},314:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var r=t(e);return e[2]?"@media ".concat(e[2]," {").concat(r,"}"):r})).join("")},e.i=function(t,r,n){"string"==typeof t&&(t=[[null,t,""]]);var o={};if(n)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var s=0;s<t.length;s++){var c=[].concat(t[s]);n&&o[c[0]]||(r&&(c[2]?c[2]="".concat(r," and ").concat(c[2]):c[2]=r),e.push(c))}},e}},694:(t,e,r)=>{"use strict";var n=r(925);function o(){}function i(){}i.resetWarningCache=o,t.exports=function(){function t(t,e,r,o,i,a){if(a!==n){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function e(){return t}t.isRequired=t;var r={array:t,bigint:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,elementType:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:i,resetWarningCache:o};return r.PropTypes=r,r}},556:(t,e,r)=>{t.exports=r(694)()},925:t=>{"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},20:(t,e,r)=>{"use strict";var n=r(953),o=Symbol.for("react.element"),i=(Symbol.for("react.fragment"),Object.prototype.hasOwnProperty),a=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function c(t,e,r){var n,c={},u=null,l=null;for(n in void 0!==r&&(u=""+r),void 0!==e.key&&(u=""+e.key),void 0!==e.ref&&(l=e.ref),e)i.call(e,n)&&!s.hasOwnProperty(n)&&(c[n]=e[n]);if(t&&t.defaultProps)for(n in e=t.defaultProps)void 0===c[n]&&(c[n]=e[n]);return{$$typeof:o,type:t,key:u,ref:l,props:c,_owner:a.current}}e.jsx=c,e.jsxs=c},848:(t,e,r)=>{"use strict";t.exports=r(20)},72:t=>{"use strict";var e=[];function r(t){for(var r=-1,n=0;n<e.length;n++)if(e[n].identifier===t){r=n;break}return r}function n(t,n){for(var i={},a=[],s=0;s<t.length;s++){var c=t[s],u=n.base?c[0]+n.base:c[0],l=i[u]||0,p="".concat(u," ").concat(l);i[u]=l+1;var f=r(p),h={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==f)e[f].references++,e[f].updater(h);else{var y=o(h,n);n.byIndex=s,e.splice(s,0,{identifier:p,updater:y,references:1})}a.push(p)}return a}function o(t,e){var r=e.domAPI(e);return r.update(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap&&e.supports===t.supports&&e.layer===t.layer)return;r.update(t=e)}else r.remove()}}t.exports=function(t,o){var i=n(t=t||[],o=o||{});return function(t){t=t||[];for(var a=0;a<i.length;a++){var s=r(i[a]);e[s].references--}for(var c=n(t,o),u=0;u<i.length;u++){var l=r(i[u]);0===e[l].references&&(e[l].updater(),e.splice(l,1))}i=c}}},659:t=>{"use strict";var e={};t.exports=function(t,r){var n=function(t){if(void 0===e[t]){var r=document.querySelector(t);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}e[t]=r}return e[t]}(t);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},540:t=>{"use strict";t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},56:(t,e,r)=>{"use strict";t.exports=function(t){var e=r.nc;e&&t.setAttribute("nonce",e)}},825:t=>{"use strict";t.exports=function(t){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=t.insertStyleElement(t);return{update:function(r){!function(t,e,r){var n="";r.supports&&(n+="@supports (".concat(r.supports,") {")),r.media&&(n+="@media ".concat(r.media," {"));var o=void 0!==r.layer;o&&(n+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),n+=r.css,o&&(n+="}"),r.media&&(n+="}"),r.supports&&(n+="}");var i=r.sourceMap;i&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleTagTransform(n,t,e.options)}(e,t,r)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},113:t=>{"use strict";t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}},953:t=>{"use strict";t.exports=require("react")}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={id:n,exports:{}};return t[n](i,i.exports,r),i.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.nc=void 0;var n={};(()=>{"use strict";r.r(n),r.d(n,{default:()=>I});var t=r(953),e=r(556),o=r.n(e),i=r(72),a=r.n(i),s=r(825),c=r.n(s),u=r(659),l=r.n(u),p=r(56),f=r.n(p),h=r(540),y=r.n(h),d=r(113),v=r.n(d),m=r(665),b={};b.styleTagTransform=v(),b.setAttributes=f(),b.insert=l().bind(null,"head"),b.domAPI=c(),b.insertStyleElement=y(),a()(m.A,b),m.A&&m.A.locals&&m.A.locals;var g=r(848);function w(t){return w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},w(t)}function O(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function x(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?O(Object(r),!0).forEach((function(e){var n,o,i;n=t,o=e,i=r[e],(o=E(o))in n?Object.defineProperty(n,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):O(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function j(){j=function(){return e};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",s=i.asyncIterator||"@@asyncIterator",c=i.toStringTag||"@@toStringTag";function u(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{u({},"")}catch(t){u=function(t,e,r){return t[e]=r}}function l(t,e,r,n){var i=e&&e.prototype instanceof m?e:m,a=Object.create(i.prototype),s=new I(n||[]);return o(a,"_invoke",{value:S(t,r,s)}),a}function p(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}e.wrap=l;var f="suspendedStart",h="suspendedYield",y="executing",d="completed",v={};function m(){}function b(){}function g(){}var O={};u(O,a,(function(){return this}));var x=Object.getPrototypeOf,T=x&&x(x(N([])));T&&T!==r&&n.call(T,a)&&(O=T);var _=g.prototype=m.prototype=Object.create(O);function E(t){["next","throw","return"].forEach((function(e){u(t,e,(function(t){return this._invoke(e,t)}))}))}function P(t,e){function r(o,i,a,s){var c=p(t[o],t,i);if("throw"!==c.type){var u=c.arg,l=u.value;return l&&"object"==w(l)&&n.call(l,"__await")?e.resolve(l.__await).then((function(t){r("next",t,a,s)}),(function(t){r("throw",t,a,s)})):e.resolve(l).then((function(t){u.value=t,a(u)}),(function(t){return r("throw",t,a,s)}))}s(c.arg)}var i;o(this,"_invoke",{value:function(t,n){function o(){return new e((function(e,o){r(t,n,e,o)}))}return i=i?i.then(o,o):o()}})}function S(e,r,n){var o=f;return function(i,a){if(o===y)throw Error("Generator is already running");if(o===d){if("throw"===i)throw a;return{value:t,done:!0}}for(n.method=i,n.arg=a;;){var s=n.delegate;if(s){var c=L(s,n);if(c){if(c===v)continue;return c}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===f)throw o=d,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=y;var u=p(e,r,n);if("normal"===u.type){if(o=n.done?d:h,u.arg===v)continue;return{value:u.arg,done:n.done}}"throw"===u.type&&(o=d,n.method="throw",n.arg=u.arg)}}}function L(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,L(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),v;var i=p(o,e.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,v;var a=i.arg;return a?a.done?(r[e.resultName]=a.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,v):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,v)}function k(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function C(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function I(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(k,this),this.reset(!0)}function N(e){if(e||""===e){var r=e[a];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,i=function r(){for(;++o<e.length;)if(n.call(e,o))return r.value=e[o],r.done=!1,r;return r.value=t,r.done=!0,r};return i.next=i}}throw new TypeError(w(e)+" is not iterable")}return b.prototype=g,o(_,"constructor",{value:g,configurable:!0}),o(g,"constructor",{value:b,configurable:!0}),b.displayName=u(g,c,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===b||"GeneratorFunction"===(e.displayName||e.name))},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,g):(t.__proto__=g,u(t,c,"GeneratorFunction")),t.prototype=Object.create(_),t},e.awrap=function(t){return{__await:t}},E(P.prototype),u(P.prototype,s,(function(){return this})),e.AsyncIterator=P,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new P(l(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},E(_),u(_,c,"Generator"),u(_,a,(function(){return this})),u(_,"toString",(function(){return"[object Generator]"})),e.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function t(){for(;r.length;){var n=r.pop();if(n in e)return t.value=n,t.done=!1,t}return t.done=!0,t}},e.values=N,I.prototype={constructor:I,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(C),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var r=this;function o(n,o){return s.type="throw",s.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],s=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var c=n.call(a,"catchLoc"),u=n.call(a,"finallyLoc");if(c&&u){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(c){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!u)throw Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,v):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),v},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),C(r),v}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;C(r)}return o}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:N(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),v}},e}function T(t,e,r,n,o,i,a){try{var s=t[i](a),c=s.value}catch(t){return void r(t)}s.done?e(c):Promise.resolve(c).then(n,o)}function _(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,E(n.key),n)}}function E(t){var e=function(t,e){if("object"!=w(t)||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var n=r.call(t,"string");if("object"!=w(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==w(e)?e:e+""}function P(t,e,r){return e=L(e),function(t,e){if(e&&("object"===w(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,S()?Reflect.construct(e,r||[],L(t).constructor):e.apply(t,r))}function S(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(S=function(){return!!t})()}function L(t){return L=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},L(t)}function k(t,e){return k=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},k(t,e)}var C=function(t){function e(t){var r;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),(r=P(this,e,[t])).state={showBanner:void 0},r}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&k(t,e)}(e,t),r=e,n=[{key:"componentDidMount",value:function(){this.hideBanner()}},{key:"render",value:function(){return this.props.transitionAppearTime&&this.props.transitionAppearTime,this.props.transitionTime&&this.props.transitionTime,this.renderBanner()}},{key:"renderImage",value:function(){return this.props.image&&this.props.imageClass?(0,g.jsx)("img",{src:this.props.image,className:this.props.imageClass}):this.props.image?(0,g.jsx)("img",{src:this.props.image}):null}},{key:"hideBanner",value:(i=j().mark((function t(){return j().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:void 0!==this.props.visibleTime&&this.props.visibleTime>0&&this.timeout(this.props.visibleTime);case 1:case"end":return t.stop()}}),t,this)})),a=function(){var t=this,e=arguments;return new Promise((function(r,n){var o=i.apply(t,e);function a(t){T(o,r,n,a,s,"next",t)}function s(t){T(o,r,n,a,s,"throw",t)}a(void 0)}))},function(){return a.apply(this,arguments)})},{key:"renderBanner",value:function(){var t=void 0===this.state.showBanner||this.state.showBanner,e=this.props.visibleTime>0?"opacityOn ".concat(this.props.visibleTime/1e3,"s"):"noFadeOut 3s",r={animation:"".concat(e," normal forwards")};return t?this.props.title&&(void 0===this.state.show||this.state.showBanner)?(0,g.jsxs)("div",{className:"banner",style:x(x({},this.props.css),r),children:[this.renderImage(),this.renderTitle()]},"banner"):this.props.children?(0,g.jsx)("div",{className:"banner",style:x(x({},this.props.css),r),children:this.props.children},"banner"):null:null}},{key:"renderTitle",value:function(){return(0,g.jsx)("div",{children:this.props.title},"BannerId-".concat(this.props.id))}},{key:"timeout",value:function(t){var e=this;setTimeout((function(){null!=e.props.onHideCallback&&e.props.onHideCallback(e.props.id)}),t)}}],o=[{key:"getDerivedStateFromProps",value:function(t,e){return void 0!==t.visibleTime&&t.visibleTime>0?{bannerMessage:t.bannerMessage,showBanner:!0}:null}}],n&&_(r.prototype,n),o&&_(r,o),Object.defineProperty(r,"prototype",{writable:!1}),r;var r,n,o,i,a}(t.Component);C.propTypes={title:o().node,css:o().object,visibleTime:o().number,image:o().string,imageClass:o().string,id:o().string.isRequired,transitionAppearTime:o().number,transitionTime:o().number,showBanner:o().bool,children:o().node,onHideCallback:o().func},C.defaultProps={onHideCallback:null};const I=C})(),module.exports=n})();
|
|
2
|
+
(()=>{var e={665:(e,n,t)=>{"use strict";t.d(n,{A:()=>c});var r=t(601),o=t.n(r),i=t(314),a=t.n(i)()(o());a.push([e.id,".banner {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n min-height: 50px;\n font-family: Arial, sans-serif;\n color: #fff;\n transition: opacity 1s, top 0.5s, bottom 0.5s;\n z-index: 1000;\n box-sizing: border-box;\n padding: 10px 20px;\n position: relative;\n}\n\n.banner-content {\n display: flex;\n align-items: center;\n flex: 1;\n justify-content: center;\n}\n\n.banner-close-btn {\n background: transparent;\n border: none;\n color: inherit;\n font-size: 20px;\n cursor: pointer;\n padding: 0 10px;\n margin-left: auto;\n opacity: 0.8;\n}\n\n.banner-close-btn:hover {\n opacity: 1;\n}\n\n/* Positions */\n.banner-top {\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.banner-bottom {\n position: fixed;\n bottom: 0;\n left: 0;\n}\n\n/* Variants */\n.banner-success {\n background-color: #28a745;\n}\n\n.banner-error {\n background-color: #dc3545;\n}\n\n.banner-warning {\n background-color: #ffc107;\n color: #333;\n}\n\n.banner-info {\n background-color: #17a2b8;\n}\n\n/* Animations */\n@keyframes opacityOn {\n 0% { opacity: 0; }\n 100% { opacity: 1; }\n}\n\n@keyframes noFadeOut {\n 0% { opacity: 1; }\n 100% { opacity: 1; }\n}\n",""]);const c=a},314:e=>{"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",r=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),r&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),r&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var c=0;c<this.length;c++){var s=this[c][0];null!=s&&(a[s]=!0)}for(var u=0;u<e.length;u++){var l=[].concat(e[u]);r&&a[l[0]]||(void 0!==i&&(void 0===l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=i),t&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=t):l[2]=t),o&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=o):l[4]="".concat(o)),n.push(l))}},n}},601:e=>{"use strict";e.exports=function(e){return e[1]}},694:(e,n,t)=>{"use strict";var r=t(925);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,n,t,o,i,a){if(a!==r){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function n(){return e}e.isRequired=e;var t={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,elementType:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:i,resetWarningCache:o};return t.PropTypes=t,t}},556:(e,n,t)=>{e.exports=t(694)()},925:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},72:e=>{"use strict";var n=[];function t(e){for(var t=-1,r=0;r<n.length;r++)if(n[r].identifier===e){t=r;break}return t}function r(e,r){for(var i={},a=[],c=0;c<e.length;c++){var s=e[c],u=r.base?s[0]+r.base:s[0],l=i[u]||0,f="".concat(u," ").concat(l);i[u]=l+1;var p=t(f),d={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==p)n[p].references++,n[p].updater(d);else{var b=o(d,r);r.byIndex=c,n.splice(c,0,{identifier:f,updater:b,references:1})}a.push(f)}return a}function o(e,n){var t=n.domAPI(n);return t.update(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,o){var i=r(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var c=t(i[a]);n[c].references--}for(var s=r(e,o),u=0;u<i.length;u++){var l=t(i[u]);0===n[l].references&&(n[l].updater(),n.splice(l,1))}i=s}}},659:e=>{"use strict";var n={};e.exports=function(e,t){var r=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},540:e=>{"use strict";e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},56:(e,n,t)=>{"use strict";e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},825:e=>{"use strict";e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var o=void 0!==t.layer;o&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,o&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(r,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},113:e=>{"use strict";e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},474:(e,n,t)=>{"use strict";var r=t(953),o=Symbol.for("react.element"),i=(Symbol.for("react.fragment"),Object.prototype.hasOwnProperty),a=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function s(e,n,t){var r,s={},u=null,l=null;for(r in void 0!==t&&(u=""+t),void 0!==n.key&&(u=""+n.key),void 0!==n.ref&&(l=n.ref),n)i.call(n,r)&&!c.hasOwnProperty(r)&&(s[r]=n[r]);if(e&&e.defaultProps)for(r in n=e.defaultProps)void 0===s[r]&&(s[r]=n[r]);return{$$typeof:o,type:e,key:u,ref:l,props:s,_owner:a.current}}n.jsx=s,n.jsxs=s},26:(e,n,t)=>{"use strict";e.exports=t(474)},953:e=>{"use strict";e.exports=require("react")}},n={};function t(r){var o=n[r];if(void 0!==o)return o.exports;var i=n[r]={id:r,exports:{}};return e[r](i,i.exports,t),i.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.nc=void 0;var r={};(()=>{"use strict";t.r(r),t.d(r,{default:()=>P});var e=t(953),n=t(556),o=t.n(n),i=t(72),a=t.n(i),c=t(825),s=t.n(c),u=t(659),l=t.n(u),f=t(56),p=t.n(f),d=t(540),b=t.n(d),y=t(113),m=t.n(y),v=t(665),h={};h.styleTagTransform=m(),h.setAttributes=p(),h.insert=l().bind(null,"head"),h.domAPI=s(),h.insertStyleElement=b(),a()(v.A,h),v.A&&v.A.locals&&v.A.locals;var g=t(26);function O(e){return O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},O(e)}function x(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function j(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?x(Object(t),!0).forEach((function(n){S(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):x(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function S(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=O(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=O(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==O(n)?n:n+""}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function T(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,a,c=[],s=!0,u=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;s=!1}else for(;!(s=(r=i.call(t)).done)&&(c.push(r.value),c.length!==n);s=!0);}catch(e){u=!0,o=e}finally{try{if(!s&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(u)throw o}}return c}}(e,n)||function(e,n){if(e){if("string"==typeof e)return w(e,n);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?w(e,n):void 0}}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}var _=function(n){var t=n.title,r=n.css,o=void 0===r?{}:r,i=n.visibleTime,a=void 0===i?0:i,c=n.image,s=n.imageClass,u=n.id,l=(n.transitionAppearTime,n.transitionTime,n.children),f=n.onHideCallback,p=n.variant,d=n.position,b=n.dismissible,y=T((0,e.useState)(!1),2),m=y[0],v=y[1],h=T((0,e.useState)(!1),2),O=(h[0],h[1]);(0,e.useEffect)((function(){if(v(!0),a>0){var e=setTimeout((function(){x()}),a);return function(){return clearTimeout(e)}}}),[a,t,l]);var x=function(){O(!0),setTimeout((function(){v(!1),O(!1),f&&f(u)}),500)};if(!m)return null;var S="banner ".concat(function(){switch(p){case"success":return"banner-success";case"error":return"banner-error";case"warning":return"banner-warning";case"info":return"banner-info";default:return""}}()," ").concat(function(){switch(d){case"top":return"banner-top";case"bottom":return"banner-bottom";default:return""}}()),w=a>0?{animation:"opacityOn ".concat(a/1e3,"s normal forwards")}:{animation:"noFadeOut 3s normal forwards"};return(0,g.jsxs)("div",{className:S,style:j(j({},o),w),children:[(0,g.jsxs)("div",{className:"banner-content",children:[c&&(0,g.jsx)("img",{src:c,className:s,alt:"banner icon",style:{marginRight:10}}),t&&(0,g.jsx)("div",{children:t},"BannerId-".concat(u)),l]}),b&&(0,g.jsx)("button",{className:"banner-close-btn",onClick:x,children:"×"})]},"banner")};_.propTypes={title:o().node,css:o().object,visibleTime:o().number,image:o().string,imageClass:o().string,id:o().string,transitionAppearTime:o().number,transitionTime:o().number,children:o().node,onHideCallback:o().func,variant:o().oneOf(["success","error","warning","info"]),position:o().oneOf(["top","bottom"]),dismissible:o().bool};const P=_})(),module.exports=r})();
|
package/package.json
CHANGED
|
@@ -1,48 +1,49 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "react-js-banner",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "React JS Banner component customizable with auto hide option",
|
|
5
|
-
"main": "build/index.js",
|
|
6
|
-
"peerDependencies": {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
"@babel/
|
|
21
|
-
"@babel/preset-
|
|
22
|
-
"babel-
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"html-
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"react
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"webpack
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"js banner",
|
|
41
|
-
"banner",
|
|
42
|
-
"
|
|
43
|
-
"notification",
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
"
|
|
48
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "react-js-banner",
|
|
3
|
+
"version": "0.8.0",
|
|
4
|
+
"description": "React JS Banner component customizable with auto hide option",
|
|
5
|
+
"main": "build/index.js",
|
|
6
|
+
"peerDependencies": {
|
|
7
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
8
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
9
|
+
},
|
|
10
|
+
"dependencies": {},
|
|
11
|
+
"scripts": {
|
|
12
|
+
"start": "webpack --watch",
|
|
13
|
+
"build": "webpack"
|
|
14
|
+
},
|
|
15
|
+
"author": {
|
|
16
|
+
"name": "Jose Antonio Ciccio",
|
|
17
|
+
"email": "jciccio@gmail.com"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@babel/core": "^7.24.0",
|
|
21
|
+
"@babel/preset-env": "^7.24.0",
|
|
22
|
+
"@babel/preset-react": "^7.24.0",
|
|
23
|
+
"babel-loader": "^9.1.3",
|
|
24
|
+
"css-loader": "^7.0.0",
|
|
25
|
+
"eslint": "^8.57.0",
|
|
26
|
+
"html-loader": "^5.0.0",
|
|
27
|
+
"html-webpack-plugin": "^5.6.0",
|
|
28
|
+
"prop-types": "^15.8.1",
|
|
29
|
+
"react": "^18.3.0",
|
|
30
|
+
"react-dom": "^18.3.0",
|
|
31
|
+
"style-loader": "^4.0.0",
|
|
32
|
+
"webpack": "^5.91.0",
|
|
33
|
+
"webpack-cli": "^5.1.0"
|
|
34
|
+
},
|
|
35
|
+
"repository": {
|
|
36
|
+
"type": "git",
|
|
37
|
+
"url": "https://github.com/jciccio/react-js-banner.git"
|
|
38
|
+
},
|
|
39
|
+
"keywords": [
|
|
40
|
+
"react js banner",
|
|
41
|
+
"js banner",
|
|
42
|
+
"banner",
|
|
43
|
+
"message notification",
|
|
44
|
+
"notification",
|
|
45
|
+
"toaster"
|
|
46
|
+
],
|
|
47
|
+
"license": "MIT",
|
|
48
|
+
"homepage": "https://github.com/jciccio/react-js-banner/blob/master/README.md"
|
|
49
|
+
}
|
package/src/banner.css
CHANGED
|
@@ -1,61 +1,78 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
.
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.banner-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
1
|
+
.banner {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: center;
|
|
4
|
+
align-items: center;
|
|
5
|
+
width: 100%;
|
|
6
|
+
min-height: 50px;
|
|
7
|
+
font-family: Arial, sans-serif;
|
|
8
|
+
color: #fff;
|
|
9
|
+
transition: opacity 1s, top 0.5s, bottom 0.5s;
|
|
10
|
+
z-index: 1000;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
padding: 10px 20px;
|
|
13
|
+
position: relative;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.banner-content {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
flex: 1;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.banner-close-btn {
|
|
24
|
+
background: transparent;
|
|
25
|
+
border: none;
|
|
26
|
+
color: inherit;
|
|
27
|
+
font-size: 20px;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
padding: 0 10px;
|
|
30
|
+
margin-left: auto;
|
|
31
|
+
opacity: 0.8;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.banner-close-btn:hover {
|
|
35
|
+
opacity: 1;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Positions */
|
|
39
|
+
.banner-top {
|
|
40
|
+
position: fixed;
|
|
41
|
+
top: 0;
|
|
42
|
+
left: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.banner-bottom {
|
|
46
|
+
position: fixed;
|
|
47
|
+
bottom: 0;
|
|
48
|
+
left: 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Variants */
|
|
52
|
+
.banner-success {
|
|
53
|
+
background-color: #28a745;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.banner-error {
|
|
57
|
+
background-color: #dc3545;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.banner-warning {
|
|
61
|
+
background-color: #ffc107;
|
|
62
|
+
color: #333;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.banner-info {
|
|
66
|
+
background-color: #17a2b8;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Animations */
|
|
70
|
+
@keyframes opacityOn {
|
|
71
|
+
0% { opacity: 0; }
|
|
72
|
+
100% { opacity: 1; }
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@keyframes noFadeOut {
|
|
76
|
+
0% { opacity: 1; }
|
|
77
|
+
100% { opacity: 1; }
|
|
78
|
+
}
|
package/src/index.js
CHANGED
|
@@ -1,133 +1,118 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
*
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
return
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
{
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
image: PropTypes.string,
|
|
120
|
-
imageClass: PropTypes.string,
|
|
121
|
-
id: PropTypes.string.isRequired,
|
|
122
|
-
transitionAppearTime: PropTypes.number,
|
|
123
|
-
transitionTime: PropTypes.number,
|
|
124
|
-
showBanner: PropTypes.bool,
|
|
125
|
-
children: PropTypes.node,
|
|
126
|
-
onHideCallback: PropTypes.func
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
Banner.defaultProps = {
|
|
130
|
-
onHideCallback: null,
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
export default Banner;
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import "./banner.css";
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Banner component
|
|
7
|
+
* @author [Jose Antonio Ciccio](https://github.com/jciccio)
|
|
8
|
+
*/
|
|
9
|
+
const Banner = ({
|
|
10
|
+
title,
|
|
11
|
+
css = {},
|
|
12
|
+
visibleTime = 0,
|
|
13
|
+
image,
|
|
14
|
+
imageClass,
|
|
15
|
+
id,
|
|
16
|
+
children,
|
|
17
|
+
onHideCallback,
|
|
18
|
+
variant,
|
|
19
|
+
position,
|
|
20
|
+
dismissible
|
|
21
|
+
}) => {
|
|
22
|
+
const [showBanner, setShowBanner] = useState(false);
|
|
23
|
+
const [isClosing, setIsClosing] = useState(false);
|
|
24
|
+
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
// Show banner on mount
|
|
27
|
+
setShowBanner(true);
|
|
28
|
+
|
|
29
|
+
if (visibleTime > 0) {
|
|
30
|
+
const timer = setTimeout(() => {
|
|
31
|
+
handleClose();
|
|
32
|
+
}, visibleTime);
|
|
33
|
+
return () => clearTimeout(timer);
|
|
34
|
+
}
|
|
35
|
+
}, [visibleTime, title, children]); // Re-run if content or timing changes
|
|
36
|
+
|
|
37
|
+
const handleClose = () => {
|
|
38
|
+
setIsClosing(true);
|
|
39
|
+
setTimeout(() => {
|
|
40
|
+
setShowBanner(false);
|
|
41
|
+
setIsClosing(false);
|
|
42
|
+
if (onHideCallback) {
|
|
43
|
+
onHideCallback(id);
|
|
44
|
+
}
|
|
45
|
+
}, 500); // Wait for animation if we add one, or simply unmount
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
if (!showBanner) return null;
|
|
49
|
+
|
|
50
|
+
const getVariantClass = () => {
|
|
51
|
+
switch (variant) {
|
|
52
|
+
case 'success': return 'banner-success';
|
|
53
|
+
case 'error': return 'banner-error';
|
|
54
|
+
case 'warning': return 'banner-warning';
|
|
55
|
+
case 'info': return 'banner-info';
|
|
56
|
+
default: return '';
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const getPositionClass = () => {
|
|
61
|
+
switch (position) {
|
|
62
|
+
case 'top': return 'banner-top';
|
|
63
|
+
case 'bottom': return 'banner-bottom';
|
|
64
|
+
default: return '';
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
// Construct styles and classes
|
|
69
|
+
const bannerClasses = `banner ${getVariantClass()} ${getPositionClass()}`;
|
|
70
|
+
const animationStyle = visibleTime > 0
|
|
71
|
+
? { animation: `opacityOn ${visibleTime / 1000}s normal forwards` }
|
|
72
|
+
: { animation: `noFadeOut 3s normal forwards` };
|
|
73
|
+
|
|
74
|
+
return (
|
|
75
|
+
<div
|
|
76
|
+
key="banner"
|
|
77
|
+
className={bannerClasses}
|
|
78
|
+
style={{ ...css, ...animationStyle }}
|
|
79
|
+
>
|
|
80
|
+
<div className="banner-content">
|
|
81
|
+
{image && (
|
|
82
|
+
<img
|
|
83
|
+
src={image}
|
|
84
|
+
className={imageClass}
|
|
85
|
+
alt="banner icon"
|
|
86
|
+
style={{ marginRight: 10 }}
|
|
87
|
+
/>
|
|
88
|
+
)}
|
|
89
|
+
{title && <div key={`BannerId-${id}`}>{title}</div>}
|
|
90
|
+
{children}
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
{dismissible && (
|
|
94
|
+
<button className="banner-close-btn" onClick={handleClose}>
|
|
95
|
+
×
|
|
96
|
+
</button>
|
|
97
|
+
)}
|
|
98
|
+
</div>
|
|
99
|
+
);
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
Banner.propTypes = {
|
|
103
|
+
title: PropTypes.node,
|
|
104
|
+
css: PropTypes.object,
|
|
105
|
+
visibleTime: PropTypes.number,
|
|
106
|
+
image: PropTypes.string,
|
|
107
|
+
imageClass: PropTypes.string,
|
|
108
|
+
id: PropTypes.string, // Made optional as it's not strictly needed for internal logic anymore unless for callback
|
|
109
|
+
transitionAppearTime: PropTypes.number,
|
|
110
|
+
transitionTime: PropTypes.number,
|
|
111
|
+
children: PropTypes.node,
|
|
112
|
+
onHideCallback: PropTypes.func,
|
|
113
|
+
variant: PropTypes.oneOf(['success', 'error', 'warning', 'info']),
|
|
114
|
+
position: PropTypes.oneOf(['top', 'bottom']),
|
|
115
|
+
dismissible: PropTypes.bool
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
export default Banner;
|
package/webpack.config.js
CHANGED
|
@@ -1,27 +1,23 @@
|
|
|
1
|
-
var path = require("path");
|
|
2
|
-
|
|
3
|
-
module.exports = {
|
|
4
|
-
mode: "production",
|
|
5
|
-
entry: "./src/index.js",
|
|
6
|
-
output: {
|
|
7
|
-
path: path.resolve("build"),
|
|
8
|
-
filename: "index.js",
|
|
9
|
-
libraryTarget: "commonjs2"
|
|
10
|
-
},
|
|
11
|
-
module: {
|
|
12
|
-
rules: [
|
|
13
|
-
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
|
|
14
|
-
{
|
|
15
|
-
test: /\.css$/,
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
},
|
|
24
|
-
externals: {
|
|
25
|
-
react: "react"
|
|
26
|
-
}
|
|
1
|
+
var path = require("path");
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
mode: "production",
|
|
5
|
+
entry: "./src/index.js",
|
|
6
|
+
output: {
|
|
7
|
+
path: path.resolve("build"),
|
|
8
|
+
filename: "index.js",
|
|
9
|
+
libraryTarget: "commonjs2"
|
|
10
|
+
},
|
|
11
|
+
module: {
|
|
12
|
+
rules: [
|
|
13
|
+
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
|
|
14
|
+
{
|
|
15
|
+
test: /\.css$/,
|
|
16
|
+
use: ["style-loader", "css-loader"]
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
externals: {
|
|
21
|
+
react: "react"
|
|
22
|
+
}
|
|
27
23
|
};
|