allaw-ui 2.9.8 → 2.9.9
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.
|
@@ -5,6 +5,26 @@
|
|
|
5
5
|
row-gap: 1.5rem;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
/* Styles pour la taille small */
|
|
9
|
+
.tab-navigation.small {
|
|
10
|
+
width: 100%;
|
|
11
|
+
overflow-x: auto;
|
|
12
|
+
flex-wrap: nowrap;
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
justify-content: flex-start;
|
|
15
|
+
padding-bottom: 4px; /* Pour éviter que la barre de défilement ne coupe le contenu */
|
|
16
|
+
-ms-overflow-style: none; /* IE and Edge */
|
|
17
|
+
scrollbar-width: none; /* Firefox */
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.tab-navigation.small::-webkit-scrollbar {
|
|
21
|
+
display: none; /* Cache la barre de défilement pour Chrome, Safari, etc. */
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.tab-navigation.small .tab-item {
|
|
25
|
+
flex: 0 0 auto;
|
|
26
|
+
}
|
|
27
|
+
|
|
8
28
|
.tab-navigation.small .tab-label {
|
|
9
29
|
font-size: 14px;
|
|
10
30
|
}
|
|
@@ -24,22 +44,48 @@
|
|
|
24
44
|
position: relative;
|
|
25
45
|
}
|
|
26
46
|
|
|
47
|
+
.tab-navigation.small .tab-item {
|
|
48
|
+
display: flex;
|
|
49
|
+
padding: 0px 12px 8px 12px;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 6px;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
position: relative;
|
|
55
|
+
}
|
|
56
|
+
|
|
27
57
|
.tab-navigation.normal .tab-item.active {
|
|
28
58
|
border-bottom: 3px solid #000;
|
|
29
59
|
padding-bottom: 10px;
|
|
30
60
|
color: var(--Primary-Mid-black, var(--primary-black, #171e25));
|
|
31
61
|
}
|
|
32
62
|
|
|
63
|
+
.tab-navigation.small .tab-item.active {
|
|
64
|
+
border-bottom: 2px solid #000;
|
|
65
|
+
padding-bottom: 8px;
|
|
66
|
+
color: var(--Primary-Mid-black, var(--primary-black, #171e25));
|
|
67
|
+
}
|
|
68
|
+
|
|
33
69
|
.tab-navigation.normal .tab-item.inactive {
|
|
34
70
|
border-bottom: 3px solid var(--grey-venom, #e6edf5);
|
|
35
71
|
color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
|
|
36
72
|
}
|
|
37
73
|
|
|
74
|
+
.tab-navigation.small .tab-item.inactive {
|
|
75
|
+
border-bottom: 2px solid var(--grey-venom, #e6edf5);
|
|
76
|
+
color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
|
|
77
|
+
}
|
|
78
|
+
|
|
38
79
|
.tab-navigation.normal .tab-item.inactive:hover {
|
|
39
80
|
border-bottom: 3px solid var(--venom-grey-dark, #d1dce8);
|
|
40
81
|
color: var(--Tags-Mid-grey, var(--dark-grey, #456073));
|
|
41
82
|
}
|
|
42
83
|
|
|
84
|
+
.tab-navigation.small .tab-item.inactive:hover {
|
|
85
|
+
border-bottom: 2px solid var(--venom-grey-dark, #d1dce8);
|
|
86
|
+
color: var(--Tags-Mid-grey, var(--dark-grey, #456073));
|
|
87
|
+
}
|
|
88
|
+
|
|
43
89
|
/* Style round */
|
|
44
90
|
.tab-navigation.tab-navigation--round {
|
|
45
91
|
padding: 4px;
|
|
@@ -58,6 +104,10 @@
|
|
|
58
104
|
border-radius: 6px;
|
|
59
105
|
}
|
|
60
106
|
|
|
107
|
+
.tab-navigation.tab-navigation--round.small .tab-item {
|
|
108
|
+
padding: 6px 12px;
|
|
109
|
+
}
|
|
110
|
+
|
|
61
111
|
.tab-navigation.tab-navigation--round .tab-item.active {
|
|
62
112
|
background: var(--dark-grey, #456073);
|
|
63
113
|
color: var(--pure-white, #fff);
|
|
@@ -67,6 +117,12 @@
|
|
|
67
117
|
border: 1px solid var(--dark-grey, #456073);
|
|
68
118
|
}
|
|
69
119
|
|
|
120
|
+
.tab-navigation.tab-navigation--round.small .tab-item.active {
|
|
121
|
+
height: 28px;
|
|
122
|
+
padding: 8px 16px;
|
|
123
|
+
border-radius: 14px;
|
|
124
|
+
}
|
|
125
|
+
|
|
70
126
|
.tab-navigation.tab-navigation--round .tab-item.active:hover {
|
|
71
127
|
background: #3c5364;
|
|
72
128
|
color: var(--pure-white, #fff);
|
|
@@ -81,13 +137,18 @@
|
|
|
81
137
|
border: 1px solid var(--grey-venom, #e6edf5);
|
|
82
138
|
}
|
|
83
139
|
|
|
140
|
+
.tab-navigation.tab-navigation--round.small .tab-item.inactive {
|
|
141
|
+
height: 28px;
|
|
142
|
+
padding: 8px 16px;
|
|
143
|
+
border-radius: 14px;
|
|
144
|
+
}
|
|
145
|
+
|
|
84
146
|
.tab-navigation.tab-navigation--round .tab-item.inactive:hover {
|
|
85
147
|
background: #e6edf5;
|
|
86
148
|
}
|
|
87
149
|
|
|
88
150
|
.tab-label {
|
|
89
151
|
font-family: "Open Sans", sans-serif;
|
|
90
|
-
font-size: 14px;
|
|
91
152
|
font-style: normal;
|
|
92
153
|
font-weight: 500;
|
|
93
154
|
line-height: 1;
|
|
@@ -107,6 +168,17 @@
|
|
|
107
168
|
top: 7px;
|
|
108
169
|
}
|
|
109
170
|
|
|
171
|
+
.tab-navigation.small .tab-notification-dot {
|
|
172
|
+
top: 5px;
|
|
173
|
+
right: 8px;
|
|
174
|
+
width: 4px;
|
|
175
|
+
height: 4px;
|
|
176
|
+
}
|
|
177
|
+
|
|
110
178
|
.tab-navigation.tab-navigation--round .tab-notification-dot {
|
|
111
179
|
top: 15px;
|
|
112
180
|
}
|
|
181
|
+
|
|
182
|
+
.tab-navigation.tab-navigation--round.small .tab-notification-dot {
|
|
183
|
+
top: 10px;
|
|
184
|
+
}
|
|
@@ -1,9 +1,27 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useRef, useEffect, useState } from "react";
|
|
2
2
|
import "./TabNavigation.css";
|
|
3
3
|
import "../../../styles/global.css";
|
|
4
4
|
var TabNavigation = function (_a) {
|
|
5
5
|
var tabs = _a.tabs, onTabClick = _a.onTabClick, _b = _a.size, size = _b === void 0 ? "normal" : _b, _c = _a.variant, variant = _c === void 0 ? "normal" : _c;
|
|
6
|
-
|
|
6
|
+
var navRef = useRef(null);
|
|
7
|
+
var _d = useState(null), activeTabElement = _d[0], setActiveTabElement = _d[1];
|
|
8
|
+
// Scroll to active tab when it changes
|
|
9
|
+
useEffect(function () {
|
|
10
|
+
if (size === "small" && navRef.current && activeTabElement) {
|
|
11
|
+
var navWidth = navRef.current.offsetWidth;
|
|
12
|
+
var tabOffset = activeTabElement.offsetLeft;
|
|
13
|
+
var tabWidth = activeTabElement.offsetWidth;
|
|
14
|
+
// Center the active tab in the navigation
|
|
15
|
+
navRef.current.scrollLeft = tabOffset - navWidth / 2 + tabWidth / 2;
|
|
16
|
+
}
|
|
17
|
+
}, [activeTabElement, size]);
|
|
18
|
+
// Set active tab element reference
|
|
19
|
+
var setTabRef = function (element, isActive) {
|
|
20
|
+
if (element && isActive) {
|
|
21
|
+
setActiveTabElement(element);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
return (React.createElement("div", { ref: navRef, className: "tab-navigation ".concat(size, " ").concat(variant === "round" ? "tab-navigation--round" : "") }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, ref: function (el) { return setTabRef(el, tab.isActive); }, className: "tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
|
|
7
25
|
React.createElement("span", { className: "tab-label" }, tab.label),
|
|
8
26
|
tab.hasNotification && React.createElement("span", { className: "tab-notification-dot" }))); })));
|
|
9
27
|
};
|
|
@@ -35,10 +35,45 @@ declare namespace _default {
|
|
|
35
35
|
value: string;
|
|
36
36
|
}[];
|
|
37
37
|
}
|
|
38
|
+
namespace viewport {
|
|
39
|
+
namespace viewports {
|
|
40
|
+
namespace mobile {
|
|
41
|
+
let name: string;
|
|
42
|
+
namespace styles {
|
|
43
|
+
let width: string;
|
|
44
|
+
let height: string;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
namespace tablet {
|
|
48
|
+
let name_1: string;
|
|
49
|
+
export { name_1 as name };
|
|
50
|
+
export namespace styles_1 {
|
|
51
|
+
let width_1: string;
|
|
52
|
+
export { width_1 as width };
|
|
53
|
+
let height_1: string;
|
|
54
|
+
export { height_1 as height };
|
|
55
|
+
}
|
|
56
|
+
export { styles_1 as styles };
|
|
57
|
+
}
|
|
58
|
+
namespace desktop {
|
|
59
|
+
let name_2: string;
|
|
60
|
+
export { name_2 as name };
|
|
61
|
+
export namespace styles_2 {
|
|
62
|
+
let width_2: string;
|
|
63
|
+
export { width_2 as width };
|
|
64
|
+
let height_2: string;
|
|
65
|
+
export { height_2 as height };
|
|
66
|
+
}
|
|
67
|
+
export { styles_2 as styles };
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
38
71
|
}
|
|
39
72
|
}
|
|
40
73
|
export default _default;
|
|
41
74
|
export const Default: any;
|
|
75
|
+
export const Small: any;
|
|
42
76
|
export const Round: any;
|
|
43
77
|
export const SmallRound: any;
|
|
78
|
+
export const ManyTabsSmall: any;
|
|
44
79
|
import TabNavigation from "./TabNavigation";
|
|
@@ -45,6 +45,31 @@ export default {
|
|
|
45
45
|
{ name: "dark", value: "#171e25" },
|
|
46
46
|
],
|
|
47
47
|
},
|
|
48
|
+
viewport: {
|
|
49
|
+
viewports: {
|
|
50
|
+
mobile: {
|
|
51
|
+
name: "Mobile",
|
|
52
|
+
styles: {
|
|
53
|
+
width: "375px",
|
|
54
|
+
height: "667px",
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
tablet: {
|
|
58
|
+
name: "Tablet",
|
|
59
|
+
styles: {
|
|
60
|
+
width: "768px",
|
|
61
|
+
height: "1024px",
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
desktop: {
|
|
65
|
+
name: "Desktop",
|
|
66
|
+
styles: {
|
|
67
|
+
width: "1280px",
|
|
68
|
+
height: "800px",
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
},
|
|
48
73
|
},
|
|
49
74
|
};
|
|
50
75
|
var Template = function (args) { return React.createElement(TabNavigation, __assign({}, args)); };
|
|
@@ -60,7 +85,40 @@ Default.args = {
|
|
|
60
85
|
size: "normal",
|
|
61
86
|
variant: "normal",
|
|
62
87
|
};
|
|
88
|
+
export var Small = Template.bind({});
|
|
89
|
+
Small.args = __assign(__assign({}, Default.args), { size: "small" });
|
|
90
|
+
Small.parameters = {
|
|
91
|
+
viewport: {
|
|
92
|
+
defaultViewport: "mobile",
|
|
93
|
+
},
|
|
94
|
+
};
|
|
63
95
|
export var Round = Template.bind({});
|
|
64
96
|
Round.args = __assign(__assign({}, Default.args), { variant: "round" });
|
|
65
97
|
export var SmallRound = Template.bind({});
|
|
66
98
|
SmallRound.args = __assign(__assign({}, Default.args), { size: "small", variant: "round" });
|
|
99
|
+
SmallRound.parameters = {
|
|
100
|
+
viewport: {
|
|
101
|
+
defaultViewport: "mobile",
|
|
102
|
+
},
|
|
103
|
+
};
|
|
104
|
+
// Démonstration avec beaucoup d'onglets pour montrer le défilement horizontal
|
|
105
|
+
export var ManyTabsSmall = Template.bind({});
|
|
106
|
+
ManyTabsSmall.args = {
|
|
107
|
+
tabs: [
|
|
108
|
+
{ label: "Tous", isActive: true, hasNotification: false },
|
|
109
|
+
{ label: "Notes", isActive: false, hasNotification: false },
|
|
110
|
+
{ label: "Documents", isActive: false, hasNotification: true },
|
|
111
|
+
{ label: "Factures", isActive: false, hasNotification: false },
|
|
112
|
+
{ label: "Messages", isActive: false, hasNotification: false },
|
|
113
|
+
{ label: "Contrats", isActive: false, hasNotification: false },
|
|
114
|
+
{ label: "Clients", isActive: false, hasNotification: false },
|
|
115
|
+
],
|
|
116
|
+
onTabClick: function (index) { return console.log("Tab ".concat(index, " cliqu\u00E9")); },
|
|
117
|
+
size: "small",
|
|
118
|
+
variant: "normal",
|
|
119
|
+
};
|
|
120
|
+
ManyTabsSmall.parameters = {
|
|
121
|
+
viewport: {
|
|
122
|
+
defaultViewport: "mobile",
|
|
123
|
+
},
|
|
124
|
+
};
|