fix: remove contextView warning in console (#832)

* fix: remove contextView warning in console

* fix: replace useContextView with useContextViewEle

* test: update tests

Author: mortalYoung

src/components/contextView/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { render as renderUtils, unmout } from 'mo/react/render';
 import { classNames } from 'mo/common/className';
 import {
@@ -40,6 +40,24 @@ enum ContextViewEvent {
 
 const Emitter = new EventEmitter();
 
+/**
+ * It's a hook used in functional component
+ */
+export function useContextViewEle(props?: IContextViewProps) {
+    const [contextView, setContextView] = useState<IContextView>();
+
+    useEffect(() => {
+        // The useContextView can't be called at initial of useState
+        // Because this function has rendered an element
+        setContextView(useContextView(props));
+    }, []);
+
+    return contextView;
+}
+
+/**
+ * TODO: It's not a hook, don't begin with use
+ */
 export function useContextView(props: IContextViewProps = {}): IContextView {
     const { shadowOutline = true } = props;
     const claName = classNames(contextViewClass, 'fade-in');

src/components/dropdown/index.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
 import { classNames, getBEMModifier, prefixClaName } from 'mo/common/className';
-import { useContextView } from '../contextView';
+import { useContextViewEle } from '../contextView';
 import {
     triggerEvent,
     TriggerEvent,
@@ -30,7 +30,7 @@ export const DropDown = forwardRef<DropDownRef, IDropDownProps>(
             trigger = 'click',
             ...restProps
         } = props;
-        const contextView = useContextView({
+        const contextView = useContextViewEle({
             render: () => overlay,
         });
 
@@ -48,6 +48,7 @@ export const DropDown = forwardRef<DropDownRef, IDropDownProps>(
         );
         const events = {
             [triggerEvent(trigger)]: function (e: React.MouseEvent) {
+                if (!contextView) return;
                 const target = e.currentTarget;
                 const rect = target.getBoundingClientRect();
                 let position = getPositionByPlacement(placement, rect);

src/components/index.ts

@@ -22,7 +22,7 @@ export type { ICollapseProps } from './collapse';
 export { useContextMenu } from './contextMenu';
 export type { IContextMenuProps } from './contextMenu';
 
-export { useContextView } from './contextView';
+export { useContextView, useContextViewEle } from './contextView';
 export type { IContextViewProps, IContextView } from './contextView';
 
 export { Modal } from './dialog';

src/provider/__tests__/__snapshots__/molecule.test.tsx.snap

@@ -1234,6 +1234,17 @@ dmlldzJfOV8xNjM4ODQ4MDI1NDI2MTE4Ml8zOF9bMF0TNSl1AAAAAElFTkSuQmCC"
         </div>
       </div>
     </div>
+    <div
+      class="mo-context-view fade-in"
+      style="visibility: hidden;"
+    >
+      <div
+        class="mo-context-view__block"
+      />
+      <div
+        class="mo-context-view__content mo-context-view--shadow"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;

src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap

@@ -317,6 +317,17 @@ dmlldzJfOV8xNjM4ODQ4MDI1NDI2MTE4Ml8zOF9bMF0TNSl1AAAAAElFTkSuQmCC"
         />
       </div>
     </div>
+    <div
+      class="mo-context-view fade-in"
+      style="visibility: hidden;"
+    >
+      <div
+        class="mo-context-view__block"
+      />
+      <div
+        class="mo-context-view__content mo-context-view--shadow"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;

src/workbench/activityBar/activityBar.tsx

@@ -16,7 +16,7 @@ import {
     itemClassName,
     normalItemsClassName,
 } from './base';
-import { useContextView } from 'mo/components';
+import { useContextViewEle } from 'mo/components';
 import { UniqueId } from 'mo/common/types';
 
 export function ActivityBar(props: IActivityBar & IActivityBarController) {
@@ -63,9 +63,7 @@ export function ActivityBar(props: IActivityBar & IActivityBarController) {
         <Menu role="menu" onClick={onClickMenuItem} data={contextMenu} />
     );
 
-    const contextView = useContextView({
-        render: renderContextMenu,
-    });
+    const contextView = useContextViewEle({ render: renderContextMenu });
 
     const onClickMenuItem = useCallback(
         (e: React.MouseEvent, item: IMenuItemProps | undefined) => {
@@ -78,6 +76,7 @@ export function ActivityBar(props: IActivityBar & IActivityBarController) {
     const handleRightClick = (e) => {
         e.preventDefault();
         e.stopPropagation();
+        if (!contextView) return;
         const doms = document.elementsFromPoint(e.pageX, e.pageY);
         const itemDom = doms.find((dom) =>
             dom.classList.contains(itemClassName)

src/workbench/activityBar/activityBarItem.tsx

@@ -11,7 +11,7 @@ import {
     itemCheckedClassName,
     itemDisabledClassName,
 } from './base';
-import { Icon, useContextView } from 'mo/components';
+import { Icon, useContextViewEle } from 'mo/components';
 import { KeybindingHelper } from 'mo/services/keybinding';
 
 export function ActivityBarItem(
@@ -53,9 +53,7 @@ export function ActivityBarItem(
         />
     );
 
-    const contextView = useContextView({
-        render: renderContextMenu,
-    });
+    const contextView = useContextViewEle({ render: renderContextMenu });
 
     const onClickMenuItem = (
         e: React.MouseEvent,
@@ -70,7 +68,7 @@ export function ActivityBarItem(
             onClick(props.id, props);
         }
         if (contextMenu.length > 0) {
-            contextView.show({ x: event.pageX, y: event.pageY });
+            contextView?.show({ x: event.pageX, y: event.pageY });
         }
     };
 

src/workbench/sidebar/explore/folderTree.tsx

@@ -6,15 +6,14 @@ import Tree from 'mo/components/tree';
 import { IMenuItemProps, Menu } from 'mo/components/menu';
 import { Button } from 'mo/components/button';
 import type { IFolderTreeController } from 'mo/controller/explorer/folderTree';
-import { useContextView } from 'mo/components/contextView';
 import { useContextMenu } from 'mo/components/contextMenu';
 import {
     folderTreeClassName,
     folderTreeEditClassName,
     folderTreeInputClassName,
 } from './base';
 import { classNames } from 'mo/common/className';
-import { Scrollable } from 'mo/components';
+import { Scrollable, useContextViewEle } from 'mo/components';
 import { ICollapseItem } from 'mo/components/collapse';
 
 export interface IFolderTreeProps extends IFolderTreeController, IFolderTree {
@@ -95,7 +94,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
     const contextMenu = useRef<ReturnType<typeof useContextMenu>>();
 
     // panel context view
-    const contextView = useContextView();
+    const contextView = useContextViewEle();
 
     // to detect current tree whether is editable
     const hasEditable = detectHasEditableStatus(data);
@@ -124,7 +123,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
         data: IFolderTreeNodeProps
     ) => {
         onClickContextMenu?.(item, data);
-        contextView.hide();
+        contextView?.hide();
     };
 
     const handleRightClick = (event, data) => {