contextmenu demo

.dumirc.ts

@@ -30,13 +30,6 @@ export default defineConfig({
   exportStatic: {},
   forkTSChecker: {},
   extraBabelPlugins: [
-    [
-      'import',
-      {
-        libraryName: 'zens',
-        libraryDirectory: '',
-        camel2DashComponentName: false,
-      },
-    ],
+
   ],
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zens",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "MarkFlowy's ui component library.",
   "keywords": [],
   "homepage": "https://github.com/drl990114/zens#readme",

src/Menu/demo/ContextMenu.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { Menu, useMenuStore } from 'zens';
+
+export default () => {
+  const [anchorRect, setAnchorRect] = useState({ x: 0, y: 0 });
+  const menu = useMenuStore();
+
+  const menuData = [
+    {
+      label: 'menu1',
+      value: 'menu1',
+      checked: true,
+      handler: () => {
+        console.log('menu1');
+      },
+    },
+    {
+      label: 'menu2',
+      value: 'menu2',
+      children: [
+        {
+          label: 'menu2-1',
+          value: 'menu2-1',
+        },
+        {
+          label: 'menu2-2',
+          value: 'menu2-2',
+        },
+      ],
+    },
+    {
+      label: 'menu3',
+      value: 'menu3',
+    },
+  ];
+
+  return (
+    <Container
+      onContextMenu={(event) => {
+        event.preventDefault();
+        setAnchorRect({ x: event.clientX, y: event.clientY });
+        menu.show();
+      }}
+    >
+      Right click here
+      <Menu items={menuData} store={menu} modal getAnchorRect={() => anchorRect}></Menu>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  border-width: 2px;
+  border-style: dashed;
+  border-color: hsl(204 20% 88%);
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+  padding-left: 4rem;
+  padding-right: 4rem;
+`;

src/Menu/demo/basic.tsx

@@ -24,6 +24,10 @@ export default () => {
         },
       ],
     },
+    {
+      label: 'menu3',
+      value: 'menu3',
+    }
   ];
 
   return (

src/Menu/index.md

@@ -13,3 +13,8 @@ group:
 ### 基本用法
 
 <code src="./demo/basic.tsx"></code>
+
+
+### ContextMenu
+
+<code src="./demo/ContextMenu.tsx"></code>

src/Menu/index.tsx

@@ -1,7 +1,9 @@
 import type { MenuProps as AkMenuProps } from '@ariakit/react';
-import { MenuButton, MenuButtonArrow, MenuItem, MenuProvider } from '@ariakit/react';
+import { MenuButton, MenuButtonArrow, MenuItem, MenuProvider, useMenuStore } from '@ariakit/react';
 import { MenuWrapper } from './MenuWrapper';
 
+export { useMenuStore };
+
 export type MenuItemData = {
   label: string;
   keybinding?: string;
@@ -17,7 +19,7 @@ interface MenuProps extends AkMenuProps {
 }
 
 const Menu = (props: MenuProps) => {
-  const { open, items, triggerBtnClass, style, children, ...rest } = props;
+  const { open, items, triggerBtnClass, store, style, children, ...rest } = props;
 
   const renderItems = (menuItems: MenuItemData[]) => {
     return menuItems.map((item) => {
@@ -31,7 +33,7 @@ const Menu = (props: MenuProps) => {
               <span className="menu-label">{item.label}</span>
               <MenuButtonArrow />
             </MenuItem>
-            <MenuWrapper onClose={rest.onClose}>{renderItems(item.children)}</MenuWrapper>
+            <MenuWrapper>{renderItems(item.children)}</MenuWrapper>
           </MenuProvider>
         );
       } else {
@@ -55,6 +57,14 @@ const Menu = (props: MenuProps) => {
     });
   };
 
+  if (store) {
+    return (
+      <MenuWrapper style={style} store={store} {...rest}>
+        {renderItems(items)}
+      </MenuWrapper>
+    );
+  }
+
   return (
     <MenuProvider>
       {children ? <MenuButton className={triggerBtnClass}>{children}</MenuButton> : null}