Skip to content

Commit 8aca3d8

Browse files
teodosiiteodosii
committed
Merge branch '2.3.0'
2 parents 8295b5a + 26f5b65 commit 8aca3d8

File tree

8 files changed

+219
-229
lines changed

8 files changed

+219
-229
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-notifications-component",
3-
"version": "2.2.7",
3+
"version": "2.3.0",
44
"homepage": "http://teodosii.github.io/react-notifications-component",
55
"description": "React component for creating notifications on the fly",
66
"main": "dist/index.js",

‎samples/styles/stylesheet.scss‎

Lines changed: 127 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
@import "~bootstrap/scss/bootstrap.scss";
2-
@import "./litera/variables.scss";
3-
@import "./litera/theme.scss";
4-
@import "~animate.css/animate.min.css";
5-
@import "~font-awesome/css/font-awesome.min.css";
6-
@import "_customTypes.scss";
1+
@import '~bootstrap/scss/bootstrap.scss';
2+
@import './litera/variables.scss';
3+
@import './litera/theme.scss';
4+
@import '~animate.css/animate.min.css';
5+
@import '~font-awesome/css/font-awesome.min.css';
6+
@import '_customTypes.scss';
77

88
html,
99
body {
10-
width: 100%;
11-
height: 100%;
10+
width: 100%;
11+
height: 100%;
1212
}
1313

1414
html,
@@ -17,134 +17,134 @@ body,
1717
.notification-title,
1818
.notification-message,
1919
.notification-item {
20-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
21-
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
20+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
21+
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
2222
}
2323

2424
div.usage-example {
25-
text-align: left;
25+
text-align: left;
2626
}
2727

2828
p.p-default {
29-
margin-bottom: 5px;
29+
margin-bottom: 5px;
3030
}
3131

3232
ul.paragraph-list {
33-
width: 100%;
34-
display: block;
35-
padding-left: 0;
36-
margin-bottom: 0;
33+
width: 100%;
34+
display: block;
35+
padding-left: 0;
36+
margin-bottom: 0;
3737

38-
li {
39-
list-style-type: none;
40-
background-color: #f9f9f9;
41-
padding-top: 5px;
42-
padding-bottom: 5px;
43-
border: 1px solid #eaeaea;
44-
}
38+
li {
39+
list-style-type: none;
40+
background-color: #f9f9f9;
41+
padding-top: 5px;
42+
padding-bottom: 5px;
43+
border: 1px solid #eaeaea;
44+
}
4545

46-
li:not(:last-child) {
47-
margin-bottom: 10px;
48-
}
46+
li:not(:last-child) {
47+
margin-bottom: 10px;
48+
}
4949

50-
p {
51-
font-size: 14px;
52-
margin-bottom: 5px;
53-
}
50+
p {
51+
font-size: 14px;
52+
margin-bottom: 5px;
53+
}
5454

55-
.alert {
56-
margin-bottom: 0;
57-
}
55+
.alert {
56+
margin-bottom: 0;
57+
}
5858
}
5959

6060
.alert-small {
61-
padding-top: 8px;
62-
padding-bottom: 8px;
63-
margin-top: 8px;
64-
margin-bottom: 8px;
61+
padding-top: 8px;
62+
padding-bottom: 8px;
63+
margin-top: 8px;
64+
margin-bottom: 8px;
6565
}
6666

6767
.alert .fa {
68-
font-size: 16px;
69-
margin-right: 10px;
68+
font-size: 16px;
69+
margin-right: 10px;
7070
}
7171

7272
.heading {
73-
margin-bottom: 20px !important;
73+
margin-bottom: 20px !important;
7474

75-
h1,
76-
h2,
77-
h3,
78-
h4,
79-
h5,
80-
h6 {
81-
font-weight: bold;
82-
margin-bottom: 15px;
83-
}
75+
h1,
76+
h2,
77+
h3,
78+
h4,
79+
h5,
80+
h6 {
81+
font-weight: bold;
82+
margin-bottom: 15px;
83+
}
8484
}
8585

8686
.column {
87-
text-align: center;
88-
margin-bottom: 50px;
87+
text-align: center;
88+
margin-bottom: 50px;
8989

90-
h6 {
91-
font-size: 18px;
92-
font-weight: bold;
93-
letter-spacing: 1px;
94-
}
90+
h6 {
91+
font-size: 18px;
92+
font-weight: bold;
93+
letter-spacing: 1px;
94+
}
9595

96-
button {
97-
border-radius: 0;
98-
text-transform: uppercase;
99-
margin-top: 10px;
100-
}
96+
button {
97+
border-radius: 0;
98+
text-transform: uppercase;
99+
margin-top: 10px;
100+
}
101101
}
102102

103103
code:not(.white-code) {
104-
background-color: #f7f7f9 !important;
105-
border: 1px solid #e1e1e8 !important;
104+
background-color: #f7f7f9 !important;
105+
border: 1px solid #e1e1e8 !important;
106106
}
107107

108108
.table-striped tbody tr:nth-of-type(odd) {
109-
background-color: #f7f7f9;
109+
background-color: #f7f7f9;
110110
}
111111

112112
.table-hover tbody tr:hover {
113-
background-color: #efefef;
113+
background-color: #efefef;
114114
}
115115

116116
.table-bordered th,
117117
.table-bordered td {
118-
border: 1px solid #e1e1e8;
118+
border: 1px solid #e1e1e8;
119119
}
120120

