fix(FormRenderer): Include values in the Wizard onNavigating event (#980

)
aws · Sep 27, 2023 · 0dfccab · 0dfccab
1 parent 27653f0
commit 0dfccab
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/ui/src/components/FormRenderer/components/Wizard/index.stories.tsx b/packages/ui/src/components/FormRenderer/components/Wizard/index.stories.tsx
@@ -15,9 +15,9 @@
  ******************************************************************************************************************** */
 import { ComponentMeta } from '@storybook/react';
 import Box from '@cloudscape-design/components/box';
-import { WizardProps as WizardComponentProps } from '@cloudscape-design/components/wizard';
 import { NonCancelableCustomEvent } from '@cloudscape-design/components/internal/events';
 import FormRenderer, { componentTypes, validatorTypes } from '../..';
+import { NavigatingEventDetail } from '.';
 import { Template, DEFAULT_ARGS } from '../../index.stories';
 
 export default {
@@ -169,7 +169,7 @@ NavigatingEvent.args = {
         fields: [
             {
                 ...Default.args.schema!.fields[0],
-                onNavigating: (event: NonCancelableCustomEvent<WizardComponentProps.NavigateDetail>) => {
+                onNavigating: (event: NonCancelableCustomEvent<NavigatingEventDetail>) => {
                     return new Promise((resolve) => {
                         window.setTimeout(() => {
                             if (event.detail.requestedStepIndex >= 2) {

diff --git a/packages/ui/src/components/FormRenderer/components/Wizard/index.tsx b/packages/ui/src/components/FormRenderer/components/Wizard/index.tsx
@@ -21,6 +21,8 @@ import { Field } from '../../types';
 import WizardSteps from './components/WizardSteps';
 import { useFormRendererContext } from '../../formRendererContext';
 
+export type NavigatingEventDetail = WizardComponentProps.NavigateDetail & { values: Record<string, any> };
+
 export interface NavigatingEventResponse {
     continued: boolean;
     errorText?: string;
@@ -33,9 +35,7 @@ export interface WizardProps {
     activeStepIndex: WizardComponentProps['activeStepIndex'];
     isReadOnly?: boolean;
     isDisabled?: boolean;
-    onNavigating?: (
-        event: NonCancelableCustomEvent<WizardComponentProps.NavigateDetail>
-    ) => Promise<NavigatingEventResponse>;
+    onNavigating?: (event: NonCancelableCustomEvent<NavigatingEventDetail>) => Promise<NavigatingEventResponse>;
     isLoadingNextStep?: WizardComponentProps['isLoadingNextStep'];
 }
 
@@ -108,7 +108,13 @@ const Wizard: FC<WizardProps> = ({
         async (event: NonCancelableCustomEvent<WizardComponentProps.NavigateDetail>) => {
             if (onNavigating) {
                 setIsLoadingNextStep(true);
-                const response = await onNavigating(event);
+                const response = await onNavigating({
+                    ...event,
+                    detail: {
+                        ...event.detail,
+                        values: formOptions.getState().values,
+                    },
+                });
                 setIsLoadingNextStep(false);
                 return response;
             }
@@ -118,7 +124,7 @@ const Wizard: FC<WizardProps> = ({
                 errorText: undefined,
             };
         },
-        [onNavigating]
+        [onNavigating, formOptions]
     );
 
     const processNavigate = useCallback(