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
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
import React from "react";
export class ContextMenuButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
showContextMenu: false,
contextMenuKeyboard: false,
};
this.onClick = this.onClick.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.onUpdate = this.onUpdate.bind(this);
}
openContextMenu(isKeyBoard, event) {
if (this.props.onUpdate) {
this.props.onUpdate(true);
}
this.setState({
showContextMenu: true,
contextMenuKeyboard: isKeyBoard,
});
}
onClick(event) {
event.preventDefault();
this.openContextMenu(false, event);
}
onKeyDown(event) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
this.openContextMenu(true, event);
}
}
onUpdate(showContextMenu) {
if (this.props.onUpdate) {
this.props.onUpdate(showContextMenu);
}
this.setState({ showContextMenu });
}
render() {
const { tooltipArgs, tooltip, children, refFunction } = this.props;
const { showContextMenu, contextMenuKeyboard } = this.state;
return (
<React.Fragment>
<button
aria-haspopup="true"
data-l10n-id={tooltip}
data-l10n-args={tooltipArgs ? JSON.stringify(tooltipArgs) : null}
className="context-menu-button icon"
onKeyDown={this.onKeyDown}
onClick={this.onClick}
ref={refFunction}
/>
{showContextMenu
? React.cloneElement(children, {
keyboardAccess: contextMenuKeyboard,
onUpdate: this.onUpdate,
})
: null}
</React.Fragment>
);
}
}
|
