reactjs-multi-stepper 1.2.5 โ 1.2.8
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 +1 -55
- package/dist/index.css +1 -1
- package/dist/multi-stepper.es.js +151 -145
- package/dist/multi-stepper.umd.js +5 -5
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -12,12 +12,9 @@ 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)
|
|
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
|
|
21
18
|
- ๐งช Tested with **Vitest** + **React Testing Library**
|
|
22
19
|
|
|
23
20
|
---
|
|
@@ -75,19 +72,10 @@ function MyMultiStepper() {
|
|
|
75
72
|
const { handleNextStep, setStepStatus } = useMultiStepper();
|
|
76
73
|
|
|
77
74
|
const validateAndProceed = async () => {
|
|
78
|
-
// Set loading state
|
|
79
|
-
setStepStatus("loading");
|
|
80
|
-
|
|
81
75
|
try {
|
|
82
|
-
// Simulate async validation
|
|
83
|
-
await validateCurrentStep();
|
|
84
|
-
|
|
85
|
-
// Mark as completed and move to next
|
|
86
76
|
setStepStatus("completed");
|
|
87
77
|
handleNextStep();
|
|
88
78
|
} catch (error) {
|
|
89
|
-
// Show error state
|
|
90
|
-
setStepStatus("error");
|
|
91
79
|
}
|
|
92
80
|
};
|
|
93
81
|
|
|
@@ -95,44 +83,6 @@ function MyMultiStepper() {
|
|
|
95
83
|
}
|
|
96
84
|
```
|
|
97
85
|
|
|
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} />;
|
|
134
|
-
}
|
|
135
|
-
```
|
|
136
86
|
|
|
137
87
|
### Custom Step Content
|
|
138
88
|
|
|
@@ -183,8 +133,6 @@ const steppers = [
|
|
|
183
133
|
| -------------- | ---------- | -------- | ------------------------------------------- |
|
|
184
134
|
| `completedIcon`| ReactNode | No | Icon to display for completed steps |
|
|
185
135
|
| `activeIcon` | ReactNode | No | Icon to display for the active step |
|
|
186
|
-
| `errorIcon` | ReactNode | No | Icon to display for steps in error state |
|
|
187
|
-
| `loadingIcon` | ReactNode | No | Icon to display for steps in loading state |
|
|
188
136
|
|
|
189
137
|
|
|
190
138
|
### MultiStepper Props
|
|
@@ -207,8 +155,6 @@ const steppers = [
|
|
|
207
155
|
| Status | Description |
|
|
208
156
|
| ------------- | -------------------------------------------------------------- |
|
|
209
157
|
| `"active"` | Step is currently active and ready for user interaction |
|
|
210
|
-
| `"loading"` | Step is processing/validating (shows loading indicator) |
|
|
211
158
|
| `"completed"` | Step has been successfully completed |
|
|
212
|
-
| `"error"` | Step has validation errors or failed processing |
|
|
213
159
|
|
|
214
160
|
---
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
: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(:
|
|
1
|
+
: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-block:var(--spacing-lg);width:100%}.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(:last-child):after{content:"";background-color:var(--color-border-light);position:absolute;width:calc(100% - var(--step-size));height:3px;left: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-finished{background-color:var(--color-success);color:var(--color-white)}.active:not(:last-child):after{background-color:var(--color-border-light)}.complete:not(:last-child):after{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)}.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}@media (max-width: 768px){.stepper-header{border:2px solid red;padding:0%;margin:0%}}
|
package/dist/multi-stepper.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import ce, { createContext as le, useContext as ie, useState as q, useEffect as ue, useCallback as
|
|
2
|
-
import './index.css';var
|
|
1
|
+
import ce, { createContext as le, useContext as ie, useState as q, useEffect as ue, useCallback as g, useMemo as G, Fragment as $ } from "react";
|
|
2
|
+
import './index.css';var P = { exports: {} }, j = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
5
5
|
* react-jsx-runtime.production.js
|
|
@@ -11,27 +11,27 @@ import './index.css';var g = { exports: {} }, R = {};
|
|
|
11
11
|
*/
|
|
12
12
|
var J;
|
|
13
13
|
function fe() {
|
|
14
|
-
if (J) return
|
|
14
|
+
if (J) return j;
|
|
15
15
|
J = 1;
|
|
16
|
-
var t = Symbol.for("react.transitional.element"),
|
|
17
|
-
function n
|
|
18
|
-
var
|
|
19
|
-
if (
|
|
20
|
-
|
|
21
|
-
for (var
|
|
22
|
-
|
|
23
|
-
} else
|
|
24
|
-
return
|
|
16
|
+
var t = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
|
|
17
|
+
function i(n, u, f) {
|
|
18
|
+
var p = null;
|
|
19
|
+
if (f !== void 0 && (p = "" + f), u.key !== void 0 && (p = "" + u.key), "key" in u) {
|
|
20
|
+
f = {};
|
|
21
|
+
for (var h in u)
|
|
22
|
+
h !== "key" && (f[h] = u[h]);
|
|
23
|
+
} else f = u;
|
|
24
|
+
return u = f.ref, {
|
|
25
25
|
$$typeof: t,
|
|
26
|
-
type:
|
|
27
|
-
key:
|
|
28
|
-
ref:
|
|
29
|
-
props:
|
|
26
|
+
type: n,
|
|
27
|
+
key: p,
|
|
28
|
+
ref: u !== void 0 ? u : null,
|
|
29
|
+
props: f
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
return
|
|
32
|
+
return j.Fragment = s, j.jsx = i, j.jsxs = i, j;
|
|
33
33
|
}
|
|
34
|
-
var
|
|
34
|
+
var T = {};
|
|
35
35
|
/**
|
|
36
36
|
* @license React
|
|
37
37
|
* react-jsx-runtime.development.js
|
|
@@ -47,14 +47,14 @@ function de() {
|
|
|
47
47
|
function t(e) {
|
|
48
48
|
if (e == null) return null;
|
|
49
49
|
if (typeof e == "function")
|
|
50
|
-
return e.$$typeof ===
|
|
50
|
+
return e.$$typeof === oe ? null : e.displayName || e.name || null;
|
|
51
51
|
if (typeof e == "string") return e;
|
|
52
52
|
switch (e) {
|
|
53
|
-
case
|
|
53
|
+
case v:
|
|
54
54
|
return "Fragment";
|
|
55
|
-
case B:
|
|
56
|
-
return "Profiler";
|
|
57
55
|
case H:
|
|
56
|
+
return "Profiler";
|
|
57
|
+
case B:
|
|
58
58
|
return "StrictMode";
|
|
59
59
|
case ee:
|
|
60
60
|
return "Suspense";
|
|
@@ -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 c:
|
|
71
71
|
return "Portal";
|
|
72
72
|
case Q:
|
|
73
73
|
return (e.displayName || "Context") + ".Provider";
|
|
@@ -87,12 +87,12 @@ function de() {
|
|
|
87
87
|
}
|
|
88
88
|
return null;
|
|
89
89
|
}
|
|
90
|
-
function
|
|
90
|
+
function s(e) {
|
|
91
91
|
return "" + e;
|
|
92
92
|
}
|
|
93
|
-
function
|
|
93
|
+
function i(e) {
|
|
94
94
|
try {
|
|
95
|
-
|
|
95
|
+
s(e);
|
|
96
96
|
var r = !1;
|
|
97
97
|
} catch {
|
|
98
98
|
r = !0;
|
|
@@ -104,11 +104,11 @@ function de() {
|
|
|
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
106
|
d
|
|
107
|
-
),
|
|
107
|
+
), s(e);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
-
function
|
|
111
|
-
if (e ===
|
|
110
|
+
function n(e) {
|
|
111
|
+
if (e === v) 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
|
|
121
|
+
function u() {
|
|
122
122
|
var e = A.A;
|
|
123
123
|
return e === null ? null : e.getOwner();
|
|
124
124
|
}
|
|
125
|
-
function
|
|
125
|
+
function f() {
|
|
126
126
|
return Error("react-stack-top-frame");
|
|
127
127
|
}
|
|
128
|
-
function
|
|
129
|
-
if (
|
|
128
|
+
function p(e) {
|
|
129
|
+
if (I.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 h(e, r) {
|
|
136
136
|
function a() {
|
|
137
|
-
|
|
137
|
+
M || (M = !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
|
));
|
|
@@ -144,22 +144,22 @@ function de() {
|
|
|
144
144
|
configurable: !0
|
|
145
145
|
});
|
|
146
146
|
}
|
|
147
|
-
function
|
|
147
|
+
function S() {
|
|
148
148
|
var e = t(this.type);
|
|
149
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 N(e, r, a, d, E, x, y, C) {
|
|
154
|
+
return a = x.ref, e = {
|
|
155
|
+
$$typeof: b,
|
|
156
156
|
type: e,
|
|
157
157
|
key: r,
|
|
158
|
-
props:
|
|
158
|
+
props: x,
|
|
159
159
|
_owner: E
|
|
160
160
|
}, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
|
|
161
161
|
enumerable: !1,
|
|
162
|
-
get:
|
|
162
|
+
get: S
|
|
163
163
|
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
164
164
|
configurable: !1,
|
|
165
165
|
enumerable: !1,
|
|
@@ -182,20 +182,20 @@ function de() {
|
|
|
182
182
|
value: C
|
|
183
183
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
184
184
|
}
|
|
185
|
-
function
|
|
185
|
+
function R(e, r, a, d, E, x, y, C) {
|
|
186
186
|
var m = r.children;
|
|
187
187
|
if (m !== void 0)
|
|
188
188
|
if (d)
|
|
189
|
-
if (
|
|
189
|
+
if (se(m)) {
|
|
190
190
|
for (d = 0; d < m.length; d++)
|
|
191
|
-
|
|
191
|
+
k(m[d]);
|
|
192
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 (
|
|
197
|
+
else k(m);
|
|
198
|
+
if (I.call(r, "key")) {
|
|
199
199
|
m = t(e);
|
|
200
200
|
var _ = Object.keys(r).filter(function(ae) {
|
|
201
201
|
return ae !== "key";
|
|
@@ -213,195 +213,201 @@ React keys must be passed directly to JSX without using spread:
|
|
|
213
213
|
m
|
|
214
214
|
), U[m + d] = !0);
|
|
215
215
|
}
|
|
216
|
-
if (m = null, a !== void 0 && (
|
|
216
|
+
if (m = null, a !== void 0 && (i(a), m = "" + a), p(r) && (i(r.key), m = "" + r.key), "key" in r) {
|
|
217
217
|
a = {};
|
|
218
218
|
for (var Y in r)
|
|
219
219
|
Y !== "key" && (a[Y] = r[Y]);
|
|
220
220
|
} else a = r;
|
|
221
|
-
return m &&
|
|
221
|
+
return m && h(
|
|
222
222
|
a,
|
|
223
223
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
224
|
-
),
|
|
224
|
+
), N(
|
|
225
225
|
e,
|
|
226
226
|
m,
|
|
227
|
-
|
|
227
|
+
x,
|
|
228
228
|
E,
|
|
229
|
-
|
|
229
|
+
u(),
|
|
230
230
|
a,
|
|
231
231
|
y,
|
|
232
232
|
C
|
|
233
233
|
);
|
|
234
234
|
}
|
|
235
|
-
function
|
|
236
|
-
typeof e == "object" && e !== null && e.$$typeof ===
|
|
235
|
+
function k(e) {
|
|
236
|
+
typeof e == "object" && e !== null && e.$$typeof === b && e._store && (e._store.validated = 1);
|
|
237
237
|
}
|
|
238
|
-
var
|
|
238
|
+
var l = ce, b = Symbol.for("react.transitional.element"), c = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), B = Symbol.for("react.strict_mode"), H = 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"), oe = Symbol.for("react.client.reference"), A = l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, se = Array.isArray, w = console.createTask ? console.createTask : function() {
|
|
239
239
|
return null;
|
|
240
240
|
};
|
|
241
|
-
|
|
241
|
+
l = {
|
|
242
242
|
react_stack_bottom_frame: function(e) {
|
|
243
243
|
return e();
|
|
244
244
|
}
|
|
245
245
|
};
|
|
246
|
-
var
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
)(), W = w(
|
|
250
|
-
|
|
251
|
-
var
|
|
252
|
-
return
|
|
246
|
+
var M, D = {}, L = l.react_stack_bottom_frame.bind(
|
|
247
|
+
l,
|
|
248
|
+
f
|
|
249
|
+
)(), W = w(n(f)), U = {};
|
|
250
|
+
T.Fragment = v, T.jsx = function(e, r, a, d, E) {
|
|
251
|
+
var x = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
252
|
+
return R(
|
|
253
253
|
e,
|
|
254
254
|
r,
|
|
255
255
|
a,
|
|
256
256
|
!1,
|
|
257
257
|
d,
|
|
258
258
|
E,
|
|
259
|
-
|
|
260
|
-
|
|
259
|
+
x ? Error("react-stack-top-frame") : L,
|
|
260
|
+
x ? w(n(e)) : W
|
|
261
261
|
);
|
|
262
|
-
},
|
|
263
|
-
var
|
|
264
|
-
return
|
|
262
|
+
}, T.jsxs = function(e, r, a, d, E) {
|
|
263
|
+
var x = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
264
|
+
return R(
|
|
265
265
|
e,
|
|
266
266
|
r,
|
|
267
267
|
a,
|
|
268
268
|
!0,
|
|
269
269
|
d,
|
|
270
270
|
E,
|
|
271
|
-
|
|
272
|
-
|
|
271
|
+
x ? Error("react-stack-top-frame") : L,
|
|
272
|
+
x ? w(n(e)) : W
|
|
273
273
|
);
|
|
274
274
|
};
|
|
275
|
-
}()),
|
|
275
|
+
}()), T;
|
|
276
276
|
}
|
|
277
277
|
var z;
|
|
278
278
|
function me() {
|
|
279
|
-
return z || (z = 1, process.env.NODE_ENV === "production" ?
|
|
279
|
+
return z || (z = 1, process.env.NODE_ENV === "production" ? P.exports = fe() : P.exports = de()), P.exports;
|
|
280
280
|
}
|
|
281
|
-
var
|
|
281
|
+
var o = me();
|
|
282
282
|
const X = le(
|
|
283
283
|
void 0
|
|
284
|
-
),
|
|
284
|
+
), O = () => {
|
|
285
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
|
-
}, Ee = ({ children: t, steppers:
|
|
292
|
-
const [n,
|
|
291
|
+
}, Ee = ({ children: t, steppers: s, options: i }) => {
|
|
292
|
+
const [n, u] = q(0), [f, p] = q([]);
|
|
293
293
|
ue(() => {
|
|
294
|
-
if (
|
|
295
|
-
const
|
|
296
|
-
|
|
294
|
+
if (s.length) {
|
|
295
|
+
const l = [...s];
|
|
296
|
+
l[0].active = !0, p(l);
|
|
297
297
|
}
|
|
298
|
-
}, [
|
|
299
|
-
const
|
|
300
|
-
|
|
301
|
-
const c = [...
|
|
302
|
-
if (
|
|
303
|
-
c[n] && (c[n] = { ...c[n], active: !1 }), c[
|
|
304
|
-
for (let v = 0; v <
|
|
298
|
+
}, [s, s.length]);
|
|
299
|
+
const h = g((l) => {
|
|
300
|
+
p((b) => {
|
|
301
|
+
const c = [...b];
|
|
302
|
+
if (l > b.length - 1) return b;
|
|
303
|
+
c[n] && (c[n] = { ...c[n], active: !1 }), c[l] && (c[l] = { ...c[l], active: !0 });
|
|
304
|
+
for (let v = 0; v < l; v++)
|
|
305
305
|
c[v] = { ...c[v], completed: !0 };
|
|
306
|
-
for (let v =
|
|
306
|
+
for (let v = l; v < c.length; v++)
|
|
307
307
|
c[v] = { ...c[v], completed: !1 };
|
|
308
308
|
return c;
|
|
309
|
-
}),
|
|
310
|
-
}, [n]),
|
|
311
|
-
n <
|
|
312
|
-
const
|
|
313
|
-
return
|
|
309
|
+
}), u(l);
|
|
310
|
+
}, [n]), S = g(() => {
|
|
311
|
+
n < f.length - 1 ? h(n + 1) : p((l) => {
|
|
312
|
+
const b = [...l];
|
|
313
|
+
return b[n] = { ...b[n], completed: !0 }, b;
|
|
314
314
|
});
|
|
315
|
-
}, [n,
|
|
316
|
-
n > 0 &&
|
|
317
|
-
}, [n,
|
|
318
|
-
(
|
|
319
|
-
|
|
320
|
-
const c = [...
|
|
315
|
+
}, [n, f.length, h]), N = g(() => {
|
|
316
|
+
n > 0 && h(n - 1);
|
|
317
|
+
}, [n, h]), R = g(
|
|
318
|
+
(l) => {
|
|
319
|
+
p((b) => {
|
|
320
|
+
const c = [...b];
|
|
321
321
|
return c[n] && (c[n] = {
|
|
322
322
|
...c[n],
|
|
323
|
-
error: !1,
|
|
324
|
-
loading: !1,
|
|
325
323
|
active: !1,
|
|
326
324
|
completed: !1
|
|
327
|
-
}, c[n][
|
|
325
|
+
}, c[n][l] = !0), c;
|
|
328
326
|
});
|
|
329
327
|
},
|
|
330
328
|
[n]
|
|
331
|
-
),
|
|
329
|
+
), k = G(
|
|
332
330
|
() => ({
|
|
333
331
|
currentStep: n,
|
|
334
|
-
steps:
|
|
335
|
-
handleNextStep:
|
|
336
|
-
handlePrevStep:
|
|
337
|
-
updateSteps:
|
|
338
|
-
setStepStatus:
|
|
332
|
+
steps: f,
|
|
333
|
+
handleNextStep: S,
|
|
334
|
+
handlePrevStep: N,
|
|
335
|
+
updateSteps: h,
|
|
336
|
+
setStepStatus: R,
|
|
337
|
+
// styles,
|
|
338
|
+
options: i
|
|
339
339
|
}),
|
|
340
|
-
[n,
|
|
340
|
+
[n, f, S, N, h, R, i]
|
|
341
341
|
);
|
|
342
|
-
return /* @__PURE__ */
|
|
342
|
+
return /* @__PURE__ */ o.jsx(X.Provider, { value: k, children: t });
|
|
343
343
|
}, pe = () => {
|
|
344
|
-
const { steps: t, currentStep:
|
|
345
|
-
return /* @__PURE__ */
|
|
344
|
+
const { steps: t, currentStep: s } = O();
|
|
345
|
+
return /* @__PURE__ */ o.jsx("div", { className: "stepper-content", children: t[s] && t[s].children && t[s].children });
|
|
346
346
|
}, ve = ({ onClickNext: t }) => {
|
|
347
|
-
const { handlePrevStep:
|
|
348
|
-
|
|
349
|
-
},
|
|
347
|
+
const { handlePrevStep: s, currentStep: i, steps: n } = O(), u = i === n.length - 1, f = () => {
|
|
348
|
+
n[i].completed || t();
|
|
349
|
+
}, p = G(() => ({
|
|
350
350
|
button: "stepper-button",
|
|
351
351
|
fill: "stepper-button-fill"
|
|
352
352
|
}), []);
|
|
353
|
-
return /* @__PURE__ */
|
|
354
|
-
/* @__PURE__ */
|
|
353
|
+
return /* @__PURE__ */ o.jsxs("div", { className: "stepper-footer", children: [
|
|
354
|
+
/* @__PURE__ */ o.jsx(
|
|
355
355
|
"button",
|
|
356
356
|
{
|
|
357
357
|
type: "button",
|
|
358
|
-
className:
|
|
359
|
-
onClick:
|
|
360
|
-
disabled:
|
|
358
|
+
className: p.button,
|
|
359
|
+
onClick: s,
|
|
360
|
+
disabled: i < 0,
|
|
361
|
+
style: {
|
|
362
|
+
cursor: i <= 0 ? "not-allowed" : "pointer"
|
|
363
|
+
},
|
|
361
364
|
children: "Prev"
|
|
362
365
|
}
|
|
363
366
|
),
|
|
364
|
-
/* @__PURE__ */
|
|
367
|
+
/* @__PURE__ */ o.jsx(
|
|
365
368
|
"button",
|
|
366
369
|
{
|
|
367
370
|
type: "button",
|
|
368
|
-
className: `${
|
|
369
|
-
onClick:
|
|
370
|
-
children:
|
|
371
|
+
className: `${u ? `${p.button} ${p.fill}` : p.button}`,
|
|
372
|
+
onClick: f,
|
|
373
|
+
children: u ? "Finish" : "Next"
|
|
371
374
|
}
|
|
372
375
|
)
|
|
373
376
|
] });
|
|
374
377
|
}, he = ({
|
|
375
378
|
step: t,
|
|
376
|
-
index:
|
|
379
|
+
index: s
|
|
377
380
|
}) => {
|
|
378
|
-
const { steps: n } =
|
|
379
|
-
return
|
|
381
|
+
const { steps: i, options: n } = O();
|
|
382
|
+
return i.length ? t.loading ? /* @__PURE__ */ o.jsx("div", { className: "step step-active", children: /* @__PURE__ */ o.jsx("div", { className: "spinner", role: "status", "aria-label": "Loading" }) }) : t.error ? /* @__PURE__ */ o.jsx("div", { className: "step step-error", children: t.icon ? t.icon : n?.errorIcon ?? /* @__PURE__ */ o.jsx("span", { className: "text-white", children: "โ" }) }) : t.completed ? /* @__PURE__ */ o.jsx("div", { className: "step step-complete", children: t.icon ? t.icon : n?.completedIcon ?? /* @__PURE__ */ o.jsx("span", { className: "text-white", children: "โ" }) }) : t.finshed ? /* @__PURE__ */ o.jsx("div", { className: "step step-complete", children: t.icon }) : t.active ? /* @__PURE__ */ o.jsx("div", { className: "step step-active", children: t.icon ? t.icon : n?.activeIcon ?? /* @__PURE__ */ o.jsx("h2", { className: "text-white", children: s }) }) : /* @__PURE__ */ o.jsx("div", { className: "step step-default", children: t.icon ?? /* @__PURE__ */ o.jsx("h2", { children: s }) }) : /* @__PURE__ */ o.jsx($, {});
|
|
380
383
|
}, be = () => {
|
|
381
|
-
const { steps: t } =
|
|
382
|
-
return t.length ? /* @__PURE__ */
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
384
|
+
const { steps: t } = O();
|
|
385
|
+
return t.length ? /* @__PURE__ */ o.jsx("div", { className: "app-container", children: /* @__PURE__ */ o.jsx("ol", { className: "stepper-header", children: t.map((s, i) => {
|
|
386
|
+
const n = !!s.active, u = !!s.completed;
|
|
387
|
+
return /* @__PURE__ */ o.jsxs(
|
|
388
|
+
"div",
|
|
389
|
+
{
|
|
390
|
+
className: `step-item ${n ? "active" : ""} ${u ? "complete" : ""}`,
|
|
391
|
+
children: [
|
|
392
|
+
/* @__PURE__ */ o.jsx(he, { index: i + 1, step: s }),
|
|
393
|
+
/* @__PURE__ */ o.jsxs("div", { className: "step-text", children: [
|
|
394
|
+
s.title && /* @__PURE__ */ o.jsx("h3", { className: "step-title", children: s.title }),
|
|
395
|
+
s.description && /* @__PURE__ */ o.jsx("h3", { className: "step-description", children: s.description })
|
|
396
|
+
] })
|
|
397
|
+
]
|
|
398
|
+
},
|
|
399
|
+
s.id ?? i
|
|
400
|
+
);
|
|
401
|
+
}) }) }) : /* @__PURE__ */ o.jsx($, {});
|
|
396
402
|
}, _e = ({
|
|
397
403
|
onClickNext: t
|
|
398
|
-
}) => /* @__PURE__ */
|
|
399
|
-
/* @__PURE__ */
|
|
400
|
-
/* @__PURE__ */
|
|
401
|
-
/* @__PURE__ */
|
|
404
|
+
}) => /* @__PURE__ */ o.jsxs($, { children: [
|
|
405
|
+
/* @__PURE__ */ o.jsx(be, {}),
|
|
406
|
+
/* @__PURE__ */ o.jsx(pe, {}),
|
|
407
|
+
/* @__PURE__ */ o.jsx(ve, { onClickNext: t })
|
|
402
408
|
] });
|
|
403
409
|
export {
|
|
404
410
|
_e as MultiStepper,
|
|
405
411
|
Ee as MultiStepperProvider,
|
|
406
|
-
|
|
412
|
+
O as useMultiStepper
|
|
407
413
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(
|
|
1
|
+
(function(E,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],i):(E=typeof globalThis<"u"?globalThis:E||self,i(E["multi-stepper"]={},E.React))})(this,function(E,i){"use strict";var Y=document.createElement("style");Y.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-block:var(--spacing-lg);width:100%}.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(:last-child):after{content:"";background-color:var(--color-border-light);position:absolute;width:calc(100% - var(--step-size));height:3px;left: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-finished{background-color:var(--color-success);color:var(--color-white)}.active:not(:last-child):after{background-color:var(--color-border-light)}.complete:not(:last-child):after{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)}.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}@media (max-width: 768px){.stepper-header{border:2px solid red;padding:0%;margin:0%}}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(Y);var T={exports:{}},R={};/**
|
|
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 I;function H(){if(I)return R;I=1;var r=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function u(n,d,p){var v=null;if(p!==void 0&&(v=""+p),d.key!==void 0&&(v=""+d.key),"key"in d){p={};for(var b in d)b!=="key"&&(p[b]=d[b])}else p=d;return d=p.ref,{$$typeof:r,type:n,key:v,ref:d!==void 0?d:null,props:p}}return R.Fragment=s,R.jsx=u,R.jsxs=u,R}var k={};/**
|
|
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 z;function Z(){return z||(z=1,process.env.NODE_ENV!=="production"&&function(){function r(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 h:return"Fragment";case oe:return"Profiler";case ne:return"StrictMode";case ie: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 c:return"Portal";case ae:return(e.displayName||"Context")+".Provider";case se:return(e._context.displayName||"Context")+".Consumer";case ce:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return t=e.displayName||null,t!==null?t:r(e.type)||"Memo";case U:t=e._payload,e=e._init;try{return r(e(t))}catch{}}return null}function s(e){return""+e}function u(e){try{s(e);var t=!1}catch{t=!0}if(t){t=console;var a=t.error,f=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",f),s(e)}}function n(e){if(e===h)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===U)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function d(){var e=O.A;return e===null?null:e.getOwner()}function p(){return Error("react-stack-top-frame")}function v(e){if(W.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function b(e,t){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)",t))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function w(){var e=r(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 N(e,t,a,f,_,x,C,M){return a=x.ref,e={$$typeof:g,type:e,key:t,props:x,_owner:_},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:w}):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 y(e,t,a,f,_,x,C,M){var m=t.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(t,"key")){m=r(e);var j=Object.keys(t).filter(function(me){return me!=="key"});f=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",X[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} />`,f,m,j,m),
|
|
23
|
+
<%s key={someKey} {...props} />`,f,m,j,m),X[m+f]=!0)}if(m=null,a!==void 0&&(u(a),m=""+a),v(t)&&(u(t.key),m=""+t.key),"key"in t){a={};for(var F in t)F!=="key"&&(a[F]=t[F])}else a=t;return m&&b(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),N(e,m,x,_,d(),a,C,M)}function P(e){typeof e=="object"&&e!==null&&e.$$typeof===g&&e._store&&(e._store.validated=1)}var l=i,g=Symbol.for("react.transitional.element"),c=Symbol.for("react.portal"),h=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"),ce=Symbol.for("react.forward_ref"),ie=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=l.__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};l={react_stack_bottom_frame:function(e){return e()}};var J,V={},G=l.react_stack_bottom_frame.bind(l,p)(),B=A(n(p)),X={};k.Fragment=h,k.jsx=function(e,t,a,f,_){var x=1e4>O.recentlyCreatedOwnerStacks++;return y(e,t,a,!1,f,_,x?Error("react-stack-top-frame"):G,x?A(n(e)):B)},k.jsxs=function(e,t,a,f,_){var x=1e4>O.recentlyCreatedOwnerStacks++;return y(e,t,a,!0,f,_,x?Error("react-stack-top-frame"):G,x?A(n(e)):B)}}()),k}var D;function Q(){return D||(D=1,process.env.NODE_ENV==="production"?T.exports=H():T.exports=Z()),T.exports}var o=Q();const L=i.createContext(void 0),S=()=>{const r=i.useContext(L);if(!r)throw new Error("useMultiStepperForm must be used within a MultiStepperProvider");return r},K=({children:r,steppers:s,options:u})=>{const[n,d]=i.useState(0),[p,v]=i.useState([]);i.useEffect(()=>{if(s.length){const l=[...s];l[0].active=!0,v(l)}},[s,s.length]);const b=i.useCallback(l=>{v(g=>{const c=[...g];if(l>g.length-1)return g;c[n]&&(c[n]={...c[n],active:!1}),c[l]&&(c[l]={...c[l],active:!0});for(let h=0;h<l;h++)c[h]={...c[h],completed:!0};for(let h=l;h<c.length;h++)c[h]={...c[h],completed:!1};return c}),d(l)},[n]),w=i.useCallback(()=>{n<p.length-1?b(n+1):v(l=>{const g=[...l];return g[n]={...g[n],completed:!0},g})},[n,p.length,b]),N=i.useCallback(()=>{n>0&&b(n-1)},[n,b]),y=i.useCallback(l=>{v(g=>{const c=[...g];return c[n]&&(c[n]={...c[n],active:!1,completed:!1},c[n][l]=!0),c})},[n]),P=i.useMemo(()=>({currentStep:n,steps:p,handleNextStep:w,handlePrevStep:N,updateSteps:b,setStepStatus:y,options:u}),[n,p,w,N,b,y,u]);return o.jsx(L.Provider,{value:P,children:r})},q=()=>{const{steps:r,currentStep:s}=S();return o.jsx("div",{className:"stepper-content",children:r[s]&&r[s].children&&r[s].children})},$=({onClickNext:r})=>{const{handlePrevStep:s,currentStep:u,steps:n}=S(),d=u===n.length-1,p=()=>{n[u].completed||r()},v=i.useMemo(()=>({button:"stepper-button",fill:"stepper-button-fill"}),[]);return o.jsxs("div",{className:"stepper-footer",children:[o.jsx("button",{type:"button",className:v.button,onClick:s,disabled:u<0,style:{cursor:u<=0?"not-allowed":"pointer"},children:"Prev"}),o.jsx("button",{type:"button",className:`${d?`${v.button} ${v.fill}`:v.button}`,onClick:p,children:d?"Finish":"Next"})]})},ee=({step:r,index:s})=>{const{steps:u,options:n}=S();return u.length?r.loading?o.jsx("div",{className:"step step-active",children:o.jsx("div",{className:"spinner",role:"status","aria-label":"Loading"})}):r.error?o.jsx("div",{className:"step step-error",children:r.icon?r.icon:n?.errorIcon??o.jsx("span",{className:"text-white",children:"โ"})}):r.completed?o.jsx("div",{className:"step step-complete",children:r.icon?r.icon:n?.completedIcon??o.jsx("span",{className:"text-white",children:"โ"})}):r.finshed?o.jsx("div",{className:"step step-complete",children:r.icon}):r.active?o.jsx("div",{className:"step step-active",children:r.icon?r.icon:n?.activeIcon??o.jsx("h2",{className:"text-white",children:s})}):o.jsx("div",{className:"step step-default",children:r.icon??o.jsx("h2",{children:s})}):o.jsx(i.Fragment,{})},te=()=>{const{steps:r}=S();return r.length?o.jsx("div",{className:"app-container",children:o.jsx("ol",{className:"stepper-header",children:r.map((s,u)=>{const n=!!s.active,d=!!s.completed;return o.jsxs("div",{className:`step-item ${n?"active":""} ${d?"complete":""}`,children:[o.jsx(ee,{index:u+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})]})]},s.id??u)})})}):o.jsx(i.Fragment,{})},re=({onClickNext:r})=>o.jsxs(i.Fragment,{children:[o.jsx(te,{}),o.jsx(q,{}),o.jsx($,{onClickNext:r})]});E.MultiStepper=re,E.MultiStepperProvider=K,E.useMultiStepper=S,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -3,13 +3,16 @@
|
|
|
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.8",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"repository": {
|
|
9
9
|
"url": "https://github.com/UppiliSrinivas/react-stepper/tree/multi-stepper"
|
|
10
10
|
},
|
|
11
11
|
"files": [
|
|
12
|
-
"dist"
|
|
12
|
+
"dist",
|
|
13
|
+
"assets",
|
|
14
|
+
"README.md",
|
|
15
|
+
"LICENSE"
|
|
13
16
|
],
|
|
14
17
|
"exports": {
|
|
15
18
|
".": {
|