next-helios-fe 1.8.103 → 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.
Files changed (4) hide show
  1. package/dist/components/content-container/tab/index.d.ts +1 -0
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/content-container/tab/index.tsx +75 -61
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.103",
3
+ "version": "1.8.104",
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
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import React, { useState, useEffect } from "react";
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 overflow-auto [&::-webkit-scrollbar]:hidden">
48
- {tabs?.slice(0, childrenList?.length).map((tab, index) => {
49
- return (
50
- <div key={index} className="relative flex items-center">
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
- {onCloseTab && childrenList.length !== 1 && (
77
- <button
78
- type="button"
79
- className="absolute right-2 rounded-full p-0.5 hover:text-warning"
80
- onClick={() => {
81
- setActiveTab(
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