next-helios-fe 1.8.20 → 1.8.22

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.
Files changed (4) hide show
  1. package/dist/components/content-container/tab/index.d.ts +2 -0
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/content-container/tab/index.tsx +58 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.20",
3
+ "version": "1.8.22",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/content-container/tab/index.tsx CHANGED
@@ -12,15 +12,23 @@ interface TabProps {
12
12
  options?: {
13
13
  variant?: "vertical" | "horizontal";
14
14
  border?: boolean;
15
+ disablePadding?: boolean;
15
16
  };
16
17
  onChangeTab?: (tab: any) => void;
18
+ onCloseTab?: (tab: any) => void;
17
19
  }
18
20
 
19
21
  interface TabComponent extends React.FC<TabProps> {
20
22
  Window: React.FC<WindowProps>;
21
23
  }
22
24
 
23
- export const Tab: TabComponent = ({ children, tabs, options, onChangeTab }) => {
25
+ export const Tab: TabComponent = ({
26
+ children,
27
+ tabs,
28
+ options,
29
+ onChangeTab,
30
+ onCloseTab,
31
+ }) => {
24
32
  const childrenList = React.Children.toArray(children);
25
33
  const windowList = childrenList.filter((child) => {
26
34
  return (child as React.ReactElement).type === Tab.Window;
@@ -28,6 +36,10 @@ export const Tab: TabComponent = ({ children, tabs, options, onChangeTab }) => {
28
36
  const [activeTab, setActiveTab] = useState(0);
29
37
 
30
38
  useEffect(() => {
39
+ if (tabs.length === 1) {
40
+ setActiveTab(0);
41
+ }
42
+
31
43
  if (onChangeTab) {
32
44
  onChangeTab({
33
45
  index: activeTab,
@@ -48,21 +60,45 @@ export const Tab: TabComponent = ({ children, tabs, options, onChangeTab }) => {
48
60
  <div className="flex overflow-auto [&::-webkit-scrollbar]:hidden">
49
61
  {tabs?.slice(0, childrenList?.length).map((tab, index) => {
50
62
  return (
51
- <button
52
- key={index}
53
- type="button"
54
- className={`flex items-center gap-2 px-6 pt-2 pb-1.5 border-b-2 whitespace-nowrap duration-300 ${
55
- activeTab === index
56
- ? "text-primary border-primary"
57
- : "border-transparent hover:text-primary hover:border-primary-transparent"
58
- }`}
59
- onClick={() => {
60
- setActiveTab(index);
61
- }}
62
- >
63
- {tab?.icon && <Icon icon={tab?.icon} className="text-lg" />}
64
- {tab.title}
65
- </button>
63
+ <div className="relative flex items-center">
64
+ <button
65
+ key={index}
66
+ type="button"
67
+ className={`flex items-center gap-2 pt-2 pb-1.5 border-b-2 select-none whitespace-nowrap duration-300 ${
68
+ activeTab === index
69
+ ? "text-primary border-primary"
70
+ : "border-transparent hover:text-primary hover:border-primary-transparent"
71
+ } ${
72
+ onCloseTab && childrenList.length !== 1
73
+ ? "ps-6 pe-10"
74
+ : "px-6"
75
+ }`}
76
+ onClick={() => {
77
+ setActiveTab(index);
78
+ }}
79
+ >
80
+ {tab?.icon && <Icon icon={tab?.icon} className="text-lg" />}
81
+ {tab.title}
82
+ </button>
83
+ {onCloseTab && childrenList.length !== 1 && (
84
+ <button
85
+ type="button"
86
+ className="absolute right-2 p-0.5 rounded-full hover:text-warning"
87
+ onClick={() => {
88
+ setActiveTab(
89
+ activeTab === index
90
+ ? index === 0
91
+ ? index
92
+ : index - 1
93
+ : activeTab
94
+ );
95
+ onCloseTab(index);
96
+ }}
97
+ >
98
+ <Icon icon="pajamas:close" />
99
+ </button>
100
+ )}
101
+ </div>
66
102
  );
67
103
  })}
68
104
  </div>
@@ -73,7 +109,7 @@ export const Tab: TabComponent = ({ children, tabs, options, onChangeTab }) => {
73
109
  <button
74
110
  key={index}
75
111
  type="button"
76
- className={`flex items-center gap-2 px-6 pt-2 pb-1.5 border-b-2 lg:border-b-0 border-r-0 lg:border-r-2 text-left whitespace-nowrap duration-300 ${
112
+ className={`flex items-center gap-2 px-6 pt-2 pb-1.5 border-b-2 lg:border-b-0 border-r-0 lg:border-r-2 text-left select-none whitespace-nowrap duration-300 ${
77
113
  activeTab === index
78
114
  ? "text-primary border-primary"
79
115
  : "border-transparent hover:text-primary hover:border-primary-transparent"
@@ -91,9 +127,11 @@ export const Tab: TabComponent = ({ children, tabs, options, onChangeTab }) => {
91
127
  )}
92
128
  <div
93
129
  className={`flex-1 overflow-auto ${
94
- options?.variant !== "horizontal"
95
- ? "px-6 py-8"
96
- : "px-6 lg:px-8 py-8 lg:py-6"
130
+ !options?.disablePadding
131
+ ? options?.variant !== "horizontal"
132
+ ? "px-6 py-8"
133
+ : "px-6 lg:px-8 py-8 lg:py-6"
134
+ : ""
97
135
  }`}
98
136
  >
99
137
  {windowList[activeTab]}