diff --git a/.dumirc.ts b/.dumirc.ts
index 8017ea5..3883df6 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -30,13 +30,6 @@ export default defineConfig({
exportStatic: {},
forkTSChecker: {},
extraBabelPlugins: [
- [
- 'import',
- {
- libraryName: 'zens',
- libraryDirectory: '',
- camel2DashComponentName: false,
- },
- ],
+
],
});
diff --git a/package.json b/package.json
index 3208905..e78cf8a 100644
--- a/package.json
+++ b/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",
diff --git a/src/Menu/demo/ContextMenu.tsx b/src/Menu/demo/ContextMenu.tsx
new file mode 100644
index 0000000..587a81b
--- /dev/null
+++ b/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 (
+ {
+ event.preventDefault();
+ setAnchorRect({ x: event.clientX, y: event.clientY });
+ menu.show();
+ }}
+ >
+ Right click here
+
+
+ );
+};
+
+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;
+`;
diff --git a/src/Menu/demo/basic.tsx b/src/Menu/demo/basic.tsx
index f7c6ef1..73932f2 100644
--- a/src/Menu/demo/basic.tsx
+++ b/src/Menu/demo/basic.tsx
@@ -24,6 +24,10 @@ export default () => {
},
],
},
+ {
+ label: 'menu3',
+ value: 'menu3',
+ }
];
return (
diff --git a/src/Menu/index.md b/src/Menu/index.md
index e0c24b9..6fad7e2 100644
--- a/src/Menu/index.md
+++ b/src/Menu/index.md
@@ -13,3 +13,8 @@ group:
### 基本用法
+
+
+### ContextMenu
+
+
diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
index b62f99c..f715ac7 100644
--- a/src/Menu/index.tsx
+++ b/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) => {
{item.label}
- {renderItems(item.children)}
+ {renderItems(item.children)}
);
} else {
@@ -55,6 +57,14 @@ const Menu = (props: MenuProps) => {
});
};
+ if (store) {
+ return (
+
+ {renderItems(items)}
+
+ );
+ }
+
return (
{children ? {children} : null}