Add event to next button (#832)

* add event to next button * version bump Co-authored-by: Makda Sebahtu <sebhatumakda20gmail.com>
web3ui · Oct 13, 2022 · 5931cc6 · 5931cc6
1 parent bf57692
commit 5931cc6
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/.changeset/green-panthers-perform.md b/.changeset/green-panthers-perform.md
@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+Version bump for stepper
diff --git a/packages/core/src/lib/Stepper/Stepper.stories.tsx b/packages/core/src/lib/Stepper/Stepper.stories.tsx
@@ -12,7 +12,10 @@ const parentWrapper = {
 export default {
     title: '3.Layout/Stepper',
     component: Stepper,
-    argTypes: { onComplete: { action: 'completed' } },
+    argTypes: {
+        onComplete: { action: 'completed' },
+        onNext: { action: 'Next Clicked' },
+    },
     decorators: [(storyFn) => <div style={parentWrapper}>{storyFn()}</div>],
 } as ComponentMeta<typeof Stepper>;
 

diff --git a/packages/core/src/lib/Stepper/Stepper.tsx b/packages/core/src/lib/Stepper/Stepper.tsx
@@ -27,6 +27,7 @@ const Stepper: React.FC<StepperProps> = ({
     completeTitle = 'all done, nice!',
     completeMessage = 'You should tell the user what to do next, or use the onComplete function to programmatically fire an event',
     onComplete = () => null,
+    onNext,
     headerWidth,
     ...props
 }) => {
@@ -60,6 +61,7 @@ const Stepper: React.FC<StepperProps> = ({
             return;
         }
         setStep(myStepRef.current + 1);
+        onNext && onNext(activeStep);
     };
 
     const handleContentClick = (event: React.MouseEvent<HTMLElement>) => {

diff --git a/packages/core/src/lib/Stepper/types.ts b/packages/core/src/lib/Stepper/types.ts
@@ -36,6 +36,11 @@ export interface StepperProps {
      */
     onComplete?: () => void;
 
+    /**
+     * This event will fire when next button clicked
+     */
+    onNext?: (stepNumber: number) => void;
+
     /**
      * Pass the step the user should start on
      * 0 = loading