fix: 修复单击触发bug

Author: jeryqwq

src/ContextMenu/Item.tsx

@@ -9,11 +9,12 @@ export type ContextMenuItemProps = {
   curData: React.MutableRefObject<ContextMenuItem | undefined>;
   depth: number;
   prevRects: Array<() => HTMLUListElement>;
-  loadding: React.ReactNode
+  loadding: React.ReactNode;
+  setMenuVisible: (visible: boolean) => void
 }
 
 const Item = memo(function (props: ContextMenuItemProps) { // 渲染单项
-  const { item, curData, onClick , prevRects, depth, loadding} = props;
+  const { item, curData, onClick , prevRects, depth, loadding, setMenuVisible} = props;
   const [isLoadding, setLoadding] = useState(false)
   const [showChildren, setShowChildren] = useState(false)
   const [, startTransition] = useTransition()
@@ -27,6 +28,7 @@ const Item = memo(function (props: ContextMenuItemProps) { // 渲染单项
         return
       }
       !item.disabled && onClick(e, curData?.current as any, item)
+      setMenuVisible(false)
     }}
     tabIndex={-1}
     onMouseEnter={async (e) => {

src/ContextMenu/README.md

@@ -103,45 +103,50 @@ export default function MyContextMenu () {
 }
 ```
 
-## 多级菜单 & 异步动态加载
+## 多级菜单 & 异步无限加载
+
+用来测试极端情况，始终报纸多层情况下能渲染在可视化屏幕内。
 
 ```tsx
 import { ContextMenu } from '@vis/components';
-import React from 'react'
+import React from 'react';
 import { ReloadOutlined } from '@ant-design/icons';
 const { useContextMenu } = ContextMenu;
-
-export default function MyContextMenu () {
-  const { Trigger, ContextMenu } = useContextMenu()
-
-
-  return <div>
-    <Trigger data={{id: '123'}}>右键我</Trigger>
-    <ContextMenu menus={[{ label: '操作1', value: '1' },
-    {
-  label: '动态异步菜单',
-  value: 'key2',
-  icon: <ReloadOutlined />,
-  children: () => {
+import { Spin } from 'antd';
+const loadChildren = (item) => {
     return new Promise((resolve, reject) => {
       setTimeout(() => {
         resolve([
-          { label: '操作2-1',
-            value: 'key2-1'
+          { label: `操作${item.value}-1`,
+            value: `key${item.value}-1`
           },
-          { label: '操作2-2',
-            value: 'key2-2'
+          { label: `操作${item.value}-2`,
+            value: `key${item.value}-2`,
+            children: loadChildren
           },
-          { label: '操作2-3',
-            value: 'key2-3'
+          { label: `操作${item.value}-3`,
+            value: `key${item.value}-3`
           },
-          { label: '操作2-4',
-            value: 'key2-4'
+          { label: `操作${item.value}-4`,
+            value: `key${item.value}-4`
           }
         ])
       }, 1000)
     })
   }
+export default function MyContextMenu () {
+  const { Trigger, ContextMenu } = useContextMenu()
+
+  return <div>
+    <Trigger data={{id: '123'}} style={{border: 'solid 1px red'}}><div>右键我</div></Trigger>
+    <ContextMenu 
+    loadding={<Spin size={'small'}/>}
+  menus={[{ label: '操作1', value: '1' },
+    {
+  label: '动态异步菜单',
+  value: 'key2',
+  icon: <ReloadOutlined />,
+  children: loadChildren
 },
     ]} onClick={(e, data, menu) => {
       alert(`data.id: ${data.id} menu.value: ${menu.value}`)

src/ContextMenu/SubMenu.tsx

@@ -16,7 +16,7 @@ declare type SubMenuProps = {
 
 export default function (props : SubMenuProps) {
   const { children, prevRects, depth } = props
-  const [_layout, setLayout] = useState<React.CSSProperties>({ position: 'absolute', left: '100%', top: '0' })
+  const [_layout, setLayout] = useState<React.CSSProperties>({ position: 'absolute', left: '100%', top: '0', zIndex: depth })
   const rectRef = createRef<HTMLUListElement>()
   prevRects[depth] = () => rectRef.current as HTMLUListElement
   useLayoutEffect(() => {
@@ -26,17 +26,21 @@ export default function (props : SubMenuProps) {
     let layout: React.CSSProperties = { transform : ''}
     if(res?.right) { // 右侧无法展示， 移到最左侧展示 
       let moveX = 0
-      prevRects.forEach((i, idx) => {
-        if(idx !== prevRects.length -1 ) {
-          moveX += (i?.()?.getBoundingClientRect().width) || 0
-        }
-      })
-      layout.transform += `translateX(calc( -100% - ${moveX}px ))`
+      if(depth <= 1) { // 如果当前第二层以前，更好的效果我们渲染到最左边去
+        prevRects.forEach((i, idx) => {
+          if(idx !== prevRects.length -1 ) {
+            moveX += (i?.()?.getBoundingClientRect().width) || 0
+          }
+        })
+        layout.transform += `translateX(calc( -100% - ${moveX}px ))`
+      }else{ // 否则直接基于上一次的出来的做累加
+        layout.left = 10
+      }
     }
     if(res?.bottom) {
-      layout.transform += `translateY(-${res.bottom}px )`
+      layout.transform += `translateY(-${res.bottom as number + depth * 10}px )`
     }
-    setLayout({..._layout, ...layout})
+    (res?.right || res?.bottom ) && setLayout({..._layout, ...layout})
   }, [])
   return (
     <ul

src/ContextMenu/helper.ts

@@ -7,7 +7,7 @@ export const compareShapeLocation = function (b: DOMRect) {
   }
   0 > b.left && (ret.left = true)
   0 > b.top && (ret.top = true)
-  window.innerWidth < b.right && (ret.right = true)
+  window.innerWidth < b.right && (ret.right = b.right - window.innerWidth)
   window.innerHeight < (b.bottom ) && (ret.bottom = (b.bottom) - window.innerHeight)
   return ret
 }

src/ContextMenu/index.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, useMemo } from 'react';
 import './index.less';
 import Item from './Item';
 import SubMenu from './SubMenu';
@@ -22,7 +22,7 @@ export declare type ContextMenuItem = {
 
 export type HandleClick = (e: MouseEvent<HTMLLIElement, any>, item: ContextMenuItem & { target: HTMLElement }, menu: ContextMenuItem) => void
 
-type ContextMenuProps = {
+export type ContextMenuProps = {
   /** 菜单数据 */
   menus: Array<ContextMenuItem>;
   onClick: HandleClick;
@@ -37,6 +37,8 @@ type ContextMenuProps = {
   prevRects?: Array<() => HTMLUListElement>;
     /** 自定义加载图表 */
   loadding?: React.ReactNode;
+  /** 设置菜单显示隐藏 */
+  setMenuVisible: (visible: boolean) => void
 };
 
 export const prefixCls = 'vis-comp-context-menu-'
@@ -48,13 +50,14 @@ const ContextMenu = function (props: ContextMenuProps) {
     curItem,
     prevRects = [],
     depth = 0,
-    loadding
+    loadding,
+    setMenuVisible
   } = props
-  return <SubMenu {...props} depth={ depth } prevRects={prevRects}>
-    {
-      menus.map(i => <Item loadding={loadding} item={i} curData={ curItem } onClick={onClick} prevRects={prevRects} depth={depth + 1}/>)
-    }
-  </SubMenu>
+  return useMemo(() => <SubMenu {...props} depth={ depth } prevRects={prevRects}>
+  {
+    menus.map(i => <Item loadding={loadding} item={i} curData={ curItem } onClick={onClick} prevRects={prevRects} depth={depth + 1} setMenuVisible={setMenuVisible}/>)
+  }
+</SubMenu>, [onClick, menus, loadding])
 }
 
 ContextMenu.Item = Item

src/ContextMenu/useContextMenu.tsx

@@ -47,6 +47,7 @@ export default (hooksProps : HooksProps) => {
       const el = createRef<HTMLDivElement>()
       useLayoutEffect(() => {
         const contextMenuHandle = function (e: MouseEvent) {
+          e.stopPropagation()
           e.preventDefault()
           curItem.current = data
           setPosition({
@@ -74,20 +75,15 @@ export default (hooksProps : HooksProps) => {
     }: ContextMenuProps) => {
       useLayoutEffect(() => {
         const hideMenu = function () {
-          setTimeout(() => {
-           setMenuVisible(false);
-          }, 0);
+            setMenuVisible(false);
          }
-        event !== 'click' && document.body.addEventListener('click', hideMenu)
+         document.body.addEventListener('click', hideMenu)
         return () => {
-          event !== 'click' && document.body.removeEventListener('click', hideMenu)
+          document.body.removeEventListener('click', hideMenu)
         }
       }, [])
       return <div
         tabIndex={0}
-        onClick={() => {
-          setMenuVisible(false)
-        }}
         style={{
           left: position.x ?? 0,
           top: position.y ?? 0,
@@ -100,6 +96,7 @@ export default (hooksProps : HooksProps) => {
             onClick={onClick}
             curItem={curItem}
             loadding={loadding}
+            setMenuVisible={setMenuVisible}
           />
         </div>
     }