@conduction/components 2.2.5 → 2.2.6
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/README.md +1 -0
- package/lib/components/tableWrapper/TableWrapper.d.ts +8 -0
- package/lib/components/tableWrapper/TableWrapper.js +31 -0
- package/lib/components/tableWrapper/TableWrapper.module.css +63 -0
- package/lib/components/tabs/Tabs.js +30 -2
- package/lib/components/tabs/Tabs.module.css +81 -0
- package/lib/index.d.ts +2 -1
- package/lib/index.js +2 -1
- package/package.json +1 -1
- package/src/components/tableWrapper/TableWrapper.module.css +63 -0
- package/src/components/tableWrapper/TableWrapper.tsx +68 -0
- package/src/components/tabs/Tabs.module.css +81 -0
- package/src/components/tabs/Tabs.tsx +67 -6
- package/src/index.ts +2 -0
package/README.md
CHANGED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React, { useState, useEffect } from "react";
|
|
3
|
+
import * as styles from "./TableWrapper.module.css";
|
|
4
|
+
import clsx from "clsx";
|
|
5
|
+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
6
|
+
import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
|
|
7
|
+
export const TableWrapper = ({ children, touchScreen, }) => {
|
|
8
|
+
const [canScrollRight, setCanScrollRight] = useState(false);
|
|
9
|
+
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
|
10
|
+
const wrapperRef = React.useRef(null);
|
|
11
|
+
const handleScroll = () => {
|
|
12
|
+
if (wrapperRef.current) {
|
|
13
|
+
setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
|
|
14
|
+
setCanScrollRight(wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
const handleScrollRight = () => {
|
|
18
|
+
if (wrapperRef.current)
|
|
19
|
+
wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
|
|
20
|
+
};
|
|
21
|
+
const handleScrollLeft = () => {
|
|
22
|
+
if (wrapperRef.current)
|
|
23
|
+
wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
|
|
24
|
+
};
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (wrapperRef.current) {
|
|
27
|
+
setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
|
|
28
|
+
}
|
|
29
|
+
}, []);
|
|
30
|
+
return (_jsx("div", { className: styles.container, children: _jsxs("div", { onScroll: handleScroll, ref: wrapperRef, className: clsx(touchScreen ? styles.wrapperTouchscreen : styles.wrapper), children: [canScrollLeft && !touchScreen && (_jsx("div", { onClick: handleScrollLeft, className: styles.scrollLeftButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), children, canScrollRight && !touchScreen && (_jsx("div", { onClick: handleScrollRight, className: styles.scrollRightButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }));
|
|
31
|
+
};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--conduction-table-wrapper-scroll-button-background-color: #ffffff;
|
|
3
|
+
--conduction-table-wrapper-scroll-button-color: #000000;
|
|
4
|
+
--conduction-table-wrapper-scroll-button-padding-inline-start: 14px;
|
|
5
|
+
--conduction-table-wrapper-scroll-button-padding-inline-end: 14px;
|
|
6
|
+
/* --conduction-table-wrapper-scroll-button-padding-block-start: 10px; */
|
|
7
|
+
/* --conduction-table-wrapper-scroll-button-padding-block-end: 10px; */
|
|
8
|
+
|
|
9
|
+
--conduction-table-wrapper-scroll-button-hover-background-color: #ffffff;
|
|
10
|
+
--conduction-table-wrapper-scroll-button-hover-color: #4376fc;
|
|
11
|
+
}
|
|
12
|
+
.container {
|
|
13
|
+
position: relative;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.wrapper {
|
|
17
|
+
overflow-x: scroll;
|
|
18
|
+
}
|
|
19
|
+
.wrapperTouchscreen {
|
|
20
|
+
overflow-x: scroll;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.scrollRightButton,
|
|
24
|
+
.scrollLeftButton {
|
|
25
|
+
top: 0%;
|
|
26
|
+
position: absolute;
|
|
27
|
+
display: flex;
|
|
28
|
+
height: 100%;
|
|
29
|
+
background-color: var(--conduction-table-wrapper-scroll-button-background-color);
|
|
30
|
+
color: var(--conduction-table-wrapper-scroll-button-color);
|
|
31
|
+
padding-inline-start: var(--conduction-table-wrapper-scroll-button-padding-inline-start);
|
|
32
|
+
padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
|
|
33
|
+
padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
|
|
34
|
+
padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.scrollLeftButton:hover,
|
|
38
|
+
.scrollRightButton:hover {
|
|
39
|
+
background-color: var(--conduction-table-wrapper-scroll-button-hover-background-color);
|
|
40
|
+
color: var(--conduction-table-wrapper-scroll-button-hover-color);
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.scrollRightButton {
|
|
45
|
+
right: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.scrollLeftButton {
|
|
49
|
+
left: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.scrollButton {
|
|
53
|
+
align-self: center;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Hide scrollbar */
|
|
57
|
+
.wrapper::-webkit-scrollbar {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
.wrapper {
|
|
61
|
+
-ms-overflow-style: none;
|
|
62
|
+
scrollbar-width: none;
|
|
63
|
+
}
|
|
@@ -1,11 +1,39 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React, { useState, useEffect } from "react";
|
|
2
3
|
import * as styles from "./Tabs.module.css";
|
|
3
4
|
import { Tabs as RTabs, TabList as RTabList, Tab as RTab, TabPanel as RTabPanel, } from "react-tabs";
|
|
5
|
+
import clsx from "clsx";
|
|
6
|
+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
7
|
+
import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
|
|
4
8
|
// Tabs
|
|
5
9
|
export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { className: styles.tabs, ...otherProps, children: children }));
|
|
6
10
|
Tabs.tabsRole = "Tabs";
|
|
7
11
|
// TabList
|
|
8
|
-
export const TabList = ({ children, ...otherProps }) =>
|
|
12
|
+
export const TabList = ({ children, ...otherProps }) => {
|
|
13
|
+
const [canScrollRight, setCanScrollRight] = useState(false);
|
|
14
|
+
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
|
15
|
+
const wrapperRef = React.useRef(null);
|
|
16
|
+
const handleScroll = () => {
|
|
17
|
+
if (wrapperRef.current) {
|
|
18
|
+
setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
|
|
19
|
+
setCanScrollRight(wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
const handleScrollRight = () => {
|
|
23
|
+
if (wrapperRef.current)
|
|
24
|
+
wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
|
|
25
|
+
};
|
|
26
|
+
const handleScrollLeft = () => {
|
|
27
|
+
if (wrapperRef.current)
|
|
28
|
+
wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
|
|
29
|
+
};
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (wrapperRef.current) {
|
|
32
|
+
setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
|
|
33
|
+
}
|
|
34
|
+
}, []);
|
|
35
|
+
return (_jsx("div", { className: styles.container, children: _jsx("div", { onScroll: handleScroll, ref: wrapperRef, className: clsx(styles.wrapper), children: _jsx("div", { className: styles.tabListContainer, children: _jsxs(RTabList, { className: styles.tabList, ...otherProps, children: [canScrollLeft && (_jsx(RTab, { onClick: handleScrollLeft, className: clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), children, canScrollRight && (_jsx(RTab, { onClick: handleScrollRight, className: clsx(canScrollRight && styles.scrollRightButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }) }) }));
|
|
36
|
+
};
|
|
9
37
|
TabList.tabsRole = "TabList";
|
|
10
38
|
// Tab
|
|
11
39
|
export const Tab = ({ children, ...otherProps }) => (_jsx(RTab, { className: styles.tab, ...otherProps, children: children }));
|
|
@@ -21,6 +21,11 @@
|
|
|
21
21
|
/* --conduction-tabs-tab-letter-spacing: 0.02857em; */
|
|
22
22
|
/* --conduction-tabs-tab-text-transform: uppercase; */
|
|
23
23
|
|
|
24
|
+
--conduction-tabs-scrollButton-background-color: #ffffff;
|
|
25
|
+
--conduction-tabs-scrollButton-color: #4a4a4a;
|
|
26
|
+
--conduction-tabs-scrollButton-hover-background-color: #ffffff;
|
|
27
|
+
--conduction-tabs-scrollButton-hover-color: #4376fc;
|
|
28
|
+
|
|
24
29
|
--conduction-tabs-tab-selected-background-color: #ffffff;
|
|
25
30
|
--conduction-tabs-tab-selected-color: #4a4a4a;
|
|
26
31
|
/* --conduction-tabs-tab-selected-box-shadow: 0px 1px 0px 1px #ffffff; */
|
|
@@ -92,6 +97,42 @@
|
|
|
92
97
|
text-transform: var(--conduction-tabs-tab-text-transform);
|
|
93
98
|
}
|
|
94
99
|
|
|
100
|
+
.tabButton {
|
|
101
|
+
display: inline-flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
position: relative;
|
|
107
|
+
box-sizing: border-box;
|
|
108
|
+
text-align: center;
|
|
109
|
+
white-space: normal;
|
|
110
|
+
|
|
111
|
+
background-color: var(--conduction-tabs-scrollButton-background-color);
|
|
112
|
+
color: var(--conduction-tabs-tabButton-color);
|
|
113
|
+
bottom: var(--conduction-tabs-tab-bottom);
|
|
114
|
+
padding-block-start: var(--conduction-tabs-tab-padding-block-start);
|
|
115
|
+
padding-block-end: var(--conduction-tabs-tab-padding-block-end);
|
|
116
|
+
padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
|
|
117
|
+
padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
|
|
118
|
+
margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
|
|
119
|
+
font-size: var(--conduction-tabs-tab-font-size);
|
|
120
|
+
font-weight: var(--conduction-tabs-tab-font-weight);
|
|
121
|
+
font-family: var(--conduction-tabs-tab-font-family);
|
|
122
|
+
min-height: var(--conduction-tabs-tab-min-height);
|
|
123
|
+
letter-spacing: var(--conduction-tabs-tab-letter-spacing);
|
|
124
|
+
text-transform: var(--conduction-tabs-tab-text-transform);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.tabButton:hover > * {
|
|
128
|
+
background-color: var(--conduction-tabs-scrollButton-hover-background-color);
|
|
129
|
+
color: var(--conduction-tabs-scrollButton-hover-color);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.tabListContainer {
|
|
133
|
+
flex: 0 0 100%; /* Let it fill the entire space horizontally */
|
|
134
|
+
}
|
|
135
|
+
|
|
95
136
|
/* TabSelected */
|
|
96
137
|
.tab[aria-selected="true"] {
|
|
97
138
|
background-color: var(--conduction-tabs-tab-selected-background-color);
|
|
@@ -140,3 +181,43 @@
|
|
|
140
181
|
border-color: var(--conduction-tabs-tab-panel-border-color);
|
|
141
182
|
border-top: var(--conduction-tabs-tab-panel-border-top);
|
|
142
183
|
}
|
|
184
|
+
|
|
185
|
+
.scrollButton {
|
|
186
|
+
background-color: var(--conduction-tabs-scrollButton-background-color);
|
|
187
|
+
color: var(--conduction-tabs-scrollButton-color);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.container {
|
|
191
|
+
position: relative;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.wrapper {
|
|
195
|
+
overflow-x: scroll;
|
|
196
|
+
display: flex;
|
|
197
|
+
}
|
|
198
|
+
.wrapperTouchscreen {
|
|
199
|
+
overflow-x: scroll;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.scrollRightButton,
|
|
203
|
+
.scrollLeftButton {
|
|
204
|
+
position: absolute;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.scrollRightButton {
|
|
208
|
+
right: 0;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.scrollLeftButton {
|
|
212
|
+
left: 0;
|
|
213
|
+
z-index: 1;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* Hide scrollbar */
|
|
217
|
+
.wrapper::-webkit-scrollbar {
|
|
218
|
+
display: none;
|
|
219
|
+
}
|
|
220
|
+
.wrapper {
|
|
221
|
+
-ms-overflow-style: none;
|
|
222
|
+
scrollbar-width: none;
|
|
223
|
+
}
|
package/lib/index.d.ts
CHANGED
|
@@ -23,4 +23,5 @@ import { CodeBlock } from "./components/codeBlock/CodeBlock";
|
|
|
23
23
|
import { ToolTip } from "./components/toolTip/ToolTip";
|
|
24
24
|
import { Pagination } from "./components/Pagination/Pagination";
|
|
25
25
|
import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
|
|
26
|
-
|
|
26
|
+
import { TableWrapper } from "./components/tableWrapper/TableWrapper";
|
|
27
|
+
export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, Tabs, TabList, Tab, TabPanel, TableWrapper };
|
package/lib/index.js
CHANGED
|
@@ -16,4 +16,5 @@ import { CodeBlock } from "./components/codeBlock/CodeBlock";
|
|
|
16
16
|
import { ToolTip } from "./components/toolTip/ToolTip";
|
|
17
17
|
import { Pagination } from "./components/Pagination/Pagination";
|
|
18
18
|
import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
|
|
19
|
-
|
|
19
|
+
import { TableWrapper } from "./components/tableWrapper/TableWrapper";
|
|
20
|
+
export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, Tabs, TabList, Tab, TabPanel, TableWrapper };
|
package/package.json
CHANGED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--conduction-table-wrapper-scroll-button-background-color: #ffffff;
|
|
3
|
+
--conduction-table-wrapper-scroll-button-color: #000000;
|
|
4
|
+
--conduction-table-wrapper-scroll-button-padding-inline-start: 14px;
|
|
5
|
+
--conduction-table-wrapper-scroll-button-padding-inline-end: 14px;
|
|
6
|
+
/* --conduction-table-wrapper-scroll-button-padding-block-start: 10px; */
|
|
7
|
+
/* --conduction-table-wrapper-scroll-button-padding-block-end: 10px; */
|
|
8
|
+
|
|
9
|
+
--conduction-table-wrapper-scroll-button-hover-background-color: #ffffff;
|
|
10
|
+
--conduction-table-wrapper-scroll-button-hover-color: #4376fc;
|
|
11
|
+
}
|
|
12
|
+
.container {
|
|
13
|
+
position: relative;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.wrapper {
|
|
17
|
+
overflow-x: scroll;
|
|
18
|
+
}
|
|
19
|
+
.wrapperTouchscreen {
|
|
20
|
+
overflow-x: scroll;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.scrollRightButton,
|
|
24
|
+
.scrollLeftButton {
|
|
25
|
+
top: 0%;
|
|
26
|
+
position: absolute;
|
|
27
|
+
display: flex;
|
|
28
|
+
height: 100%;
|
|
29
|
+
background-color: var(--conduction-table-wrapper-scroll-button-background-color);
|
|
30
|
+
color: var(--conduction-table-wrapper-scroll-button-color);
|
|
31
|
+
padding-inline-start: var(--conduction-table-wrapper-scroll-button-padding-inline-start);
|
|
32
|
+
padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
|
|
33
|
+
padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
|
|
34
|
+
padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.scrollLeftButton:hover,
|
|
38
|
+
.scrollRightButton:hover {
|
|
39
|
+
background-color: var(--conduction-table-wrapper-scroll-button-hover-background-color);
|
|
40
|
+
color: var(--conduction-table-wrapper-scroll-button-hover-color);
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.scrollRightButton {
|
|
45
|
+
right: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.scrollLeftButton {
|
|
49
|
+
left: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.scrollButton {
|
|
53
|
+
align-self: center;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Hide scrollbar */
|
|
57
|
+
.wrapper::-webkit-scrollbar {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
.wrapper {
|
|
61
|
+
-ms-overflow-style: none;
|
|
62
|
+
scrollbar-width: none;
|
|
63
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
|
2
|
+
import * as styles from "./TableWrapper.module.css";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
5
|
+
import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
|
|
6
|
+
|
|
7
|
+
interface TableWrapperProps {
|
|
8
|
+
touchScreen?: boolean;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export const TableWrapper: React.FC<{ children: React.ReactNode } & TableWrapperProps> = ({
|
|
12
|
+
children,
|
|
13
|
+
touchScreen,
|
|
14
|
+
}) => {
|
|
15
|
+
const [canScrollRight, setCanScrollRight] = useState(false);
|
|
16
|
+
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
|
17
|
+
|
|
18
|
+
const wrapperRef = React.useRef<HTMLDivElement | null>(null);
|
|
19
|
+
|
|
20
|
+
const handleScroll = () => {
|
|
21
|
+
if (wrapperRef.current) {
|
|
22
|
+
setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
|
|
23
|
+
setCanScrollRight(
|
|
24
|
+
wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth,
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const handleScrollRight = () => {
|
|
30
|
+
if (wrapperRef.current) wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const handleScrollLeft = () => {
|
|
34
|
+
if (wrapperRef.current) wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (wrapperRef.current) {
|
|
39
|
+
setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
|
|
40
|
+
}
|
|
41
|
+
}, []);
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<div className={styles.container}>
|
|
45
|
+
<div
|
|
46
|
+
onScroll={handleScroll}
|
|
47
|
+
ref={wrapperRef}
|
|
48
|
+
className={clsx(touchScreen ? styles.wrapperTouchscreen : styles.wrapper)}
|
|
49
|
+
>
|
|
50
|
+
{canScrollLeft && !touchScreen && (
|
|
51
|
+
<div onClick={handleScrollLeft} className={styles.scrollLeftButton}>
|
|
52
|
+
<div className={styles.scrollButton}>
|
|
53
|
+
<FontAwesomeIcon icon={faChevronLeft} />
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
)}
|
|
57
|
+
{children}
|
|
58
|
+
{canScrollRight && !touchScreen && (
|
|
59
|
+
<div onClick={handleScrollRight} className={styles.scrollRightButton}>
|
|
60
|
+
<div className={styles.scrollButton}>
|
|
61
|
+
<FontAwesomeIcon icon={faChevronRight} />
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
)}
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
);
|
|
68
|
+
};
|
|
@@ -21,6 +21,11 @@
|
|
|
21
21
|
/* --conduction-tabs-tab-letter-spacing: 0.02857em; */
|
|
22
22
|
/* --conduction-tabs-tab-text-transform: uppercase; */
|
|
23
23
|
|
|
24
|
+
--conduction-tabs-scrollButton-background-color: #ffffff;
|
|
25
|
+
--conduction-tabs-scrollButton-color: #4a4a4a;
|
|
26
|
+
--conduction-tabs-scrollButton-hover-background-color: #ffffff;
|
|
27
|
+
--conduction-tabs-scrollButton-hover-color: #4376fc;
|
|
28
|
+
|
|
24
29
|
--conduction-tabs-tab-selected-background-color: #ffffff;
|
|
25
30
|
--conduction-tabs-tab-selected-color: #4a4a4a;
|
|
26
31
|
/* --conduction-tabs-tab-selected-box-shadow: 0px 1px 0px 1px #ffffff; */
|
|
@@ -92,6 +97,42 @@
|
|
|
92
97
|
text-transform: var(--conduction-tabs-tab-text-transform);
|
|
93
98
|
}
|
|
94
99
|
|
|
100
|
+
.tabButton {
|
|
101
|
+
display: inline-flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
position: relative;
|
|
107
|
+
box-sizing: border-box;
|
|
108
|
+
text-align: center;
|
|
109
|
+
white-space: normal;
|
|
110
|
+
|
|
111
|
+
background-color: var(--conduction-tabs-scrollButton-background-color);
|
|
112
|
+
color: var(--conduction-tabs-tabButton-color);
|
|
113
|
+
bottom: var(--conduction-tabs-tab-bottom);
|
|
114
|
+
padding-block-start: var(--conduction-tabs-tab-padding-block-start);
|
|
115
|
+
padding-block-end: var(--conduction-tabs-tab-padding-block-end);
|
|
116
|
+
padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
|
|
117
|
+
padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
|
|
118
|
+
margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
|
|
119
|
+
font-size: var(--conduction-tabs-tab-font-size);
|
|
120
|
+
font-weight: var(--conduction-tabs-tab-font-weight);
|
|
121
|
+
font-family: var(--conduction-tabs-tab-font-family);
|
|
122
|
+
min-height: var(--conduction-tabs-tab-min-height);
|
|
123
|
+
letter-spacing: var(--conduction-tabs-tab-letter-spacing);
|
|
124
|
+
text-transform: var(--conduction-tabs-tab-text-transform);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.tabButton:hover > * {
|
|
128
|
+
background-color: var(--conduction-tabs-scrollButton-hover-background-color);
|
|
129
|
+
color: var(--conduction-tabs-scrollButton-hover-color);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.tabListContainer {
|
|
133
|
+
flex: 0 0 100%; /* Let it fill the entire space horizontally */
|
|
134
|
+
}
|
|
135
|
+
|
|
95
136
|
/* TabSelected */
|
|
96
137
|
.tab[aria-selected="true"] {
|
|
97
138
|
background-color: var(--conduction-tabs-tab-selected-background-color);
|
|
@@ -140,3 +181,43 @@
|
|
|
140
181
|
border-color: var(--conduction-tabs-tab-panel-border-color);
|
|
141
182
|
border-top: var(--conduction-tabs-tab-panel-border-top);
|
|
142
183
|
}
|
|
184
|
+
|
|
185
|
+
.scrollButton {
|
|
186
|
+
background-color: var(--conduction-tabs-scrollButton-background-color);
|
|
187
|
+
color: var(--conduction-tabs-scrollButton-color);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.container {
|
|
191
|
+
position: relative;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.wrapper {
|
|
195
|
+
overflow-x: scroll;
|
|
196
|
+
display: flex;
|
|
197
|
+
}
|
|
198
|
+
.wrapperTouchscreen {
|
|
199
|
+
overflow-x: scroll;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.scrollRightButton,
|
|
203
|
+
.scrollLeftButton {
|
|
204
|
+
position: absolute;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.scrollRightButton {
|
|
208
|
+
right: 0;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.scrollLeftButton {
|
|
212
|
+
left: 0;
|
|
213
|
+
z-index: 1;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* Hide scrollbar */
|
|
217
|
+
.wrapper::-webkit-scrollbar {
|
|
218
|
+
display: none;
|
|
219
|
+
}
|
|
220
|
+
.wrapper {
|
|
221
|
+
-ms-overflow-style: none;
|
|
222
|
+
scrollbar-width: none;
|
|
223
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
|
2
2
|
import * as styles from "./Tabs.module.css";
|
|
3
3
|
import {
|
|
4
4
|
Tabs as RTabs,
|
|
@@ -11,6 +11,9 @@ import {
|
|
|
11
11
|
TabListProps,
|
|
12
12
|
TabsProps,
|
|
13
13
|
} from "react-tabs";
|
|
14
|
+
import clsx from "clsx";
|
|
15
|
+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
16
|
+
import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
|
|
14
17
|
|
|
15
18
|
// Tabs
|
|
16
19
|
export const Tabs: ReactTabsFunctionComponent<TabsProps> = ({ children, ...otherProps }) => (
|
|
@@ -22,11 +25,69 @@ export const Tabs: ReactTabsFunctionComponent<TabsProps> = ({ children, ...other
|
|
|
22
25
|
Tabs.tabsRole = "Tabs";
|
|
23
26
|
|
|
24
27
|
// TabList
|
|
25
|
-
export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ...otherProps }) =>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
);
|
|
28
|
+
export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ...otherProps }) => {
|
|
29
|
+
const [canScrollRight, setCanScrollRight] = useState(false);
|
|
30
|
+
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
|
31
|
+
|
|
32
|
+
const wrapperRef = React.useRef<HTMLDivElement | null>(null);
|
|
33
|
+
|
|
34
|
+
const handleScroll = () => {
|
|
35
|
+
if (wrapperRef.current) {
|
|
36
|
+
setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
|
|
37
|
+
setCanScrollRight(
|
|
38
|
+
wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth,
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
const handleScrollRight = () => {
|
|
44
|
+
if (wrapperRef.current) wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
const handleScrollLeft = () => {
|
|
48
|
+
if (wrapperRef.current) wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
if (wrapperRef.current) {
|
|
53
|
+
setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
|
|
54
|
+
}
|
|
55
|
+
}, []);
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<div className={styles.container}>
|
|
59
|
+
<div onScroll={handleScroll} ref={wrapperRef} className={clsx(styles.wrapper)}>
|
|
60
|
+
<div className={styles.tabListContainer}>
|
|
61
|
+
<RTabList className={styles.tabList} {...otherProps}>
|
|
62
|
+
{canScrollLeft && (
|
|
63
|
+
<RTab
|
|
64
|
+
onClick={handleScrollLeft}
|
|
65
|
+
className={clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton)}
|
|
66
|
+
>
|
|
67
|
+
<span className={styles.scrollButton}>
|
|
68
|
+
<FontAwesomeIcon icon={faChevronLeft} />
|
|
69
|
+
</span>
|
|
70
|
+
</RTab>
|
|
71
|
+
)}
|
|
72
|
+
|
|
73
|
+
{children}
|
|
74
|
+
|
|
75
|
+
{canScrollRight && (
|
|
76
|
+
<RTab
|
|
77
|
+
onClick={handleScrollRight}
|
|
78
|
+
className={clsx(canScrollRight && styles.scrollRightButton, styles.tabButton)}
|
|
79
|
+
>
|
|
80
|
+
<span className={styles.scrollButton}>
|
|
81
|
+
<FontAwesomeIcon icon={faChevronRight} />
|
|
82
|
+
</span>
|
|
83
|
+
</RTab>
|
|
84
|
+
)}
|
|
85
|
+
</RTabList>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
);
|
|
90
|
+
};
|
|
30
91
|
|
|
31
92
|
TabList.tabsRole = "TabList";
|
|
32
93
|
|
package/src/index.ts
CHANGED
|
@@ -30,6 +30,7 @@ import { CodeBlock } from "./components/codeBlock/CodeBlock";
|
|
|
30
30
|
import { ToolTip } from "./components/toolTip/ToolTip";
|
|
31
31
|
import { Pagination } from "./components/Pagination/Pagination";
|
|
32
32
|
import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
|
|
33
|
+
import { TableWrapper } from "./components/tableWrapper/TableWrapper";
|
|
33
34
|
|
|
34
35
|
export {
|
|
35
36
|
DownloadCard,
|
|
@@ -67,4 +68,5 @@ export {
|
|
|
67
68
|
TabList,
|
|
68
69
|
Tab,
|
|
69
70
|
TabPanel,
|
|
71
|
+
TableWrapper
|
|
70
72
|
};
|