-
Notifications
You must be signed in to change notification settings - Fork 349
/
OptionsMenuToggle.js
93 lines (88 loc) · 2.83 KB
/
OptionsMenuToggle.js
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
import React from 'react';
import PropTypes from 'prop-types';
import { CaretDownIcon } from '@patternfly/react-icons';
import styles from '@patternfly/patternfly/components/OptionsMenu/options-menu.css';
import { css, getModifier } from '@patternfly/react-styles';
import { fillTemplate } from '../../helpers/util';
const OptionsMenuToggle = ({
parentId,
onToggle,
isOpen,
isPlain,
isHovered,
isActive,
isFocused,
hideCaret,
'aria-label': ariaLabel,
toggleTemplate: ToggleTemplate,
toggleTemplateProps
}) => {
const template =
ToggleTemplate && typeof ToggleTemplate === 'string' ? (
fillTemplate(ToggleTemplate, toggleTemplateProps)
) : (
<ToggleTemplate toggleTemplateProps={toggleTemplateProps} />
);
return (
<button
className={css(
styles.optionsMenuToggle,
isPlain && getModifier(styles, 'plain'),
isHovered && getModifier(styles, 'hover'),
isActive && getModifier(styles, 'active'),
isFocused && getModifier(styles, 'focus')
)}
id={`${parentId}-toggle`}
aria-haspopup="listbox"
aria-label={ariaLabel}
aria-expanded={isOpen}
onClick={onToggle}
>
{ToggleTemplate &&
(!isPlain ? (
<span className={css(styles.optionsMenuToggleText)}>{template}</span>
) : (
<React.Fragment>{template}</React.Fragment>
))}
{!hideCaret && <CaretDownIcon aria-hidden className={css(styles.optionsMenuToggleIcon)} />}
</button>
);
};
OptionsMenuToggle.propTypes = {
/** Id of the parent Options menu component */
parentId: PropTypes.string,
/** Callback for when this Options menu is toggled */
onToggle: PropTypes.func,
/** Flag to indicate if menu is open */
isOpen: PropTypes.bool,
/** Flag to indicate if the button is plain */
isPlain: PropTypes.bool,
/** Forces display of the hover state of the Options menu */
isHovered: PropTypes.bool,
/** Forces display of the active state of the Options menu */
isActive: PropTypes.bool,
/** Forces display of the hover state of the Options menu */
isFocused: PropTypes.bool,
/** Content to be rendered in the Options menu toggle button */
toggleTemplate: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/** Props to be passed to the Options menu toggle button template */
toggleTemplateProps: PropTypes.object,
/** hide the toggle caret */
hideCaret: PropTypes.bool,
/** Provides an accessible name for the button when an icon is used instead of text */
'aria-label': PropTypes.string
};
OptionsMenuToggle.defaultProps = {
parentId: '',
onToggle: Function.prototype,
isOpen: false,
isPlain: false,
isHovered: false,
isActive: false,
isFocused: false,
toggleTemplate: '',
toggleTemplateProps: undefined,
hideCaret: false,
'aria-label': 'Options menu'
};
export default OptionsMenuToggle;