p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

contextmenu 小调整

This commit is contained in:
2betop 2020-05-11 14:02:10 +08:00
parent 73f02985ed
commit a7c9f50d48
2 changed files with 20 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scss/components/_context-menu.scss
View File

@ -210,5 +210,6 @@
right: 0;
bottom: 0;
background: transparent;
pointer-events: none;
}
}

42
src/components/ContextMenu.tsx
View File

@ -75,13 +75,13 @@ export class ContextMenu extends React.Component<
}
componentDidMount() {
// document.body.addEventListener('click', this.handleOutClick, true);
document.body.addEventListener('click', this.handleOutClick, true);
document.addEventListener('keydown', this.handleKeyDown);
}
componentWillUnmount() {
ContextMenu.instance = this.originInstance;
// document.body.removeEventListener('click', this.handleOutClick, true);
document.body.removeEventListener('click', this.handleOutClick, true);
document.removeEventListener('keydown', this.handleKeyDown);
delete this.originInstance;
}
@ -106,20 +106,20 @@ export class ContextMenu extends React.Component<
});
}
// @autobind
// handleOutClick(e: Event) {
// if (
// !e.target ||
// !this.menuRef.current ||
// this.menuRef.current.contains(e.target as HTMLElement)
// ) {
// return;
// }
// if (this.state.isOpened) {
// e.preventDefault();
// this.close();
// }
// }
@autobind
handleOutClick(e: Event) {
if (
!e.target ||
!this.menuRef.current ||
this.menuRef.current.contains(e.target as HTMLElement)
) {
return;
}
if (this.state.isOpened) {
e.preventDefault();
this.close();
}
}
handleClick(item: MenuItem) {
item.disabled ||
@ -172,9 +172,8 @@ export class ContextMenu extends React.Component<
}
@autobind
handleOverlayContextMenu(e: React.MouseEvent) {
handleSelfContextMenu(e: React.MouseEvent) {
e.preventDefault();
this.close();
}
renderMenus(menus: Array<MenuItem | MenuDivider>) {
@ -236,12 +235,9 @@ export class ContextMenu extends React.Component<
},
className
)}
onContextMenu={this.handleSelfContextMenu}
>
<div
onContextMenu={this.handleOverlayContextMenu}
onClick={this.close}
className={cx(`ContextMenu-overlay`, fadeStyles[status])}
/>
<div className={cx(`ContextMenu-overlay`, fadeStyles[status])} />
<div
className={cx(`ContextMenu-cursor`)}
style={{left: `${this.state.x}px`, top: `${this.state.y}px`}}