reactjs-multi-stepper 1.2.6 โ 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 +197 -196
- package/dist/multi-stepper.umd.js +5 -5
- package/package.json +1 -1
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(: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-
|
|
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,4 +1,4 @@
|
|
|
1
|
-
import ce, { createContext as le, useContext as ie, useState as q, useEffect as ue, useCallback as
|
|
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
2
|
import './index.css';var P = { exports: {} }, j = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
@@ -10,26 +10,26 @@ import './index.css';var P = { exports: {} }, j = {};
|
|
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
|
11
11
|
*/
|
|
12
12
|
var J;
|
|
13
|
-
function
|
|
13
|
+
function fe() {
|
|
14
14
|
if (J) return j;
|
|
15
15
|
J = 1;
|
|
16
|
-
var
|
|
17
|
-
function
|
|
18
|
-
var
|
|
19
|
-
if (
|
|
20
|
-
|
|
21
|
-
for (var h in
|
|
22
|
-
h !== "key" && (
|
|
23
|
-
} else
|
|
24
|
-
return
|
|
25
|
-
$$typeof:
|
|
26
|
-
type:
|
|
27
|
-
key:
|
|
28
|
-
ref:
|
|
29
|
-
props:
|
|
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
|
+
$$typeof: t,
|
|
26
|
+
type: n,
|
|
27
|
+
key: p,
|
|
28
|
+
ref: u !== void 0 ? u : null,
|
|
29
|
+
props: f
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
return j.Fragment =
|
|
32
|
+
return j.Fragment = s, j.jsx = i, j.jsxs = i, j;
|
|
33
33
|
}
|
|
34
34
|
var T = {};
|
|
35
35
|
/**
|
|
@@ -42,9 +42,9 @@ var T = {};
|
|
|
42
42
|
* LICENSE file in the root directory of this source tree.
|
|
43
43
|
*/
|
|
44
44
|
var V;
|
|
45
|
-
function
|
|
45
|
+
function de() {
|
|
46
46
|
return V || (V = 1, process.env.NODE_ENV !== "production" && function() {
|
|
47
|
-
function
|
|
47
|
+
function t(e) {
|
|
48
48
|
if (e == null) return null;
|
|
49
49
|
if (typeof e == "function")
|
|
50
50
|
return e.$$typeof === oe ? null : e.displayName || e.name || null;
|
|
@@ -52,9 +52,9 @@ function fe() {
|
|
|
52
52
|
switch (e) {
|
|
53
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,97 +67,97 @@ function fe() {
|
|
|
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";
|
|
74
74
|
case Z:
|
|
75
75
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
76
76
|
case K:
|
|
77
|
-
var
|
|
78
|
-
return e = e.displayName, e || (e =
|
|
77
|
+
var r = e.render;
|
|
78
|
+
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
79
79
|
case te:
|
|
80
|
-
return
|
|
80
|
+
return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
|
|
81
81
|
case F:
|
|
82
|
-
|
|
82
|
+
r = e._payload, e = e._init;
|
|
83
83
|
try {
|
|
84
|
-
return
|
|
84
|
+
return t(e(r));
|
|
85
85
|
} catch {
|
|
86
86
|
}
|
|
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
|
-
|
|
96
|
-
var
|
|
95
|
+
s(e);
|
|
96
|
+
var r = !1;
|
|
97
97
|
} catch {
|
|
98
|
-
|
|
98
|
+
r = !0;
|
|
99
99
|
}
|
|
100
|
-
if (
|
|
101
|
-
|
|
102
|
-
var
|
|
103
|
-
return
|
|
104
|
-
|
|
100
|
+
if (r) {
|
|
101
|
+
r = console;
|
|
102
|
+
var a = r.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
103
|
+
return a.call(
|
|
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
|
+
), s(e);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
-
function
|
|
110
|
+
function n(e) {
|
|
111
111
|
if (e === v) return "<>";
|
|
112
112
|
if (typeof e == "object" && e !== null && e.$$typeof === F)
|
|
113
113
|
return "<...>";
|
|
114
114
|
try {
|
|
115
|
-
var
|
|
116
|
-
return
|
|
115
|
+
var r = t(e);
|
|
116
|
+
return r ? "<" + r + ">" : "<...>";
|
|
117
117
|
} catch {
|
|
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
|
|
128
|
+
function p(e) {
|
|
129
129
|
if (I.call(e, "key")) {
|
|
130
|
-
var
|
|
131
|
-
if (
|
|
130
|
+
var r = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
131
|
+
if (r && r.isReactWarning) return !1;
|
|
132
132
|
}
|
|
133
133
|
return e.key !== void 0;
|
|
134
134
|
}
|
|
135
|
-
function h(e,
|
|
136
|
-
function
|
|
135
|
+
function h(e, r) {
|
|
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
|
));
|
|
141
141
|
}
|
|
142
|
-
|
|
143
|
-
get:
|
|
142
|
+
a.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
143
|
+
get: a,
|
|
144
144
|
configurable: !0
|
|
145
145
|
});
|
|
146
146
|
}
|
|
147
147
|
function S() {
|
|
148
|
-
var e =
|
|
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
|
|
153
|
+
function N(e, r, a, d, E, x, y, C) {
|
|
154
|
+
return a = x.ref, e = {
|
|
155
155
|
$$typeof: b,
|
|
156
156
|
type: e,
|
|
157
|
-
key:
|
|
158
|
-
props:
|
|
159
|
-
_owner:
|
|
160
|
-
}, (
|
|
157
|
+
key: r,
|
|
158
|
+
props: x,
|
|
159
|
+
_owner: E
|
|
160
|
+
}, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
|
|
161
161
|
enumerable: !1,
|
|
162
162
|
get: S
|
|
163
163
|
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
@@ -174,239 +174,240 @@ function fe() {
|
|
|
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 R(e,
|
|
186
|
-
var
|
|
187
|
-
if (
|
|
188
|
-
if (
|
|
189
|
-
if (
|
|
190
|
-
for (
|
|
191
|
-
|
|
192
|
-
Object.freeze && Object.freeze(
|
|
185
|
+
function R(e, r, a, d, E, x, y, C) {
|
|
186
|
+
var m = r.children;
|
|
187
|
+
if (m !== void 0)
|
|
188
|
+
if (d)
|
|
189
|
+
if (se(m)) {
|
|
190
|
+
for (d = 0; d < m.length; d++)
|
|
191
|
+
k(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 (I.call(
|
|
199
|
-
|
|
200
|
-
var _ = Object.keys(
|
|
201
|
-
return
|
|
197
|
+
else k(m);
|
|
198
|
+
if (I.call(r, "key")) {
|
|
199
|
+
m = t(e);
|
|
200
|
+
var _ = Object.keys(r).filter(function(ae) {
|
|
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
|
+
d,
|
|
210
211
|
m,
|
|
211
|
-
p,
|
|
212
212
|
_,
|
|
213
|
-
|
|
214
|
-
), U[
|
|
213
|
+
m
|
|
214
|
+
), U[m + d] = !0);
|
|
215
215
|
}
|
|
216
|
-
if (
|
|
217
|
-
|
|
218
|
-
for (var
|
|
219
|
-
|
|
220
|
-
} else
|
|
221
|
-
return
|
|
222
|
-
|
|
216
|
+
if (m = null, a !== void 0 && (i(a), m = "" + a), p(r) && (i(r.key), m = "" + r.key), "key" in r) {
|
|
217
|
+
a = {};
|
|
218
|
+
for (var Y in r)
|
|
219
|
+
Y !== "key" && (a[Y] = r[Y]);
|
|
220
|
+
} else a = r;
|
|
221
|
+
return m && h(
|
|
222
|
+
a,
|
|
223
223
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
224
|
-
),
|
|
224
|
+
), N(
|
|
225
225
|
e,
|
|
226
|
-
|
|
227
|
-
E,
|
|
226
|
+
m,
|
|
228
227
|
x,
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
y
|
|
228
|
+
E,
|
|
229
|
+
u(),
|
|
230
|
+
a,
|
|
231
|
+
y,
|
|
232
|
+
C
|
|
233
233
|
);
|
|
234
234
|
}
|
|
235
|
-
function
|
|
235
|
+
function k(e) {
|
|
236
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 M, D = {}, L =
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
)(), W = w(
|
|
250
|
-
T.Fragment = v, T.jsx = function(e,
|
|
251
|
-
var
|
|
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
252
|
return R(
|
|
253
253
|
e,
|
|
254
|
-
|
|
255
|
-
|
|
254
|
+
r,
|
|
255
|
+
a,
|
|
256
256
|
!1,
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
257
|
+
d,
|
|
258
|
+
E,
|
|
259
|
+
x ? Error("react-stack-top-frame") : L,
|
|
260
|
+
x ? w(n(e)) : W
|
|
261
261
|
);
|
|
262
|
-
}, T.jsxs = function(e,
|
|
263
|
-
var
|
|
262
|
+
}, T.jsxs = function(e, r, a, d, E) {
|
|
263
|
+
var x = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
264
264
|
return R(
|
|
265
265
|
e,
|
|
266
|
-
|
|
267
|
-
|
|
266
|
+
r,
|
|
267
|
+
a,
|
|
268
268
|
!0,
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
269
|
+
d,
|
|
270
|
+
E,
|
|
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" ? P.exports =
|
|
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
|
-
const
|
|
286
|
-
if (!
|
|
285
|
+
const t = ie(X);
|
|
286
|
+
if (!t)
|
|
287
287
|
throw new Error(
|
|
288
288
|
"useMultiStepperForm must be used within a MultiStepperProvider"
|
|
289
289
|
);
|
|
290
|
-
return
|
|
291
|
-
},
|
|
292
|
-
const [
|
|
290
|
+
return t;
|
|
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 h =
|
|
300
|
-
|
|
301
|
-
const
|
|
302
|
-
if (
|
|
303
|
-
|
|
304
|
-
for (let v = 0; v <
|
|
305
|
-
|
|
306
|
-
for (let v =
|
|
307
|
-
|
|
308
|
-
return
|
|
309
|
-
}),
|
|
310
|
-
}, [
|
|
311
|
-
|
|
312
|
-
const b = [...
|
|
313
|
-
return b[
|
|
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
|
+
c[v] = { ...c[v], completed: !0 };
|
|
306
|
+
for (let v = l; v < c.length; v++)
|
|
307
|
+
c[v] = { ...c[v], completed: !1 };
|
|
308
|
+
return c;
|
|
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
|
-
}, [
|
|
316
|
-
|
|
317
|
-
}, [
|
|
318
|
-
(
|
|
319
|
-
|
|
320
|
-
const
|
|
321
|
-
return
|
|
322
|
-
...
|
|
323
|
-
error: !1,
|
|
324
|
-
loading: !1,
|
|
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
|
+
return c[n] && (c[n] = {
|
|
322
|
+
...c[n],
|
|
325
323
|
active: !1,
|
|
326
324
|
completed: !1
|
|
327
|
-
},
|
|
325
|
+
}, c[n][l] = !0), c;
|
|
328
326
|
});
|
|
329
327
|
},
|
|
330
|
-
[
|
|
331
|
-
),
|
|
328
|
+
[n]
|
|
329
|
+
), k = G(
|
|
332
330
|
() => ({
|
|
333
|
-
currentStep:
|
|
334
|
-
steps:
|
|
331
|
+
currentStep: n,
|
|
332
|
+
steps: f,
|
|
335
333
|
handleNextStep: S,
|
|
336
|
-
handlePrevStep:
|
|
334
|
+
handlePrevStep: N,
|
|
337
335
|
updateSteps: h,
|
|
338
336
|
setStepStatus: R,
|
|
339
337
|
// styles,
|
|
340
|
-
options:
|
|
338
|
+
options: i
|
|
341
339
|
}),
|
|
342
|
-
[
|
|
340
|
+
[n, f, S, N, h, R, i]
|
|
343
341
|
);
|
|
344
|
-
return /* @__PURE__ */
|
|
342
|
+
return /* @__PURE__ */ o.jsx(X.Provider, { value: k, children: t });
|
|
345
343
|
}, pe = () => {
|
|
346
|
-
const { steps:
|
|
347
|
-
return /* @__PURE__ */
|
|
348
|
-
}, ve = ({ onClickNext:
|
|
349
|
-
const { handlePrevStep:
|
|
350
|
-
|
|
351
|
-
},
|
|
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
|
+
}, ve = ({ onClickNext: t }) => {
|
|
347
|
+
const { handlePrevStep: s, currentStep: i, steps: n } = O(), u = i === n.length - 1, f = () => {
|
|
348
|
+
n[i].completed || t();
|
|
349
|
+
}, p = G(() => ({
|
|
352
350
|
button: "stepper-button",
|
|
353
351
|
fill: "stepper-button-fill"
|
|
354
352
|
}), []);
|
|
355
|
-
return /* @__PURE__ */
|
|
356
|
-
/* @__PURE__ */
|
|
353
|
+
return /* @__PURE__ */ o.jsxs("div", { className: "stepper-footer", children: [
|
|
354
|
+
/* @__PURE__ */ o.jsx(
|
|
357
355
|
"button",
|
|
358
356
|
{
|
|
359
357
|
type: "button",
|
|
360
|
-
className:
|
|
361
|
-
onClick:
|
|
362
|
-
disabled:
|
|
358
|
+
className: p.button,
|
|
359
|
+
onClick: s,
|
|
360
|
+
disabled: i < 0,
|
|
361
|
+
style: {
|
|
362
|
+
cursor: i <= 0 ? "not-allowed" : "pointer"
|
|
363
|
+
},
|
|
363
364
|
children: "Prev"
|
|
364
365
|
}
|
|
365
366
|
),
|
|
366
|
-
/* @__PURE__ */
|
|
367
|
+
/* @__PURE__ */ o.jsx(
|
|
367
368
|
"button",
|
|
368
369
|
{
|
|
369
370
|
type: "button",
|
|
370
|
-
className: `${
|
|
371
|
-
onClick:
|
|
372
|
-
children:
|
|
371
|
+
className: `${u ? `${p.button} ${p.fill}` : p.button}`,
|
|
372
|
+
onClick: f,
|
|
373
|
+
children: u ? "Finish" : "Next"
|
|
373
374
|
}
|
|
374
375
|
)
|
|
375
376
|
] });
|
|
376
377
|
}, he = ({
|
|
377
|
-
step:
|
|
378
|
-
index:
|
|
378
|
+
step: t,
|
|
379
|
+
index: s
|
|
379
380
|
}) => {
|
|
380
|
-
const { steps:
|
|
381
|
-
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($, {});
|
|
382
383
|
}, be = () => {
|
|
383
|
-
const { steps:
|
|
384
|
-
return
|
|
385
|
-
const
|
|
386
|
-
return
|
|
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(
|
|
387
388
|
"div",
|
|
388
389
|
{
|
|
389
|
-
className: `step-item ${
|
|
390
|
+
className: `step-item ${n ? "active" : ""} ${u ? "complete" : ""}`,
|
|
390
391
|
children: [
|
|
391
|
-
/* @__PURE__ */
|
|
392
|
-
/* @__PURE__ */
|
|
393
|
-
|
|
394
|
-
|
|
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 })
|
|
395
396
|
] })
|
|
396
397
|
]
|
|
397
398
|
},
|
|
398
|
-
|
|
399
|
+
s.id ?? i
|
|
399
400
|
);
|
|
400
|
-
}) }) }) : /* @__PURE__ */
|
|
401
|
+
}) }) }) : /* @__PURE__ */ o.jsx($, {});
|
|
401
402
|
}, _e = ({
|
|
402
|
-
onClickNext:
|
|
403
|
-
}) => /* @__PURE__ */
|
|
404
|
-
/* @__PURE__ */
|
|
405
|
-
/* @__PURE__ */
|
|
406
|
-
/* @__PURE__ */
|
|
403
|
+
onClickNext: t
|
|
404
|
+
}) => /* @__PURE__ */ o.jsxs($, { children: [
|
|
405
|
+
/* @__PURE__ */ o.jsx(be, {}),
|
|
406
|
+
/* @__PURE__ */ o.jsx(pe, {}),
|
|
407
|
+
/* @__PURE__ */ o.jsx(ve, { onClickNext: t })
|
|
407
408
|
] });
|
|
408
409
|
export {
|
|
409
410
|
_e as MultiStepper,
|
|
410
|
-
|
|
411
|
+
Ee as MultiStepperProvider,
|
|
411
412
|
O as useMultiStepper
|
|
412
413
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(E,
|
|
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} />`,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,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.8",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"repository": {
|
|
9
9
|
"url": "https://github.com/UppiliSrinivas/react-stepper/tree/multi-stepper"
|