-
Notifications
You must be signed in to change notification settings - Fork 357
/
WizardNavItem.tsx
116 lines (106 loc) · 3.7 KB
/
WizardNavItem.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import * as 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 ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import { Flex } from '../../../layouts';
export interface WizardNavItemProps {
/** Can nest a WizardNav component for substeps */
children?: React.ReactNode;
/** The content to display in the nav item */
content?: React.ReactNode;
/** Whether the nav item is the currently active item */
isCurrent?: boolean;
/** Whether the nav item is disabled */
isDisabled?: boolean;
/** The step index passed into the onNavItemClick callback */
stepIndex: number;
/** Callback for when the nav item is clicked */
onNavItemClick?: (step: number) => any;
/** Component used to render WizardNavItem */
navItemComponent?: 'button' | 'a';
/** An optional url to use for when using an anchor component */
href?: string;
/** Flag indicating that this NavItem has child steps and is expandable */
isExpandable?: boolean;
/** The id for the nav item */
id?: string | number;
/** Used to determine the icon displayed next to content. Default has no icon. */
status?: 'default' | 'error';
}
export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
children = null,
content = '',
isCurrent = false,
isDisabled = false,
stepIndex,
onNavItemClick = () => undefined,
navItemComponent = 'button',
href = null,
isExpandable = false,
id,
status = 'default',
...rest
}: WizardNavItemProps) => {
const NavItemComponent = navItemComponent;
const [isExpanded, setIsExpanded] = React.useState(false);
React.useEffect(() => {
setIsExpanded(isCurrent);
}, [isCurrent]);
if (navItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error('WizardNavItem: When using an anchor, please provide an href');
}
const btnProps = {
disabled: isDisabled
};
const linkProps = {
tabIndex: isDisabled ? -1 : undefined,
href
};
return (
<li
className={css(
styles.wizardNavItem,
isExpandable && styles.modifiers.expandable,
isExpandable && isExpanded && styles.modifiers.expanded
)}
>
<NavItemComponent
{...rest}
{...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
{...(id && { id: id.toString() })}
onClick={e => {
e.preventDefault();
isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(stepIndex);
}}
className={css(
styles.wizardNavLink,
isCurrent && styles.modifiers.current,
isDisabled && styles.modifiers.disabled
)}
aria-disabled={isDisabled ? true : null}
aria-current={isCurrent && !children ? 'step' : false}
{...(isExpandable && { 'aria-expanded': isExpanded })}
>
{isExpandable ? (
<>
<span className={css(styles.wizardNavLinkText)}>{content}</span>
<span className={css(styles.wizardNavLinkToggle)}>
<span className={css(styles.wizardNavLinkToggleIcon)}>
<AngleRightIcon />
</span>
</span>
</>
) : (
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
{content}
{status === 'error' && <ExclamationCircleIcon color="var(--pf-global--danger-color--100)" />}
</Flex>
)}
</NavItemComponent>
{children}
</li>
);
};
WizardNavItem.displayName = 'WizardNavItem';