reactjs-multi-stepper 1.2.1 โ 1.2.3
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/README.md +156 -18
- package/dist/multi-stepper.es.js +187 -171
- package/dist/multi-stepper.umd.js +5 -5
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -12,9 +12,12 @@ It allows you to create step-based workflows such as onboarding, multi-step form
|
|
|
12
12
|
## ๐ Features
|
|
13
13
|
|
|
14
14
|
- โ
Easy to use and integrate into any React project
|
|
15
|
-
- ๐จ Fully customizable step styles (active, completed)
|
|
15
|
+
- ๐จ Fully customizable step styles (active, completed, loading, error)
|
|
16
16
|
- โก Built with **TypeScript** for type safety
|
|
17
|
-
- ๐งฉ
|
|
17
|
+
- ๐งฉ Context-based state management with hooks
|
|
18
|
+
- ๐ Built-in step validation and status management
|
|
19
|
+
- ๐ฏ Support for async operations with loading states
|
|
20
|
+
- โ Error handling for failed step validations
|
|
18
21
|
- ๐งช Tested with **Vitest** + **React Testing Library**
|
|
19
22
|
|
|
20
23
|
---
|
|
@@ -29,36 +32,171 @@ yarn add react-multi-stepper
|
|
|
29
32
|
|
|
30
33
|
---
|
|
31
34
|
|
|
32
|
-
## ๐จ Usage
|
|
35
|
+
## ๐จ Basic Usage
|
|
36
|
+
|
|
37
|
+
### 1. Wrap your app with MultiStepperProvider
|
|
33
38
|
|
|
34
39
|
```javascript
|
|
35
40
|
import React from "react";
|
|
36
|
-
import { MultiStepper } from "react-multi-stepper";
|
|
41
|
+
import { MultiStepperProvider, MultiStepper, useMultiStepper } from "react-multi-stepper";
|
|
37
42
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
+
function App() {
|
|
44
|
+
return (
|
|
45
|
+
<MultiStepperProvider steppers={[
|
|
46
|
+
{
|
|
47
|
+
id: 1,
|
|
48
|
+
title: "Personal Info",
|
|
49
|
+
description: "Enter your personal details",
|
|
50
|
+
children: <PersonalInfoForm />
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
id: 2,
|
|
54
|
+
title: "Address",
|
|
55
|
+
description: "Enter your address details",
|
|
56
|
+
children: <AddressForm />
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
id: 3,
|
|
60
|
+
title: "Review",
|
|
61
|
+
description: "Review and confirm",
|
|
62
|
+
children: <ReviewStep />
|
|
63
|
+
}
|
|
64
|
+
]}>
|
|
65
|
+
<MyMultiStepper />
|
|
66
|
+
</MultiStepperProvider>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### 2. Create your stepper component
|
|
43
72
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
73
|
+
```javascript
|
|
74
|
+
function MyMultiStepper() {
|
|
75
|
+
const { handleNextStep, setStepStatus } = useMultiStepper();
|
|
76
|
+
|
|
77
|
+
const validateAndProceed = async () => {
|
|
78
|
+
// Set loading state
|
|
79
|
+
setStepStatus("loading");
|
|
80
|
+
|
|
81
|
+
try {
|
|
82
|
+
// Simulate async validation
|
|
83
|
+
await validateCurrentStep();
|
|
84
|
+
|
|
85
|
+
// Mark as completed and move to next
|
|
86
|
+
setStepStatus("completed");
|
|
87
|
+
handleNextStep();
|
|
88
|
+
} catch (error) {
|
|
89
|
+
// Show error state
|
|
90
|
+
setStepStatus("error");
|
|
91
|
+
}
|
|
47
92
|
};
|
|
48
93
|
|
|
49
|
-
return
|
|
50
|
-
|
|
51
|
-
|
|
94
|
+
return <MultiStepper onClickNext={validateAndProceed} />;
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## ๐ง Advanced Usage
|
|
101
|
+
|
|
102
|
+
### Step Validation with Custom Logic
|
|
103
|
+
|
|
104
|
+
```javascript
|
|
105
|
+
function ReactMultiStepper() {
|
|
106
|
+
const { handleNextStep, setStepStatus, currentStep } = useMultiStepper();
|
|
107
|
+
|
|
108
|
+
const validateStepContent = async () => {
|
|
109
|
+
setStepStatus("loading");
|
|
110
|
+
|
|
111
|
+
try {
|
|
112
|
+
// Custom validation based on current step
|
|
113
|
+
switch (currentStep) {
|
|
114
|
+
case 1:
|
|
115
|
+
await validatePersonalInfo();
|
|
116
|
+
break;
|
|
117
|
+
case 2:
|
|
118
|
+
await validateAddress();
|
|
119
|
+
break;
|
|
120
|
+
case 3:
|
|
121
|
+
await submitForm();
|
|
122
|
+
break;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
setStepStatus("completed");
|
|
126
|
+
handleNextStep();
|
|
127
|
+
} catch (error) {
|
|
128
|
+
setStepStatus("error");
|
|
129
|
+
console.error("Step validation failed:", error);
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
return <MultiStepper onClickNext={validateStepContent} />;
|
|
52
134
|
}
|
|
53
135
|
```
|
|
54
136
|
|
|
137
|
+
### Custom Step Content
|
|
138
|
+
|
|
139
|
+
```javascript
|
|
140
|
+
const steppers = [
|
|
141
|
+
{
|
|
142
|
+
id: 1,
|
|
143
|
+
title: "Step One",
|
|
144
|
+
description: "Step one description",
|
|
145
|
+
children: (
|
|
146
|
+
<div className="custom-step">
|
|
147
|
+
<h3>Custom Step Content</h3>
|
|
148
|
+
<form>
|
|
149
|
+
<input type="text" placeholder="Enter data..." />
|
|
150
|
+
</form>
|
|
151
|
+
</div>
|
|
152
|
+
)
|
|
153
|
+
},
|
|
154
|
+
// ... more steps
|
|
155
|
+
];
|
|
156
|
+
```
|
|
157
|
+
|
|
55
158
|
---
|
|
56
159
|
|
|
57
160
|
## ๐งฉ API Reference
|
|
58
161
|
|
|
162
|
+
### MultiStepperProvider Props
|
|
163
|
+
|
|
164
|
+
| Prop | Type | Required | Description |
|
|
165
|
+
| ------------- | ------------ | -------- | -------------------------------------------------------------- |
|
|
166
|
+
| `steppers` | `StepperType[]` | โ
| Array of step configurations |
|
|
167
|
+
| `children` | `ReactNode` | โ
| Child components that will have access to stepper context |
|
|
168
|
+
|
|
169
|
+
### StepperType Interface
|
|
170
|
+
|
|
171
|
+
| Property | Type | Required | Description |
|
|
172
|
+
| ------------- | ------------ | -------- | -------------------------------------------------------------- |
|
|
173
|
+
| `id` | `number` | โ
| Unique identifier for the step |
|
|
174
|
+
| `title` | `string` | โ
| Step title displayed in the stepper |
|
|
175
|
+
| `description` | `string` | โ
| Step description or subtitle |
|
|
176
|
+
| `children` | `ReactNode` | โ
| Content to render for this step |
|
|
177
|
+
|
|
59
178
|
### MultiStepper Props
|
|
60
179
|
|
|
61
|
-
| Prop
|
|
180
|
+
| Prop | Type | Required | Description |
|
|
62
181
|
| ------------- | ------------ | -------- | -------------------------------------------------------------- |
|
|
63
|
-
| `
|
|
64
|
-
|
|
182
|
+
| `onClickNext` | `() => void` | โ
| Callback triggered when the "Next" button is clicked |
|
|
183
|
+
|
|
184
|
+
### useMultiStepper Hook
|
|
185
|
+
|
|
186
|
+
| Method/Property | Type | Description |
|
|
187
|
+
| ------------- | ------------ | -------------------------------------------------------------- |
|
|
188
|
+
| `handleNextStep` | `() => void` | Move to the next step |
|
|
189
|
+
| `setStepStatus` | `(status: StepStatus) => void` | Update current step status |
|
|
190
|
+
| `currentStep` | `number` | Current active step number |
|
|
191
|
+
| `totalSteps` | `number` | Total number of steps |
|
|
192
|
+
|
|
193
|
+
### Step Status Types
|
|
194
|
+
|
|
195
|
+
| Status | Description |
|
|
196
|
+
| ------------- | -------------------------------------------------------------- |
|
|
197
|
+
| `"active"` | Step is currently active and ready for user interaction |
|
|
198
|
+
| `"loading"` | Step is processing/validating (shows loading indicator) |
|
|
199
|
+
| `"completed"` | Step has been successfully completed |
|
|
200
|
+
| `"error"` | Step has validation errors or failed processing |
|
|
201
|
+
|
|
202
|
+
---
|
package/dist/multi-stepper.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import ce, { createContext as le, useContext as ie, useState as
|
|
2
|
-
import './index.css';var
|
|
1
|
+
import ce, { createContext as le, useContext as ie, useState as q, useEffect as ue, useCallback as k, useMemo as G, Fragment as $ } from "react";
|
|
2
|
+
import './index.css';var g = { exports: {} }, R = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
5
5
|
* react-jsx-runtime.production.js
|
|
@@ -9,27 +9,27 @@ import './index.css';var S = { exports: {} }, R = {};
|
|
|
9
9
|
* This source code is licensed under the MIT license found in the
|
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
|
11
11
|
*/
|
|
12
|
-
var
|
|
12
|
+
var J;
|
|
13
13
|
function fe() {
|
|
14
|
-
if (
|
|
15
|
-
|
|
16
|
-
var t = Symbol.for("react.transitional.element"),
|
|
17
|
-
function
|
|
18
|
-
var
|
|
19
|
-
if (
|
|
20
|
-
|
|
21
|
-
for (var
|
|
22
|
-
|
|
23
|
-
} else
|
|
24
|
-
return
|
|
14
|
+
if (J) return R;
|
|
15
|
+
J = 1;
|
|
16
|
+
var t = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
|
|
17
|
+
function n(h, l, i) {
|
|
18
|
+
var u = null;
|
|
19
|
+
if (i !== void 0 && (u = "" + i), l.key !== void 0 && (u = "" + l.key), "key" in l) {
|
|
20
|
+
i = {};
|
|
21
|
+
for (var x in l)
|
|
22
|
+
x !== "key" && (i[x] = l[x]);
|
|
23
|
+
} else i = l;
|
|
24
|
+
return l = i.ref, {
|
|
25
25
|
$$typeof: t,
|
|
26
|
-
type:
|
|
27
|
-
key:
|
|
28
|
-
ref:
|
|
29
|
-
props:
|
|
26
|
+
type: h,
|
|
27
|
+
key: u,
|
|
28
|
+
ref: l !== void 0 ? l : null,
|
|
29
|
+
props: i
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
return R.Fragment =
|
|
32
|
+
return R.Fragment = o, R.jsx = n, R.jsxs = n, R;
|
|
33
33
|
}
|
|
34
34
|
var j = {};
|
|
35
35
|
/**
|
|
@@ -41,16 +41,16 @@ var j = {};
|
|
|
41
41
|
* This source code is licensed under the MIT license found in the
|
|
42
42
|
* LICENSE file in the root directory of this source tree.
|
|
43
43
|
*/
|
|
44
|
-
var
|
|
44
|
+
var V;
|
|
45
45
|
function de() {
|
|
46
|
-
return
|
|
46
|
+
return V || (V = 1, process.env.NODE_ENV !== "production" && function() {
|
|
47
47
|
function t(e) {
|
|
48
48
|
if (e == null) return null;
|
|
49
49
|
if (typeof e == "function")
|
|
50
50
|
return e.$$typeof === se ? null : e.displayName || e.name || null;
|
|
51
51
|
if (typeof e == "string") return e;
|
|
52
52
|
switch (e) {
|
|
53
|
-
case
|
|
53
|
+
case O:
|
|
54
54
|
return "Fragment";
|
|
55
55
|
case B:
|
|
56
56
|
return "Profiler";
|
|
@@ -67,7 +67,7 @@ function de() {
|
|
|
67
67
|
switch (typeof e.tag == "number" && console.error(
|
|
68
68
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
69
69
|
), e.$$typeof) {
|
|
70
|
-
case
|
|
70
|
+
case v:
|
|
71
71
|
return "Portal";
|
|
72
72
|
case Q:
|
|
73
73
|
return (e.displayName || "Context") + ".Provider";
|
|
@@ -87,28 +87,28 @@ function de() {
|
|
|
87
87
|
}
|
|
88
88
|
return null;
|
|
89
89
|
}
|
|
90
|
-
function
|
|
90
|
+
function o(e) {
|
|
91
91
|
return "" + e;
|
|
92
92
|
}
|
|
93
|
-
function
|
|
93
|
+
function n(e) {
|
|
94
94
|
try {
|
|
95
|
-
|
|
95
|
+
o(e);
|
|
96
96
|
var r = !1;
|
|
97
97
|
} catch {
|
|
98
98
|
r = !0;
|
|
99
99
|
}
|
|
100
100
|
if (r) {
|
|
101
101
|
r = console;
|
|
102
|
-
var a = r.error,
|
|
102
|
+
var a = r.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
103
103
|
return a.call(
|
|
104
104
|
r,
|
|
105
105
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
106
|
-
|
|
107
|
-
),
|
|
106
|
+
d
|
|
107
|
+
), o(e);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
-
function
|
|
111
|
-
if (e ===
|
|
110
|
+
function h(e) {
|
|
111
|
+
if (e === O) return "<>";
|
|
112
112
|
if (typeof e == "object" && e !== null && e.$$typeof === F)
|
|
113
113
|
return "<...>";
|
|
114
114
|
try {
|
|
@@ -118,23 +118,23 @@ function de() {
|
|
|
118
118
|
return "<...>";
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
|
-
function
|
|
122
|
-
var e =
|
|
121
|
+
function l() {
|
|
122
|
+
var e = A.A;
|
|
123
123
|
return e === null ? null : e.getOwner();
|
|
124
124
|
}
|
|
125
|
-
function
|
|
125
|
+
function i() {
|
|
126
126
|
return Error("react-stack-top-frame");
|
|
127
127
|
}
|
|
128
|
-
function
|
|
129
|
-
if (
|
|
128
|
+
function u(e) {
|
|
129
|
+
if (M.call(e, "key")) {
|
|
130
130
|
var r = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
131
131
|
if (r && r.isReactWarning) return !1;
|
|
132
132
|
}
|
|
133
133
|
return e.key !== void 0;
|
|
134
134
|
}
|
|
135
|
-
function
|
|
135
|
+
function x(e, r) {
|
|
136
136
|
function a() {
|
|
137
|
-
|
|
137
|
+
I || (I = !0, console.error(
|
|
138
138
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
139
139
|
r
|
|
140
140
|
));
|
|
@@ -146,16 +146,16 @@ function de() {
|
|
|
146
146
|
}
|
|
147
147
|
function T() {
|
|
148
148
|
var e = t(this.type);
|
|
149
|
-
return
|
|
149
|
+
return D[e] || (D[e] = !0, console.error(
|
|
150
150
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
151
151
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
152
152
|
}
|
|
153
|
-
function
|
|
154
|
-
return a =
|
|
155
|
-
$$typeof:
|
|
153
|
+
function S(e, r, a, d, E, b, y, C) {
|
|
154
|
+
return a = b.ref, e = {
|
|
155
|
+
$$typeof: c,
|
|
156
156
|
type: e,
|
|
157
157
|
key: r,
|
|
158
|
-
props:
|
|
158
|
+
props: b,
|
|
159
159
|
_owner: E
|
|
160
160
|
}, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
|
|
161
161
|
enumerable: !1,
|
|
@@ -174,218 +174,234 @@ function de() {
|
|
|
174
174
|
configurable: !1,
|
|
175
175
|
enumerable: !1,
|
|
176
176
|
writable: !0,
|
|
177
|
-
value:
|
|
177
|
+
value: y
|
|
178
178
|
}), Object.defineProperty(e, "_debugTask", {
|
|
179
179
|
configurable: !1,
|
|
180
180
|
enumerable: !1,
|
|
181
181
|
writable: !0,
|
|
182
|
-
value:
|
|
182
|
+
value: C
|
|
183
183
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
184
184
|
}
|
|
185
|
-
function
|
|
186
|
-
var
|
|
187
|
-
if (
|
|
188
|
-
if (
|
|
189
|
-
if (oe(
|
|
190
|
-
for (
|
|
191
|
-
|
|
192
|
-
Object.freeze && Object.freeze(
|
|
185
|
+
function N(e, r, a, d, E, b, y, C) {
|
|
186
|
+
var m = r.children;
|
|
187
|
+
if (m !== void 0)
|
|
188
|
+
if (d)
|
|
189
|
+
if (oe(m)) {
|
|
190
|
+
for (d = 0; d < m.length; d++)
|
|
191
|
+
f(m[d]);
|
|
192
|
+
Object.freeze && Object.freeze(m);
|
|
193
193
|
} else
|
|
194
194
|
console.error(
|
|
195
195
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
196
196
|
);
|
|
197
|
-
else
|
|
198
|
-
if (
|
|
199
|
-
|
|
197
|
+
else f(m);
|
|
198
|
+
if (M.call(r, "key")) {
|
|
199
|
+
m = t(e);
|
|
200
200
|
var _ = Object.keys(r).filter(function(ae) {
|
|
201
201
|
return ae !== "key";
|
|
202
202
|
});
|
|
203
|
-
|
|
203
|
+
d = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", U[m + d] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
204
204
|
`A props object containing a "key" prop is being spread into JSX:
|
|
205
205
|
let props = %s;
|
|
206
206
|
<%s {...props} />
|
|
207
207
|
React keys must be passed directly to JSX without using spread:
|
|
208
208
|
let props = %s;
|
|
209
209
|
<%s key={someKey} {...props} />`,
|
|
210
|
-
|
|
211
|
-
|
|
210
|
+
d,
|
|
211
|
+
m,
|
|
212
212
|
_,
|
|
213
|
-
|
|
214
|
-
),
|
|
213
|
+
m
|
|
214
|
+
), U[m + d] = !0);
|
|
215
215
|
}
|
|
216
|
-
if (
|
|
216
|
+
if (m = null, a !== void 0 && (n(a), m = "" + a), u(r) && (n(r.key), m = "" + r.key), "key" in r) {
|
|
217
217
|
a = {};
|
|
218
|
-
for (var
|
|
219
|
-
|
|
218
|
+
for (var Y in r)
|
|
219
|
+
Y !== "key" && (a[Y] = r[Y]);
|
|
220
220
|
} else a = r;
|
|
221
|
-
return
|
|
221
|
+
return m && x(
|
|
222
222
|
a,
|
|
223
223
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
224
|
-
),
|
|
224
|
+
), S(
|
|
225
225
|
e,
|
|
226
|
-
|
|
227
|
-
|
|
226
|
+
m,
|
|
227
|
+
b,
|
|
228
228
|
E,
|
|
229
|
-
|
|
229
|
+
l(),
|
|
230
230
|
a,
|
|
231
|
-
|
|
232
|
-
|
|
231
|
+
y,
|
|
232
|
+
C
|
|
233
233
|
);
|
|
234
234
|
}
|
|
235
|
-
function
|
|
236
|
-
typeof e == "object" && e !== null && e.$$typeof ===
|
|
235
|
+
function f(e) {
|
|
236
|
+
typeof e == "object" && e !== null && e.$$typeof === c && e._store && (e._store.validated = 1);
|
|
237
237
|
}
|
|
238
|
-
var
|
|
238
|
+
var p = ce, c = Symbol.for("react.transitional.element"), v = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), H = Symbol.for("react.strict_mode"), B = Symbol.for("react.profiler"), Z = Symbol.for("react.consumer"), Q = Symbol.for("react.context"), K = Symbol.for("react.forward_ref"), ee = Symbol.for("react.suspense"), re = Symbol.for("react.suspense_list"), te = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), ne = Symbol.for("react.activity"), se = Symbol.for("react.client.reference"), A = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, oe = Array.isArray, w = console.createTask ? console.createTask : function() {
|
|
239
239
|
return null;
|
|
240
240
|
};
|
|
241
|
-
|
|
241
|
+
p = {
|
|
242
242
|
react_stack_bottom_frame: function(e) {
|
|
243
243
|
return e();
|
|
244
244
|
}
|
|
245
245
|
};
|
|
246
|
-
var
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
)(),
|
|
250
|
-
j.Fragment =
|
|
251
|
-
var
|
|
252
|
-
return
|
|
246
|
+
var I, D = {}, L = p.react_stack_bottom_frame.bind(
|
|
247
|
+
p,
|
|
248
|
+
i
|
|
249
|
+
)(), W = w(h(i)), U = {};
|
|
250
|
+
j.Fragment = O, j.jsx = function(e, r, a, d, E) {
|
|
251
|
+
var b = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
252
|
+
return N(
|
|
253
253
|
e,
|
|
254
254
|
r,
|
|
255
255
|
a,
|
|
256
256
|
!1,
|
|
257
|
-
|
|
257
|
+
d,
|
|
258
258
|
E,
|
|
259
|
-
|
|
260
|
-
|
|
259
|
+
b ? Error("react-stack-top-frame") : L,
|
|
260
|
+
b ? w(h(e)) : W
|
|
261
261
|
);
|
|
262
|
-
}, j.jsxs = function(e, r, a,
|
|
263
|
-
var
|
|
264
|
-
return
|
|
262
|
+
}, j.jsxs = function(e, r, a, d, E) {
|
|
263
|
+
var b = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
264
|
+
return N(
|
|
265
265
|
e,
|
|
266
266
|
r,
|
|
267
267
|
a,
|
|
268
268
|
!0,
|
|
269
|
-
|
|
269
|
+
d,
|
|
270
270
|
E,
|
|
271
|
-
|
|
272
|
-
|
|
271
|
+
b ? Error("react-stack-top-frame") : L,
|
|
272
|
+
b ? w(h(e)) : W
|
|
273
273
|
);
|
|
274
274
|
};
|
|
275
275
|
}()), j;
|
|
276
276
|
}
|
|
277
|
-
var
|
|
277
|
+
var z;
|
|
278
278
|
function me() {
|
|
279
|
-
return
|
|
279
|
+
return z || (z = 1, process.env.NODE_ENV === "production" ? g.exports = fe() : g.exports = de()), g.exports;
|
|
280
280
|
}
|
|
281
|
-
var
|
|
282
|
-
const
|
|
281
|
+
var s = me();
|
|
282
|
+
const X = le(
|
|
283
283
|
void 0
|
|
284
|
-
),
|
|
285
|
-
const t = ie(
|
|
284
|
+
), P = () => {
|
|
285
|
+
const t = ie(X);
|
|
286
286
|
if (!t)
|
|
287
287
|
throw new Error(
|
|
288
288
|
"useMultiStepperForm must be used within a MultiStepperProvider"
|
|
289
289
|
);
|
|
290
290
|
return t;
|
|
291
|
-
},
|
|
292
|
-
const [
|
|
291
|
+
}, Ee = ({ children: t, steppers: o }) => {
|
|
292
|
+
const [n, h] = q(0), [l, i] = q([]);
|
|
293
293
|
ue(() => {
|
|
294
|
-
if (
|
|
295
|
-
const
|
|
296
|
-
|
|
294
|
+
if (o.length) {
|
|
295
|
+
const f = [...o];
|
|
296
|
+
f[0].active = !0, i(f);
|
|
297
297
|
}
|
|
298
|
-
}, [
|
|
299
|
-
const
|
|
300
|
-
|
|
301
|
-
const
|
|
302
|
-
if (
|
|
303
|
-
|
|
304
|
-
for (let
|
|
305
|
-
|
|
306
|
-
for (let
|
|
307
|
-
|
|
308
|
-
return
|
|
309
|
-
}),
|
|
310
|
-
}, [
|
|
311
|
-
|
|
312
|
-
const
|
|
313
|
-
return
|
|
298
|
+
}, [o, o.length]);
|
|
299
|
+
const u = k((f) => {
|
|
300
|
+
i((p) => {
|
|
301
|
+
const c = [...p];
|
|
302
|
+
if (f > p.length - 1) return p;
|
|
303
|
+
c[n] && (c[n] = { ...c[n], active: !1 }), c[f] && (c[f] = { ...c[f], active: !0 });
|
|
304
|
+
for (let v = 0; v < f; v++)
|
|
305
|
+
c[v] = { ...c[v], completed: !0 };
|
|
306
|
+
for (let v = f; v < c.length; v++)
|
|
307
|
+
c[v] = { ...c[v], completed: !1 };
|
|
308
|
+
return c;
|
|
309
|
+
}), h(f);
|
|
310
|
+
}, [n]), x = k(() => {
|
|
311
|
+
n < l.length - 1 ? u(n + 1) : i((f) => {
|
|
312
|
+
const p = [...f];
|
|
313
|
+
return p[n] = { ...p[n], completed: !0 }, p;
|
|
314
314
|
});
|
|
315
|
-
}, [
|
|
316
|
-
|
|
317
|
-
}, [
|
|
315
|
+
}, [n, l.length, u]), T = k(() => {
|
|
316
|
+
n > 0 && u(n - 1);
|
|
317
|
+
}, [n, u]), S = k(
|
|
318
|
+
(f) => {
|
|
319
|
+
i((p) => {
|
|
320
|
+
const c = [...p];
|
|
321
|
+
return c[n] && (c[n] = {
|
|
322
|
+
...c[n],
|
|
323
|
+
error: !1,
|
|
324
|
+
loading: !1,
|
|
325
|
+
active: !1,
|
|
326
|
+
completed: !1
|
|
327
|
+
}, c[n][f] = !0), c;
|
|
328
|
+
});
|
|
329
|
+
},
|
|
330
|
+
[n]
|
|
331
|
+
), N = G(
|
|
318
332
|
() => ({
|
|
319
|
-
currentStep:
|
|
320
|
-
steps:
|
|
321
|
-
handleNextStep:
|
|
333
|
+
currentStep: n,
|
|
334
|
+
steps: l,
|
|
335
|
+
handleNextStep: x,
|
|
322
336
|
handlePrevStep: T,
|
|
323
|
-
updateSteps:
|
|
337
|
+
updateSteps: u,
|
|
338
|
+
setStepStatus: S
|
|
324
339
|
}),
|
|
325
|
-
[
|
|
340
|
+
[n, l, x, T, u, S]
|
|
326
341
|
);
|
|
327
|
-
return /* @__PURE__ */
|
|
328
|
-
},
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
}) => {
|
|
332
|
-
const {
|
|
333
|
-
|
|
334
|
-
},
|
|
335
|
-
const { steps: t } = N();
|
|
336
|
-
return t.length ? /* @__PURE__ */ n.jsx("div", { className: "app-container", children: /* @__PURE__ */ n.jsx("ol", { className: "stepper-header", children: t.map((s, o) => /* @__PURE__ */ n.jsxs(
|
|
337
|
-
"div",
|
|
338
|
-
{
|
|
339
|
-
className: `step-item ${s.active && "active"} ${s.completed && "complete"} `,
|
|
340
|
-
children: [
|
|
341
|
-
/* @__PURE__ */ n.jsx(ve, { index: o + 1, step: s }),
|
|
342
|
-
/* @__PURE__ */ n.jsxs("div", { className: "step-text", children: [
|
|
343
|
-
s.title && /* @__PURE__ */ n.jsx("h3", { className: "step-title", children: s.title }),
|
|
344
|
-
s.description && /* @__PURE__ */ n.jsx("h3", { className: "step-description", children: s.description })
|
|
345
|
-
] })
|
|
346
|
-
]
|
|
347
|
-
},
|
|
348
|
-
o
|
|
349
|
-
)) }) }) : /* @__PURE__ */ n.jsx(z, {});
|
|
350
|
-
}, be = ({ onClickNext: t }) => {
|
|
351
|
-
const { handleNextStep: s, handlePrevStep: o, currentStep: v, steps: c } = N(), l = v === c.length - 1, m = () => {
|
|
352
|
-
c[v].completed || (s(), t(v + 1));
|
|
353
|
-
}, p = V(() => ({
|
|
342
|
+
return /* @__PURE__ */ s.jsx(X.Provider, { value: N, children: t });
|
|
343
|
+
}, pe = () => {
|
|
344
|
+
const { steps: t, currentStep: o } = P();
|
|
345
|
+
return /* @__PURE__ */ s.jsx("div", { className: "stepper-content", children: t[o] && t[o].children && t[o].children });
|
|
346
|
+
}, ve = ({ onClickNext: t }) => {
|
|
347
|
+
const { handlePrevStep: o, currentStep: n, steps: h } = P(), l = n === h.length - 1, i = () => {
|
|
348
|
+
h[n].completed || t();
|
|
349
|
+
}, u = G(() => ({
|
|
354
350
|
button: "stepper-button",
|
|
355
351
|
fill: "stepper-button-fill"
|
|
356
352
|
}), []);
|
|
357
|
-
return /* @__PURE__ */
|
|
358
|
-
/* @__PURE__ */
|
|
353
|
+
return /* @__PURE__ */ s.jsxs("div", { className: "stepper-footer", children: [
|
|
354
|
+
/* @__PURE__ */ s.jsx(
|
|
359
355
|
"button",
|
|
360
356
|
{
|
|
361
357
|
type: "button",
|
|
362
|
-
className:
|
|
358
|
+
className: u.button,
|
|
363
359
|
onClick: o,
|
|
364
|
-
disabled:
|
|
360
|
+
disabled: n < 0,
|
|
365
361
|
children: "Prev"
|
|
366
362
|
}
|
|
367
363
|
),
|
|
368
|
-
/* @__PURE__ */
|
|
364
|
+
/* @__PURE__ */ s.jsx(
|
|
369
365
|
"button",
|
|
370
366
|
{
|
|
371
367
|
type: "button",
|
|
372
|
-
className: `${l ? `${
|
|
373
|
-
onClick:
|
|
368
|
+
className: `${l ? `${u.button} ${u.fill}` : u.button}`,
|
|
369
|
+
onClick: i,
|
|
374
370
|
children: l ? "Finish" : "Next"
|
|
375
371
|
}
|
|
376
372
|
)
|
|
377
373
|
] });
|
|
378
|
-
},
|
|
379
|
-
|
|
380
|
-
|
|
374
|
+
}, he = ({
|
|
375
|
+
step: t,
|
|
376
|
+
index: o
|
|
377
|
+
}) => {
|
|
378
|
+
const { steps: n } = P();
|
|
379
|
+
return n.length ? t.loading ? /* @__PURE__ */ s.jsx("div", { className: "step step-active", children: /* @__PURE__ */ s.jsx("div", { className: "spinner", role: "status", "aria-label": "Loading" }) }) : t.error ? /* @__PURE__ */ s.jsx("div", { className: "step step-error", children: t.icon ?? /* @__PURE__ */ s.jsx("span", { className: "text-white", children: "โ" }) }) : t.completed ? /* @__PURE__ */ s.jsx("div", { className: "step step-complete", children: t.icon ?? /* @__PURE__ */ s.jsx("span", { className: "text-white", children: "โ" }) }) : t.finshed ? /* @__PURE__ */ s.jsx("div", { className: "step step-complete", children: t.icon }) : t.active ? /* @__PURE__ */ s.jsx("div", { className: "step step-active", children: t.icon ?? /* @__PURE__ */ s.jsx("h2", { className: "text-white", children: o }) }) : /* @__PURE__ */ s.jsx("div", { className: "step step-default", children: t.icon ?? /* @__PURE__ */ s.jsx("h2", { children: o }) }) : /* @__PURE__ */ s.jsx($, {});
|
|
380
|
+
}, be = () => {
|
|
381
|
+
const { steps: t } = P();
|
|
382
|
+
return t.length ? /* @__PURE__ */ s.jsx("div", { className: "app-container", children: /* @__PURE__ */ s.jsx("ol", { className: "stepper-header", children: t.map((o, n) => /* @__PURE__ */ s.jsxs(
|
|
383
|
+
"div",
|
|
384
|
+
{
|
|
385
|
+
className: `step-item ${o.active && "active"} ${o.completed && "complete"} `,
|
|
386
|
+
children: [
|
|
387
|
+
/* @__PURE__ */ s.jsx(he, { index: n + 1, step: o }),
|
|
388
|
+
/* @__PURE__ */ s.jsxs("div", { className: "step-text", children: [
|
|
389
|
+
o.title && /* @__PURE__ */ s.jsx("h3", { className: "step-title", children: o.title }),
|
|
390
|
+
o.description && /* @__PURE__ */ s.jsx("h3", { className: "step-description", children: o.description })
|
|
391
|
+
] })
|
|
392
|
+
]
|
|
393
|
+
},
|
|
394
|
+
n
|
|
395
|
+
)) }) }) : /* @__PURE__ */ s.jsx($, {});
|
|
381
396
|
}, _e = ({
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
/* @__PURE__ */
|
|
386
|
-
/* @__PURE__ */
|
|
387
|
-
|
|
388
|
-
] }) : /* @__PURE__ */ n.jsx(n.Fragment, {});
|
|
397
|
+
onClickNext: t
|
|
398
|
+
}) => /* @__PURE__ */ s.jsxs($, { children: [
|
|
399
|
+
/* @__PURE__ */ s.jsx(be, {}),
|
|
400
|
+
/* @__PURE__ */ s.jsx(pe, {}),
|
|
401
|
+
/* @__PURE__ */ s.jsx(ve, { onClickNext: t })
|
|
402
|
+
] });
|
|
389
403
|
export {
|
|
390
|
-
_e as MultiStepper
|
|
404
|
+
_e as MultiStepper,
|
|
405
|
+
Ee as MultiStepperProvider,
|
|
406
|
+
P as useMultiStepper
|
|
391
407
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(
|
|
1
|
+
(function(x,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],c):(x=typeof globalThis<"u"?globalThis:x||self,c(x["multi-stepper"]={},x.React))})(this,function(x,c){"use strict";var z=document.createElement("style");z.textContent=`:root{--color-primary: #0284c7;--color-primary-light: #38bdf8;--color-success: #16a34a;--color-error: #ef4444;--color-text: #111827;--color-text-light: #4b5563;--color-black: #000;--color-white: #fff;--color-border: #d1d5db;--color-border-light: #e2e8f0;--spacing-xs: .375rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--step-size: 2.5rem;--step-font-weight: 600;--step-radius: 50%;--spinner-size: 1.5rem;--spinner-thickness: 3px;--spinner-color: #3b82f6;--spinner-track: #e5e7eb;--spinner-speed: .8s}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}.app-container{padding:var(--spacing-lg)}.stepper-header{display:flex;justify-content:space-between}.step-item{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.step-item:not(:first-child):before{content:"";background-color:var(--color-border-light);position:absolute;width:calc(100% - var(--step-size));height:3px;right:calc(50% + (var(--step-size) / 2));top:calc(var(--step-size) / 2 - .125rem);transition:all .2s}.step{width:var(--step-size);height:var(--step-size);display:flex;align-items:center;justify-content:center;z-index:10;position:relative;border-radius:var(--step-radius);font-weight:var(--step-font-weight);color:var(--color-black);transition:all .2s;border:1px solid var(--color-border)}.step-active{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.step-complete{border-color:var(--color-success);background-color:var(--color-success);color:var(--color-white)}.step-error{background-color:var(--color-error);color:var(--color-white)}.step-finished{background-color:var(--color-success);color:var(--color-white)}.complete:not(:first-child):before,.active:not(:first-child):before{background-color:var(--color-success)}.step-title{font-size:1rem;color:var(--color-text);font-weight:500;margin-top:var(--spacing-md)}.step-description{font-size:.85rem;color:var(--color-text-light);font-weight:300;margin-top:var(--spacing-sm)}.stepper-content{display:flex;justify-content:center;align-items:center}.stepper-footer{display:flex;justify-content:space-around;align-items:center;padding:var(--spacing-lg) var(--spacing-xl)}.stepper-button{padding:var(--spacing-xs) var(--spacing-xl);font-size:1rem;border-radius:.375rem;border:1px solid #9ca3af;background-color:transparent;color:inherit;cursor:pointer}.stepper-button-fill{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-white)}.spinner{width:var(--spinner-size);height:var(--spinner-size);border-radius:50%;border:var(--spinner-thickness) solid var(--spinner-track);border-top-color:var(--spinner-color);animation:spin var(--spinner-speed) linear infinite}@media (prefers-reduced-motion: reduce){.spinner{animation:none;border-top-color:var(--spinner-track)}}@keyframes spin{to{transform:rotate(360deg)}}.test-step{padding:10vh;display:flex;justify-content:center;align-items:center;border-radius:1rem;width:50%;margin-block:2rem}.test-step h3{color:#fff}.step-text{text-align:center}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(z);var y={exports:{}},k={};/**
|
|
3
3
|
* @license React
|
|
4
4
|
* react-jsx-runtime.production.js
|
|
5
5
|
*
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*
|
|
8
8
|
* This source code is licensed under the MIT license found in the
|
|
9
9
|
* LICENSE file in the root directory of this source tree.
|
|
10
|
-
*/var
|
|
10
|
+
*/var Y;function B(){if(Y)return k;Y=1;var t=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function n(b,l,u){var d=null;if(u!==void 0&&(d=""+u),l.key!==void 0&&(d=""+l.key),"key"in l){u={};for(var E in l)E!=="key"&&(u[E]=l[E])}else u=l;return l=u.ref,{$$typeof:t,type:b,key:d,ref:l!==void 0?l:null,props:u}}return k.Fragment=s,k.jsx=n,k.jsxs=n,k}var R={};/**
|
|
11
11
|
* @license React
|
|
12
12
|
* react-jsx-runtime.development.js
|
|
13
13
|
*
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
*
|
|
16
16
|
* This source code is licensed under the MIT license found in the
|
|
17
17
|
* LICENSE file in the root directory of this source tree.
|
|
18
|
-
*/var
|
|
18
|
+
*/var I;function Z(){return I||(I=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===pe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case oe:return"Profiler";case ne:return"StrictMode";case ce:return"Suspense";case le:return"SuspenseList";case de:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case h:return"Portal";case ae:return(e.displayName||"Context")+".Provider";case se:return(e._context.displayName||"Context")+".Consumer";case ie:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case U:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function s(e){return""+e}function n(e){try{s(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,f=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",f),s(e)}}function b(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===U)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function l(){var e=O.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function d(e){if(W.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function E(e,r){function a(){J||(J=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function T(){var e=t(this.type);return V[e]||(V[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function w(e,r,a,f,_,g,C,M){return a=g.ref,e={$$typeof:i,type:e,key:r,props:g,_owner:_},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:T}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:C}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:M}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,r,a,f,_,g,C,M){var m=r.children;if(m!==void 0)if(f)if(fe(m)){for(f=0;f<m.length;f++)p(m[f]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else p(m);if(W.call(r,"key")){m=t(e);var j=Object.keys(r).filter(function(me){return me!=="key"});f=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",H[m+f]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
19
19
|
let props = %s;
|
|
20
20
|
<%s {...props} />
|
|
21
21
|
React keys must be passed directly to JSX without using spread:
|
|
22
22
|
let props = %s;
|
|
23
|
-
<%s key={someKey} {...props} />`,
|
|
23
|
+
<%s key={someKey} {...props} />`,f,m,j,m),H[m+f]=!0)}if(m=null,a!==void 0&&(n(a),m=""+a),d(r)&&(n(r.key),m=""+r.key),"key"in r){a={};for(var F in r)F!=="key"&&(a[F]=r[F])}else a=r;return m&&E(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),w(e,m,g,_,l(),a,C,M)}function p(e){typeof e=="object"&&e!==null&&e.$$typeof===i&&e._store&&(e._store.validated=1)}var v=c,i=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),ne=Symbol.for("react.strict_mode"),oe=Symbol.for("react.profiler"),se=Symbol.for("react.consumer"),ae=Symbol.for("react.context"),ie=Symbol.for("react.forward_ref"),ce=Symbol.for("react.suspense"),le=Symbol.for("react.suspense_list"),ue=Symbol.for("react.memo"),U=Symbol.for("react.lazy"),de=Symbol.for("react.activity"),pe=Symbol.for("react.client.reference"),O=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,fe=Array.isArray,A=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var J,V={},G=v.react_stack_bottom_frame.bind(v,u)(),X=A(b(u)),H={};R.Fragment=P,R.jsx=function(e,r,a,f,_){var g=1e4>O.recentlyCreatedOwnerStacks++;return N(e,r,a,!1,f,_,g?Error("react-stack-top-frame"):G,g?A(b(e)):X)},R.jsxs=function(e,r,a,f,_){var g=1e4>O.recentlyCreatedOwnerStacks++;return N(e,r,a,!0,f,_,g?Error("react-stack-top-frame"):G,g?A(b(e)):X)}}()),R}var D;function Q(){return D||(D=1,process.env.NODE_ENV==="production"?y.exports=B():y.exports=Z()),y.exports}var o=Q();const L=c.createContext(void 0),S=()=>{const t=c.useContext(L);if(!t)throw new Error("useMultiStepperForm must be used within a MultiStepperProvider");return t},K=({children:t,steppers:s})=>{const[n,b]=c.useState(0),[l,u]=c.useState([]);c.useEffect(()=>{if(s.length){const p=[...s];p[0].active=!0,u(p)}},[s,s.length]);const d=c.useCallback(p=>{u(v=>{const i=[...v];if(p>v.length-1)return v;i[n]&&(i[n]={...i[n],active:!1}),i[p]&&(i[p]={...i[p],active:!0});for(let h=0;h<p;h++)i[h]={...i[h],completed:!0};for(let h=p;h<i.length;h++)i[h]={...i[h],completed:!1};return i}),b(p)},[n]),E=c.useCallback(()=>{n<l.length-1?d(n+1):u(p=>{const v=[...p];return v[n]={...v[n],completed:!0},v})},[n,l.length,d]),T=c.useCallback(()=>{n>0&&d(n-1)},[n,d]),w=c.useCallback(p=>{u(v=>{const i=[...v];return i[n]&&(i[n]={...i[n],error:!1,loading:!1,active:!1,completed:!1},i[n][p]=!0),i})},[n]),N=c.useMemo(()=>({currentStep:n,steps:l,handleNextStep:E,handlePrevStep:T,updateSteps:d,setStepStatus:w}),[n,l,E,T,d,w]);return o.jsx(L.Provider,{value:N,children:t})},q=()=>{const{steps:t,currentStep:s}=S();return o.jsx("div",{className:"stepper-content",children:t[s]&&t[s].children&&t[s].children})},$=({onClickNext:t})=>{const{handlePrevStep:s,currentStep:n,steps:b}=S(),l=n===b.length-1,u=()=>{b[n].completed||t()},d=c.useMemo(()=>({button:"stepper-button",fill:"stepper-button-fill"}),[]);return o.jsxs("div",{className:"stepper-footer",children:[o.jsx("button",{type:"button",className:d.button,onClick:s,disabled:n<0,children:"Prev"}),o.jsx("button",{type:"button",className:`${l?`${d.button} ${d.fill}`:d.button}`,onClick:u,children:l?"Finish":"Next"})]})},ee=({step:t,index:s})=>{const{steps:n}=S();return n.length?t.loading?o.jsx("div",{className:"step step-active",children:o.jsx("div",{className:"spinner",role:"status","aria-label":"Loading"})}):t.error?o.jsx("div",{className:"step step-error",children:t.icon??o.jsx("span",{className:"text-white",children:"โ"})}):t.completed?o.jsx("div",{className:"step step-complete",children:t.icon??o.jsx("span",{className:"text-white",children:"โ"})}):t.finshed?o.jsx("div",{className:"step step-complete",children:t.icon}):t.active?o.jsx("div",{className:"step step-active",children:t.icon??o.jsx("h2",{className:"text-white",children:s})}):o.jsx("div",{className:"step step-default",children:t.icon??o.jsx("h2",{children:s})}):o.jsx(c.Fragment,{})},re=()=>{const{steps:t}=S();return t.length?o.jsx("div",{className:"app-container",children:o.jsx("ol",{className:"stepper-header",children:t.map((s,n)=>o.jsxs("div",{className:`step-item ${s.active&&"active"} ${s.completed&&"complete"} `,children:[o.jsx(ee,{index:n+1,step:s}),o.jsxs("div",{className:"step-text",children:[s.title&&o.jsx("h3",{className:"step-title",children:s.title}),s.description&&o.jsx("h3",{className:"step-description",children:s.description})]})]},n))})}):o.jsx(c.Fragment,{})},te=({onClickNext:t})=>o.jsxs(c.Fragment,{children:[o.jsx(re,{}),o.jsx(q,{}),o.jsx($,{onClickNext:t})]});x.MultiStepper=te,x.MultiStepperProvider=K,x.useMultiStepper=S,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"main": "./dist/multi-stepper.umd.js",
|
|
4
4
|
"module": "./dist/multi-stepper.es.js",
|
|
5
5
|
"types": "./dist/index.d.ts",
|
|
6
|
-
"version": "1.2.
|
|
6
|
+
"version": "1.2.3",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"repository": {
|
|
9
9
|
"url": "https://github.com/UppiliSrinivas/react-stepper/tree/multi-stepper"
|
|
@@ -31,7 +31,6 @@
|
|
|
31
31
|
"@vitejs/plugin-react-swc": "^3.11.0",
|
|
32
32
|
"react": "^19.1.0",
|
|
33
33
|
"react-dom": "^19.1.0",
|
|
34
|
-
"reactjs-multi-stepper": "^1.1.4",
|
|
35
34
|
"vite-plugin-dts": "^4.5.4",
|
|
36
35
|
"vite-plugin-lib-inject-css": "^2.2.2"
|
|
37
36
|
},
|