test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 12:08:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

contextmenu Esc 可关闭

Browse Source
This commit is contained in:
liaoxuezhi 2019-11-22 14:47:55 +08:00
parent 0c36957cc5
commit 7b71b9aba4
2 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,8 +41,7 @@
box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.34); box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.34);
color: rgba(0, 0, 0, 0.75); color: rgba(0, 0, 0, 0.75);
font-family: -apple-system, font-family: -apple-system, Lucida Grande;
Lucida Grande;
font-size: 14px; font-size: 14px;
line-height: 15px; line-height: 15px;
@ -79,7 +78,7 @@
&-item { &-item {
position: relative; position: relative;
>a { > a {
white-space: nowrap; white-space: nowrap;
display: block; display: block;
padding: 0 20px; padding: 0 20px;
@ -88,7 +87,7 @@
color: inherit; color: inherit;
} }
&:not(.is-disabled):hover>a { &:not(.is-disabled):hover > a {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
background: -webkit-linear-gradient(top, #648bf5, #2866f2); background: -webkit-linear-gradient(top, #648bf5, #2866f2);
@ -98,12 +97,12 @@
cursor: pointer; cursor: pointer;
} }
&.is-disabled>a { &.is-disabled > a {
color: #999; color: #999;
pointer-events: none; pointer-events: none;
} }
&.has-child>a::after { &.has-child > a::after {
content: ''; content: '';
width: 0; width: 0;
height: 0; height: 0;
@ -117,17 +116,21 @@
transform: translateY(-50%); transform: translateY(-50%);
} }
&.has-child:hover>a::after { &.has-child:hover > a::after {
border-color: transparent transparent transparent #fff; border-color: transparent transparent transparent #fff;
} }
} }
&-itemIcon {
margin-right: 5px;
}
&-subList { &-subList {
display: none; display: none;
list-style: none; list-style: none;
} }
&-item:hover>&-subList { &-item:hover > &-subList {
display: block; display: block;
animation-duration: 0.35s; animation-duration: 0.35s;
animation-fill-mode: both; animation-fill-mode: both;
@ -165,7 +168,7 @@
} }
} }
&--left &-item:hover>&-subList { &--left &-item:hover > &-subList {
left: auto; left: auto;
right: 100%; right: 100%;
} }
@ -179,4 +182,4 @@
bottom: 0; bottom: 0;
background: transparent; background: transparent;
} }
} }

14
src/components/ContextMenu.tsx
View File

@ -73,11 +73,13 @@ export class ContextMenu extends React.Component<
componentDidMount() { componentDidMount() {
document.body.addEventListener('click', this.handleOutClick, true); document.body.addEventListener('click', this.handleOutClick, true);
document.addEventListener('keyup', this.handleKeyUp);
} }
componentWillUnmount() { componentWillUnmount() {
ContextMenu.instance = null; ContextMenu.instance = null;
document.body.removeEventListener('click', this.handleOutClick, true); document.body.removeEventListener('click', this.handleOutClick, true);
document.removeEventListener('keyup', this.handleKeyUp);
} }
@autobind @autobind
@ -140,6 +142,14 @@ export class ContextMenu extends React.Component<
); );
} }
@autobind
handleKeyUp(e: KeyboardEvent) {
if (e.keyCode === 27 && this.state.isOpened) {
e.preventDefault();
this.close();
}
}
handleMouseEnter(item: MenuItem) { handleMouseEnter(item: MenuItem) {
item.disabled || !item.onHighlight || item.onHighlight(true, item.data); item.disabled || !item.onHighlight || item.onHighlight(true, item.data);
} }
@ -170,7 +180,9 @@ export class ContextMenu extends React.Component<
onMouseEnter={this.handleMouseEnter.bind(this, item)} onMouseEnter={this.handleMouseEnter.bind(this, item)}
onMouseLeave={this.handleMouseLeave.bind(this, item)} onMouseLeave={this.handleMouseLeave.bind(this, item)}
> >
{item.icon ? <span className={item.icon} /> : null} {item.icon ? (
<span className={cx('ContextMenu-itemIcon', item.icon)} />
) : null}
{item.label} {item.label}
</a> </a>
{hasChildren ? ( {hasChildren ? (