@omniumretail/component-library 1.2.28 → 1.2.29
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/index.tsx +31 -11
- package/src/components/BellNotifications/styles.module.scss +24 -1
- 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;overflow-y:auto;padding:0}@media(max-width: 768px){.msELhnfhfo6un3c4Spoc{max-width:100%;max-height:300px}}@media(min-width: 1024px){.msELhnfhfo6un3c4Spoc{max-width:600px;max-height:700px}}.GeNg2HVTmhQDmsLLTpWj{display:flex;flex-direction:column;align-items:unset !important;padding:10px;border-bottom:1px solid #f0f0f0;background-color:#fff;cursor:pointer}.GeNg2HVTmhQDmsLLTpWj:hover{background-color:#f9f9f9}@media(max-width: 768px){.GeNg2HVTmhQDmsLLTpWj{padding:8px}}.
|
|
34
|
+
.msELhnfhfo6un3c4Spoc{max-width:300px;max-height:400px;overflow-y:auto;padding:0}@media(max-width: 768px){.msELhnfhfo6un3c4Spoc{max-width:100%;max-height:300px}}@media(min-width: 1024px){.msELhnfhfo6un3c4Spoc{max-width:600px;max-height:700px}}.GeNg2HVTmhQDmsLLTpWj{display:flex;flex-direction:column;align-items:unset !important;padding:10px;border-bottom:1px solid #f0f0f0;background-color:#fff;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}@media(max-width: 768px){.GBb48KXbGnQtAY8xqmUp{flex-direction:column;align-items:flex-start;gap:8px}}.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}@media(max-width: 768px){.QgZ3oHW9IRTexL8xWVqP{font-size:12px}}.JwfbSOSIRAz5OO2hiSFc{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
|
@@ -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,9 +26,10 @@ 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
34
|
const [maxChars, setMaxChars] = useState(30);
|
|
34
35
|
const [filter, setFilter] = useState<'all' | 'unread'>('all');
|
|
@@ -78,17 +79,36 @@ export const BellNotifications = ({ notifications, onFilterChange, onNotificatio
|
|
|
78
79
|
}
|
|
79
80
|
}, [unreadCount]);
|
|
80
81
|
|
|
82
|
+
const optionsMenu = (
|
|
83
|
+
<Menu>
|
|
84
|
+
<Menu.Item key="markAllAsRead" onClick={handleMarkAllAsRead}>
|
|
85
|
+
<CheckCircleOutlined className={styles.checkIconStyle} />
|
|
86
|
+
|
|
87
|
+
{t('components.bellNotifications.markAllAsRead')}
|
|
88
|
+
</Menu.Item>
|
|
89
|
+
</Menu>
|
|
90
|
+
);
|
|
91
|
+
|
|
81
92
|
const menu = (
|
|
82
93
|
<Menu className={styles.notificationMenu}>
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
94
|
+
|
|
95
|
+
{unreadCount > 0 && (
|
|
96
|
+
<div className={styles.headerContainer}>
|
|
97
|
+
<div className={styles.switchContainer}>
|
|
98
|
+
<span>{t('components.bellNotifications.onlyShowNoRead')}</span>
|
|
99
|
+
|
|
100
|
+
<Switch
|
|
101
|
+
checked={filter === 'unread'}
|
|
102
|
+
onChange={handleFilterChange}
|
|
103
|
+
size="small"
|
|
104
|
+
/>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<Dropdown overlay={optionsMenu} trigger={['click']}>
|
|
108
|
+
<MoreOutlined className={styles.moreOutlinedIconStyle} />
|
|
109
|
+
</Dropdown>
|
|
110
|
+
</div>
|
|
111
|
+
)}
|
|
92
112
|
|
|
93
113
|
{notifications.map((notif) => (
|
|
94
114
|
<Menu.Item
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
.
|
|
36
|
+
.headerContainer {
|
|
37
37
|
display: flex;
|
|
38
38
|
justify-content: space-between;
|
|
39
39
|
align-items: center;
|
|
@@ -41,6 +41,29 @@
|
|
|
41
41
|
background-color: #f5f5f5;
|
|
42
42
|
border-bottom: 1px solid #e8e8e8;
|
|
43
43
|
|
|
44
|
+
@media (max-width: 768px) {
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
align-items: flex-start;
|
|
47
|
+
gap: 8px;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.moreOutlinedIconStyle {
|
|
52
|
+
font-size: 20px;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
color: #595959;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.checkIconStyle {
|
|
58
|
+
color: #FF674C;
|
|
59
|
+
margin-right: 8px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.switchContainer {
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
gap: 10px;
|
|
66
|
+
|
|
44
67
|
span {
|
|
45
68
|
font-size: 14px;
|
|
46
69
|
font-weight: 500;
|
|
@@ -12,7 +12,21 @@ import { BellNotifications } from '../BellNotifications';
|
|
|
12
12
|
* Header component to display navigation bar with dropdown menus and action button.
|
|
13
13
|
* @param {HeaderProps} props - Properties passed to the component.
|
|
14
14
|
*/
|
|
15
|
-
export const Header = ({
|
|
15
|
+
export const Header = ({
|
|
16
|
+
menuList,
|
|
17
|
+
actionButton,
|
|
18
|
+
logout,
|
|
19
|
+
homeUrl,
|
|
20
|
+
profileUrl,
|
|
21
|
+
onLeavingPage,
|
|
22
|
+
userName,
|
|
23
|
+
pageTitle,
|
|
24
|
+
onFilterChange,
|
|
25
|
+
notifications,
|
|
26
|
+
onNotificationClick,
|
|
27
|
+
handleMarkAllAsRead
|
|
28
|
+
}: HeaderProps) => {
|
|
29
|
+
|
|
16
30
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
17
31
|
const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
|
|
18
32
|
const headerRef = useRef<HTMLDivElement>(null);
|
|
@@ -145,7 +159,7 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
|
|
|
145
159
|
</div>
|
|
146
160
|
|
|
147
161
|
{notifications &&
|
|
148
|
-
<BellNotifications onFilterChange={onFilterChange!} notifications={notifications} onNotificationClick={onNotificationClick!} />
|
|
162
|
+
<BellNotifications onFilterChange={onFilterChange!} notifications={notifications} onNotificationClick={onNotificationClick!} handleMarkAllAsRead={handleMarkAllAsRead!} />
|
|
149
163
|
}
|
|
150
164
|
|
|
151
165
|
<div className={classNames(styles.menu, { [styles.active]: isMenuOpen })}>
|
package/src/locales/en.json
CHANGED
package/src/locales/es.json
CHANGED
package/src/locales/pt.json
CHANGED