next-helios-fe 1.8.102 → 1.8.104
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/components/content-container/tab/index.d.ts +1 -0
- package/dist/components/form/other/multipleSelect.d.ts +1 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/content-container/tab/index.tsx +75 -61
- package/src/components/form/other/multipleSelect.tsx +6 -3
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React, { useState
|
|
2
|
+
import React, { useState } from "react";
|
|
3
3
|
import { Icon } from "@iconify/react";
|
|
4
4
|
import { Window, type WindowProps } from "./window";
|
|
5
5
|
|
|
@@ -14,6 +14,7 @@ interface TabProps {
|
|
|
14
14
|
border?: boolean;
|
|
15
15
|
disablePadding?: boolean;
|
|
16
16
|
};
|
|
17
|
+
cornerComponent?: React.ReactNode;
|
|
17
18
|
onChangeTab?: (tab: any) => void;
|
|
18
19
|
onCloseTab?: (tab: any) => void;
|
|
19
20
|
}
|
|
@@ -26,6 +27,7 @@ export const Tab: TabComponent = ({
|
|
|
26
27
|
children,
|
|
27
28
|
tabs,
|
|
28
29
|
options,
|
|
30
|
+
cornerComponent,
|
|
29
31
|
onChangeTab,
|
|
30
32
|
onCloseTab,
|
|
31
33
|
}) => {
|
|
@@ -44,20 +46,77 @@ export const Tab: TabComponent = ({
|
|
|
44
46
|
} ${options?.border && "rounded-md border"}`}
|
|
45
47
|
>
|
|
46
48
|
{options?.variant !== "horizontal" ? (
|
|
47
|
-
<div className="flex
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
<div className="flex justify-between">
|
|
50
|
+
<div className="flex-1 flex overflow-auto [&::-webkit-scrollbar]:hidden">
|
|
51
|
+
{tabs?.slice(0, childrenList?.length).map((tab, index) => {
|
|
52
|
+
return (
|
|
53
|
+
<div key={index} className="relative flex items-center">
|
|
54
|
+
<button
|
|
55
|
+
type="button"
|
|
56
|
+
className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 pb-1.5 pt-2 duration-300 ${
|
|
57
|
+
activeTab === index
|
|
58
|
+
? "border-primary text-primary"
|
|
59
|
+
: "border-transparent hover:border-primary-transparent hover:text-primary"
|
|
60
|
+
} ${
|
|
61
|
+
onCloseTab && childrenList.length !== 1
|
|
62
|
+
? "pe-10 ps-6"
|
|
63
|
+
: "px-6"
|
|
64
|
+
}`}
|
|
65
|
+
onClick={() => {
|
|
66
|
+
setActiveTab(index);
|
|
67
|
+
|
|
68
|
+
if (onChangeTab) {
|
|
69
|
+
onChangeTab({
|
|
70
|
+
index: index,
|
|
71
|
+
title: tabs[index].title,
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
}}
|
|
75
|
+
>
|
|
76
|
+
{tab?.icon && <Icon icon={tab?.icon} className="text-lg" />}
|
|
77
|
+
{tab.title}
|
|
78
|
+
</button>
|
|
79
|
+
{onCloseTab && childrenList.length !== 1 && (
|
|
80
|
+
<button
|
|
81
|
+
type="button"
|
|
82
|
+
className="absolute right-2 rounded-full p-0.5 hover:text-warning"
|
|
83
|
+
onClick={() => {
|
|
84
|
+
setActiveTab(
|
|
85
|
+
activeTab === index
|
|
86
|
+
? index === 0
|
|
87
|
+
? index
|
|
88
|
+
: index - 1
|
|
89
|
+
: activeTab
|
|
90
|
+
);
|
|
91
|
+
|
|
92
|
+
onCloseTab(index);
|
|
93
|
+
}}
|
|
94
|
+
>
|
|
95
|
+
<Icon icon="pajamas:close" />
|
|
96
|
+
</button>
|
|
97
|
+
)}
|
|
98
|
+
</div>
|
|
99
|
+
);
|
|
100
|
+
})}
|
|
101
|
+
</div>
|
|
102
|
+
{cornerComponent && (
|
|
103
|
+
<div className="flex items-center px-4 border-s">
|
|
104
|
+
{cornerComponent}
|
|
105
|
+
</div>
|
|
106
|
+
)}
|
|
107
|
+
</div>
|
|
108
|
+
) : (
|
|
109
|
+
<div className="flex flex-col justify-between">
|
|
110
|
+
<div className="flex-1 flex flex-row overflow-auto lg:min-w-36 lg:max-w-48 lg:flex-col [&::-webkit-scrollbar]:hidden">
|
|
111
|
+
{tabs.slice(0, childrenList.length).map((tab, index) => {
|
|
112
|
+
return (
|
|
51
113
|
<button
|
|
114
|
+
key={index}
|
|
52
115
|
type="button"
|
|
53
|
-
className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 pb-1.5 pt-2 duration-300 ${
|
|
116
|
+
className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 border-r-0 px-6 pb-1.5 pt-2 text-left duration-300 lg:border-b-0 lg:border-r-2 ${
|
|
54
117
|
activeTab === index
|
|
55
118
|
? "border-primary text-primary"
|
|
56
119
|
: "border-transparent hover:border-primary-transparent hover:text-primary"
|
|
57
|
-
} ${
|
|
58
|
-
onCloseTab && childrenList.length !== 1
|
|
59
|
-
? "pe-10 ps-6"
|
|
60
|
-
: "px-6"
|
|
61
120
|
}`}
|
|
62
121
|
onClick={() => {
|
|
63
122
|
setActiveTab(index);
|
|
@@ -73,57 +132,12 @@ export const Tab: TabComponent = ({
|
|
|
73
132
|
{tab?.icon && <Icon icon={tab?.icon} className="text-lg" />}
|
|
74
133
|
{tab.title}
|
|
75
134
|
</button>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
activeTab === index
|
|
83
|
-
? index === 0
|
|
84
|
-
? index
|
|
85
|
-
: index - 1
|
|
86
|
-
: activeTab
|
|
87
|
-
);
|
|
88
|
-
|
|
89
|
-
onCloseTab(index);
|
|
90
|
-
}}
|
|
91
|
-
>
|
|
92
|
-
<Icon icon="pajamas:close" />
|
|
93
|
-
</button>
|
|
94
|
-
)}
|
|
95
|
-
</div>
|
|
96
|
-
);
|
|
97
|
-
})}
|
|
98
|
-
</div>
|
|
99
|
-
) : (
|
|
100
|
-
<div className="flex flex-row overflow-auto lg:min-w-36 lg:max-w-48 lg:flex-col [&::-webkit-scrollbar]:hidden">
|
|
101
|
-
{tabs.slice(0, childrenList.length).map((tab, index) => {
|
|
102
|
-
return (
|
|
103
|
-
<button
|
|
104
|
-
key={index}
|
|
105
|
-
type="button"
|
|
106
|
-
className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 border-r-0 px-6 pb-1.5 pt-2 text-left duration-300 lg:border-b-0 lg:border-r-2 ${
|
|
107
|
-
activeTab === index
|
|
108
|
-
? "border-primary text-primary"
|
|
109
|
-
: "border-transparent hover:border-primary-transparent hover:text-primary"
|
|
110
|
-
}`}
|
|
111
|
-
onClick={() => {
|
|
112
|
-
setActiveTab(index);
|
|
113
|
-
|
|
114
|
-
if (onChangeTab) {
|
|
115
|
-
onChangeTab({
|
|
116
|
-
index: index,
|
|
117
|
-
title: tabs[index].title,
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
}}
|
|
121
|
-
>
|
|
122
|
-
{tab?.icon && <Icon icon={tab?.icon} className="text-lg" />}
|
|
123
|
-
{tab.title}
|
|
124
|
-
</button>
|
|
125
|
-
);
|
|
126
|
-
})}
|
|
135
|
+
);
|
|
136
|
+
})}
|
|
137
|
+
</div>
|
|
138
|
+
{cornerComponent && (
|
|
139
|
+
<div className="px-4 py-2 border-t">{cornerComponent}</div>
|
|
140
|
+
)}
|
|
127
141
|
</div>
|
|
128
142
|
)}
|
|
129
143
|
<div
|
|
@@ -19,6 +19,7 @@ export interface MultipleSelectProps
|
|
|
19
19
|
label?: string;
|
|
20
20
|
placeholder?: string;
|
|
21
21
|
description?: string;
|
|
22
|
+
labelComponent?: (e?: any) => React.ReactNode;
|
|
22
23
|
options?: {
|
|
23
24
|
width?: "full" | "fit";
|
|
24
25
|
height?: "short" | "medium" | "high";
|
|
@@ -51,6 +52,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
|
51
52
|
menus,
|
|
52
53
|
placeholder,
|
|
53
54
|
description,
|
|
55
|
+
labelComponent,
|
|
54
56
|
required,
|
|
55
57
|
disabled,
|
|
56
58
|
value,
|
|
@@ -296,12 +298,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
|
296
298
|
}
|
|
297
299
|
}}
|
|
298
300
|
>
|
|
299
|
-
<
|
|
301
|
+
<div
|
|
300
302
|
className="flex justify-between items-center gap-4"
|
|
301
303
|
style={{ width: dropdownWidth - 43 }}
|
|
302
304
|
>
|
|
303
|
-
{item.label}
|
|
304
|
-
|
|
305
|
+
<span>{item.label}</span>
|
|
306
|
+
{labelComponent ? labelComponent(item) : ""}
|
|
307
|
+
</div>
|
|
305
308
|
</Dropdown.Item>
|
|
306
309
|
);
|
|
307
310
|
})
|