feat(contextview): add onHide, dispose function, and shadowOutline option

Author: wewoor

src/components/contextview/index.tsx

@@ -9,22 +9,30 @@ import {
 } from 'mo/common/dom';
 import './style.scss';
 import { Utils } from 'dt-utils/lib';
+import { EventEmitter } from 'mo/common/event';
 
 export interface IContextViewProps {
+    /**
+     * Default true
+     */
+    shadowOutline?: boolean;
     render?: () => React.ReactNode;
 }
 
 export interface IContextView {
     view: HTMLElementType;
     show(anchorPos: IPosition, render?: () => React.ReactNode): void;
     hide(): void;
+    onHide(callback?: Function): void;
+    dispose(): void;
 }
 
 const contextViewClass = prefixClaName('context-view');
 const contentClass = '.context-view-content';
 
 export function useContextView(props?: IContextViewProps): IContextView {
     const claName = classNames(contextViewClass, 'fade-in');
+    const emitter = new EventEmitter();
     let contextView: HTMLElementType = select('.' + contextViewClass); // Singleton contextView dom
 
     const show = (anchorPos: IPosition, render?: () => React.ReactNode) => {
@@ -50,15 +58,24 @@ export function useContextView(props?: IContextViewProps): IContextView {
         if (contextView) {
             contextView.style.visibility = 'hidden';
             ReactDOM.unmountComponentAtNode(select(contentClass)!);
+            emitter.emit('onHide');
         }
     };
 
+    const onHide = (callback: Function) => {
+        emitter.subscribe('onHide', callback);
+    };
+
     const onMaskClick = (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
         hide();
     };
 
+    const dispose = () => {
+        emitter.unsubscribe('onHide');
+    };
+
     if (!contextView) {
         contextView = document.createElement('div');
         contextView.className = classNames(
@@ -72,6 +89,7 @@ export function useContextView(props?: IContextViewProps): IContextView {
         } else {
             root.appendChild(contextView);
         }
+        const shadowClass = !props?.shadowOutline ? '' : 'context-view--shadow';
 
         ReactDOM.render(
             <>
@@ -80,11 +98,13 @@ export function useContextView(props?: IContextViewProps): IContextView {
                     onClick={onMaskClick}
                     onContextMenu={onMaskClick}
                 ></div>
-                <div className="context-view-content"></div>
+                <div
+                    className={classNames('context-view-content', shadowClass)}
+                ></div>
             </>,
             contextView
         );
     }
 
-    return { view: contextView, show, hide };
+    return { view: contextView, show, hide, onHide, dispose };
 }

src/components/contextview/style.scss

@@ -8,11 +8,6 @@ $name: 'context-view';
     width: initial;
     z-index: 2500;
 
-    .context-view-content {
-        box-shadow: rgb(0, 0, 0) 0 2px 4px;
-        overflow: hidden;
-    }
-
     .#{$name}-block {
         bottom: 0;
         height: 100%;
@@ -25,3 +20,11 @@ $name: 'context-view';
         z-index: -1;
     }
 }
+
+.context-view-content {
+    overflow: hidden;
+}
+
+.context-view--shadow {
+    box-shadow: rgb(0, 0, 0) 0 2px 4px;
+}