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

Hover 模式优化, 移除 2s 自动关闭

Browse Source
This commit is contained in:
2betop 2020-12-22 11:02:32 +08:00
parent 80e58e7f76
commit f899849ca5
1 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/renderers/PopOver.tsx
View File

@ -91,12 +91,15 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
let lastOpenedInstance: PopOverComponent | null = null;
class PopOverComponent extends React.Component<PopOverProps, PopOverState> {
target: HTMLElement;
timer: NodeJS.Timeout;
static ComposedComponent = Component;
constructor(props: PopOverProps) {
super(props);
this.openPopOver = this.openPopOver.bind(this);
this.closePopOver = this.closePopOver.bind(this);
this.closePopOverLater = this.closePopOverLater.bind(this);
this.clearCloseTimer = this.clearCloseTimer.bind(this);
this.targetRef = this.targetRef.bind(this);
// this.handleClickOutside = this.handleClickOutside.bind(this);
this.state = {
@ -121,6 +124,7 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
}
closePopOver() {
clearTimeout(this.timer);
if (!this.state.isOpened) {
return;
}
@ -135,6 +139,15 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
);
}
closePopOverLater() {
// 5s 后自动关闭。
this.timer = setTimeout(this.closePopOver, 2000);
}
clearCloseTimer() {
clearTimeout(this.timer);
}
buildSchema() {
const {popOver, name, label, translate: __} = this.props;
@ -215,6 +228,11 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
? this.closePopOver
: undefined
}
onMouseEnter={
(popOver as SchemaPopOverObject)?.trigger === 'hover'
? this.clearCloseTimer
: undefined
}
>
{content}
</div>
@ -237,6 +255,11 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
? this.closePopOver
: undefined
}
onMouseEnter={
(popOver as SchemaPopOverObject)?.trigger === 'hover'
? this.clearCloseTimer
: undefined
}
>
{content}
</PopOver>
@ -262,6 +285,7 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
const trigger = (popOver as SchemaPopOverObject)?.trigger;
if (trigger === 'hover') {
triggerProps.onMouseEnter = this.openPopOver;
triggerProps.onMouseLeave = this.closePopOverLater;
} else {
triggerProps.onClick = this.openPopOver;
}