import React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Wizard/wizard'; import { Button, ButtonVariant } from '../Button'; import { isCustomWizardFooter, WizardFooterButtonProps, WizardStepType } from './types'; import { ActionList, ActionListGroup, ActionListItem } from '../ActionList'; /** * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step. */ export interface WizardFooterProps extends React.HTMLProps { /** The active step */ activeStep: WizardStepType; /** Next button callback */ onNext: (event: React.MouseEvent) => void | Promise; /** Back button callback */ onBack: (event: React.MouseEvent) => void | Promise; /** Cancel link callback */ onClose: (event: React.MouseEvent) => void; /** Custom text for the Next button. The current step's nextButtonText takes precedence. */ nextButtonText?: React.ReactNode; /** Custom text for the Back button */ backButtonText?: React.ReactNode; /** Custom text for the Cancel link */ cancelButtonText?: React.ReactNode; /** Flag to disable the next button */ isNextDisabled?: boolean; /** Flag to disable the back button */ isBackDisabled?: boolean; /** Flag to hide the back button */ isBackHidden?: boolean; /** Flag to hide the cancel button */ isCancelHidden?: boolean; /** Additional props for the Next button. */ nextButtonProps?: Omit; /** Additional props for the Back button. */ backButtonProps?: Omit; /** Additional props for the Cancel button. */ cancelButtonProps?: WizardFooterButtonProps; /** Additional classes spread to the wizard footer */ className?: string; } /** * Applies default wizard footer styling any number of child elements. */ interface WizardFooterWrapperProps extends React.HTMLProps { children: React.ReactNode; className?: string; } export const WizardFooterWrapper = ({ children, className, ...props }: WizardFooterWrapperProps) => (
); export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => { const activeStepFooter = !isCustomWizardFooter(activeStep?.footer) && activeStep?.footer; return ; }; const InternalWizardFooter = ({ onNext, onBack, onClose, isNextDisabled, isBackDisabled, isBackHidden, isCancelHidden, nextButtonText = 'Next', backButtonText = 'Back', cancelButtonText = 'Cancel', nextButtonProps, backButtonProps, cancelButtonProps, className, ...props }: Omit) => ( {!isBackHidden && (
)}
{!isCancelHidden && (
)} ); WizardFooterWrapper.displayName = 'WizardFooterWrapper'; WizardFooter.displayName = 'WizardFooter';