UNPKG

2.92 kBJavaScriptView Raw
1import * as React from 'react';
2import { css } from '@patternfly/react-styles';
3import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
4import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
5import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
6import { WizardBody } from './WizardBody';
7export const WizardToggle = ({ isNavOpen, onNavToggle, nav, steps, activeStep, children, hasNoBodyPadding = false, 'aria-label': ariaLabel = 'Wizard Toggle', mainAriaLabelledBy = null, mainAriaLabel = null, isInPage = true }) => {
8 let activeStepIndex;
9 let activeStepName;
10 let activeStepSubName;
11 for (let i = 0; i < steps.length; i++) {
12 if ((activeStep.id && steps[i].id === activeStep.id) || steps[i].name === activeStep.name) {
13 activeStepIndex = i + 1;
14 activeStepName = steps[i].name;
15 break;
16 }
17 else if (steps[i].steps) {
18 for (const step of steps[i].steps) {
19 if ((activeStep.id && step.id === activeStep.id) || step.name === activeStep.name) {
20 activeStepIndex = i + 1;
21 activeStepName = steps[i].name;
22 activeStepSubName = step.name;
23 break;
24 }
25 }
26 }
27 }
28 return (React.createElement(React.Fragment, null,
29 React.createElement("button", { onClick: () => onNavToggle(!isNavOpen), className: css(styles.wizardToggle, isNavOpen && 'pf-m-expanded'), "aria-label": ariaLabel, "aria-expanded": isNavOpen },
30 React.createElement("span", { className: css(styles.wizardToggleList) },
31 React.createElement("span", { className: css(styles.wizardToggleListItem) },
32 React.createElement("span", { className: css(styles.wizardToggleNum) }, activeStepIndex),
33 " ",
34 activeStepName,
35 activeStepSubName && React.createElement(AngleRightIcon, { className: css(styles.wizardToggleSeparator), "aria-hidden": "true" })),
36 activeStepSubName && React.createElement("span", { className: css(styles.wizardToggleListItem) }, activeStepSubName)),
37 React.createElement("span", { className: css(styles.wizardToggleIcon) },
38 React.createElement(CaretDownIcon, { "aria-hidden": "true" }))),
39 React.createElement("div", { className: css(styles.wizardOuterWrap) },
40 React.createElement("div", { className: css(styles.wizardInnerWrap) },
41 nav(isNavOpen),
42 React.createElement(WizardBody, { mainComponent: isInPage ? 'div' : 'main', "aria-label": mainAriaLabel, "aria-labelledby": mainAriaLabelledBy, hasNoBodyPadding: hasNoBodyPadding }, activeStep.component)),
43 children)));
44};
45WizardToggle.displayName = 'WizardToggle';
46//# sourceMappingURL=WizardToggle.js.map
\No newline at end of file