@omniumretail/component-library 1.2.28 → 1.2.30
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/dist/bundle.js +1 -1
- package/dist/main.css +1 -1
- package/dist/types/components/BellNotifications/index.d.ts +2 -1
- package/dist/types/components/Header/Header.types.d.ts +1 -0
- package/dist/types/components/Header/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/BellNotifications/BellNotifications.stories.tsx +89 -19
- package/src/components/BellNotifications/index.tsx +63 -61
- package/src/components/BellNotifications/styles.module.scss +48 -6
- package/src/components/Header/Header.stories.tsx +173 -0
- package/src/components/Header/Header.types.ts +1 -0
- package/src/components/Header/index.tsx +16 -2
- package/src/locales/en.json +2 -1
- package/src/locales/es.json +2 -1
- package/src/locales/pt.json +2 -1
package/dist/main.css
CHANGED
|
@@ -31,4 +31,4 @@
|
|
|
31
31
|
.aZEBTQus3Y3MyodeDwkf{display:flex;flex-direction:column;align-items:center;justify-content:center}.cc1pbQlAgw2CmXVml3bs{height:300px;width:400px}.aTf_CXAsyp0tySsoZdD_{display:flex;justify-content:space-between;margin:10px 10px 0px 10px;font-size:20px}.kuu1hf_JTvYD55IW6Nxl{color:#ff4d4f}.N8ODEO3zDbY7gmecjTrp{color:#52c41a}.WIsL9Shu6c0mGJq9qSSz{margin-top:20px;border-radius:4px;overflow:hidden}.WIsL9Shu6c0mGJq9qSSz img{width:100%;height:auto}
|
|
32
32
|
.OJKeuXyOSPIeCCssVum2{display:flex;gap:32px}.jzxszvL7wzCV5nztJL0S{padding:12px}.OGA8oJw8RDyohcRftjmo{width:100%}.y2_7QVPOhjRZlAHCRWKf{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.Smkcs3LGp1uPuQge2GxE{margin-top:16px}Label{margin-bottom:8px}.djarlYFkE9Kb7wUjUnrY{height:36px}
|
|
33
33
|
:root{--color-grey: #e4e4e4;--color-grey-100: #E5E5E5}.SF5f_Q_Ggz_4JHUHS2Xa{display:flex;align-items:center;padding:13px 20px;box-sizing:border-box;height:72px}.SF5f_Q_Ggz_4JHUHS2Xa *{box-sizing:border-box}.gSVYvBn1sLbcMsGI32b9{display:flex;flex-grow:1;align-items:flex-end;justify-content:center;max-width:calc(100% - 60px)}.gSVYvBn1sLbcMsGI32b9 img{max-width:196px}.gSVYvBn1sLbcMsGI32b9 .fVSt3bSZBcJGsOdA5nIN{font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--color-black)}.BIBQmS_NwoMw2Ncq5yuN{cursor:pointer;padding:4px 4px 4px 0;font-size:20px;width:30px;display:flex;align-items:center;justify-content:center}.ZinSgUtysxITkbGRKdux{position:fixed;top:0;left:-100%;bottom:0;width:100%;max-width:430px;background-color:var(--color-white);padding-inline:15px;z-index:999;box-shadow:0 3px 12px rgba(0,0,0,.45);transition:.6s ease-out}.ZinSgUtysxITkbGRKdux.FW1pOdad0uN5LO9h5PgQ{left:0;transition:.3s ease-in}.ZfA8OEmbRzRsNqLAmdtn{background-color:rgba(0,0,0,.3);backdrop-filter:blur(1px);position:absolute;left:0;top:0;right:0;bottom:0;z-index:998;pointer-events:none;opacity:0;transition:.3s}.ZfA8OEmbRzRsNqLAmdtn.FW1pOdad0uN5LO9h5PgQ{opacity:1;pointer-events:all}.YKSQJmdRP_7tKwvQpeuV{width:calc(100% + 30px);margin-left:-15px;background-color:var(--color-orange);display:flex;align-items:center;justify-content:center}.ISssYC5Uz452JVWP0xDc img{max-width:160px}.E6YZPpa60LxA7qqIW7jQ{position:absolute;top:23px;right:15px;font-size:25px;cursor:pointer;color:var(--color-white)}.YYp3pzktjEDEyW8knAZQ{overflow-y:auto;height:calc(100% - 51px);margin:0;padding:0}.u7k2VQ30AQDk6mKA22GX{height:60px;padding:10px;display:flex;align-items:center;border-bottom:1px solid var(--color-black);cursor:pointer;transition:.3s;text-transform:uppercase;width:100%}.u7k2VQ30AQDk6mKA22GX:hover{background-color:var(--color-grey);color:var(--color-black)}.QQoDB9XPcAK18l2DIym4{list-style:none}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN{height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-bottom:0}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX{position:relative}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa{position:absolute;width:60px;height:100%;background:var(--color-black);right:0;display:flex;align-items:center;justify-content:center}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa:hover{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .zo7CFksIKx7Fahu4e4S_{color:var(--color-white)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E{background:var(--color-grey)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .NytmT59TmaWHc4FLM2wa{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .uLgjMU9sbvfaa0qKEguP{height:auto;opacity:1}.uLgjMU9sbvfaa0qKEguP{padding:0;width:100%;margin:0;background-color:var(--color-orange);color:var(--color-white);height:0;opacity:0;overflow:hidden;transition:height .3s ease,opacity .3s ease}.uLgjMU9sbvfaa0qKEguP .u7k2VQ30AQDk6mKA22GX{min-height:60px;height:auto;padding-inline:40px}.efnjUnudkE0UTVQ6wrgH{cursor:pointer}.u7k2VQ30AQDk6mKA22GX .fjNRYZMP1O0pTvBDBB3L span{margin-left:8px;transform:translateY(-2px);display:inline-block;font-size:var(--font-size-body-3);text-transform:capitalize}
|
|
34
|
-
.msELhnfhfo6un3c4Spoc{max-width:300px;max-height:400px;
|
|
34
|
+
@media(max-width: 768px){.muC1BdCbIEMIs70EtJoA{position:unset}}.msELhnfhfo6un3c4Spoc{max-width:300px;max-height:400px;padding:0 !important}@media(max-width: 768px){.msELhnfhfo6un3c4Spoc{max-width:100vw}}@media(min-width: 1024px){.msELhnfhfo6un3c4Spoc{max-width:600px;max-height:700px}}@media(max-width: 768px){.oGsIq0O_Hzwg2mLR72la{position:absolute}}.KSVguXBQ_A1SUSR6e8Wq{overflow-y:auto;max-height:calc(100vh - 60px - 72px - 43px)}.GeNg2HVTmhQDmsLLTpWj{display:flex;flex-direction:column;align-items:unset !important;padding:10px;border-bottom:1px solid #f0f0f0;background-color:#fff !important;cursor:pointer}.GeNg2HVTmhQDmsLLTpWj:hover{background-color:#f9f9f9}@media(max-width: 768px){.GeNg2HVTmhQDmsLLTpWj{padding:8px}}.GBb48KXbGnQtAY8xqmUp{display:flex;justify-content:space-between;align-items:center;padding:10px;background-color:#f5f5f5;border-bottom:1px solid #e8e8e8}.LoCH7sYpmK3VgRASqTgz{font-size:20px;cursor:pointer;color:#595959}.Xjs10kZPSsD_BVFomnIe{color:#ff674c;margin-right:8px}.oibCayv_cOyhyWCKzHSr{display:flex;align-items:center;gap:10px}.oibCayv_cOyhyWCKzHSr span{font-size:14px;font-weight:500;color:#595959}.hhwYXSd0CR75D8ETnUML{display:flex;align-items:center;position:relative;padding-left:12px}@media(max-width: 768px){.hhwYXSd0CR75D8ETnUML{padding-left:8px}}.LkP1cqeAyAYI9rCurnE8{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:16px}@media(max-width: 768px){.LkP1cqeAyAYI9rCurnE8{font-size:12px}}.u_jT9kmq2kyThRlj8HT1{width:50px;height:50px;margin-left:10px;margin-right:10px}@media(max-width: 768px){.u_jT9kmq2kyThRlj8HT1{width:40px;height:40px;margin-left:8px;margin-right:8px}}.ieGdf5FTgLUPcfuZi7Xz{flex:1;overflow:hidden}.QgZ3oHW9IRTexL8xWVqP{font-weight:bold;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}@media(max-width: 768px){.QgZ3oHW9IRTexL8xWVqP{font-size:12px}}.JwfbSOSIRAz5OO2hiSFc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%;font-size:12px;color:#666;margin-top:2px}@media(max-width: 768px){.JwfbSOSIRAz5OO2hiSFc{font-size:10px}}.XfXQBYqMfZc4p8s2Mhla{width:6px;height:6px;background-color:#1890ff;border-radius:50%;margin-left:10px}@media(max-width: 768px){.XfXQBYqMfZc4p8s2Mhla{width:4px;height:4px;margin-left:8px}}.RGXTlVxCxbZpD6__J5_g{font-size:12px}.rWa5cnbZQLDtxFxJU6qA{font-size:20px;cursor:pointer}@media(max-width: 768px){.rWa5cnbZQLDtxFxJU6qA{font-size:18px}}.Pus_rAoqX05D4Qz2pYxo{animation:Pus_rAoqX05D4Qz2pYxo 1s ease-in-out infinite}@keyframes Pus_rAoqX05D4Qz2pYxo{0%{transform:rotate(0deg)}25%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}100%{transform:rotate(0deg)}}
|
|
@@ -17,6 +17,7 @@ export interface BellNotificationsProps {
|
|
|
17
17
|
notifications: BellNotification[];
|
|
18
18
|
onFilterChange: (filter: 'all' | 'unread') => void;
|
|
19
19
|
onNotificationClick: (id: string, url: string) => void;
|
|
20
|
+
handleMarkAllAsRead: () => void;
|
|
20
21
|
}
|
|
21
|
-
export declare const BellNotifications: ({ notifications, onFilterChange, onNotificationClick }: BellNotificationsProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const BellNotifications: ({ notifications, onFilterChange, onNotificationClick, handleMarkAllAsRead }: BellNotificationsProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
23
|
export default BellNotifications;
|
|
@@ -3,5 +3,5 @@ import { HeaderProps } from './Header.types';
|
|
|
3
3
|
* Header component to display navigation bar with dropdown menus and action button.
|
|
4
4
|
* @param {HeaderProps} props - Properties passed to the component.
|
|
5
5
|
*/
|
|
6
|
-
export declare const Header: ({ menuList, actionButton, logout, homeUrl, profileUrl, onLeavingPage, userName, pageTitle, onFilterChange, notifications, onNotificationClick }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const Header: ({ menuList, actionButton, logout, homeUrl, profileUrl, onLeavingPage, userName, pageTitle, onFilterChange, notifications, onNotificationClick, handleMarkAllAsRead }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export default Header;
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ const Template: Story<BellNotificationsProps> = (args) => <BellNotifications {..
|
|
|
10
10
|
|
|
11
11
|
const notifications = [
|
|
12
12
|
{
|
|
13
|
-
"Id": "
|
|
13
|
+
"Id": "662C390B-A38F-45AB-B97C-2D00F0A8ACAD",
|
|
14
14
|
"Title": "Creation of an Evaluation Cycle",
|
|
15
15
|
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
16
16
|
"RedirectURL": "https://www.google.pt",
|
|
@@ -21,10 +21,10 @@ const notifications = [
|
|
|
21
21
|
"Name": "High",
|
|
22
22
|
"ColorHex": "#E05151"
|
|
23
23
|
},
|
|
24
|
-
"IsRead":
|
|
24
|
+
"IsRead": true
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
|
-
"Id": "
|
|
27
|
+
"Id": "0AF18720-1C94-48CD-8DF3-D254077E8363",
|
|
28
28
|
"Title": "Creation of an Evaluation Cycle",
|
|
29
29
|
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
30
30
|
"RedirectURL": "https://www.google.pt",
|
|
@@ -35,10 +35,10 @@ const notifications = [
|
|
|
35
35
|
"Name": "High",
|
|
36
36
|
"ColorHex": "#E05151"
|
|
37
37
|
},
|
|
38
|
-
"IsRead":
|
|
38
|
+
"IsRead": true
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
|
-
"Id": "
|
|
41
|
+
"Id": "0419654F-66FE-41EA-BBA4-D8BB6E3D6B33",
|
|
42
42
|
"Title": "Creation of an Evaluation Cycle",
|
|
43
43
|
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
44
44
|
"RedirectURL": "https://www.google.pt",
|
|
@@ -49,10 +49,10 @@ const notifications = [
|
|
|
49
49
|
"Name": "High",
|
|
50
50
|
"ColorHex": "#E05151"
|
|
51
51
|
},
|
|
52
|
-
"IsRead":
|
|
52
|
+
"IsRead": true
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
|
-
"Id": "
|
|
55
|
+
"Id": "CC98EDA1-0461-4D08-982E-8424EF4AFB3B",
|
|
56
56
|
"Title": "Creation of an Evaluation Cycle",
|
|
57
57
|
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
58
58
|
"RedirectURL": "https://www.google.pt",
|
|
@@ -66,7 +66,7 @@ const notifications = [
|
|
|
66
66
|
"IsRead": false
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
|
-
"Id": "
|
|
69
|
+
"Id": "3DB9310A-4BF8-4B90-8D5A-7583473664BB",
|
|
70
70
|
"Title": "Creation of an Evaluation Cycle",
|
|
71
71
|
"Description": "A new evaluation cycle was created. You must answer it.",
|
|
72
72
|
"RedirectURL": "https://www.google.pt",
|
|
@@ -80,32 +80,102 @@ const notifications = [
|
|
|
80
80
|
"IsRead": false
|
|
81
81
|
},
|
|
82
82
|
{
|
|
83
|
-
"Id": "
|
|
84
|
-
"Title": "Creation of
|
|
85
|
-
"Description": "A new
|
|
83
|
+
"Id": "D6FB93EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
84
|
+
"Title": "Creation of a new user",
|
|
85
|
+
"Description": "A new user was created in the platform with the mecanographic number 8111.",
|
|
86
86
|
"RedirectURL": "https://www.google.pt",
|
|
87
|
-
"Icon": "https://
|
|
88
|
-
"ExpirationDate":
|
|
87
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
88
|
+
"ExpirationDate": 1736985600,
|
|
89
89
|
"Criticality": {
|
|
90
90
|
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
91
91
|
"Name": "High",
|
|
92
92
|
"ColorHex": "#E05151"
|
|
93
93
|
},
|
|
94
|
-
"IsRead":
|
|
94
|
+
"IsRead": false
|
|
95
95
|
},
|
|
96
96
|
{
|
|
97
|
-
"Id": "
|
|
98
|
-
"Title": "Creation of a new
|
|
99
|
-
"Description": "A new
|
|
97
|
+
"Id": "D6FB96EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
98
|
+
"Title": "Creation of a new action of inspection",
|
|
99
|
+
"Description": "A new inspection action was created.",
|
|
100
100
|
"RedirectURL": "https://www.google.pt",
|
|
101
|
-
"Icon": "https://
|
|
101
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
102
102
|
"ExpirationDate": 1736985600,
|
|
103
103
|
"Criticality": {
|
|
104
104
|
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
105
105
|
"Name": "High",
|
|
106
106
|
"ColorHex": "#E05151"
|
|
107
107
|
},
|
|
108
|
-
"IsRead":
|
|
108
|
+
"IsRead": false
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"Id": "D6FB96EE-3655-42B2-8EC1-27E7AC3F5249",
|
|
112
|
+
"Title": "Creation of a new action of inspection",
|
|
113
|
+
"Description": "A new inspection action was created.",
|
|
114
|
+
"RedirectURL": "https://www.google.pt",
|
|
115
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
116
|
+
"ExpirationDate": 1736985600,
|
|
117
|
+
"Criticality": {
|
|
118
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
119
|
+
"Name": "High",
|
|
120
|
+
"ColorHex": "#E05151"
|
|
121
|
+
},
|
|
122
|
+
"IsRead": false
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"Id": "D6FB96EE-3255-46B2-8EC1-27E7AC3F5249",
|
|
126
|
+
"Title": "Creation of a new action of inspection",
|
|
127
|
+
"Description": "A new inspection action was created.",
|
|
128
|
+
"RedirectURL": "https://www.google.pt",
|
|
129
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
130
|
+
"ExpirationDate": 1736985600,
|
|
131
|
+
"Criticality": {
|
|
132
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
133
|
+
"Name": "High",
|
|
134
|
+
"ColorHex": "#E05151"
|
|
135
|
+
},
|
|
136
|
+
"IsRead": false
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"Id": "D9FB96EE-3255-42B2-8EC1-27E7AC3F5249",
|
|
140
|
+
"Title": "Creation of a new action of inspection",
|
|
141
|
+
"Description": "A new inspection action was created.",
|
|
142
|
+
"RedirectURL": "https://www.google.pt",
|
|
143
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
144
|
+
"ExpirationDate": 1736985600,
|
|
145
|
+
"Criticality": {
|
|
146
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
147
|
+
"Name": "High",
|
|
148
|
+
"ColorHex": "#E05151"
|
|
149
|
+
},
|
|
150
|
+
"IsRead": false
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"Id": "D6FB96EE-5955-42B2-8EC1-27E7AC3F5249",
|
|
154
|
+
"Title": "Creation of a new action of inspection",
|
|
155
|
+
"Description": "A new inspection action was created.",
|
|
156
|
+
"RedirectURL": "https://www.google.pt",
|
|
157
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
158
|
+
"ExpirationDate": 1736985600,
|
|
159
|
+
"Criticality": {
|
|
160
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
161
|
+
"Name": "High",
|
|
162
|
+
"ColorHex": "#E05151"
|
|
163
|
+
},
|
|
164
|
+
"IsRead": false
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"Id": "D6FB96EE-3255-42B7-8EC1-27E7AC3F5249",
|
|
168
|
+
"Title": "Creation of a new action of inspection",
|
|
169
|
+
"Description": "A new inspection action was created.",
|
|
170
|
+
"RedirectURL": "https://www.google.pt",
|
|
171
|
+
"Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
|
|
172
|
+
"ExpirationDate": 1736985600,
|
|
173
|
+
"Criticality": {
|
|
174
|
+
"Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
|
|
175
|
+
"Name": "High",
|
|
176
|
+
"ColorHex": "#E05151"
|
|
177
|
+
},
|
|
178
|
+
"IsRead": false
|
|
109
179
|
}
|
|
110
180
|
];
|
|
111
181
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useEffect, useState } from 'react';
|
|
2
2
|
import { Badge, Dropdown, Menu } from 'antd';
|
|
3
|
-
import { BellOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
|
|
3
|
+
import { BellOutlined, CheckCircleOutlined, ExclamationCircleOutlined, MoreOutlined } from '@ant-design/icons';
|
|
4
4
|
import styles from './styles.module.scss';
|
|
5
5
|
import { useTranslation } from 'react-i18next';
|
|
6
6
|
import { Switch } from '../Switch';
|
|
@@ -26,11 +26,11 @@ export interface BellNotificationsProps {
|
|
|
26
26
|
notifications: BellNotification[];
|
|
27
27
|
onFilterChange: (filter: 'all' | 'unread') => void;
|
|
28
28
|
onNotificationClick: (id: string, url: string) => void;
|
|
29
|
+
handleMarkAllAsRead: () => void;
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
export const BellNotifications = ({ notifications, onFilterChange, onNotificationClick }: BellNotificationsProps) => {
|
|
32
|
+
export const BellNotifications = ({ notifications, onFilterChange, onNotificationClick, handleMarkAllAsRead }: BellNotificationsProps) => {
|
|
32
33
|
const { t } = useTranslation();
|
|
33
|
-
const [maxChars, setMaxChars] = useState(30);
|
|
34
34
|
const [filter, setFilter] = useState<'all' | 'unread'>('all');
|
|
35
35
|
const [isShaking, setIsShaking] = useState(false);
|
|
36
36
|
|
|
@@ -46,23 +46,6 @@ export const BellNotifications = ({ notifications, onFilterChange, onNotificatio
|
|
|
46
46
|
onFilterChange(newFilter);
|
|
47
47
|
};
|
|
48
48
|
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
const handleResize = () => {
|
|
51
|
-
if (window.innerWidth < 1024) {
|
|
52
|
-
setMaxChars(30);
|
|
53
|
-
} else {
|
|
54
|
-
setMaxChars(60);
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
handleResize();
|
|
59
|
-
window.addEventListener('resize', handleResize);
|
|
60
|
-
|
|
61
|
-
return () => {
|
|
62
|
-
window.removeEventListener('resize', handleResize);
|
|
63
|
-
};
|
|
64
|
-
}, []);
|
|
65
|
-
|
|
66
49
|
useEffect(() => {
|
|
67
50
|
if (unreadCount > 0) {
|
|
68
51
|
const interval = setInterval(() => {
|
|
@@ -78,59 +61,78 @@ export const BellNotifications = ({ notifications, onFilterChange, onNotificatio
|
|
|
78
61
|
}
|
|
79
62
|
}, [unreadCount]);
|
|
80
63
|
|
|
64
|
+
const optionsMenu = (
|
|
65
|
+
<Menu>
|
|
66
|
+
<Menu.Item key="markAllAsRead" onClick={handleMarkAllAsRead}>
|
|
67
|
+
<CheckCircleOutlined className={styles.checkIconStyle} />
|
|
68
|
+
|
|
69
|
+
{t('components.bellNotifications.markAllAsRead')}
|
|
70
|
+
</Menu.Item>
|
|
71
|
+
</Menu>
|
|
72
|
+
);
|
|
73
|
+
|
|
81
74
|
const menu = (
|
|
82
75
|
<Menu className={styles.notificationMenu}>
|
|
83
|
-
<div className={styles.switchContainer}>
|
|
84
|
-
<span>{t('components.bellNotifications.onlyShowNoRead')}</span>
|
|
85
|
-
|
|
86
|
-
<Switch
|
|
87
|
-
checked={filter === 'unread'}
|
|
88
|
-
onChange={handleFilterChange}
|
|
89
|
-
size="small"
|
|
90
|
-
/>
|
|
91
|
-
</div>
|
|
92
76
|
|
|
93
|
-
{
|
|
94
|
-
<
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
/>
|
|
105
|
-
)}
|
|
106
|
-
|
|
107
|
-
<img src={notif.Icon} alt="Notification Icon" className={styles.notificationIcon} />
|
|
108
|
-
|
|
109
|
-
<div className={styles.notificationText}>
|
|
110
|
-
<div
|
|
111
|
-
className={styles.notificationTitle}
|
|
112
|
-
>
|
|
113
|
-
{notif.Title}
|
|
114
|
-
</div>
|
|
77
|
+
{unreadCount > 0 && (
|
|
78
|
+
<div className={styles.headerContainer}>
|
|
79
|
+
<div className={styles.switchContainer}>
|
|
80
|
+
<span>{t('components.bellNotifications.onlyShowNoRead')}</span>
|
|
81
|
+
|
|
82
|
+
<Switch
|
|
83
|
+
checked={filter === 'unread'}
|
|
84
|
+
onChange={handleFilterChange}
|
|
85
|
+
size="small"
|
|
86
|
+
/>
|
|
87
|
+
</div>
|
|
115
88
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
89
|
+
<Dropdown overlayClassName={styles.optionsMenuStyle} overlay={optionsMenu} trigger={['click']}>
|
|
90
|
+
<MoreOutlined className={styles.moreOutlinedIconStyle} />
|
|
91
|
+
</Dropdown>
|
|
92
|
+
</div>
|
|
93
|
+
)}
|
|
94
|
+
|
|
95
|
+
<div className={styles.menuItemContainer}>
|
|
96
|
+
{notifications.map((notif) => (
|
|
97
|
+
<Menu.Item
|
|
98
|
+
key={notif.Id}
|
|
99
|
+
className={styles.notificationItem}
|
|
100
|
+
onClick={() => handleNotificationClick(notif.Id, notif.RedirectURL)}
|
|
101
|
+
>
|
|
102
|
+
<div className={styles.notificationContent}>
|
|
103
|
+
{notif.Criticality?.Name === 'High' && (
|
|
104
|
+
<ExclamationCircleOutlined
|
|
105
|
+
className={styles.criticalityIcon}
|
|
106
|
+
style={{ color: notif.Criticality?.ColorHex }}
|
|
107
|
+
/>
|
|
108
|
+
)}
|
|
109
|
+
|
|
110
|
+
<img src={notif.Icon} alt="Notification Icon" className={styles.notificationIcon} />
|
|
111
|
+
|
|
112
|
+
<div className={styles.notificationText}>
|
|
113
|
+
<div
|
|
114
|
+
className={styles.notificationTitle}
|
|
115
|
+
>
|
|
116
|
+
{notif.Title}
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div className={styles.notificationDescription}>
|
|
120
|
+
{notif.Description}
|
|
121
|
+
</div>
|
|
120
122
|
</div>
|
|
121
|
-
</div>
|
|
122
123
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
124
|
+
{!notif.IsRead && <div className={styles.unreadIndicator}></div>}
|
|
125
|
+
</div>
|
|
126
|
+
</Menu.Item>
|
|
127
|
+
))}
|
|
128
|
+
</div>
|
|
127
129
|
|
|
128
130
|
{notifications.length === 0 && <Menu.Item disabled>{t('components.bellNotifications.noNotifications')}</Menu.Item>}
|
|
129
131
|
</Menu>
|
|
130
132
|
);
|
|
131
133
|
|
|
132
134
|
return (
|
|
133
|
-
<Dropdown overlay={menu} trigger={['click']}>
|
|
135
|
+
<Dropdown overlayClassName={styles.dropdownContainer} overlay={menu} trigger={['click']}>
|
|
134
136
|
<Badge count={unreadCount} className={styles.badgeStyle} overflowCount={99} offset={[8, 0]}>
|
|
135
137
|
<BellOutlined className={`${styles.bellIcon} ${isShaking ? styles.shake : ''}`} />
|
|
136
138
|
</Badge>
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
+
.dropdownContainer {
|
|
2
|
+
@media (max-width: 768px) {
|
|
3
|
+
position: unset;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
1
7
|
.notificationMenu {
|
|
2
8
|
max-width: 300px;
|
|
3
9
|
max-height: 400px;
|
|
4
|
-
|
|
5
|
-
padding: 0;
|
|
10
|
+
padding: 0 !important;
|
|
6
11
|
|
|
7
12
|
@media (max-width: 768px) {
|
|
8
|
-
max-width:
|
|
9
|
-
max-height: 300px;
|
|
13
|
+
max-width: 100vw;
|
|
10
14
|
}
|
|
11
15
|
|
|
12
16
|
@media (min-width: 1024px) {
|
|
@@ -15,13 +19,24 @@
|
|
|
15
19
|
}
|
|
16
20
|
}
|
|
17
21
|
|
|
22
|
+
.optionsMenuStyle {
|
|
23
|
+
@media (max-width: 768px) {
|
|
24
|
+
position: absolute;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.menuItemContainer {
|
|
29
|
+
overflow-y: auto;
|
|
30
|
+
max-height: calc(100vh - 60px - 72px - 43px);
|
|
31
|
+
}
|
|
32
|
+
|
|
18
33
|
.notificationItem {
|
|
19
34
|
display: flex;
|
|
20
35
|
flex-direction: column;
|
|
21
36
|
align-items: unset !important;
|
|
22
37
|
padding: 10px;
|
|
23
38
|
border-bottom: 1px solid #f0f0f0;
|
|
24
|
-
background-color: #fff;
|
|
39
|
+
background-color: #fff !important;
|
|
25
40
|
cursor: pointer;
|
|
26
41
|
|
|
27
42
|
&:hover {
|
|
@@ -33,13 +48,30 @@
|
|
|
33
48
|
}
|
|
34
49
|
}
|
|
35
50
|
|
|
36
|
-
.
|
|
51
|
+
.headerContainer {
|
|
37
52
|
display: flex;
|
|
38
53
|
justify-content: space-between;
|
|
39
54
|
align-items: center;
|
|
40
55
|
padding: 10px;
|
|
41
56
|
background-color: #f5f5f5;
|
|
42
57
|
border-bottom: 1px solid #e8e8e8;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.moreOutlinedIconStyle {
|
|
61
|
+
font-size: 20px;
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
color: #595959;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.checkIconStyle {
|
|
67
|
+
color: #FF674C;
|
|
68
|
+
margin-right: 8px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.switchContainer {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: 10px;
|
|
43
75
|
|
|
44
76
|
span {
|
|
45
77
|
font-size: 14px;
|
|
@@ -93,6 +125,11 @@
|
|
|
93
125
|
.notificationTitle {
|
|
94
126
|
font-weight: bold;
|
|
95
127
|
font-size: 14px;
|
|
128
|
+
overflow: hidden;
|
|
129
|
+
text-overflow: ellipsis;
|
|
130
|
+
white-space: nowrap;
|
|
131
|
+
display: block;
|
|
132
|
+
max-width: 100%;
|
|
96
133
|
|
|
97
134
|
@media (max-width: 768px) {
|
|
98
135
|
font-size: 12px;
|
|
@@ -100,6 +137,11 @@
|
|
|
100
137
|
}
|
|
101
138
|
|
|
102
139
|
.notificationDescription {
|
|
140
|
+
overflow: hidden;
|
|
141
|
+
text-overflow: ellipsis;
|
|
142
|
+
white-space: nowrap;
|
|
143
|
+
display: block;
|
|
144
|
+
max-width: 100%;
|
|
103
145
|
font-size: 12px;
|
|
104
146
|
color: #666;
|
|
105
147
|
margin-top: 2px;
|