blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

fix(ui): tidy stepper code

Browse Source
This commit is contained in:
Mythie
2023-12-07 15:06:49 +11:00
parent e81183f324
commit 3ff7b188d7
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/ui/primitives/stepper.tsx
View File

@@ -1,7 +1,7 @@
import React, { createContext, useContext, useState } from 'react'; import React, { createContext, useContext, useState } from 'react';
import type { FC } from 'react'; import type { FC } from 'react';
type StepContextType = { type StepContextValue = {
isCompleting: boolean; isCompleting: boolean;
stepIndex: number; stepIndex: number;
currentStep: number; currentStep: number;
@@ -12,7 +12,7 @@ type StepContextType = {
previousStep: () => void; previousStep: () => void;
}; };
const StepContext = createContext<StepContextType | null>(null); const StepContext = createContext<StepContextValue | null>(null);
type StepperProps = { type StepperProps = {
children: React.ReactNode; children: React.ReactNode;
@@ -20,7 +20,6 @@ type StepperProps = {
onStepChanged?: (currentStep: number) => void; onStepChanged?: (currentStep: number) => void;
currentStep?: number; // external control prop currentStep?: number; // external control prop
setCurrentStep?: (step: number) => void; // external control function setCurrentStep?: (step: number) => void; // external control function
isAsyncComplete?: boolean;
}; };
export const Stepper: FC<StepperProps> = ({ export const Stepper: FC<StepperProps> = ({
@@ -29,7 +28,6 @@ export const Stepper: FC<StepperProps> = ({
onStepChanged, onStepChanged,
currentStep: propCurrentStep, currentStep: propCurrentStep,
setCurrentStep: propSetCurrentStep, setCurrentStep: propSetCurrentStep,
isAsyncComplete,
}) => { }) => {
const [stateCurrentStep, stateSetCurrentStep] = useState(1); const [stateCurrentStep, stateSetCurrentStep] = useState(1);
const [isCompleting, setIsCompleting] = useState(false); const [isCompleting, setIsCompleting] = useState(false);
@@ -42,22 +40,26 @@ export const Stepper: FC<StepperProps> = ({
const totalSteps = React.Children.count(children); const totalSteps = React.Children.count(children);
const handleComplete = async () => { const handleComplete = async () => {
if (!onComplete) { try {
return; if (!onComplete) {
return;
}
setIsCompleting(true);
await onComplete();
setIsCompleting(false);
} catch (error) {
setIsCompleting(false);
throw error;
} }
if (!isAsyncComplete) {
void onComplete();
return;
}
setIsCompleting(true);
await onComplete();
// handle async complete action
setIsCompleting(false);
}; };
const handleStepChange = (nextStep: number) => { const handleStepChange = (nextStep: number) => {
setCurrentStep(nextStep); setCurrentStep(nextStep);
onStepChanged && onStepChanged(nextStep); onStepChanged?.(nextStep);
}; };
const nextStep = () => { const nextStep = () => {
@@ -81,7 +83,7 @@ export const Stepper: FC<StepperProps> = ({
const currentChild = React.Children.toArray(children)[currentStep - 1]; const currentChild = React.Children.toArray(children)[currentStep - 1];
const stepContextValue: StepContextType = { const stepContextValue: StepContextValue = {
isCompleting, isCompleting,
stepIndex: currentStep - 1, stepIndex: currentStep - 1,
currentStep, currentStep,
@@ -96,10 +98,12 @@ export const Stepper: FC<StepperProps> = ({
}; };
/** Hook for children to use the step context */ /** Hook for children to use the step context */
export const useStep = (): StepContextType => { export const useStep = (): StepContextValue => {
const context = useContext(StepContext); const context = useContext(StepContext);
if (!context) { if (!context) {
throw new Error('useStep must be used within a Stepper'); throw new Error('useStep must be used within a Stepper');
} }
return context; return context;
}; };