Merge pull request #9163 from marmelab/doc-fix-use-of-custom-progress-in-wizard-form

[no-ci][Doc] Fix snippet to use a custom progress bar in WizardForm

Author: fzaninotto

docs/WizardForm.md

@@ -173,37 +173,36 @@ You can also customize the progress stepper by passing a custom component in the
 ```tsx
 import React from 'react';
 import { Create, TextInput, required } from 'react-admin';
-import { WizardForm, WizardForm.Step } from '@react-admin/ra-form-layout';
+import { WizardForm, WizardFormProgressProps, useWizardFormContext } from '@react-admin/ra-form-layout';
 
-const MyProgress = ({ currentStep, onStepClick, steps }) => (
-    <ul>
-        {steps.map((step, index) => {
-            const label = React.cloneElement(step, { intent: 'label' });
-
-            return (
-                <li key={`step_${index}`}>
-                    {!onStepClick ? (
+const MyProgress = (props: WizardFormProgressProps) => {
+    const { currentStep, steps } = useWizardFormContext(props);
+    return (
+        <ul>
+            {steps.map((step, index) => {
+                const label = React.cloneElement(step, { intent: 'label' });
+                return (
+                    <li key={`step_${index}`}>
                         <span
-                            className={
-                                currentStep === index ? 'active' : undefined
-                            }
+                            style={{
+                                textDecoration:
+                                    currentStep === index
+                                        ? 'underline'
+                                        : undefined,
+                            }}
                         >
                             {label}
                         </span>
-                    ) : (
-                        <button onClick={() => onStepClick(index)}>
-                            {label}
-                        </button>
-                    )}
-                </li>
-            );
-        })}
-    </ul>
-);
+                    </li>
+                );
+            })}
+        </ul>
+    );
+};
 
 const PostCreate = () => (
     <Create>
-        <WizardForm progress={MyProgress}>
+        <WizardForm progress={<MyProgress />}>
             <WizardForm.Step label="First step">
                 <TextInput source="title" validate={required()} />
             </WizardForm.Step>