@trackunit/react-form-wizard 0.0.7 → 0.0.9
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/index.cjs.js +14 -7
- package/index.esm.js +14 -7
- package/package.json +1 -1
- package/src/FormWizard/useFormWizard.d.ts +2 -2
package/index.cjs.js
CHANGED
|
@@ -230,7 +230,13 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
|
|
|
230
230
|
const setSubmitHandler = react.useCallback(callback => {
|
|
231
231
|
setSubmitHandlerInternal(() => callback);
|
|
232
232
|
}, [setSubmitHandlerInternal]);
|
|
233
|
-
|
|
233
|
+
const isEmptyStep = Object.keys(form.getValues()).length === 0;
|
|
234
|
+
const handleSubmitING = isEmptyStep
|
|
235
|
+
? (e) => {
|
|
236
|
+
e.preventDefault();
|
|
237
|
+
submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
|
|
238
|
+
}
|
|
239
|
+
: form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
|
|
234
240
|
//? This state is not updated for the submit handler below; therefore, there is duplication.
|
|
235
241
|
setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
|
|
236
242
|
if (isLastStep) {
|
|
@@ -240,14 +246,15 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
|
|
|
240
246
|
else if (nextStepPath) {
|
|
241
247
|
navigate(basePath + nextStepPath);
|
|
242
248
|
}
|
|
243
|
-
}))
|
|
249
|
+
}));
|
|
250
|
+
return (jsxRuntime.jsxs("form", { className: cvaFormWizardComponentStepForm(), onSubmit: handleSubmitING, children: [jsxRuntime.jsx(FormWizardHeader, { title, description }), jsxRuntime.jsx("div", { className: cvaFormWizardComponentContainer(), children: component({
|
|
244
251
|
form,
|
|
245
252
|
fullForm,
|
|
246
253
|
setSubmitHandler: isLastStep ? setSubmitHandler : null,
|
|
247
254
|
}) }), jsxRuntime.jsx(FormWizardFooter, { onBack: previousStepPath ? () => navigate(basePath + previousStepPath) : null,
|
|
248
255
|
primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
|
|
249
256
|
onCancel: handleCancel,
|
|
250
|
-
isValid: form.formState.isValid })] }, String(stepKey)));
|
|
257
|
+
isValid: isEmptyStep ? true : form.formState.isValid })] }, String(stepKey)));
|
|
251
258
|
};
|
|
252
259
|
|
|
253
260
|
const cvaFormWizardContainer = cssClassVarianceUtilities.cvaMerge(["h-full"]);
|
|
@@ -269,7 +276,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
|
|
|
269
276
|
const location = reactRouterDom.useLocation();
|
|
270
277
|
const [stepStates, setStepStates] = react.useState({});
|
|
271
278
|
const [fullFormState, setFullFormState] = react.useState({});
|
|
272
|
-
const currentVisibleStepKey = (_a = Object.entries(steps).find(([, { path }]) => location.pathname === path)) === null || _a === void 0 ? void 0 : _a[0];
|
|
279
|
+
const currentVisibleStepKey = (_a = Object.entries(steps).find(([, { path }]) => location.pathname === basePath + path)) === null || _a === void 0 ? void 0 : _a[0];
|
|
273
280
|
const currentVisibleStepIndex = Object.keys(steps).findIndex(key => key === currentVisibleStepKey);
|
|
274
281
|
return (jsxRuntime.jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaFormWizardLayout(), children: [jsxRuntime.jsx(FormWizardSidebar, { children: Object.entries(steps).map(([key, { path, title, sidebarDescription }], index) => {
|
|
275
282
|
const isPastStep = index < currentVisibleStepIndex;
|
|
@@ -295,12 +302,12 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
|
|
|
295
302
|
state: stepState(),
|
|
296
303
|
stepNumber: index + 1,
|
|
297
304
|
title,
|
|
298
|
-
path,
|
|
305
|
+
path: basePath + path,
|
|
299
306
|
subTitle: sidebarDescription }));
|
|
300
307
|
}) }), jsxRuntime.jsx("div", { className: cvaStepContainer(), children: jsxRuntime.jsx(reactRouterDom.Routes, { children: Object.entries(steps).map((_a, index) => {
|
|
301
308
|
var _b, _c, _d, _e;
|
|
302
309
|
var [stepKey, _f] = _a, { path } = _f, rest = __rest(_f, ["path"]);
|
|
303
|
-
return (jsxRuntime.jsx(reactRouterDom.Route, { index:
|
|
310
|
+
return (jsxRuntime.jsx(reactRouterDom.Route, { index: false, path, key: stepKey, element: jsxRuntime.jsx(FormWizardStepWrapper, Object.assign({}, rest, { basePath,
|
|
304
311
|
stepKey,
|
|
305
312
|
onCancel,
|
|
306
313
|
fullFormState,
|
|
@@ -309,7 +316,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
|
|
|
309
316
|
fullFormSchema,
|
|
310
317
|
lastStepPrimaryActionLabel,
|
|
311
318
|
nextStepPath: (_c = (_b = Object.values(steps)[index + 1]) === null || _b === void 0 ? void 0 : _b.path) !== null && _c !== void 0 ? _c : null,
|
|
312
|
-
previousStepPath: (_e = (_d = Object.values(steps)[index - 1]) === null || _d === void 0 ? void 0 : _d.path) !== null && _e !== void 0 ? _e : null })) }));
|
|
319
|
+
previousStepPath: (_e = (_d = Object.values(steps)[index - 1]) === null || _d === void 0 ? void 0 : _d.path) !== null && _e !== void 0 ? _e : null }), stepKey) }));
|
|
313
320
|
}) }) })] }) }));
|
|
314
321
|
};
|
|
315
322
|
|
package/index.esm.js
CHANGED
|
@@ -226,7 +226,13 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
|
|
|
226
226
|
const setSubmitHandler = useCallback(callback => {
|
|
227
227
|
setSubmitHandlerInternal(() => callback);
|
|
228
228
|
}, [setSubmitHandlerInternal]);
|
|
229
|
-
|
|
229
|
+
const isEmptyStep = Object.keys(form.getValues()).length === 0;
|
|
230
|
+
const handleSubmitING = isEmptyStep
|
|
231
|
+
? (e) => {
|
|
232
|
+
e.preventDefault();
|
|
233
|
+
submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
|
|
234
|
+
}
|
|
235
|
+
: form.handleSubmit((data) => __awaiter(void 0, void 0, void 0, function* () {
|
|
230
236
|
//? This state is not updated for the submit handler below; therefore, there is duplication.
|
|
231
237
|
setFullFormState(prev => (Object.assign(Object.assign({}, prev), { [stepKey]: data })));
|
|
232
238
|
if (isLastStep) {
|
|
@@ -236,14 +242,15 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
|
|
|
236
242
|
else if (nextStepPath) {
|
|
237
243
|
navigate(basePath + nextStepPath);
|
|
238
244
|
}
|
|
239
|
-
}))
|
|
245
|
+
}));
|
|
246
|
+
return (jsxs("form", { className: cvaFormWizardComponentStepForm(), onSubmit: handleSubmitING, children: [jsx(FormWizardHeader, { title, description }), jsx("div", { className: cvaFormWizardComponentContainer(), children: component({
|
|
240
247
|
form,
|
|
241
248
|
fullForm,
|
|
242
249
|
setSubmitHandler: isLastStep ? setSubmitHandler : null,
|
|
243
250
|
}) }), jsx(FormWizardFooter, { onBack: previousStepPath ? () => navigate(basePath + previousStepPath) : null,
|
|
244
251
|
primaryActionLabel: isLastStep ? lastStepPrimaryActionLabel : undefined,
|
|
245
252
|
onCancel: handleCancel,
|
|
246
|
-
isValid: form.formState.isValid })] }, String(stepKey)));
|
|
253
|
+
isValid: isEmptyStep ? true : form.formState.isValid })] }, String(stepKey)));
|
|
247
254
|
};
|
|
248
255
|
|
|
249
256
|
const cvaFormWizardContainer = cvaMerge(["h-full"]);
|
|
@@ -265,7 +272,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
|
|
|
265
272
|
const location = useLocation();
|
|
266
273
|
const [stepStates, setStepStates] = useState({});
|
|
267
274
|
const [fullFormState, setFullFormState] = useState({});
|
|
268
|
-
const currentVisibleStepKey = (_a = Object.entries(steps).find(([, { path }]) => location.pathname === path)) === null || _a === void 0 ? void 0 : _a[0];
|
|
275
|
+
const currentVisibleStepKey = (_a = Object.entries(steps).find(([, { path }]) => location.pathname === basePath + path)) === null || _a === void 0 ? void 0 : _a[0];
|
|
269
276
|
const currentVisibleStepIndex = Object.keys(steps).findIndex(key => key === currentVisibleStepKey);
|
|
270
277
|
return (jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxs("div", { className: cvaFormWizardLayout(), children: [jsx(FormWizardSidebar, { children: Object.entries(steps).map(([key, { path, title, sidebarDescription }], index) => {
|
|
271
278
|
const isPastStep = index < currentVisibleStepIndex;
|
|
@@ -291,12 +298,12 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
|
|
|
291
298
|
state: stepState(),
|
|
292
299
|
stepNumber: index + 1,
|
|
293
300
|
title,
|
|
294
|
-
path,
|
|
301
|
+
path: basePath + path,
|
|
295
302
|
subTitle: sidebarDescription }));
|
|
296
303
|
}) }), jsx("div", { className: cvaStepContainer(), children: jsx(Routes, { children: Object.entries(steps).map((_a, index) => {
|
|
297
304
|
var _b, _c, _d, _e;
|
|
298
305
|
var [stepKey, _f] = _a, { path } = _f, rest = __rest(_f, ["path"]);
|
|
299
|
-
return (jsx(Route, { index:
|
|
306
|
+
return (jsx(Route, { index: false, path, key: stepKey, element: jsx(FormWizardStepWrapper, Object.assign({}, rest, { basePath,
|
|
300
307
|
stepKey,
|
|
301
308
|
onCancel,
|
|
302
309
|
fullFormState,
|
|
@@ -305,7 +312,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, steps, fullFormSchema, onCance
|
|
|
305
312
|
fullFormSchema,
|
|
306
313
|
lastStepPrimaryActionLabel,
|
|
307
314
|
nextStepPath: (_c = (_b = Object.values(steps)[index + 1]) === null || _b === void 0 ? void 0 : _b.path) !== null && _c !== void 0 ? _c : null,
|
|
308
|
-
previousStepPath: (_e = (_d = Object.values(steps)[index - 1]) === null || _d === void 0 ? void 0 : _d.path) !== null && _e !== void 0 ? _e : null })) }));
|
|
315
|
+
previousStepPath: (_e = (_d = Object.values(steps)[index - 1]) === null || _d === void 0 ? void 0 : _d.path) !== null && _e !== void 0 ? _e : null }), stepKey) }));
|
|
309
316
|
}) }) })] }) }));
|
|
310
317
|
};
|
|
311
318
|
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { CommonProps } from "@trackunit/react-components";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
3
|
import { UseFormReturn } from "react-hook-form";
|
|
4
4
|
import { AnyZodObject, ZodTypeAny, z } from "zod";
|
|
5
5
|
export type StepState = "active" | "done" | "invalid" | "disabled" | "ready";
|
|
@@ -13,7 +13,7 @@ export type StepComponentPropsInner<TStepSchema extends ZodTypeAny, TFullSchema
|
|
|
13
13
|
};
|
|
14
14
|
export interface SimpleStepProps {
|
|
15
15
|
title: string;
|
|
16
|
-
description: string;
|
|
16
|
+
description: string | ReactNode;
|
|
17
17
|
sidebarDescription?: string;
|
|
18
18
|
path: string;
|
|
19
19
|
}
|