import React from 'react'; import styles from '@patternfly/react-styles/css/components/Wizard/wizard'; import { css } from '@patternfly/react-styles'; import { WizardContext } from './WizardContext'; import { debounce } from '../../helpers/util'; import { getResizeObserver } from '../../helpers/resizeObserver'; /** * Used as a wrapper for WizardStep content, where the wrapping element is customizable. */ export interface WizardBodyProps extends React.HTMLProps { /** Anything that can be rendered in the Wizard body */ children: React.ReactNode; /** Additional classes spread to the wizard body */ className?: string; /** Flag to remove the default body padding */ hasNoPadding?: boolean; /** Adds an accessible name to the wrapper element when the content overflows and renders * a scrollbar. */ 'aria-label'?: string; /** Adds an accessible name to the wrapper element by passing the the id of one or more elements. * The aria-labelledby will only be applied when the content overflows and renders a scrollbar. */ 'aria-labelledby'?: string; /** Component used as the wrapping content container */ component?: React.ElementType; } export const WizardBody = ({ children, className, hasNoPadding = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, component = 'div', ...props }: WizardBodyProps) => { const [hasScrollbar, setHasScrollbar] = React.useState(false); const [previousWidth, setPreviousWidth] = React.useState(undefined); const WrapperComponent = component; const { activeStep, shouldFocusContent, mainWrapperRef } = React.useContext(WizardContext); const defaultAriaLabel = ariaLabel || `${activeStep?.name} content`; React.useEffect(() => { const resize = () => { if (mainWrapperRef?.current) { const { offsetWidth, offsetHeight, scrollHeight } = mainWrapperRef.current; if (previousWidth !== offsetWidth) { setPreviousWidth(offsetWidth); setHasScrollbar(offsetHeight < scrollHeight); } } }; const handleResizeWithDelay = debounce(resize, 250); let observer = () => {}; if (mainWrapperRef?.current) { observer = getResizeObserver(mainWrapperRef.current, handleResizeWithDelay); const { offsetHeight, scrollHeight } = mainWrapperRef.current; setHasScrollbar(offsetHeight < scrollHeight); setPreviousWidth((mainWrapperRef.current as HTMLElement).offsetWidth); } return () => { observer(); }; }, [previousWidth]); return (
{children}
); }; WizardBody.displayName = 'WizardBody';