121121
.alert-warning {
122-
color: #7f7813;
123-
background-color: #fdfad3;
124-
border-color: #fcf8c2;
122+
color: #7f7813;
123+
background-color: #fdfad3;
124+
border-color: #fcf8c2;
125125
}
126126

127127
.row-center th,
128128
.row-center td {
129-
text-align: center;
129+
text-align: center;
130130
}
131131

132132
.column-block {
133-
white-space: nowrap;
133+
white-space: nowrap;
134134
}
135135

136136
.alert-transparent {
137-
padding-top: 0;
138-
padding-bottom: 0;
139-
margin-bottom: 10px;
140-
background: none;
141-
color: #585858;
142-
border: none;
137+
padding-top: 0;
138+
padding-bottom: 0;
139+
margin-bottom: 10px;
140+
background: none;
141+
color: #585858;
142+
border: none;
143143
}
144144

145145
.bold {
146-
font-size: 16px !important;
147-
font-weight: bold;
146+
font-size: 16px !important;
147+
font-weight: bold;
148148
}
149149

150150
h1,
@@ -157,68 +157,68 @@ p,
157157
span,
158158
small,
159159
strong {
160-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
161-
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
162-
color: #585858;
160+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
161+
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
162+
color: #585858;
163163
}
164164

165165
.btn.no-corner {
166-
border-radius: 0;
166+
border-radius: 0;
167167
}
168168

169169
button.btn-no-margin {
170-
margin-top: 0;
170+
margin-top: 0;
171171
}
172172

173173
.alert .icon {
174-
font-size: 16px;
175-
margin-right: 8px;
174+
font-size: 16px;
175+
margin-right: 8px;
176176
}
177177

178178
.header {
179-
width: 100%;
180-
height: 350px;
181-
background-color: #6ed0ff;
182-
text-align: center;
183-
position: relative;
184-
margin-bottom: 30px;
185-
186-
.header-buttons {
187-
position: absolute;
188-
left: 50%;
189-
transform: translateX(-50%);
190-
}
191-
192-
.header-content {
193-
top: 50%;
194-
left: 50%;
195-
position: absolute;
196-
transform: translate(-50%, -50%);
197-
}
198-
199-
.header-title {
200-
color: #fff;
201-
font-weight: bold;
202-
text-transform: uppercase;
203-
margin-bottom: 8px;
204-
letter-spacing: 2px;
205-
font-size: 2.75rem;
206-
}
207-
208-
.header-desc {
209-
color: #fff;
210-
font-size: 16px;
211-
margin-bottom: 28px;
212-
letter-spacing: 0.5px;
213-
}
179+
width: 100%;
180+
height: 350px;
181+
background-color: #6ed0ff;
182+
text-align: center;
183+
position: relative;
184+
margin-bottom: 30px;
185+
186+
.header-buttons {
187+
position: absolute;
188+
left: 50%;
189+
transform: translateX(-50%);
190+
}
191+
192+
.header-content {
193+
top: 50%;
194+
left: 50%;
195+
position: absolute;
196+
transform: translate(-50%, -50%);
197+
}
198+
199+
.header-title {
200+
color: #fff;
201+
font-weight: bold;
202+
text-transform: uppercase;
203+
margin-bottom: 8px;
204+
letter-spacing: 2px;
205+
font-size: 2.75rem;
206+
}
207+
208+
.header-desc {
209+
color: #fff;
210+
font-size: 16px;
211+
margin-bottom: 28px;
212+
letter-spacing: 0.5px;
213+
}
214214
}
215215

216216
.custom-image-content {
217-
width: 100%;
217+
width: 100%;
218218

219-
img {
220-
width: 100%;
221-
height: auto;
222-
display: block;
223-
}
219+
img {
220+
width: 100%;
221+
height: auto;
222+
display: block;
223+
}
224224
}

‎src/react-notification-component.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
2-
import ReactNotification from './react-notification';
32
import PropTypes from 'prop-types';
43
import store from './store';
4+
import ReactNotification from './react-notification';
55
import { getNotificationsForEachContainer, getNotificationsForMobileView } from './utils/helpers';
66

77
import 'src/scss/notification.scss';
@@ -89,6 +89,7 @@ export default class ReactNotificationComponent extends React.Component {
8989
renderNotifications(notifications) {
9090
return notifications.map(notification => (
9191
<ReactNotification
92+
id={notification.id}
9293
key={notification.id}
9394
notification={notification}
9495
toggleRemoval={this.toggleRemoval}
@@ -106,7 +107,11 @@ export default class ReactNotificationComponent extends React.Component {
106107
const bottom = this.renderNotifications(mobileNotifications.bottom);
107108

108109
return (
109-
<div className={`react-notification-root ${className || ''}`} id={id}>
110+
<div
111+
id={id}
112+
key='mobile'
113+
className={`react-notification-root ${className || ''}`}
114+
>
110115
<div className="notification-container-mobile-top">{top}</div>
111116
<div className="notification-container-mobile-bottom">{bottom}</div>
112117
</div>
@@ -125,7 +130,11 @@ export default class ReactNotificationComponent extends React.Component {
125130
const bottomCenter = this.renderNotifications(notificationsPerContainer.bottomCenter);
126131

127132
return (
128-
<div className={`react-notification-root ${className || ''}`} id={id}>
133+
<div
134+
id={id}
135+
key='screen'
136+
className={`react-notification-root ${className || ''}`}
137+
>
129138
<div className="notification-container-top-left">{topLeft}</div>
130139
<div className="notification-container-top-right">{topRight}</div>
131140
<div className="notification-container-bottom-left">{bottomLeft}</div>

0 commit comments

Comments
 (0)