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 + anchorRect}> + + ); +}; + +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}