diff --git a/.changeset/pink-jokes-flow.md b/.changeset/pink-jokes-flow.md new file mode 100644 index 000000000..864a926bf --- /dev/null +++ b/.changeset/pink-jokes-flow.md @@ -0,0 +1,6 @@ +--- +"@hi-ui/hiui": patch +--- + +Menu fix: 修复 disabled 不生效问题 +Badge 支持字符串和数字 hover 时显示完整内容 diff --git a/.changeset/shiny-rivers-jam.md b/.changeset/shiny-rivers-jam.md new file mode 100644 index 000000000..ede800762 --- /dev/null +++ b/.changeset/shiny-rivers-jam.md @@ -0,0 +1,6 @@ +--- +"@hi-ui/badge": patch +--- + +Badge 支持字符串和数字 hover 时显示完整内容 + diff --git a/.changeset/stupid-meals-repair.md b/.changeset/stupid-meals-repair.md new file mode 100644 index 000000000..d59da3962 --- /dev/null +++ b/.changeset/stupid-meals-repair.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/menu": patch +--- + +fix: 修复 disabled 不生效问题 diff --git a/packages/ui/menu/src/MenuItem.tsx b/packages/ui/menu/src/MenuItem.tsx index ba92c9580..bb3b24ab7 100644 --- a/packages/ui/menu/src/MenuItem.tsx +++ b/packages/ui/menu/src/MenuItem.tsx @@ -90,14 +90,9 @@ export const MenuItem = forwardRef( })} onClick={() => { if (isArrayNonEmpty(children)) { - if (clickSubMenu) { - clickSubMenu(id) - } + !disabled && clickSubMenu?.(id) } else { - if (clickMenu) { - // @ts-ignore - clickMenu(id, raw) - } + !disabled && clickMenu?.(id, raw as MenuDataItem) if ( closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false) @@ -121,7 +116,7 @@ export const MenuItem = forwardRef( placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && - (expandedIds?.includes(id) ? ( + (!disabled && expandedIds?.includes(id) ? ( ) : ( @@ -144,7 +139,7 @@ export const MenuItem = forwardRef( {hasChildren && placement === 'horizontal' && level === 1 && - (expandedIds?.includes(id) ? ( + (!disabled && expandedIds?.includes(id) ? ( ) : ( @@ -156,7 +151,7 @@ export const MenuItem = forwardRef( !mini && !showAllSubMenus && expandedType === 'collapse' ? ( - +
    {children!.map((child) => ( ( gutterGap={16} className={overlayClassName} onClose={() => { - if (closePopper) { - closePopper(id) - } + closePopper?.(id) }} >
      @@ -218,9 +211,7 @@ export const MenuItem = forwardRef( disabledPortal className={overlayClassName} onClose={() => { - if (closePopper) { - closePopper(id) - } + closePopper?.(id) }} >
        @@ -251,9 +242,7 @@ export const MenuItem = forwardRef( gutterGap={16} className={overlayClassName} onClose={() => { - if (closePopper) { - closePopper(id) - } + closePopper?.(id) }} >
          @@ -279,9 +268,7 @@ export const MenuItem = forwardRef( gutterGap={16} className={overlayClassName} onClose={() => { - if (closePopper) { - closePopper(id) - } + closePopper?.(id) }} >
            @@ -308,9 +295,7 @@ export const MenuItem = forwardRef( gutterGap={16} className={overlayClassName} onClose={() => { - if (closePopper) { - closePopper(id) - } + closePopper?.(id) }} >
            @@ -323,15 +308,14 @@ export const MenuItem = forwardRef( {child.children.map((item) => (
            { - if (clickMenu) { - clickMenu(item.id, item) - } - if (closePopper) { - closePopper(id) + if (!item.disabled) { + clickMenu?.(item.id, item) + closePopper?.(id) } }} className={cx(`${prefixCls}-item`, { [`${prefixCls}-item--active`]: activeId === item.id, + [`${prefixCls}-item--disabled`]: item.disabled })} key={item.id} > @@ -358,9 +342,7 @@ export const MenuItem = forwardRef( gutterGap={level === 1 ? 8 : 16} className={overlayClassName} onClose={() => { - if (closePopper) { - closePopper(id) - } + closePopper?.(id) }} >
              @@ -386,9 +368,7 @@ export const MenuItem = forwardRef( gutterGap={level === 1 ? 8 : 16} className={overlayClassName} onClose={() => { - if (closePopper) { - closePopper(id) - } + closePopper?.(id) }} >
                @@ -415,9 +395,7 @@ export const MenuItem = forwardRef( gutterGap={8} className={overlayClassName} onClose={() => { - if (closePopper) { - closePopper(id) - } + closePopper?.(id) }} >
                @@ -431,13 +409,12 @@ export const MenuItem = forwardRef(
                { - if (clickMenu) { - clickMenu(item.id, item) - } - if (closePopper) { - closePopper(id) + if (!item.disabled) { + clickMenu?.(item.id, item) + closePopper?.(id) } }} key={item.id} @@ -476,7 +453,7 @@ if (__DEV__) { } const Arrow = ({ prefixCls, direction }: any) => { - let icon = null + let icon switch (direction) { case 'up': icon = diff --git a/packages/ui/menu/src/styles/menu.scss b/packages/ui/menu/src/styles/menu.scss index c4ec80c6b..b3005a50d 100644 --- a/packages/ui/menu/src/styles/menu.scss +++ b/packages/ui/menu/src/styles/menu.scss @@ -1,6 +1,12 @@ @import '~@hi-ui/core-css/lib/index.scss'; $prefix: '#{$component-prefix}-menu' !default; +$disabled-color: use-color('gray', 400) !default; + +@mixin menu-item-disabled() { + color: $disabled-color; + cursor: not-allowed; +} .#{$prefix}-fat-menu { background-color: use-color-static('white'); @@ -41,6 +47,10 @@ $prefix: '#{$component-prefix}-menu' !default; &:not(.#{$prefix}-item--active):hover { background-color: use-color('gray', 100); } + + &--disabled { + @include menu-item-disabled; + } } ul { @@ -92,6 +102,10 @@ $prefix: '#{$component-prefix}-menu' !default; &:not(.#{$prefix}-item__inner--active):hover { background-color: use-color('gray', 100); } + + &--disabled { + @include menu-item-disabled; + } } &__content { @@ -143,6 +157,10 @@ $prefix: '#{$component-prefix}-menu' !default; height: 100%; flex-shrink: 0; } + + &--disabled { + @include menu-item-disabled; + } } &__wrapper { @@ -220,6 +238,20 @@ $prefix: '#{$component-prefix}-menu' !default; white-space: nowrap; max-width: none; } + + &--disabled { + @include menu-item-disabled; + + &:hover { + .#{$prefix}-item__inner { + border-color: use-color-static('white'); + } + } + + .#{$prefix}-item__content { + color: $disabled-color; + } + } } } @@ -309,6 +341,10 @@ $prefix: '#{$component-prefix}-menu' !default; white-space: nowrap; text-indent: 0.5px; } + + &--disabled { + @include menu-item-disabled; + } } }