1 | import * as React from 'react';
|
2 | import { css } from '@patternfly/react-styles';
|
3 | import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
|
4 | import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
|
5 | import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
|
6 | import { WizardBody } from './WizardBody';
|
7 | export 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 | };
|
45 | WizardToggle.displayName = 'WizardToggle';
|
46 |
|
\ | No newline at end of file |