import React from 'react' ; import { i18n } from '@osd/i18n' ; import { EuiButton , EuiButtonEmpty , EuiFlexGroup , EuiFlexItem } from '@elastic/eui' ; interface Props { activeStepIndex : number ; lastStep : number ; onBack : ( ) => void ; onNext : ( ) => void ; isSaving ? : boolean ; isStepValid ? : boolean ; texts ? : Partial < NavTexts > ; getRightContent ? : ( ) => JSX . Element | null | undefined ; } export interface NavTexts { back : string | JSX . Element ; next : string | JSX . Element ; save : string | JSX . Element ; saving : string | JSX . Element ; } const DEFAULT_TEXTS = { back : i18n . translate ( 'opensearchUi.formWizard.backButtonLabel' , { defaultMessage : 'Back' } ) , next : i18n . translate ( 'opensearchUi.formWizard.nextButtonLabel' , { defaultMessage : 'Next' } ) , save : i18n . translate ( 'opensearchUi.formWizard.saveButtonLabel' , { defaultMessage : 'Save' } ) , saving : i18n . translate ( 'opensearchUi.formWizard.savingButtonLabel' , { defaultMessage : 'Saving...' , } ) , } ; export const FormWizardNav = ( { activeStepIndex , lastStep , isStepValid , isSaving , onBack , onNext , texts , getRightContent , } ) => { const isLastStep = activeStepIndex === lastStep ; const labels = { ... DEFAULT_TEXTS , ... texts , } ; const nextButtonLabel = isLastStep ? Boolean ( isSaving ) ? labels . saving : labels . save : labels . next ; const rightContent = getRightContent !== undefined ? getRightContent ( ) : undefined ; return ( < EuiFlexGroup justifyContent = "spaceBetween" > < EuiFlexItem grow = { false } > < EuiFlexGroup > { } { activeStepIndex > 0 ? ( < EuiFlexItem grow = { false } > < EuiButtonEmpty iconType = "arrowLeft" onClick = { onBack } data - test - subj = "backButton" disabled = { isStepValid === false } > { labels . back } < /EuiButtonEmpty> < /EuiFlexItem>) : null} { } < EuiFlexItem grow = { false } > < EuiButton fill iconType = { isLastStep ? 'check' : 'arrowRight' } onClick = { onNext } iconSide = { isLastStep ? 'left' : 'right' } disabled = { isStepValid === false } data - test - subj = "nextButton" isLoading = { isSaving } > { nextButtonLabel } < /EuiButton> < /EuiFlexItem> < /EuiFlexGroup> < /EuiFlexItem> { rightContent && < EuiFlexItem grow = { false } > { rightContent } < /EuiFlexItem>} < /EuiFlexGroup>); } ;