perf: menu

labring · Jun 24, 2024 · c2253b2 · c2253b2
1 parent b94c72e
commit c2253b2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/web/components/common/MyMenu/index.tsx b/packages/web/components/common/MyMenu/index.tsx
@@ -11,6 +11,7 @@ import {
 import MyIcon from '../Icon';
 import MyDivider from '../MyDivider';
 import type { IconNameType } from '../Icon/type';
+import { useSystem } from '../../../hooks/useSystem';
 
 export type MenuItemType = 'primary' | 'danger';
 
@@ -77,10 +78,14 @@ const MyMenu = ({
     alignItems: 'center',
     fontSize: 'sm'
   };
+
+  const { isPc } = useSystem();
   const ref = useRef<HTMLDivElement>(null);
   const closeTimer = useRef<any>();
   const [isOpen, setIsOpen] = useState(false);
 
+  const formatTrigger = !isPc ? 'click' : trigger;
+
   useOutsideClick({
     ref: ref,
     handler: () => {
@@ -103,17 +108,18 @@ const MyMenu = ({
       isLazy
       lazyBehavior={'keepMounted'}
       placement="bottom-start"
+      computePositionOnMount
     >
       <Box
         ref={ref}
         onMouseEnter={() => {
-          if (trigger === 'hover') {
+          if (formatTrigger === 'hover') {
             setIsOpen(true);
           }
           clearTimeout(closeTimer.current);
         }}
         onMouseLeave={() => {
-          if (trigger === 'hover') {
+          if (formatTrigger === 'hover') {
             closeTimer.current = setTimeout(() => {
               setIsOpen(false);
             }, 100);
@@ -124,7 +130,7 @@ const MyMenu = ({
           position={'relative'}
           onClickCapture={(e) => {
             e.stopPropagation();
-            if (trigger === 'click') {
+            if (formatTrigger === 'click') {
               setIsOpen(!isOpen);
             }
           }}

diff --git a/packages/web/hooks/useSystem.ts b/packages/web/hooks/useSystem.ts
@@ -0,0 +1,7 @@
+import { useMediaQuery } from '@chakra-ui/react';
+
+export const useSystem = () => {
+  const [isPc] = useMediaQuery('(min-width: 900px)');
+
+  return { isPc };
+};