From 2f094567e678235e75ff5c443dce1ee09c3bd115 Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Fri, 1 Sep 2023 10:07:24 +0800 Subject: [PATCH] =?UTF-8?q?feat(menu):=20=E5=A2=9E=E5=8A=A0=20size=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/cool-tables-check.md | 5 + .changeset/green-peas-deny.md | 5 + .changeset/tasty-pets-care.md | 5 + packages/ui/menu/src/Menu.tsx | 25 ++- packages/ui/menu/src/MenuItem.tsx | 27 ++- packages/ui/menu/src/styles/menu.scss | 35 +++- packages/ui/menu/stories/index.stories.tsx | 1 + packages/ui/menu/stories/size.stories.tsx | 212 +++++++++++++++++++++ 8 files changed, 293 insertions(+), 22 deletions(-) create mode 100644 .changeset/cool-tables-check.md create mode 100644 .changeset/green-peas-deny.md create mode 100644 .changeset/tasty-pets-care.md create mode 100644 packages/ui/menu/stories/size.stories.tsx diff --git a/.changeset/cool-tables-check.md b/.changeset/cool-tables-check.md new file mode 100644 index 000000000..73f7b5d38 --- /dev/null +++ b/.changeset/cool-tables-check.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +Menu feat: 增加 size API diff --git a/.changeset/green-peas-deny.md b/.changeset/green-peas-deny.md new file mode 100644 index 000000000..a9677c8e9 --- /dev/null +++ b/.changeset/green-peas-deny.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +Menu feat: 增加 render 和 extraHeader API diff --git a/.changeset/tasty-pets-care.md b/.changeset/tasty-pets-care.md new file mode 100644 index 000000000..acc7cae8b --- /dev/null +++ b/.changeset/tasty-pets-care.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/menu": minor +--- + +feat: 增加 size API diff --git a/packages/ui/menu/src/Menu.tsx b/packages/ui/menu/src/Menu.tsx index 395c9e1cf..50bbf7aea 100644 --- a/packages/ui/menu/src/Menu.tsx +++ b/packages/ui/menu/src/Menu.tsx @@ -9,12 +9,8 @@ import React, { import { cx, getPrefixCls } from '@hi-ui/classname' import { MenuFoldOutlined, MenuUnfoldOutlined } from '@hi-ui/icons' import { __DEV__ } from '@hi-ui/env' -import { MenuItem } from './MenuItem' -import MenuContext from './context' -import { getAncestorIds } from './util' import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state' -import { HiBaseHTMLProps } from '@hi-ui/core' -import { MenuDataItem, MenuFooterRenderProps } from './types' +import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core' import Tooltip from '@hi-ui/tooltip' import { useUncontrolledToggle } from '@hi-ui/use-toggle' import { getTreeNodesWithChildren } from '@hi-ui/tree-utils' @@ -22,6 +18,10 @@ import { isFunction, isArrayNonEmpty } from '@hi-ui/type-assertion' import { useResizeObserver } from '@hi-ui/use-resize-observer' import { useMergeRefs } from '@hi-ui/use-merge-refs' import { uuid } from '@hi-ui/use-id' +import { MenuDataItem, MenuFooterRenderProps } from './types' +import { MenuItem } from './MenuItem' +import MenuContext from './context' +import { getAncestorIds } from './util' const MENU_PREFIX = getPrefixCls('menu') @@ -61,6 +61,7 @@ export const Menu = forwardRef( render, extraHeader, onClick, + size = 'lg', ...rest }, ref @@ -230,6 +231,7 @@ export const Menu = forwardRef( prefixCls, className, `${prefixCls}--${placement}`, + `${prefixCls}--size-${size}`, mini && `${prefixCls}--mini`, (expandedType === 'pop' || showAllSubMenus || mini) && `${prefixCls}--popup` ) @@ -258,7 +260,13 @@ export const Menu = forwardRef( {mergedTagList.map((item, index) => { return showMini ? ( - + ) : ( ( key={item.id} level={1} raw={item} + size={size} /> ) })} @@ -368,6 +377,10 @@ export interface MenuProps extends Omit, 'onClick'> { * 额外的头部内容 */ extraHeader?: React.ReactNode + /** + * 设置菜单项的尺寸 + */ + size?: HiBaseSizeEnum } if (__DEV__) { diff --git a/packages/ui/menu/src/MenuItem.tsx b/packages/ui/menu/src/MenuItem.tsx index e0082a2c0..ba92c9580 100644 --- a/packages/ui/menu/src/MenuItem.tsx +++ b/packages/ui/menu/src/MenuItem.tsx @@ -2,14 +2,14 @@ import React, { useRef, useContext, forwardRef } from 'react' import { cx, getPrefixCls } from '@hi-ui/classname' import { __DEV__ } from '@hi-ui/env' import { DownOutlined, UpOutlined, RightOutlined } from '@hi-ui/icons' -import MenuContext from './context' import Popper from '@hi-ui/popper' -import { Expander } from './Expander' import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion' import { times } from '@hi-ui/array-utils' import { useMergeRefs } from '@hi-ui/use-merge-refs' -import { HiBaseHTMLProps } from '@hi-ui/core' +import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core' import { MenuDataItem } from './types' +import MenuContext from './context' +import { Expander } from './Expander' const MENU_PREFIX = getPrefixCls('menu') @@ -35,6 +35,7 @@ export const MenuItem = forwardRef( hidden = false, render, raw, + size = 'lg', ...rest }, ref @@ -165,6 +166,7 @@ export const MenuItem = forwardRef( parentIds={_parentIds} raw={child} render={render} + size={size} /> ))} @@ -191,7 +193,7 @@ export const MenuItem = forwardRef( } }} > -
    +
      {children!.map((child) => { return ( ( parentIds={_parentIds} raw={child} render={render} + size={size} /> ) })} @@ -220,7 +223,7 @@ export const MenuItem = forwardRef( } }} > -
        +
          {children!.map((child) => ( ( parentIds={_parentIds} raw={child} render={render} + size={size} /> ))}
        @@ -252,7 +256,7 @@ export const MenuItem = forwardRef( } }} > -
          +
            {children!.map((child) => ( ( parentIds={_parentIds} raw={child} render={render} + size={size} /> ))}
          @@ -279,7 +284,7 @@ export const MenuItem = forwardRef( } }} > -
            +
              {children!.map((child) => ( ( parentIds={_parentIds} raw={child} render={render} + size={size} /> ))}
            @@ -357,7 +363,7 @@ export const MenuItem = forwardRef( } }} > -
              +
                {children!.map((child) => ( ( parentIds={_parentIds} raw={child} render={render} + size={size} /> ))}
              @@ -384,7 +391,7 @@ export const MenuItem = forwardRef( } }} > -
                +
                  {children!.map((child) => ( ( parentIds={_parentIds} raw={child} render={render} + size={size} /> ))}
                @@ -460,6 +468,7 @@ export interface MenuItemProps extends Omit, 'id'> { parentIds?: React.ReactText[] render?: (node: MenuDataItem) => React.ReactNode raw?: MenuDataItem + size?: HiBaseSizeEnum } if (__DEV__) { diff --git a/packages/ui/menu/src/styles/menu.scss b/packages/ui/menu/src/styles/menu.scss index 7962a911b..c4ec80c6b 100644 --- a/packages/ui/menu/src/styles/menu.scss +++ b/packages/ui/menu/src/styles/menu.scss @@ -127,7 +127,7 @@ $prefix: '#{$component-prefix}-menu' !default; color: use-color('gray', 500); margin-inline-end: use-spacing(4); - svg[class^=hi-v4-icon] { + svg[class^='hi-v4-icon'] { font-size: use-text-size('lg'); } } @@ -274,18 +274,12 @@ $prefix: '#{$component-prefix}-menu' !default; .#{$prefix}-item { &__inner { box-sizing: border-box; - height: 40px; display: flex; align-items: center; - margin-bottom: use-spacing(4); padding: 0 use-spacing(4) 0 use-spacing(6); border-radius: use-border-radius('normal'); transition: all 0.3s; - // &--mini { - // justify-content: center; - // } - &--active { color: use-color-mode('primary'); background-color: use-color-mode('primary', 50); @@ -317,4 +311,31 @@ $prefix: '#{$component-prefix}-menu' !default; } } } + + &--size-lg { + .#{$prefix}-item { + &__inner { + height: use-height-size(10); + margin-bottom: use-spacing(4); + } + } + } + + &--size-md { + .#{$prefix}-item { + &__inner { + height: use-height-size(9); + margin-bottom: use-spacing(2); + } + } + } + + &--size-sm { + .#{$prefix}-item { + &__inner { + height: use-height-size(8); + margin-bottom: use-spacing(1); + } + } + } } diff --git a/packages/ui/menu/stories/index.stories.tsx b/packages/ui/menu/stories/index.stories.tsx index 44e5f71bb..3d92ba25e 100644 --- a/packages/ui/menu/stories/index.stories.tsx +++ b/packages/ui/menu/stories/index.stories.tsx @@ -10,6 +10,7 @@ export * from './vertical-fat.stories' export * from './expand-all.stories' export * from './footer-render.stories' export * from './render.stories' +export * from './size.stories' export default { title: 'Navigation/Menu', diff --git a/packages/ui/menu/stories/size.stories.tsx b/packages/ui/menu/stories/size.stories.tsx new file mode 100644 index 000000000..6e7be6d05 --- /dev/null +++ b/packages/ui/menu/stories/size.stories.tsx @@ -0,0 +1,212 @@ +import React from 'react' +import Menu from '../src' +import { AppStoreOutlined, UserOutlined, SunOutlined, PadOutlined } from '@hi-ui/icons' + +/** + * @title 设置尺寸 + * @desc 默认是 lg 尺寸 + */ +export const Size = () => { + return ( + <> +

                Size

                +
                +

                lg

                + , + }, + { + title: '小米MIX', + id: 2, + icon: , + }, + { + title: '手机', + id: 3, + icon: , + children: [ + { + title: '小米', + id: 666, + }, + { + title: '红米', + id: 'hongmi', + }, + { + title: '小米note', + disabled: true, + id: 'xiaominote', + children: [ + { + title: '小米 note7', + id: 'xiaomi note7', + }, + { + title: '小米 note6', + id: 'xiaomi note6', + }, + { + title: '小米 note5', + id: 'xiaomi note5', + }, + { + title: '小米 note4', + id: 'xiaomi note4', + }, + { + title: '小米 note3', + id: 'xiaomi note3', + }, + ], + }, + ], + }, + { + title: '超长超长超长字符超长超长超长字符', + id: 4, + icon: , + }, + ]} + /> +

                md

                + , + }, + { + title: '小米MIX', + id: 2, + icon: , + }, + { + title: '手机', + id: 3, + icon: , + children: [ + { + title: '小米', + id: 666, + }, + { + title: '红米', + id: 'hongmi', + }, + { + title: '小米note', + disabled: true, + id: 'xiaominote', + children: [ + { + title: '小米 note7', + id: 'xiaomi note7', + }, + { + title: '小米 note6', + id: 'xiaomi note6', + }, + { + title: '小米 note5', + id: 'xiaomi note5', + }, + { + title: '小米 note4', + id: 'xiaomi note4', + }, + { + title: '小米 note3', + id: 'xiaomi note3', + }, + ], + }, + ], + }, + { + title: '超长超长超长字符超长超长超长字符', + id: 4, + icon: , + }, + ]} + /> +

                sm

                + , + }, + { + title: '小米MIX', + id: 2, + icon: , + }, + { + title: '手机', + id: 3, + icon: , + children: [ + { + title: '小米', + id: 666, + }, + { + title: '红米', + id: 'hongmi', + }, + { + title: '小米note', + disabled: true, + id: 'xiaominote', + children: [ + { + title: '小米 note7', + id: 'xiaomi note7', + }, + { + title: '小米 note6', + id: 'xiaomi note6', + }, + { + title: '小米 note5', + id: 'xiaomi note5', + }, + { + title: '小米 note4', + id: 'xiaomi note4', + }, + { + title: '小米 note3', + id: 'xiaomi note3', + }, + ], + }, + ], + }, + { + title: '超长超长超长字符超长超长超长字符', + id: 4, + icon: , + }, + ]} + /> +
                + + ) +}