import { useEffect , useState } from 'react' ; import { useHistory } from 'react-router-dom' ; import { ContentPanel } from '@components' ; import { ROUTE_PATHS } from '@config' ; import { translateRaw } from '@translations' ; import QueryBanner from './QueryBanner' ; import { IStepperPath } from './types' ; export interface StepperProps { steps : IStepperPath [ ] ; txNumber ? : number ; defaultBackPath ? : string ; defaultBackPathLabel ? : string ; completeBtnText ? : string ; wrapperClassName ? : string ; basic ? : boolean ; onRender ? ( goToNextStep ) : void ; } export function GeneralStepper ( { steps , defaultBackPath , defaultBackPathLabel , completeBtnText , txNumber , wrapperClassName = '' , basic = false , onRender } ) { const history = useHistory ( ) ; const [ step , setStep ] = useState ( 0 ) ; useEffect ( ( ) => { if ( ! txNumber || txNumber === 0 ) return ; setStep ( 0 ) ; } , [ txNumber ] ) ; const goToPrevStep = ( ) => { return setStep ( Math . max ( 0 , step - 1 ) ) ; } ; const goToFirstStep = ( ) => { return setStep ( 0 ) ; } ; const goBack = ( ) => step === 0 ? history . push ( defaultBackPath || ROUTE_PATHS . DASHBOARD . path ) : goToPrevStep ( ) ; const getStep = ( stepIndex ) => { const path = steps ; const step = steps [ stepIndex ] || steps [ 0 ] ; const { label , component , actions , props } = step ; return { currentPath : path , label , Step : component , stepAction : actions , props } ; } ; const { currentPath , label : stepLabel , Step , stepAction } = getStep ( step ) ; const [ label , setLabel ] = useState ( stepLabel ) ; useEffect ( ( ) => { setLabel ( stepLabel ) ; } , [ stepLabel ] ) ; const getBackBtnLabel = ( ) => Math . max ( - 1 , step - 1 ) === - 1 ? defaultBackPathLabel || translateRaw ( 'DASHBOARD' ) : getStep ( Math . max ( 0 , step - 1 ) ) . label ; const goToNextStep = ( ) => setStep ( Math . min ( step + 1 , currentPath . length - 1 ) ) ; const stepObject = steps [ step ] || steps [ 0 ] ; const stepProps = stepObject . props ; const stepActions = stepObject . actions ; const stepperProps = { goToNextStep , goBack , goToFirstStep , goToPrevStep , setLabel } ; if ( onRender ) { onRender ( goToNextStep ) ; } return ( < ContentPanel onBack = { goBack } backBtnText = { getBackBtnLabel ( ) } heading = { label } stepper = { { current : step + 1 , total : currentPath . length } } className = { wrapperClassName } basic = { basic } > < QueryBanner /> < Step heading = { label } onComplete = { ( payload ) => stepAction ? stepAction ( payload , goToNextStep , goToPrevStep ) : goToNextStep ( ) } completeButton = { completeBtnText || translateRaw ( 'SEND_ASSETS_SEND_ANOTHER' ) } resetFlow = { ( ) => ( stepAction ? stepAction ( goToFirstStep ) : goToFirstStep ( ) ) } { ... stepProps } { ... stepActions } { ... stepperProps } /> < /ContentPanel>); } export default GeneralStepper ;