@situaction/traq-ui-ste 1.2.7 → 1.2.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.
|
@@ -3,21 +3,22 @@ import { FC, ReactNode } from 'react';
|
|
|
3
3
|
export interface TabsProps {
|
|
4
4
|
/** select the type of data text or icon that we put in tabs */
|
|
5
5
|
type: 'text' | 'icon' | 'button';
|
|
6
|
-
/** Array of strings representing the labels of the tabs */
|
|
6
|
+
/** Array of strings or nodes representing the labels of the tabs */
|
|
7
7
|
listItems: (string | ReactNode)[];
|
|
8
|
-
/**
|
|
8
|
+
/** Active tab (controlled) */
|
|
9
|
+
activeTab?: number;
|
|
10
|
+
/** Index of the tab that should be active by default (uncontrolled) */
|
|
9
11
|
defaultActiveTab?: number;
|
|
10
12
|
/** Position Tabs */
|
|
11
13
|
position?: 'center' | 'right' | 'left';
|
|
12
|
-
/** Callback
|
|
13
|
-
onTabSelect: (selectedItem: string | ReactNode) => void;
|
|
14
|
-
/** Full width*/
|
|
14
|
+
/** Callback on selection (label + index) */
|
|
15
|
+
onTabSelect: (selectedItem: string | ReactNode, index?: number) => void;
|
|
16
|
+
/** Full width */
|
|
15
17
|
fullWidth?: boolean;
|
|
16
|
-
/** tabs
|
|
18
|
+
/** Disabled tabs indices */
|
|
17
19
|
disabledTabs?: number[];
|
|
18
20
|
}
|
|
19
21
|
/**
|
|
20
|
-
* Tabs
|
|
21
|
-
* It includes a dynamic underline to show the active tab.
|
|
22
|
+
* Tabs with dynamic underline. Works controlled (activeTab) or uncontrolled (defaultActiveTab).
|
|
22
23
|
*/
|
|
23
24
|
export declare const Tabs: FC<TabsProps>;
|
|
@@ -1,96 +1,136 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { IconButton as
|
|
5
|
-
import '../../styles/Tabs.css';const
|
|
6
|
-
"tab-container": "_tab-
|
|
7
|
-
"tab-container-button": "_tab-container-
|
|
8
|
-
"tab-container-icon": "_tab-container-
|
|
9
|
-
"tab-container-text": "_tab-container-
|
|
10
|
-
"tab-items": "_tab-
|
|
11
|
-
"tab-items-button": "_tab-items-
|
|
12
|
-
"tab-
|
|
13
|
-
"
|
|
14
|
-
"selected-
|
|
15
|
-
|
|
16
|
-
"
|
|
17
|
-
|
|
18
|
-
"flexHorizontal-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
1
|
+
import { jsxs as p, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { useState as R, useRef as C, useEffect as u, useLayoutEffect as y } from "react";
|
|
3
|
+
import { Button as B } from "../button/Button.js";
|
|
4
|
+
import { IconButton as E } from "../icon-button/IconButton.js";
|
|
5
|
+
import '../../styles/Tabs.css';const F = "_underline_1rcir_81", n = {
|
|
6
|
+
"tab-container": "_tab-container_1rcir_30",
|
|
7
|
+
"tab-container-button": "_tab-container-button_1rcir_34",
|
|
8
|
+
"tab-container-icon": "_tab-container-icon_1rcir_39",
|
|
9
|
+
"tab-container-text": "_tab-container-text_1rcir_39",
|
|
10
|
+
"tab-items": "_tab-items_1rcir_42",
|
|
11
|
+
"tab-items-button": "_tab-items-button_1rcir_46",
|
|
12
|
+
"tab-type-button": "_tab-type-button_1rcir_50",
|
|
13
|
+
"tab-full-width": "_tab-full-width_1rcir_56",
|
|
14
|
+
"selected-button": "_selected-button_1rcir_62",
|
|
15
|
+
"noSelect-button": "_noSelect-button_1rcir_69",
|
|
16
|
+
"selected-text": "_selected-text_1rcir_73",
|
|
17
|
+
underline: F,
|
|
18
|
+
"flexHorizontal-center": "_flexHorizontal-center_1rcir_89",
|
|
19
|
+
"flexHorizontal-left": "_flexHorizontal-left_1rcir_95",
|
|
20
|
+
"flexHorizontal-right": "_flexHorizontal-right_1rcir_101"
|
|
21
|
+
}, N = (o, r) => {
|
|
22
|
+
if (!Number.isFinite(o)) return 0;
|
|
23
|
+
const d = Math.max(0, r);
|
|
24
|
+
return Math.min(Math.max(o, 0), d);
|
|
25
|
+
}, D = ({
|
|
26
|
+
listItems: o,
|
|
27
|
+
type: r,
|
|
28
|
+
onTabSelect: d,
|
|
29
|
+
activeTab: _,
|
|
30
|
+
defaultActiveTab: f = 0,
|
|
31
|
+
position: x = "left",
|
|
32
|
+
fullWidth: S = !1,
|
|
33
|
+
disabledTabs: g = []
|
|
28
34
|
}) => {
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
const l = _ !== void 0, [$, v] = R(f), m = N(
|
|
36
|
+
l ? _ : $,
|
|
37
|
+
(o.length || 1) - 1
|
|
38
|
+
), [H, A] = R({}), s = C(null), z = C([]), h = (t) => {
|
|
39
|
+
g.includes(t) || (l || v(t), d(o[t], t));
|
|
40
|
+
}, w = (t) => {
|
|
41
|
+
if (!s.current || !t || r === "button") return;
|
|
42
|
+
const e = s.current.getBoundingClientRect();
|
|
43
|
+
if (e.width === 0) {
|
|
44
|
+
requestAnimationFrame(() => w(t));
|
|
45
|
+
return;
|
|
38
46
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
return B(() => {
|
|
44
|
-
const t = _.current[s];
|
|
45
|
-
t && requestAnimationFrame(() => {
|
|
46
|
-
H(t);
|
|
47
|
+
const c = t.getBoundingClientRect();
|
|
48
|
+
A({
|
|
49
|
+
left: `${c.left - e.left}px`,
|
|
50
|
+
width: `${c.width}px`
|
|
47
51
|
});
|
|
48
|
-
},
|
|
52
|
+
}, a = () => {
|
|
53
|
+
const t = z.current[m] ?? null;
|
|
54
|
+
requestAnimationFrame(
|
|
55
|
+
() => requestAnimationFrame(() => w(t))
|
|
56
|
+
);
|
|
57
|
+
};
|
|
58
|
+
u(() => {
|
|
59
|
+
l && a();
|
|
60
|
+
}, [_]), y(() => {
|
|
61
|
+
a();
|
|
62
|
+
}, [m, x, o.length]), u(() => {
|
|
63
|
+
l || v(N(f, (o.length || 1) - 1));
|
|
64
|
+
}, [f, o.length, l]), u(() => {
|
|
65
|
+
var t, e;
|
|
66
|
+
(e = (t = document.fonts) == null ? void 0 : t.ready) == null || e.then(() => a());
|
|
67
|
+
}, []), u(() => {
|
|
68
|
+
const t = () => a();
|
|
69
|
+
return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
|
|
70
|
+
}, []), u(() => {
|
|
71
|
+
if (!s.current) return;
|
|
72
|
+
const t = new ResizeObserver(() => a());
|
|
73
|
+
return t.observe(s.current), () => t.disconnect();
|
|
74
|
+
}, []);
|
|
75
|
+
const j = [
|
|
76
|
+
n[`flexHorizontal-${x}`],
|
|
77
|
+
r === "button" ? n["tab-items-button"] : n["tab-items"]
|
|
78
|
+
].filter(Boolean).join(" ");
|
|
79
|
+
return /* @__PURE__ */ p(
|
|
49
80
|
"div",
|
|
50
81
|
{
|
|
51
|
-
className: `tab ${
|
|
52
|
-
ref:
|
|
82
|
+
className: `tab ${n["tab-container"]} ${n[`tab-container-${r}`]} ${S && n["tab-full-width"]}`,
|
|
83
|
+
ref: s,
|
|
53
84
|
children: [
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
const
|
|
56
|
-
return /* @__PURE__ */
|
|
85
|
+
/* @__PURE__ */ i("div", { className: j, children: o.map((t, e) => {
|
|
86
|
+
const c = g.includes(e), b = e === m;
|
|
87
|
+
return /* @__PURE__ */ i(
|
|
57
88
|
"div",
|
|
58
89
|
{
|
|
59
|
-
ref: (
|
|
60
|
-
className:
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
90
|
+
ref: (k) => z.current[e] = k,
|
|
91
|
+
className: [
|
|
92
|
+
r === "button" && b ? n["selected-button"] : n["noSelect-button"],
|
|
93
|
+
typeof t != "string" ? n["noSelect-button"] : "",
|
|
94
|
+
c ? n["tab-disabled"] : ""
|
|
95
|
+
].filter(Boolean).join(" "),
|
|
96
|
+
children: r === "icon" ? /* @__PURE__ */ i(
|
|
97
|
+
E,
|
|
66
98
|
{
|
|
67
99
|
mode: "icon",
|
|
68
100
|
size: "s",
|
|
69
|
-
selected:
|
|
70
|
-
onClick: () =>
|
|
71
|
-
disabled:
|
|
101
|
+
selected: b,
|
|
102
|
+
onClick: () => h(e),
|
|
103
|
+
disabled: c,
|
|
104
|
+
children: t
|
|
105
|
+
}
|
|
106
|
+
) : r === "button" ? /* @__PURE__ */ i(
|
|
107
|
+
"div",
|
|
108
|
+
{
|
|
109
|
+
className: n["tab-type-button"],
|
|
110
|
+
onClick: () => h(e),
|
|
72
111
|
children: t
|
|
73
112
|
}
|
|
74
|
-
) : /* @__PURE__ */
|
|
75
|
-
|
|
113
|
+
) : /* @__PURE__ */ i("div", { className: `${b ? n["selected-text"] : void 0}`, children: /* @__PURE__ */ i(
|
|
114
|
+
B,
|
|
76
115
|
{
|
|
77
116
|
size: "s",
|
|
78
117
|
label: t,
|
|
79
|
-
mode:
|
|
80
|
-
selected:
|
|
81
|
-
onClick: () =>
|
|
82
|
-
disabled:
|
|
118
|
+
mode: r === "text" ? "text" : "ghost",
|
|
119
|
+
selected: b,
|
|
120
|
+
onClick: () => h(e),
|
|
121
|
+
disabled: c,
|
|
122
|
+
fullWidth: !0
|
|
83
123
|
}
|
|
84
124
|
) })
|
|
85
125
|
},
|
|
86
|
-
|
|
126
|
+
e
|
|
87
127
|
);
|
|
88
128
|
}) }),
|
|
89
|
-
|
|
129
|
+
r !== "button" && /* @__PURE__ */ i("div", { className: n.underline, style: H })
|
|
90
130
|
]
|
|
91
131
|
}
|
|
92
132
|
);
|
|
93
133
|
};
|
|
94
134
|
export {
|
|
95
|
-
|
|
135
|
+
D as Tabs
|
|
96
136
|
};
|
package/dist/styles/Tabs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._tab-
|
|
1
|
+
._tab-container_1rcir_30{position:relative;line-height:1.25rem}._tab-container-button_1rcir_34{border-radius:.375rem;border:1px solid var(--tabs-button-border);background:var(--tabs-button-background)}._tab-container-icon_1rcir_39,._tab-container-text_1rcir_39{border-bottom:1px solid var(--tabs-line-border)}._tab-items_1rcir_42{gap:2.25rem;padding:.625rem .125rem}._tab-items-button_1rcir_46{gap:.25rem;padding:.125rem}._tab-type-button_1rcir_50{padding:.375rem .75rem;display:flex;align-items:center}._tab-full-width_1rcir_56{width:100%;display:flex;justify-content:center}._selected-button_1rcir_62{height:100%;border:1px solid var(--button-tertiary-default-border);background:var(--tabs-button-background-button);border-radius:.25rem}._noSelect-button_1rcir_69{padding:1px 0}._selected-text_1rcir_73>button{height:100%;font-weight:600!important}._selected-text_1rcir_73>button:hover{background-color:transparent!important}._underline_1rcir_81{position:absolute;bottom:0;height:2px;background-color:var(--tabs-cell-active-border);transition:all .3s ease}._flexHorizontal-center_1rcir_89{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal-left_1rcir_95{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}._flexHorizontal-right_1rcir_101{display:flex;justify-content:flex-end;align-items:center;flex-direction:row}
|