next-helios-fe 1.8.49 → 1.8.51

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.49",
3
+ "version": "1.8.51",
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,87 @@ 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
+ } else {
225
+ setActiveTab((prev) => {
226
+ return prev - 1;
227
+ });
228
+ }
147
229
  }}
148
230
  >
149
- <Icon icon="gravity-ui:chevron-left" className="text-xl" />
231
+ <Icon
232
+ icon={
233
+ options?.variant === "modern"
234
+ ? "mi:arrow-left"
235
+ : "gravity-ui:chevron-left"
236
+ }
237
+ className="text-xl"
238
+ />
150
239
  Previous
151
240
  </button>
152
241
  <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}
242
+ type={options?.customNextButton?.type ?? "button"}
243
+ className={`flex items-center gap-2 select-none ${
244
+ options?.variant === "modern"
245
+ ? "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"
246
+ : "text-primary hover:text-primary-dark disabled:text-disabled"
247
+ }`}
248
+ form={options?.customNextButton?.form ?? ""}
249
+ disabled={
250
+ options?.customNextButton?.disabled ??
251
+ activeTab === childrenList.length - 1
252
+ }
156
253
  onClick={() => {
157
- setActiveTab((prev) => prev + 1);
158
- handleOnNextClick();
159
- onNextClick && onNextClick();
254
+ if (options?.customNextButton?.onClick) {
255
+ options.customNextButton.onClick();
256
+ } else {
257
+ handleOnNextClick();
258
+ onNextClick && onNextClick();
259
+
260
+ if (onChangeTab) {
261
+ setActiveTab((prev) => {
262
+ onChangeTab({
263
+ index: prev + 1,
264
+ title: tabs[prev + 1].title,
265
+ });
266
+ return prev + 1;
267
+ });
268
+ } else {
269
+ setActiveTab((prev) => {
270
+ return prev + 1;
271
+ });
272
+ }
273
+ }
160
274
  }}
161
275
  >
162
- Next
163
- <Icon icon="gravity-ui:chevron-right" className="text-xl" />
276
+ {options?.customNextButton?.label ?? "Next"}
277
+ {!options?.customNextButton?.label && (
278
+ <Icon
279
+ icon={
280
+ options?.variant === "modern"
281
+ ? "mi:arrow-right"
282
+ : "gravity-ui:chevron-right"
283
+ }
284
+ className="text-xl"
285
+ />
286
+ )}
164
287
  </button>
165
288
  </div>
166
289
  </div>