@patternfly/react-core 5.0.0-alpha.70 → 5.0.0-alpha.72

package/src/components/Wizard/WizardToggle.tsx

@@ -1,121 +1,117 @@
-import * as React from 'react';
+import React from 'react';
+
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import { WizardStep } from './Wizard';
+
+import { KeyTypes } from '../../helpers/constants';
+import { WizardStepType, isWizardSubStep } from './types';
+import { WizardNavProps } from './WizardNav';
+import { WizardStep, WizardStepProps } from './WizardStep';
 import { WizardBody } from './WizardBody';
 
+/**
+ * Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.
+ */
+
 export interface WizardToggleProps {
-  /** Function that returns the WizardNav component */
-  nav: (isWizardNavOpen: boolean) => React.ReactElement;
-  /** The wizard steps */
-  steps: WizardStep[];
-  /** The currently active WizardStep */
-  activeStep: WizardStep;
-  /** The WizardFooter */
-  children?: React.ReactNode;
-  /** Set to true to remove body padding */
-  hasNoBodyPadding: boolean;
-  /** If the nav is open */
-  isNavOpen: boolean;
-  /** Callback function for when the nav is toggled */
-  onNavToggle: (isOpen: boolean) => void;
-  /** The button's aria-label */
+  /** List of steps and/or sub-steps */
+  steps: WizardStepType[];
+  /** The current step */
+  activeStep: WizardStepType;
+  /** Wizard footer */
+  footer: React.ReactElement;
+  /** Wizard navigation */
+  nav: React.ReactElement<WizardNavProps>;
+  /** The expandable dropdown button's aria-label */
   'aria-label'?: string;
-  /** Adds an accessible name to the wizard body by passing the the id of one or more elements.
-   * The aria-labelledby will only be applied when the body content overflows and renders a scrollbar.
-   */
-  mainAriaLabelledBy?: string;
-  /** Adds an accessible name to the wizard body when the body content overflows and renders
-   * a scrollbar.
-   */
-  mainAriaLabel?: string;
-  /** If the wizard is in-page */
-  isInPage?: boolean;
-  /** Flag indicating the wizard has a drawer for at least one of the wizard steps */
-  hasDrawer?: boolean;
-  /** Flag indicating the wizard drawer is expanded */
-  isDrawerExpanded?: boolean;
-  /** Callback function for when the drawer is toggled */
-  onExpandDrawer?: () => void;
+  /** Flag to determine whether the dropdown navigation is expanded */
+  isNavExpanded?: boolean;
+  /** Callback to expand or collapse the dropdown navigation */
+  toggleNavExpanded?: (event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
 }
 
-export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
-  isNavOpen,
-  onNavToggle,
-  nav,
+export const WizardToggle = ({
   steps,
   activeStep,
-  children,
-  hasNoBodyPadding = false,
-  'aria-label': ariaLabel = 'Wizard Toggle',
-  mainAriaLabelledBy = null,
-  mainAriaLabel = null,
-  isInPage = true,
-  hasDrawer,
-  isDrawerExpanded,
-  onExpandDrawer
+  footer,
+  nav,
+  isNavExpanded,
+  toggleNavExpanded,
+  'aria-label': ariaLabel = 'Wizard toggle'
 }: WizardToggleProps) => {
-  let activeStepIndex;
-  let activeStepName;
-  let activeStepSubName;
-  for (let i = 0; i < steps.length; i++) {
-    if ((activeStep.id && steps[i].id === activeStep.id) || steps[i].name === activeStep.name) {
-      activeStepIndex = i + 1;
-      activeStepName = steps[i].name;
-      break;
-    } else if (steps[i].steps) {
-      for (const step of steps[i].steps) {
-        if ((activeStep.id && step.id === activeStep.id) || step.name === activeStep.name) {
-          activeStepIndex = i + 1;
-          activeStepName = steps[i].name;
-          activeStepSubName = step.name;
-          break;
-        }
+  const isActiveSubStep = isWizardSubStep(activeStep);
+  const parentStep = isActiveSubStep && steps.find(step => step.id === activeStep.parentId);
+  const nonSubSteps = steps.filter(step => !isWizardSubStep(step));
+  const wizardToggleIndex = nonSubSteps.indexOf(parentStep || activeStep) + 1;
+
+  const handleKeyClicks = React.useCallback(
+    (event: KeyboardEvent): void => {
+      if (isNavExpanded && event.key === KeyTypes.Escape) {
+        toggleNavExpanded?.(event);
       }
-    }
-  }
+    },
+    [isNavExpanded, toggleNavExpanded]
+  );
+
+  // Open/close collapsable navigation on keydown event
+  React.useEffect(() => {
+    const target = typeof document !== 'undefined' ? document.body : null;
+    target?.addEventListener('keydown', handleKeyClicks, false);
+
+    return () => {
+      target?.removeEventListener('keydown', handleKeyClicks, false);
+    };
+  }, [handleKeyClicks]);
+
+  const bodyContent = steps.map(step => {
+    const props: WizardStepProps = step.component?.props || {};
+    const { children, body, ...propsWithoutChildren } = props;
+
+    return (
+      <React.Fragment key={step.id}>
+        {activeStep?.name === step.name &&
+          (body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : children)}
+
+        <div key={step.id} style={{ display: 'none' }}>
+          <WizardStep {...propsWithoutChildren} />
+        </div>
+      </React.Fragment>
+    );
+  });
 
   return (
-    <React.Fragment>
+    <>
       <button
-        onClick={() => onNavToggle(!isNavOpen)}
-        className={css(styles.wizardToggle, isNavOpen && 'pf-m-expanded')}
+        onClick={toggleNavExpanded}
+        className={css(styles.wizardToggle, isNavExpanded && 'pf-m-expanded')}
         aria-label={ariaLabel}
-        aria-expanded={isNavOpen}
+        aria-expanded={isNavExpanded}
       >
         <span className={css(styles.wizardToggleList)}>
           <span className={css(styles.wizardToggleListItem)}>
-            <span className={css(styles.wizardToggleNum)}>{activeStepIndex}</span> {activeStepName}
-            {activeStepSubName && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
+            <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>{' '}
+            {parentStep?.name || activeStep?.name}
+            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
           </span>
-          {activeStepSubName && <span className={css(styles.wizardToggleListItem)}>{activeStepSubName}</span>}
+          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
         </span>
+
         <span className={css(styles.wizardToggleIcon)}>
           <CaretDownIcon aria-hidden="true" />
         </span>
       </button>
       <div className={css(styles.wizardOuterWrap)}>
         <div className={css(styles.wizardInnerWrap)}>
-          {nav(isNavOpen)}
-          <WizardBody
-            mainComponent={isInPage ? 'div' : 'main'}
-            aria-label={mainAriaLabel}
-            aria-labelledby={mainAriaLabelledBy}
-            hasNoBodyPadding={hasNoBodyPadding}
-            activeStep={activeStep}
-            isDrawerExpanded={isDrawerExpanded}
-            onExpandDrawer={onExpandDrawer}
-            hasDrawer={hasDrawer}
-          >
-            {hasDrawer && !isDrawerExpanded && activeStep.drawerToggleButton}
-            {activeStep.component}
-          </WizardBody>
+          {nav}
+          {bodyContent}
         </div>
-        {children}
+
+        {footer}
       </div>
-    </React.Fragment>
+    </>
   );
 };
+
 WizardToggle.displayName = 'WizardToggle';