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 c03f195d0f
2 changed files with 18 additions and 21 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;
}
}

38
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 ||
@ -237,11 +237,7 @@ export class ContextMenu extends React.Component<
className
)}
>
<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`}}