@omniumretail/component-library 1.1.62 → 1.1.64
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/bundle.js.LICENSE.txt +72 -15
- package/dist/main.css +2 -1
- package/dist/types/components/Header/Header.data.d.ts +3 -0
- package/dist/types/components/Header/Header.stories.d.ts +5 -0
- package/dist/types/components/Header/Header.types.d.ts +17 -0
- package/dist/types/components/Header/index.d.ts +3 -0
- package/dist/types/components/index.d.ts +1 -0
- package/package.json +2 -2
- package/src/assets/images/omnium-retail-logo.png +0 -0
- package/src/components/Header/Header.data.ts +24 -0
- package/src/components/Header/Header.stories.tsx +47 -0
- package/src/components/Header/Header.types.ts +19 -0
- package/src/components/Header/index.tsx +129 -0
- package/src/components/Header/styles.module.scss +193 -0
- package/src/components/Select/styles.module.scss +6 -0
- package/src/components/index.tsx +1 -0
|
@@ -4,21 +4,6 @@
|
|
|
4
4
|
http://jedwatson.github.io/classnames
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
/*! *****************************************************************************
|
|
8
|
-
Copyright (c) Microsoft Corporation.
|
|
9
|
-
|
|
10
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
11
|
-
purpose with or without fee is hereby granted.
|
|
12
|
-
|
|
13
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
14
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
15
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
16
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
17
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
18
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
19
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
20
|
-
***************************************************************************** */
|
|
21
|
-
|
|
22
7
|
/*! exports provided: default */
|
|
23
8
|
|
|
24
9
|
/*! no static exports found */
|
|
@@ -90,6 +75,78 @@ PERFORMANCE OF THIS SOFTWARE.
|
|
|
90
75
|
* LICENSE file in the root directory of this source tree.
|
|
91
76
|
*/
|
|
92
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
|
+
|
|
93
150
|
//! moment.js
|
|
94
151
|
|
|
95
152
|
//! moment.js locale configuration
|
package/dist/main.css
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
.ii1Ag3GTfp8unGCe48A0{display:inline-flex;text-decoration:none;height:auto;color:var(--color-black);font-size:var(--font-size-body-3);line-height:100%;font-weight:300;font-style:var(--font-style-italic)}.L9ncGwaItcjHJBLuwrKb{color:var(--color-orange);font-style:var(--font-style-normal)}.Yrb4eAglcF7FedoEB9AH span:nth-child(2){margin-inline-end:8px;margin-inline-start:0;order:-1}
|
|
4
4
|
.dr2zFJ8bDffg5CjjPq2c{color:var(--color-black)}.ant-dropdown-menu-title-content{color:var(--color-black)}
|
|
5
5
|
.GhX1oPovx60SBqLAcIRO{border-color:rgba(var(--color-black-rgb), 0.5);height:50px;font-size:var(--font-size-body-3);line-height:100%;color:var(--color-black);border-radius:5px}
|
|
6
|
-
._ox_QPqUHev1INeaUhs7 .ant-select-selector{border-color:rgba(var(--color-black-rgb), 0.5) !important;height:50px !important;display:flex;align-items:center}._ox_QPqUHev1INeaUhs7 .ant-select-arrow{color:var(--color-black)}
|
|
6
|
+
._ox_QPqUHev1INeaUhs7 .ant-select-selector{border-color:rgba(var(--color-black-rgb), 0.5) !important;height:50px !important;display:flex;align-items:center}._ox_QPqUHev1INeaUhs7 .ant-select-arrow{color:var(--color-black)}.ant-select-single{height:unset}
|
|
7
7
|
.bisuiYUGnAaj47TMXXcY{display:flex !important}
|
|
8
8
|
.YPXf1KvhUKPvYzjuCpbK{display:block;color:var(--color-black);text-transform:capitalize;font-size:var(--font-size-body-base);line-height:125%;font-weight:var(--font-weight-semibold)}.YPXf1KvhUKPvYzjuCpbK:not(:first-child){margin-top:8px}.ExPJyFK95xTcgtx9cRbg{text-transform:uppercase}
|
|
9
9
|
.EBnBgAHgtsQFrDoso9Dw{background-color:var(--color-orange);height:1px;border:none}.FLVlQ5eFtNDkCl4IcIIx{opacity:50%}.L2HU9MLCi6B1ZsJyWfp9{background-color:var(--color-blue)}.MQcBac9Gnb9D2ONENY8Q{margin:8px 0}.tdvYp9O5RnLEsNa3E_wz{margin:16px 0}.hWWGCDnwP_ROWFDlyVxe{margin:24px 0}
|
|
@@ -30,3 +30,4 @@
|
|
|
30
30
|
.nkyL3EtE9Zsnc5VOW43L{display:flex;flex-wrap:wrap;flex-direction:column}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{background-color:rgba(0,0,0,0);border:0px;color:var(--color-blue)}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th:before{display:none}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper{margin-bottom:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-cell{word-break:break-word}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr{cursor:pointer}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:last-child>td{border-bottom:1px solid var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:first-child>td{border-top:1px solid var(--color-blue) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:hover td{border-radius:0 !important;border-bottom-color:var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-space{align-self:flex-end}.nkyL3EtE9Zsnc5VOW43L .ant-select-selection-placeholder{color:var(--color-black)}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:hover,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:hover{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:calc(100% - 200px);margin-left:auto !important}.nkyL3EtE9Zsnc5VOW43L button[type=button].ant-pagination-item-link{margin-top:0 !important}.nkyL3EtE9Zsnc5VOW43L button[type=button]{margin-top:-50px}@media screen and (max-width: 1024px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:8px}}@media screen and (max-width: 767px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-content table{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-content{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-title,.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-header{word-break:break-all}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter{margin-inline-start:0px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-up{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-down{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:unset}}
|
|
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
|
+
:root{--color-grey: #e4e4e4;--color-grey-100: #E5E5E5;--color-white: #FFFFFF;--color-black: #2C2D2E}.SF5f_Q_Ggz_4JHUHS2Xa{display:flex;align-items:center;padding:13px 20px;border-bottom:2px solid var(--color-grey-100);box-sizing:border-box}.SF5f_Q_Ggz_4JHUHS2Xa *{box-sizing:border-box}.gSVYvBn1sLbcMsGI32b9{display:flex;flex-grow:1;align-items:flex-end;justify-content:center}.gSVYvBn1sLbcMsGI32b9 img{max-width:196px}.BIBQmS_NwoMw2Ncq5yuN{cursor:pointer;padding:4px 4px 4px 0;font-size:20px}.ZinSgUtysxITkbGRKdux{position:fixed;top:0;left:-100%;bottom:0;width:100%;max-width:375px;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}.V7acITs53XdgpTPxzunc{width:calc(100% + 30px);margin-left:-15px;background-color:var(--color-orange);display:flex;align-items:center;justify-content:center}.fVSt3bSZBcJGsOdA5nIN{color:var(--color-white);text-transform:uppercase;font-weight:bold}.E6YZPpa60LxA7qqIW7jQ{position:absolute;top:14px;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}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export interface MenuItem {
|
|
2
|
+
name: string;
|
|
3
|
+
action: () => void;
|
|
4
|
+
dropdownMenu?: MenuItem[];
|
|
5
|
+
}
|
|
6
|
+
export interface actionButton {
|
|
7
|
+
element?: any;
|
|
8
|
+
action?: () => void;
|
|
9
|
+
visibility?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export interface HeaderProps {
|
|
12
|
+
actionButton?: actionButton;
|
|
13
|
+
menuList?: MenuItem[];
|
|
14
|
+
logout?: () => void;
|
|
15
|
+
homeUrl?: string;
|
|
16
|
+
profileUrl?: string;
|
|
17
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omniumretail/component-library",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.64",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/bundle.js",
|
|
6
6
|
"typings": "./dist/types/index",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"@types/react": "^18.0.26",
|
|
16
16
|
"@types/react-beautiful-dnd": "^13.1.3",
|
|
17
17
|
"@types/react-dom": "^18.0.9",
|
|
18
|
-
"antd": "^5.
|
|
18
|
+
"antd": "^5.18.3",
|
|
19
19
|
"antd-img-crop": "^4.10.2",
|
|
20
20
|
"babel-jest": "^27.4.2",
|
|
21
21
|
"babel-loader": "^8.2.3",
|
|
Binary file
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { MenuItem } from './Header.types';
|
|
2
|
+
|
|
3
|
+
export const getMenuTopList = (
|
|
4
|
+
onHome: () => void,
|
|
5
|
+
): MenuItem[] => [
|
|
6
|
+
{
|
|
7
|
+
name: 'Home',
|
|
8
|
+
action: onHome,
|
|
9
|
+
},
|
|
10
|
+
];
|
|
11
|
+
|
|
12
|
+
export const getMenuBottomList= (
|
|
13
|
+
onProfile: () => void,
|
|
14
|
+
onLogout: () => void,
|
|
15
|
+
): MenuItem[] => [
|
|
16
|
+
{
|
|
17
|
+
name: 'Profile',
|
|
18
|
+
action: onProfile,
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
name: 'Logout',
|
|
22
|
+
action: onLogout,
|
|
23
|
+
}
|
|
24
|
+
];
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Meta, Story } from "@storybook/react";
|
|
2
|
+
import { Header } from '.';
|
|
3
|
+
import { HeaderProps } from './Header.types';
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: 'Header',
|
|
7
|
+
component: Header,
|
|
8
|
+
} as Meta;
|
|
9
|
+
|
|
10
|
+
const Template: Story<HeaderProps> = (args) => <Header {...args}></Header>;
|
|
11
|
+
|
|
12
|
+
const mockAction = () => {
|
|
13
|
+
console.log('action');
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const homeUrl = 'http://www.google.com';
|
|
17
|
+
const profileUrl = 'http://www.google.pt';
|
|
18
|
+
|
|
19
|
+
const mockMenu = [
|
|
20
|
+
{
|
|
21
|
+
name: "Ciclos de Avaliação",
|
|
22
|
+
action: () => mockAction(),
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
name: "Questionários",
|
|
26
|
+
action: () => mockAction(),
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
name: "Análises",
|
|
30
|
+
action: () => mockAction(),
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
name: "Relatórios",
|
|
34
|
+
action: () => mockAction(),
|
|
35
|
+
dropdownMenu: [
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
];
|
|
39
|
+
|
|
40
|
+
export const Primary = Template.bind({});
|
|
41
|
+
Primary.args = {
|
|
42
|
+
menuList: mockMenu,
|
|
43
|
+
logout: () => console.log('Logout'), // in here logout from auth0 should be passed
|
|
44
|
+
homeUrl: homeUrl,
|
|
45
|
+
profileUrl: profileUrl,
|
|
46
|
+
};
|
|
47
|
+
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface MenuItem {
|
|
2
|
+
name: string;
|
|
3
|
+
action: () => void;
|
|
4
|
+
dropdownMenu?: MenuItem[];
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export interface actionButton {
|
|
8
|
+
element?: any; // the client wants to be able to get a icon here
|
|
9
|
+
action?: () => void;
|
|
10
|
+
visibility?: boolean;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export interface HeaderProps {
|
|
14
|
+
actionButton?: actionButton;
|
|
15
|
+
menuList?: MenuItem[];
|
|
16
|
+
logout?: () => void;
|
|
17
|
+
homeUrl?: string;
|
|
18
|
+
profileUrl?: string;
|
|
19
|
+
}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { useRef, useState } from 'react';
|
|
2
|
+
import { MinusOutlined, PlusOutlined, BarsOutlined, CloseOutlined } from '@ant-design/icons';
|
|
3
|
+
import omniumIcon from '../../assets/images/omnium-retail-logo.png';
|
|
4
|
+
import styles from './styles.module.scss';
|
|
5
|
+
import classNames from 'classnames';
|
|
6
|
+
import { HeaderProps, MenuItem } from './Header.types';
|
|
7
|
+
import { getMenuTopList, getMenuBottomList } from './Header.data';
|
|
8
|
+
|
|
9
|
+
export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl }: HeaderProps) => {
|
|
10
|
+
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
11
|
+
const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
|
|
12
|
+
const headerRef = useRef<HTMLDivElement>(null);
|
|
13
|
+
const overlayRef = useRef<HTMLDivElement>(null);
|
|
14
|
+
|
|
15
|
+
const onLogout = () => {
|
|
16
|
+
if(logout) {
|
|
17
|
+
logout();
|
|
18
|
+
} else {
|
|
19
|
+
onHome();
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const onProfile = () => {
|
|
24
|
+
if(profileUrl) {
|
|
25
|
+
window.location.href = profileUrl;
|
|
26
|
+
} else {
|
|
27
|
+
window.location.reload();
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const onHome = () => {
|
|
32
|
+
if(homeUrl) {
|
|
33
|
+
window.location.href = homeUrl;
|
|
34
|
+
} else {
|
|
35
|
+
window.location.reload();
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const menuTopList = getMenuTopList(
|
|
40
|
+
onHome,
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
const menuBottomList = getMenuBottomList(
|
|
44
|
+
onProfile,
|
|
45
|
+
onLogout
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
const combinedMenuList = [...menuTopList, ...(menuList || []), ...menuBottomList];
|
|
49
|
+
|
|
50
|
+
const onToggleMenu = () => {
|
|
51
|
+
setIsMenuOpen(!isMenuOpen);
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const handleDropdownClick = (e: any, index: number) => {
|
|
55
|
+
e.stopPropagation();
|
|
56
|
+
setActiveDropdown(activeDropdown === index ? null : index);
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
const renderMenu = (menuList: MenuItem[]) => {
|
|
60
|
+
return menuList.map((link, index) => (
|
|
61
|
+
<li
|
|
62
|
+
key={link.name}
|
|
63
|
+
data-index={index}
|
|
64
|
+
className={classNames(styles.listItem, {
|
|
65
|
+
[styles.hasDropdown]: link.dropdownMenu,
|
|
66
|
+
[styles.dropdownActive]: activeDropdown === index
|
|
67
|
+
})}
|
|
68
|
+
>
|
|
69
|
+
<div
|
|
70
|
+
className={styles.listName}
|
|
71
|
+
onClick={() => link.action()}
|
|
72
|
+
>
|
|
73
|
+
{link.name}
|
|
74
|
+
{
|
|
75
|
+
link.dropdownMenu && link.dropdownMenu.length > 0 && <div className={ styles.arrow } onClick={ (event) => handleDropdownClick(event, index) }>
|
|
76
|
+
{
|
|
77
|
+
activeDropdown === index ?
|
|
78
|
+
<MinusOutlined className={styles.arrowIcon } /> :
|
|
79
|
+
<PlusOutlined className={styles.arrowIcon } />
|
|
80
|
+
}
|
|
81
|
+
</div>
|
|
82
|
+
}
|
|
83
|
+
</div>
|
|
84
|
+
{link.dropdownMenu && link.dropdownMenu.length > 0 && (
|
|
85
|
+
<ul
|
|
86
|
+
className={styles.dropdownMenu}
|
|
87
|
+
>
|
|
88
|
+
{link.dropdownMenu.map((dropdownLink) => (
|
|
89
|
+
<li key={dropdownLink.name} onClick={dropdownLink.action} className={styles.listItem}>
|
|
90
|
+
<div className={styles.listName}>{dropdownLink.name}</div>
|
|
91
|
+
</li>
|
|
92
|
+
))}
|
|
93
|
+
</ul>
|
|
94
|
+
)}
|
|
95
|
+
</li>
|
|
96
|
+
));
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
return (
|
|
100
|
+
<div className={styles.header} ref={headerRef}>
|
|
101
|
+
<BarsOutlined onClick={onToggleMenu} className={ styles.toggleMenuOpen } />
|
|
102
|
+
|
|
103
|
+
<div className={styles.logoContainer}>
|
|
104
|
+
<img src={omniumIcon} alt="Omnium Retail Logo" />
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div className={classNames(styles.menu, { [styles.active]: isMenuOpen })}>
|
|
108
|
+
<div className={styles.titleWrapper}>
|
|
109
|
+
<p className={styles.title}>
|
|
110
|
+
Menu
|
|
111
|
+
</p>
|
|
112
|
+
<CloseOutlined color={'#FFFFFF'} className={styles.toggleMenuClose} onClick={onToggleMenu} />
|
|
113
|
+
</div>
|
|
114
|
+
<div className={styles.menuList}>
|
|
115
|
+
{renderMenu(combinedMenuList)}
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
<div ref={overlayRef} className={classNames(styles.overlay, { [styles.active]: isMenuOpen })} onClick={onToggleMenu}></div>
|
|
119
|
+
|
|
120
|
+
{actionButton && actionButton.visibility && (
|
|
121
|
+
<div className={styles.actionButton} onClick={actionButton.action}>
|
|
122
|
+
{actionButton.element}
|
|
123
|
+
</div>
|
|
124
|
+
)}
|
|
125
|
+
</div>
|
|
126
|
+
);
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
export default Header;
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
|
|
2
|
+
:root {
|
|
3
|
+
--color-grey: #e4e4e4;
|
|
4
|
+
--color-grey-100: #E5E5E5;
|
|
5
|
+
--color-white: #FFFFFF;
|
|
6
|
+
--color-black: #2C2D2E;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.header {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
padding: 13px 20px;
|
|
13
|
+
border-bottom: 2px solid var(--color-grey-100);
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
|
|
16
|
+
* {
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.logoContainer {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-grow: 1;
|
|
24
|
+
align-items: flex-end;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
|
|
27
|
+
img {
|
|
28
|
+
max-width: 196px;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.toggleMenuOpen {
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
padding: 4px 4px 4px 0;
|
|
35
|
+
font-size: 20px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.menu {
|
|
39
|
+
position: fixed;
|
|
40
|
+
top: 0;
|
|
41
|
+
left: -100%;
|
|
42
|
+
bottom: 0;
|
|
43
|
+
width: 100%;
|
|
44
|
+
max-width: 375px;
|
|
45
|
+
background-color: var(--color-white);
|
|
46
|
+
padding-inline: 15px;
|
|
47
|
+
z-index: 999;
|
|
48
|
+
box-shadow: 0 3px 12px rgba(0,0,0, .45);
|
|
49
|
+
transition: 0.6s ease-out;
|
|
50
|
+
|
|
51
|
+
&.active {
|
|
52
|
+
left: 0;
|
|
53
|
+
transition: 0.3s ease-in;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.overlay {
|
|
58
|
+
background-color: rgba(0,0,0,.3);
|
|
59
|
+
backdrop-filter: blur(1px);
|
|
60
|
+
position: absolute;
|
|
61
|
+
left: 0;
|
|
62
|
+
top: 0;
|
|
63
|
+
right: 0;
|
|
64
|
+
bottom: 0;
|
|
65
|
+
z-index: 998;
|
|
66
|
+
pointer-events: none;
|
|
67
|
+
opacity: 0;
|
|
68
|
+
transition: 0.3s;
|
|
69
|
+
|
|
70
|
+
&.active {
|
|
71
|
+
opacity: 1;
|
|
72
|
+
pointer-events: all;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.titleWrapper {
|
|
77
|
+
width: calc(100% + 30px);
|
|
78
|
+
margin-left: -15px;
|
|
79
|
+
background-color: var(--color-orange);
|
|
80
|
+
display: flex;
|
|
81
|
+
align-items: center;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.title {
|
|
86
|
+
color: var(--color-white);
|
|
87
|
+
text-transform: uppercase;
|
|
88
|
+
font-weight: bold;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.toggleMenuClose {
|
|
92
|
+
position: absolute;
|
|
93
|
+
top: 14px;
|
|
94
|
+
right: 15px;
|
|
95
|
+
font-size: 25px;
|
|
96
|
+
cursor: pointer;
|
|
97
|
+
color: var(--color-white);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.menuList {
|
|
101
|
+
overflow-y: auto;
|
|
102
|
+
height: calc(100% - 51px);
|
|
103
|
+
margin: 0;
|
|
104
|
+
padding: 0;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.listName {
|
|
108
|
+
height: 60px;
|
|
109
|
+
padding: 10px;
|
|
110
|
+
display: flex;
|
|
111
|
+
align-items: center;
|
|
112
|
+
border-bottom: 1px solid var(--color-black);
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
transition: 0.3s;
|
|
115
|
+
text-transform: uppercase;
|
|
116
|
+
width: 100%;
|
|
117
|
+
|
|
118
|
+
&:hover {
|
|
119
|
+
background-color: var(--color-grey);
|
|
120
|
+
color: var(--color-black);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.listItem {
|
|
125
|
+
list-style: none;
|
|
126
|
+
|
|
127
|
+
&.hasDropdown {
|
|
128
|
+
height: auto;
|
|
129
|
+
display: flex;
|
|
130
|
+
flex-direction: column;
|
|
131
|
+
align-items: flex-start;
|
|
132
|
+
justify-content: flex-start;
|
|
133
|
+
padding-bottom: 0;
|
|
134
|
+
|
|
135
|
+
> .listName {
|
|
136
|
+
position: relative;
|
|
137
|
+
|
|
138
|
+
.arrow {
|
|
139
|
+
position: absolute;
|
|
140
|
+
width: 60px;
|
|
141
|
+
height: 100%;
|
|
142
|
+
background: var(--color-black);
|
|
143
|
+
right: 0;
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
justify-content: center;
|
|
147
|
+
|
|
148
|
+
&:hover {
|
|
149
|
+
background-color: var(--color-orange);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.arrowIcon {
|
|
154
|
+
color: var(--color-white);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
&.dropdownActive {
|
|
159
|
+
background: var(--color-grey);
|
|
160
|
+
|
|
161
|
+
.arrow {
|
|
162
|
+
background-color: var(--color-orange);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.dropdownMenu {
|
|
166
|
+
height: auto; /* Arbitrary large value to allow smooth transition */
|
|
167
|
+
opacity: 1;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.dropdownMenu {
|
|
174
|
+
padding: 0;
|
|
175
|
+
width: 100%;
|
|
176
|
+
margin: 0;
|
|
177
|
+
background-color: var(--color-orange);
|
|
178
|
+
color: var(--color-white);
|
|
179
|
+
height: 0;
|
|
180
|
+
opacity: 0;
|
|
181
|
+
overflow: hidden;
|
|
182
|
+
transition: height 0.3s ease, opacity 0.3s ease;
|
|
183
|
+
|
|
184
|
+
.listName {
|
|
185
|
+
min-height: 60px;
|
|
186
|
+
height: auto;
|
|
187
|
+
padding-inline: 40px;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.actionButton {
|
|
192
|
+
cursor: pointer;
|
|
193
|
+
}
|
package/src/components/index.tsx
CHANGED