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

src/renderers/PopOver.tsx

@@ -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;
       }