next-helios-fe 1.8.48 → 1.8.50

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.48",
3
+ "version": "1.8.50",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import React, { useState, useEffect, useRef } from "react";
2
+ import React, { useState, useRef } from "react";
3
3
  import { Icon } from "@iconify/react";
4
4
  import { Window, type WindowProps } from "./window";
5
5
 
@@ -11,9 +11,18 @@ interface WizardProps {
11
11
  icon: string;
12
12
  }[];
13
13
  options?: {
14
+ variant?: "basic" | "modern";
14
15
  border?: boolean;
15
16
  disableNavigationClick?: boolean;
16
17
  hideNavigationOnFirstWindow?: boolean;
18
+ customNextButton?: {
19
+ type?: "button" | "submit";
20
+ label?: string;
21
+ icon?: string;
22
+ form?: string;
23
+ disabled?: boolean;
24
+ onClick?: () => void;
25
+ };
17
26
  };
18
27
  onPreviousClick?: () => void;
19
28
  onNextClick?: () => void;
@@ -39,15 +48,6 @@ export const Wizard: WizardComponent = ({
39
48
  });
40
49
  const [activeTab, setActiveTab] = useState(0);
41
50
 
42
- useEffect(() => {
43
- if (onChangeTab) {
44
- onChangeTab({
45
- index: activeTab,
46
- title: tabs[activeTab].title,
47
- });
48
- }
49
- }, [tabs, activeTab]);
50
-
51
51
  const handleOnPreviousClick = () => {
52
52
  if (activeTab - 1 === 0) {
53
53
  wizardNavigationRef.current?.scrollTo({
@@ -80,53 +80,118 @@ export const Wizard: WizardComponent = ({
80
80
 
81
81
  return (
82
82
  <div className="flex flex-col gap-8 h-full overflow-hidden">
83
- {(!options?.hideNavigationOnFirstWindow || activeTab !== 0) && (
84
- <div className="space-x-8 relative before:absolute before:inset-0 before:mt-6 md:before:translate-y-0 before:w-full before:h-0.5 before:bg-gradient-to-r before:from-transparent before:via-primary before:to-transparent">
85
- <div
86
- ref={wizardNavigationRef}
87
- className="relative flex justify-between overflow-auto [&::-webkit-scrollbar]:hidden"
88
- >
89
- {tabs?.map((tab, index) => {
90
- {
91
- if (!options?.hideNavigationOnFirstWindow || index !== 0) {
92
- return (
93
- <div
94
- key={index}
95
- id={`wizard-tab-${index}`}
96
- className={`group flex flex-col items-center gap-2 min-w-32 max-w-40 px-2 ${
97
- activeTab >= index && "is-active"
98
- }`}
99
- >
100
- <div className="rounded-full bg-secondary-bg">
101
- <button
102
- className={`flex justify-center items-center w-12 h-12 shadow border border-white rounded-full bg-secondary-light duration-300 group-[.is-active]:bg-primary group-[.is-active]:text-white ${
103
- !options?.disableNavigationClick &&
104
- "hover:border-primary hover:bg-primary-transparent hover:text-primary"
105
- }`}
106
- disabled={options?.disableNavigationClick}
107
- onClick={() => {
108
- setActiveTab(index);
109
- }}
110
- >
111
- <Icon
112
- icon={tab.icon}
113
- className="text-2xl pointer-events-none"
114
- />
115
- </button>
116
- </div>
117
- <div className="flex flex-col items-center text-center">
118
- <h1 className="text-sm font-medium group-[.is-active]:text-primary">
119
- {tab.title}
120
- </h1>
121
- <p className="text-xs">{tab.subTitle}</p>
83
+ {options?.variant === "modern" ? (
84
+ <div className="flex justify-between items-center gap-8 whitespace-nowrap overflow-x-auto [&::-webkit-scrollbar]:hidden">
85
+ {tabs?.map((tab, index) => {
86
+ return (
87
+ <>
88
+ <button
89
+ key={index}
90
+ type="button"
91
+ className={`group flex items-center gap-4 ${
92
+ activeTab > index && "is-hopped"
93
+ } ${activeTab === index && "is-active"}`}
94
+ disabled={options?.disableNavigationClick}
95
+ onClick={() => {
96
+ setActiveTab(index);
97
+
98
+ if (onChangeTab) {
99
+ onChangeTab({
100
+ index: index,
101
+ title: tabs[index].title,
102
+ });
103
+ }
104
+ }}
105
+ >
106
+ <div
107
+ className={`flex justify-center items-center w-10 h-10 shadow border border-white rounded-md bg-secondary-light duration-300 group-[.is-hopped]:border-primary group-[.is-hopped]:bg-primary-transparent group-[.is-hopped]:text-primary group-[.is-active]:bg-primary group-[.is-active]:text-white ${
108
+ !options?.disableNavigationClick &&
109
+ "group-hover:border-primary group-hover:bg-primary-transparent group-hover:text-primary"
110
+ }`}
111
+ >
112
+ <Icon
113
+ icon={tab.icon}
114
+ className="text-2xl pointer-events-none"
115
+ />
116
+ </div>
117
+ <div className="flex flex-col items-start">
118
+ <h1 className="text-sm font-medium group-[.is-hopped]:text-primary group-[.is-active]:text-primary">
119
+ {tab.title}
120
+ </h1>
121
+ <p className="text-xs text-disabled">{tab.subTitle}</p>
122
+ </div>
123
+ </button>
124
+ {index !== tabs.length - 1 && (
125
+ <div>
126
+ <Icon
127
+ icon="gravity-ui:chevron-right"
128
+ className="text-xl pointer-events-none text-disabled"
129
+ />
130
+ </div>
131
+ )}
132
+ </>
133
+ );
134
+ })}
135
+ </div>
136
+ ) : (
137
+ (!options?.hideNavigationOnFirstWindow || activeTab !== 0) && (
138
+ <div className="space-x-8 relative before:absolute before:inset-0 before:mt-6 md:before:translate-y-0 before:w-full before:h-0.5 before:bg-gradient-to-r before:from-transparent before:via-primary before:to-transparent">
139
+ <div
140
+ ref={wizardNavigationRef}
141
+ className="relative flex justify-between overflow-x-auto [&::-webkit-scrollbar]:hidden"
142
+ >
143
+ {tabs?.map((tab, index) => {
144
+ {
145
+ if (!options?.hideNavigationOnFirstWindow || index !== 0) {
146
+ return (
147
+ <div
148
+ key={index}
149
+ id={`wizard-tab-${index}`}
150
+ className={`group flex flex-col items-center gap-2 min-w-32 max-w-40 px-2 ${
151
+ activeTab > index && "is-hopped"
152
+ } ${activeTab === index && "is-active"}`}
153
+ >
154
+ <div className="rounded-full bg-secondary-bg">
155
+ <button
156
+ type="button"
157
+ className={`flex justify-center items-center w-12 h-12 shadow border border-white rounded-full bg-secondary-light duration-300 group-[.is-hopped]:border-primary group-[.is-hopped]:bg-primary-transparent group-[.is-hopped]:text-primary group-[.is-active]:bg-primary group-[.is-active]:text-white ${
158
+ !options?.disableNavigationClick &&
159
+ "hover:border-primary hover:bg-primary-transparent hover:text-primary"
160
+ }`}
161
+ disabled={options?.disableNavigationClick}
162
+ onClick={() => {
163
+ setActiveTab(index);
164
+
165
+ if (onChangeTab) {
166
+ onChangeTab({
167
+ index: index,
168
+ title: tabs[index].title,
169
+ });
170
+ }
171
+ }}
172
+ >
173
+ <Icon
174
+ icon={tab.icon}
175
+ className="text-2xl pointer-events-none"
176
+ />
177
+ </button>
178
+ </div>
179
+ <div className="flex flex-col items-center text-center">
180
+ <h1 className="text-sm font-medium group-[.is-hopped]:text-primary group-[.is-active]:text-primary">
181
+ {tab.title}
182
+ </h1>
183
+ <p className="text-xs text-disabled">
184
+ {tab.subTitle}
185
+ </p>
186
+ </div>
122
187
  </div>
123
- </div>
124
- );
188
+ );
189
+ }
125
190
  }
126
- }
127
- })}
191
+ })}
192
+ </div>
128
193
  </div>
129
- </div>
194
+ )
130
195
  )}
131
196
  <div
132
197
  className={`flex-1 overflow-auto ${
@@ -138,29 +203,79 @@ export const Wizard: WizardComponent = ({
138
203
  <div className="flex justify-between">
139
204
  <button
140
205
  type="button"
141
- className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-disabled"
206
+ className={`flex items-center gap-2 select-none ${
207
+ options?.variant === "modern"
208
+ ? "px-3 py-1.5 rounded-md bg-primary shadow-sm shadow-primary text-white hover:bg-primary-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
209
+ : "text-primary hover:text-primary-dark disabled:text-disabled"
210
+ }`}
142
211
  disabled={activeTab === 0}
143
212
  onClick={() => {
144
- setActiveTab((prev) => prev - 1);
145
213
  handleOnPreviousClick();
146
214
  onPreviousClick && onPreviousClick();
215
+
216
+ if (onChangeTab) {
217
+ setActiveTab((prev) => {
218
+ onChangeTab({
219
+ index: prev - 1,
220
+ title: tabs[prev - 1].title,
221
+ });
222
+ return prev - 1;
223
+ });
224
+ }
147
225
  }}
148
226
  >
149
- <Icon icon="gravity-ui:chevron-left" className="text-xl" />
227
+ <Icon
228
+ icon={
229
+ options?.variant === "modern"
230
+ ? "mi:arrow-left"
231
+ : "gravity-ui:chevron-left"
232
+ }
233
+ className="text-xl"
234
+ />
150
235
  Previous
151
236
  </button>
152
237
  <button
153
- type="button"
154
- className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-disabled"
155
- disabled={activeTab === childrenList.length - 1}
238
+ type={options?.customNextButton?.type ?? "button"}
239
+ className={`flex items-center gap-2 select-none ${
240
+ options?.variant === "modern"
241
+ ? "px-3 py-1.5 rounded-md bg-primary shadow-sm shadow-primary text-white hover:bg-primary-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
242
+ : "text-primary hover:text-primary-dark disabled:text-disabled"
243
+ }`}
244
+ form={options?.customNextButton?.form ?? ""}
245
+ disabled={
246
+ options?.customNextButton?.disabled ??
247
+ activeTab === childrenList.length - 1
248
+ }
156
249
  onClick={() => {
157
- setActiveTab((prev) => prev + 1);
158
- handleOnNextClick();
159
- onNextClick && onNextClick();
250
+ if (options?.customNextButton?.onClick) {
251
+ options.customNextButton.onClick();
252
+ } else {
253
+ handleOnNextClick();
254
+ onNextClick && onNextClick();
255
+
256
+ if (onChangeTab) {
257
+ setActiveTab((prev) => {
258
+ onChangeTab({
259
+ index: prev + 1,
260
+ title: tabs[prev + 1].title,
261
+ });
262
+ return prev + 1;
263
+ });
264
+ }
265
+ }
160
266
  }}
161
267
  >
162
- Next
163
- <Icon icon="gravity-ui:chevron-right" className="text-xl" />
268
+ {options?.customNextButton?.label ?? "Next"}
269
+ {!options?.customNextButton?.label && (
270
+ <Icon
271
+ icon={
272
+ options?.variant === "modern"
273
+ ? "mi:arrow-right"
274
+ : "gravity-ui:chevron-right"
275
+ }
276
+ className="text-xl"
277
+ />
278
+ )}
164
279
  </button>
165
280
  </div>
166
281
  </div>
@@ -8,6 +8,7 @@ export interface DateProps extends React.InputHTMLAttributes<HTMLInputElement> {
8
8
  label?: string;
9
9
  description?: string;
10
10
  options?: {
11
+ buttonOnly?: boolean;
11
12
  enableSelectRange?: boolean;
12
13
  disablePast?: boolean;
13
14
  disableFuture?: boolean;
@@ -109,30 +110,34 @@ export const Date: React.FC<DateProps> = ({
109
110
  </div>
110
111
  )}
111
112
  <div className="relative flex items-center">
112
- <input
113
- type="text"
114
- className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
115
- disabled={rest.disabled}
116
- readOnly
117
- value={
118
- dateRangeLabel(tempValue) === "Custom" ||
119
- !options?.enableSelectRange
120
- ? `${
121
- !options?.enableSelectRange
122
- ? ""
123
- : `${
124
- dayjs(tempValue[0]).format("MMM YYYY") ===
125
- dayjs(tempValue[1]).format("MMM YYYY")
126
- ? dayjs(tempValue[0]).format("DD")
127
- : dayjs(tempValue[0]).format("DD MMM YYYY")
128
- } - `
129
- }${dayjs(tempValue[1]).format("DD MMM YYYY")}`
130
- : dateRangeLabel(tempValue)
131
- }
132
- />
113
+ {!options?.buttonOnly && (
114
+ <input
115
+ type="text"
116
+ className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
117
+ disabled={rest.disabled}
118
+ readOnly
119
+ value={
120
+ dateRangeLabel(tempValue) === "Custom" ||
121
+ !options?.enableSelectRange
122
+ ? `${
123
+ !options?.enableSelectRange
124
+ ? ""
125
+ : `${
126
+ dayjs(tempValue[0]).format("MMM YYYY") ===
127
+ dayjs(tempValue[1]).format("MMM YYYY")
128
+ ? dayjs(tempValue[0]).format("DD")
129
+ : dayjs(tempValue[0]).format("DD MMM YYYY")
130
+ } - `
131
+ }${dayjs(tempValue[1]).format("DD MMM YYYY")}`
132
+ : dateRangeLabel(tempValue)
133
+ }
134
+ />
135
+ )}
133
136
  <button
134
137
  type="button"
135
- className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
138
+ className={`rounded-full text-xl hover:bg-secondary-light ${
139
+ options?.buttonOnly ? "p-2" : "absolute right-4 p-1 text-disabled"
140
+ }`}
136
141
  tabIndex={-1}
137
142
  disabled={rest.disabled}
138
143
  onClick={(e) => {