/
OptionsMenu.tsx
87 lines (80 loc) · 2.6 KB
/
OptionsMenu.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
import * as React from 'react';
import styles from '@patternfly/patternfly/components/OptionsMenu/options-menu.css';
import { css, getModifier } from '@patternfly/react-styles';
export enum OptionsMenuPosition {
right = 'right',
left = 'left'
}
export enum OptionsMenuDirection {
up = 'up',
down = 'down'
}
export interface OptionsMenuProps extends React.HTMLProps<HTMLDivElement>{
/** Classes applied to root element of the Options menu */
className?: string;
/** Id of the root element of the Options menu */
id: string;
/** Array of OptionsMenuItem and/or OptionMenuItemGroup nodes that will be rendered in the Options menu list */
menuItems: React.ReactNode[];
/** Either an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the Options menu */
toggle: React.ReactElement;
/** Flag to indicate the toggle has no border or background */
isPlain?: boolean;
/** Flag to indicate if menu is open */
isOpen?: boolean;
/** Provides an accessible name for the Options menu */
ariaLabelMenu?: string;
/** Indicates where menu will be aligned horizontally */
position?: 'right' | 'left';
/** Menu will open up or open down from the Options menu toggle */
direction?: 'up' | 'down';
}
export class OptionsMenu extends React.Component<OptionsMenuProps> {
static defaultProps = {
className: '',
isOpen: false,
isPlain: false,
ariaLabelMenu: '',
direction: OptionsMenuDirection.down,
position: OptionsMenuPosition.left,
};
constructor(props: OptionsMenuProps) {
super(props);
}
render() {
const {
className,
direction,
position,
id,
isOpen,
isPlain,
ariaLabelMenu,
menuItems,
toggle } = this.props;
return (
<div id={id}
className={
css(styles.optionsMenu,
direction === OptionsMenuDirection.up && getModifier(styles, 'top'),
position === OptionsMenuPosition.right && getModifier(styles, 'align-right'),
isOpen && getModifier(styles, 'expanded'),
className)}>
{React.Children.map(toggle, oneToggle =>
React.cloneElement(oneToggle, {
parentId: id,
isOpen,
isPlain,
}))}
{isOpen &&
<ul className={css(styles.optionsMenuMenu,
position === OptionsMenuPosition.right && getModifier(styles, 'align-right'))}
{...ariaLabelMenu ? {'aria-label': ariaLabelMenu} : {'aria-labelledby': `${id}-toggle`}}>
{menuItems.map((item) => {
return item;
})}
</ul>}
</div>
)
}
}