mosuk-ui 1.0.5 → 1.0.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/components/actions/toggle/component/button/component.js +1 -1
- package/components/forms/fieldset/component/components/hint/component.js +1 -1
- package/components/layouts/tabbar/component/component.module.css +0 -91
- package/components/layouts/tabbar/component/index.d.ts +1 -25
- package/components/layouts/tabbar/component/index.js +1 -11
- package/components/layouts/tabbar/skeleton/component.module.css +0 -72
- package/components/layouts/tabbar/skeleton/index.d.ts +1 -14
- package/components/layouts/tabbar/skeleton/index.js +1 -7
- package/package.json +1 -1
- package/styles/utilities/actions/icon/[size]/size.css +1 -1
- package/components/layouts/tabbar/component/tabs/component.d.ts +0 -3
- package/components/layouts/tabbar/component/tabs/component.interface.d.ts +0 -5
- package/components/layouts/tabbar/component/tabs/component.interface.js +0 -1
- package/components/layouts/tabbar/component/tabs/component.js +0 -65
- package/components/layouts/tabbar/component/tabs/context/component.d.ts +0 -2
- package/components/layouts/tabbar/component/tabs/context/component.interface.d.ts +0 -6
- package/components/layouts/tabbar/component/tabs/context/component.interface.js +0 -1
- package/components/layouts/tabbar/component/tabs/context/component.js +0 -2
- package/components/layouts/tabbar/component/tabs/indicator/component.d.ts +0 -3
- package/components/layouts/tabbar/component/tabs/indicator/component.interface.d.ts +0 -5
- package/components/layouts/tabbar/component/tabs/indicator/component.interface.js +0 -1
- package/components/layouts/tabbar/component/tabs/indicator/component.js +0 -93
- package/components/layouts/tabbar/component/tabs/tab/component.d.ts +0 -3
- package/components/layouts/tabbar/component/tabs/tab/component.interface.d.ts +0 -6
- package/components/layouts/tabbar/component/tabs/tab/component.interface.js +0 -1
- package/components/layouts/tabbar/component/tabs/tab/component.js +0 -50
- package/components/layouts/tabbar/skeleton/tabs/component.d.ts +0 -3
- package/components/layouts/tabbar/skeleton/tabs/component.interface.d.ts +0 -5
- package/components/layouts/tabbar/skeleton/tabs/component.interface.js +0 -1
- package/components/layouts/tabbar/skeleton/tabs/component.js +0 -30
- package/components/layouts/tabbar/skeleton/tabs/tab/component.d.ts +0 -3
- package/components/layouts/tabbar/skeleton/tabs/tab/component.interface.d.ts +0 -6
- package/components/layouts/tabbar/skeleton/tabs/tab/component.interface.js +0 -1
- package/components/layouts/tabbar/skeleton/tabs/tab/component.js +0 -35
|
@@ -46,7 +46,7 @@ export function ToggleButton(_a) {
|
|
|
46
46
|
(_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
|
|
47
47
|
}, [onChange, value, rest === null || rest === void 0 ? void 0 : rest.onClick]);
|
|
48
48
|
var active = value === activeValue;
|
|
49
|
-
return (React.createElement(Button, __assign({}, rest, { as: Component, ref: setRef, type: (rest === null || rest === void 0 ? void 0 : rest.type) || 'button', onClick: handleClick, className: classNames('mosuk-toggle-button', styles.button, (_b = {},
|
|
49
|
+
return (React.createElement(Button, __assign({}, rest, { as: Component, ref: setRef, type: (rest === null || rest === void 0 ? void 0 : rest.type) || 'button', onClick: handleClick, "data-value": value, className: classNames('mosuk-toggle-button', styles.button, (_b = {},
|
|
50
50
|
_b[styles.active] = active,
|
|
51
51
|
_b), rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
|
|
52
52
|
}
|
|
@@ -27,7 +27,7 @@ import styles from '../../component.module.css';
|
|
|
27
27
|
import { FieldsetHintType } from './component.enums';
|
|
28
28
|
export function FieldsetHint(_a) {
|
|
29
29
|
var as = _a.as, type = _a.type, rest = __rest(_a, ["as", "type"]);
|
|
30
|
-
var Component =
|
|
30
|
+
var Component = Hint;
|
|
31
31
|
var hintType = type !== null && type !== void 0 ? type : FieldsetHintType.INFO;
|
|
32
32
|
return (React.createElement(Component, __assign({}, rest, { type: hintType, className: classNames('mosuk-fieldset-hint', styles.hint, styles[hintType], rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
|
|
33
33
|
}
|
|
@@ -24,97 +24,6 @@
|
|
|
24
24
|
translate: 0 calc(0% + var(--progress, 0%) * 0.1);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.tabs {
|
|
28
|
-
position: relative;
|
|
29
|
-
|
|
30
|
-
width: 100%;
|
|
31
|
-
height: 100%;
|
|
32
|
-
|
|
33
|
-
display: flex;
|
|
34
|
-
align-items: center;
|
|
35
|
-
justify-content: space-between;
|
|
36
|
-
gap: calc(var(--spacing, .25rem) * 1);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.tab {
|
|
40
|
-
overflow: hidden;
|
|
41
|
-
position: relative;
|
|
42
|
-
z-index: 1;
|
|
43
|
-
|
|
44
|
-
width: calc(var(--spacing, .25rem) * 20);
|
|
45
|
-
height: 100%;
|
|
46
|
-
|
|
47
|
-
display: flex;
|
|
48
|
-
flex-direction: column;
|
|
49
|
-
align-items: center;
|
|
50
|
-
justify-content: center;
|
|
51
|
-
gap: calc(var(--spacing, .25rem) * 1);
|
|
52
|
-
|
|
53
|
-
font-size: var(--text-2xs, 0.625rem);
|
|
54
|
-
text-overflow: ellipsis;
|
|
55
|
-
white-space: nowrap;
|
|
56
|
-
|
|
57
|
-
padding: calc(var(--spacing, .25rem) * 4);
|
|
58
|
-
border-radius: calc(infinity * 1px);
|
|
59
|
-
|
|
60
|
-
cursor: pointer;
|
|
61
|
-
transition: all 200ms ease-in-out;
|
|
62
|
-
|
|
63
|
-
svg {
|
|
64
|
-
width: calc(var(--spacing, .25rem) * 5);
|
|
65
|
-
height: calc(var(--spacing, .25rem) * 5);
|
|
66
|
-
min-width: calc(var(--spacing, .25rem) * 5);
|
|
67
|
-
min-height: calc(var(--spacing, .25rem) * 5);
|
|
68
|
-
|
|
69
|
-
color: var(--color-gray-500, oklch(0.551 0.027 264.364));
|
|
70
|
-
|
|
71
|
-
transition: all 200ms ease-in-out;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
&:hover,
|
|
75
|
-
&.active {
|
|
76
|
-
color: var(--color-primary-500, #0074e7);
|
|
77
|
-
|
|
78
|
-
svg {
|
|
79
|
-
color: var(--color-primary-500, #0074e7);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
&:not(:hover) {
|
|
84
|
-
transition: all 600ms ease-in-out;
|
|
85
|
-
|
|
86
|
-
svg {
|
|
87
|
-
transition: all 600ms ease-in-out;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
&:disabled {
|
|
92
|
-
opacity: 0.5;
|
|
93
|
-
cursor: not-allowed;
|
|
94
|
-
pointer-events: none;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.indicator {
|
|
99
|
-
position: absolute;
|
|
100
|
-
top: 0;
|
|
101
|
-
left: 0;
|
|
102
|
-
z-index: 0;
|
|
103
|
-
|
|
104
|
-
width: var(--indicator-width, calc(var(--spacing, .25rem) * 20));
|
|
105
|
-
height: 100%;
|
|
106
|
-
|
|
107
|
-
background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
|
|
108
|
-
border-radius: calc(infinity * 1px);
|
|
109
|
-
|
|
110
|
-
transform: translateX(var(--indicator-offset, 0px));
|
|
111
|
-
|
|
112
|
-
transition-property: transform, width;
|
|
113
|
-
transition-duration: 400ms;
|
|
114
|
-
/* +200 ms default delay */
|
|
115
|
-
transition-timing-function: ease-out;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
27
|
@media (min-width: 1024px) {
|
|
119
28
|
.tabbar {
|
|
120
29
|
display: none;
|
|
@@ -1,30 +1,6 @@
|
|
|
1
1
|
import { Tabbar as BaseTabbar } from './component';
|
|
2
2
|
import type { TabbarProps } from './component.interface';
|
|
3
|
-
|
|
4
|
-
import { TabbarTabsContextProps } from './tabs/context/component.interface';
|
|
5
|
-
import { TabbarTabsIndicator } from './tabs/indicator/component';
|
|
6
|
-
import { TabbarTabsIndicatorProps } from './tabs/indicator/component.interface';
|
|
7
|
-
import { TabbarTabsTab } from './tabs/tab/component';
|
|
8
|
-
import { TabbarTabsTabProps } from './tabs/tab/component.interface';
|
|
9
|
-
export declare const Tabbar: typeof BaseTabbar & {
|
|
10
|
-
Tabs: typeof TabbarTabs & {
|
|
11
|
-
Context: import("react").Context<TabbarTabsContextProps | null>;
|
|
12
|
-
Tab: typeof TabbarTabsTab;
|
|
13
|
-
Indicator: typeof TabbarTabsIndicator;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
3
|
+
export declare const Tabbar: typeof BaseTabbar;
|
|
16
4
|
export declare namespace Tabbar {
|
|
17
5
|
type Props = TabbarProps;
|
|
18
|
-
namespace Tabs {
|
|
19
|
-
type Props = TabbarTabsTabProps;
|
|
20
|
-
namespace Context {
|
|
21
|
-
type Props = TabbarTabsContextProps;
|
|
22
|
-
}
|
|
23
|
-
namespace Tab {
|
|
24
|
-
type Props = TabbarTabsTabProps;
|
|
25
|
-
}
|
|
26
|
-
namespace Indicator {
|
|
27
|
-
type Props = TabbarTabsIndicatorProps;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
6
|
}
|
|
@@ -1,12 +1,2 @@
|
|
|
1
1
|
import { Tabbar as BaseTabbar } from './component';
|
|
2
|
-
|
|
3
|
-
import { TabbarTabsContext } from './tabs/context/component';
|
|
4
|
-
import { TabbarTabsIndicator } from './tabs/indicator/component';
|
|
5
|
-
import { TabbarTabsTab } from './tabs/tab/component';
|
|
6
|
-
export var Tabbar = Object.assign(BaseTabbar, {
|
|
7
|
-
Tabs: Object.assign(TabbarTabs, {
|
|
8
|
-
Context: TabbarTabsContext,
|
|
9
|
-
Tab: TabbarTabsTab,
|
|
10
|
-
Indicator: TabbarTabsIndicator,
|
|
11
|
-
}),
|
|
12
|
-
});
|
|
2
|
+
export var Tabbar = Object.assign(BaseTabbar, {});
|
|
@@ -24,78 +24,6 @@
|
|
|
24
24
|
translate: 0 calc(0% + var(--progress, 0%) * 0.125);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.tabs {
|
|
28
|
-
position: relative;
|
|
29
|
-
|
|
30
|
-
width: 100%;
|
|
31
|
-
height: 100%;
|
|
32
|
-
|
|
33
|
-
display: flex;
|
|
34
|
-
align-items: center;
|
|
35
|
-
justify-content: space-between;
|
|
36
|
-
gap: calc(var(--spacing, .25rem) * 1);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.tab {
|
|
40
|
-
overflow: hidden;
|
|
41
|
-
position: relative;
|
|
42
|
-
z-index: 1;
|
|
43
|
-
|
|
44
|
-
width: calc(var(--spacing, .25rem) * 20);
|
|
45
|
-
height: 100%;
|
|
46
|
-
|
|
47
|
-
display: flex;
|
|
48
|
-
flex-direction: column;
|
|
49
|
-
align-items: center;
|
|
50
|
-
justify-content: center;
|
|
51
|
-
gap: calc(var(--spacing, .25rem) * 1);
|
|
52
|
-
|
|
53
|
-
font-size: var(--text-2xs, 0.625rem);
|
|
54
|
-
text-overflow: ellipsis;
|
|
55
|
-
white-space: nowrap;
|
|
56
|
-
|
|
57
|
-
padding: calc(var(--spacing, .25rem) * 4);
|
|
58
|
-
border-radius: calc(infinity * 1px);
|
|
59
|
-
|
|
60
|
-
cursor: pointer;
|
|
61
|
-
transition: all 200ms ease-in-out;
|
|
62
|
-
|
|
63
|
-
svg {
|
|
64
|
-
width: calc(var(--spacing, .25rem) * 5);
|
|
65
|
-
height: calc(var(--spacing, .25rem) * 5);
|
|
66
|
-
min-width: calc(var(--spacing, .25rem) * 5);
|
|
67
|
-
min-height: calc(var(--spacing, .25rem) * 5);
|
|
68
|
-
|
|
69
|
-
color: var(--color-gray-500, oklch(0.551 0.027 264.364));
|
|
70
|
-
|
|
71
|
-
transition: all 200ms ease-in-out;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
&:hover,
|
|
75
|
-
&.active {
|
|
76
|
-
background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
|
|
77
|
-
color: var(--color-primary-500, #0074e7);
|
|
78
|
-
|
|
79
|
-
svg {
|
|
80
|
-
color: var(--color-primary-500, #0074e7);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
&:not(:hover) {
|
|
85
|
-
transition: all 600ms ease-in-out;
|
|
86
|
-
|
|
87
|
-
svg {
|
|
88
|
-
transition: all 600ms ease-in-out;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
&:disabled {
|
|
93
|
-
opacity: 0.5;
|
|
94
|
-
cursor: not-allowed;
|
|
95
|
-
pointer-events: none;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
27
|
@media (min-width: 1024px) {
|
|
100
28
|
.tabbar {
|
|
101
29
|
display: none;
|
|
@@ -1,19 +1,6 @@
|
|
|
1
1
|
import { TabbarSkeleton as BaseTabbarSkeleton } from './component';
|
|
2
2
|
import type { TabbarSkeletonProps } from './component.interface';
|
|
3
|
-
|
|
4
|
-
import { TabbarTabsTabSkeleton } from './tabs/tab/component';
|
|
5
|
-
import { TabbarTabsTabSkeletonProps } from './tabs/tab/component.interface';
|
|
6
|
-
export declare const TabbarSkeleton: typeof BaseTabbarSkeleton & {
|
|
7
|
-
Tabs: typeof TabbarTabsSkeleton & {
|
|
8
|
-
Tab: typeof TabbarTabsTabSkeleton;
|
|
9
|
-
};
|
|
10
|
-
};
|
|
3
|
+
export declare const TabbarSkeleton: typeof BaseTabbarSkeleton;
|
|
11
4
|
export declare namespace TabbarSkeleton {
|
|
12
5
|
type Props = TabbarSkeletonProps;
|
|
13
|
-
namespace Tabs {
|
|
14
|
-
type Props = TabbarTabsTabSkeletonProps;
|
|
15
|
-
namespace Tab {
|
|
16
|
-
type Props = TabbarTabsTabSkeletonProps;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
6
|
}
|
|
@@ -1,8 +1,2 @@
|
|
|
1
1
|
import { TabbarSkeleton as BaseTabbarSkeleton } from './component';
|
|
2
|
-
|
|
3
|
-
import { TabbarTabsTabSkeleton } from './tabs/tab/component';
|
|
4
|
-
export var TabbarSkeleton = Object.assign(BaseTabbarSkeleton, {
|
|
5
|
-
Tabs: Object.assign(TabbarTabsSkeleton, {
|
|
6
|
-
Tab: TabbarTabsTabSkeleton,
|
|
7
|
-
}),
|
|
8
|
-
});
|
|
2
|
+
export var TabbarSkeleton = Object.assign(BaseTabbarSkeleton, {});
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
24
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
25
|
-
if (ar || !(i in from)) {
|
|
26
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
27
|
-
ar[i] = from[i];
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
31
|
-
};
|
|
32
|
-
import classNames from 'classnames';
|
|
33
|
-
import React, { Children, isValidElement, useCallback, useMemo, useState } from 'react';
|
|
34
|
-
import styles from '../component.module.css';
|
|
35
|
-
import { TabbarTabsContext } from './context/component';
|
|
36
|
-
import { TabbarTabsTab } from './tab/component';
|
|
37
|
-
export function TabbarTabs(_a) {
|
|
38
|
-
var rest = __rest(_a, []);
|
|
39
|
-
var Component = ((rest === null || rest === void 0 ? void 0 : rest.as) || 'nav');
|
|
40
|
-
var _b = useState([]), tabs = _b[0], setTabs = _b[1];
|
|
41
|
-
var registerTab = useCallback(function () {
|
|
42
|
-
var newIndex = tabs.length;
|
|
43
|
-
setTabs(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newIndex], false); });
|
|
44
|
-
return newIndex;
|
|
45
|
-
}, [tabs.length]);
|
|
46
|
-
var unregisterTab = useCallback(function (index) {
|
|
47
|
-
setTabs(function (prev) { return prev.filter(function (i) { return i !== index; }); });
|
|
48
|
-
}, []);
|
|
49
|
-
var tabCount = Children.toArray(rest === null || rest === void 0 ? void 0 : rest.children).filter(function (child) { return isValidElement(child) && child.type === TabbarTabsTab; }).length;
|
|
50
|
-
var activeIndex = Children.toArray(rest === null || rest === void 0 ? void 0 : rest.children).findIndex(function (child) {
|
|
51
|
-
if (isValidElement(child)) {
|
|
52
|
-
var element = child;
|
|
53
|
-
return element.props.isActive;
|
|
54
|
-
}
|
|
55
|
-
return false;
|
|
56
|
-
});
|
|
57
|
-
var contextValue = useMemo(function () { return ({
|
|
58
|
-
registerTab: registerTab,
|
|
59
|
-
unregisterTab: unregisterTab,
|
|
60
|
-
activeIndex: activeIndex,
|
|
61
|
-
tabCount: tabCount
|
|
62
|
-
}); }, [registerTab, unregisterTab, activeIndex, tabCount]);
|
|
63
|
-
return (React.createElement(TabbarTabsContext.Provider, { value: contextValue },
|
|
64
|
-
React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-tabbar-tabs', styles.tabs, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children)));
|
|
65
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import classNames from 'classnames';
|
|
24
|
-
import React, { useContext, useEffect, useRef } from 'react';
|
|
25
|
-
import styles from '../../component.module.css';
|
|
26
|
-
import { TabbarTabsContext } from '../context/component';
|
|
27
|
-
export function TabbarTabsIndicator(_a) {
|
|
28
|
-
var _b, _c;
|
|
29
|
-
var as = _a.as, ref = _a.ref, rest = __rest(_a, ["as", "ref"]);
|
|
30
|
-
var Component = ((rest === null || rest === void 0 ? void 0 : rest.as) || 'span');
|
|
31
|
-
var context = useContext(TabbarTabsContext);
|
|
32
|
-
var indicatorRef = useRef(null);
|
|
33
|
-
if (!context) {
|
|
34
|
-
throw new Error('TabbarTabsTab must be used within a TabbarTabs');
|
|
35
|
-
}
|
|
36
|
-
var activeIndex = (_b = context === null || context === void 0 ? void 0 : context.activeIndex) !== null && _b !== void 0 ? _b : -1;
|
|
37
|
-
var tabCount = (_c = context === null || context === void 0 ? void 0 : context.tabCount) !== null && _c !== void 0 ? _c : 0;
|
|
38
|
-
useEffect(function () {
|
|
39
|
-
if (!indicatorRef.current)
|
|
40
|
-
return;
|
|
41
|
-
if (tabCount <= 0 || activeIndex < 0)
|
|
42
|
-
return;
|
|
43
|
-
var rafRead = null;
|
|
44
|
-
var rafWrite = null;
|
|
45
|
-
var scheduleUpdate = function () {
|
|
46
|
-
if (rafRead !== null || rafWrite !== null)
|
|
47
|
-
return;
|
|
48
|
-
rafRead = requestAnimationFrame(function () {
|
|
49
|
-
rafRead = null;
|
|
50
|
-
var el = indicatorRef.current;
|
|
51
|
-
if (!el)
|
|
52
|
-
return;
|
|
53
|
-
var tabsContainer = el.parentElement;
|
|
54
|
-
if (!tabsContainer)
|
|
55
|
-
return;
|
|
56
|
-
var tabElements = Array.from(tabsContainer.children).filter(function (child) { return child !== el && child.classList.contains('mosuk-tabbar-tabs-tab'); });
|
|
57
|
-
if (tabElements.length === 0 || activeIndex >= tabElements.length)
|
|
58
|
-
return;
|
|
59
|
-
var activeTab = tabElements[activeIndex];
|
|
60
|
-
if (!activeTab)
|
|
61
|
-
return;
|
|
62
|
-
var containerRect = tabsContainer.getBoundingClientRect();
|
|
63
|
-
var activeTabRect = activeTab.getBoundingClientRect();
|
|
64
|
-
var nextOffsetLeft = activeTabRect.left - containerRect.left;
|
|
65
|
-
var nextWidth = activeTabRect.width;
|
|
66
|
-
rafWrite = requestAnimationFrame(function () {
|
|
67
|
-
rafWrite = null;
|
|
68
|
-
var node = indicatorRef.current;
|
|
69
|
-
if (!node)
|
|
70
|
-
return;
|
|
71
|
-
node.style.setProperty('--indicator-offset', "".concat(nextOffsetLeft, "px"));
|
|
72
|
-
node.style.setProperty('--indicator-width', "".concat(nextWidth, "px"));
|
|
73
|
-
});
|
|
74
|
-
});
|
|
75
|
-
};
|
|
76
|
-
// initial position
|
|
77
|
-
scheduleUpdate();
|
|
78
|
-
// update on resize
|
|
79
|
-
var handleResize = function () { return scheduleUpdate(); };
|
|
80
|
-
window.addEventListener('resize', handleResize);
|
|
81
|
-
return function () {
|
|
82
|
-
window.removeEventListener('resize', handleResize);
|
|
83
|
-
if (rafRead)
|
|
84
|
-
cancelAnimationFrame(rafRead);
|
|
85
|
-
if (rafWrite)
|
|
86
|
-
cancelAnimationFrame(rafWrite);
|
|
87
|
-
};
|
|
88
|
-
}, [activeIndex, tabCount]);
|
|
89
|
-
if (tabCount <= 0 || activeIndex < 0) {
|
|
90
|
-
return null;
|
|
91
|
-
}
|
|
92
|
-
return (React.createElement(Component, __assign({}, rest, { ref: indicatorRef, className: classNames('mosuk-tabbar-tabs-indicator', styles.indicator, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
|
|
93
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import classNames from 'classnames';
|
|
24
|
-
import React, { useContext, useEffect, useRef } from 'react';
|
|
25
|
-
import styles from '../../component.module.css';
|
|
26
|
-
import { TabbarTabsContext } from '../context/component';
|
|
27
|
-
export function TabbarTabsTab(_a) {
|
|
28
|
-
var _b;
|
|
29
|
-
var as = _a.as, isActive = _a.isActive, rest = __rest(_a, ["as", "isActive"]);
|
|
30
|
-
var Component = (as || 'a');
|
|
31
|
-
var context = useContext(TabbarTabsContext);
|
|
32
|
-
var tabIndexRef = useRef(null);
|
|
33
|
-
if (!context) {
|
|
34
|
-
throw new Error('TabbarTabsTab must be used within a TabbarTabs');
|
|
35
|
-
}
|
|
36
|
-
useEffect(function () {
|
|
37
|
-
var index = context.registerTab();
|
|
38
|
-
tabIndexRef.current = index;
|
|
39
|
-
return function () {
|
|
40
|
-
if (tabIndexRef.current !== null) {
|
|
41
|
-
context.unregisterTab(tabIndexRef.current);
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
}, [context]);
|
|
45
|
-
var isLinkActive = isActive;
|
|
46
|
-
return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-tabbar-tabs-tab', (_b = {},
|
|
47
|
-
_b[styles.tab] = true,
|
|
48
|
-
_b[styles.active] = isLinkActive,
|
|
49
|
-
_b), rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
|
|
50
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import classNames from 'classnames';
|
|
24
|
-
import React from 'react';
|
|
25
|
-
import styles from '../component.module.css';
|
|
26
|
-
export function TabbarTabsSkeleton(_a) {
|
|
27
|
-
var rest = __rest(_a, []);
|
|
28
|
-
var Component = ((rest === null || rest === void 0 ? void 0 : rest.as) || 'nav');
|
|
29
|
-
return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-tabbar-tabs-skeleton', styles.tabs, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
|
|
30
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import classNames from 'classnames';
|
|
24
|
-
import React from 'react';
|
|
25
|
-
import styles from '../../component.module.css';
|
|
26
|
-
export function TabbarTabsTabSkeleton(_a) {
|
|
27
|
-
var _b;
|
|
28
|
-
var as = _a.as, isActive = _a.isActive, rest = __rest(_a, ["as", "isActive"]);
|
|
29
|
-
var Component = (as || 'a');
|
|
30
|
-
var isLinkActive = isActive;
|
|
31
|
-
return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-tabbar-tabs-tab', (_b = {},
|
|
32
|
-
_b[styles.tab] = true,
|
|
33
|
-
_b[styles.active] = isLinkActive,
|
|
34
|
-
_b), rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
|
|
35
|
-
}
|