Skip to content

Commit

Permalink
Merge pull request #2620 from aqiusen/hotfix/menu(#2618)
Browse files Browse the repository at this point in the history 
Hotfix/menu(#2618)
  • Loading branch information
@solarjoker
solarjoker authored Oct 20, 2023
2 parents c15fb77 + 3757fed commit aa21320
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 45 deletions.
6 changes: 6 additions & 0 deletions .changeset/pink-jokes-flow.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@hi-ui/hiui": patch
---

Menu fix: 修复 disabled 不生效问题
Badge 支持字符串和数字 hover 时显示完整内容
6 changes: 6 additions & 0 deletions .changeset/shiny-rivers-jam.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@hi-ui/badge": patch
---

Badge 支持字符串和数字 hover 时显示完整内容

5 changes: 5 additions & 0 deletions .changeset/stupid-meals-repair.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hi-ui/menu": patch
---

fix: 修复 disabled 不生效问题
67 changes: 22 additions & 45 deletions packages/ui/menu/src/MenuItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,9 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
})}
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)
Expand All @@ -121,7 +116,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
placement === 'vertical' &&
expandedType === 'collapse' &&
!showAllSubMenus &&
(expandedIds?.includes(id) ? (
(!disabled && expandedIds?.includes(id) ? (
<Arrow prefixCls={`${prefixCls}-item`} direction="up" />
) : (
<Arrow prefixCls={`${prefixCls}-item`} direction="down" />
Expand All @@ -144,7 +139,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
{hasChildren &&
placement === 'horizontal' &&
level === 1 &&
(expandedIds?.includes(id) ? (
(!disabled && expandedIds?.includes(id) ? (
<Arrow prefixCls={`${prefixCls}-item`} direction="up" />
) : (
<Arrow prefixCls={`${prefixCls}-item`} direction="down" />
Expand All @@ -156,7 +151,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
!mini &&
!showAllSubMenus &&
expandedType === 'collapse' ? (
<Expander visible={!!expandedIds?.includes(id)}>
<Expander visible={!disabled && !!expandedIds?.includes(id)}>
<ul className={`${prefixCls}-submenu`}>
{children!.map((child) => (
<MenuItem
Expand Down Expand Up @@ -188,9 +183,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
gutterGap={16}
className={overlayClassName}
onClose={() => {
if (closePopper) {
closePopper(id)
}
closePopper?.(id)
}}
>
<ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
Expand Down Expand Up @@ -218,9 +211,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
disabledPortal
className={overlayClassName}
onClose={() => {
if (closePopper) {
closePopper(id)
}
closePopper?.(id)
}}
>
<ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
Expand Down Expand Up @@ -251,9 +242,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
gutterGap={16}
className={overlayClassName}
onClose={() => {
if (closePopper) {
closePopper(id)
}
closePopper?.(id)
}}
>
<ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
Expand All @@ -279,9 +268,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
gutterGap={16}
className={overlayClassName}
onClose={() => {
if (closePopper) {
closePopper(id)
}
closePopper?.(id)
}}
>
<ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
Expand All @@ -308,9 +295,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
gutterGap={16}
className={overlayClassName}
onClose={() => {
if (closePopper) {
closePopper(id)
}
closePopper?.(id)
}}
>
<div className={`${prefixCls}-fat-menu`}>
Expand All @@ -323,15 +308,14 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
{child.children.map((item) => (
<div
onClick={() => {
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}
>
Expand All @@ -358,9 +342,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
gutterGap={level === 1 ? 8 : 16}
className={overlayClassName}
onClose={() => {
if (closePopper) {
closePopper(id)
}
closePopper?.(id)
}}
>
<ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
Expand All @@ -386,9 +368,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
gutterGap={level === 1 ? 8 : 16}
className={overlayClassName}
onClose={() => {
if (closePopper) {
closePopper(id)
}
closePopper?.(id)
}}
>
<ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
Expand All @@ -415,9 +395,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
gutterGap={8}
className={overlayClassName}
onClose={() => {
if (closePopper) {
closePopper(id)
}
closePopper?.(id)
}}
>
<div className={`${prefixCls}-fat-menu`}>
Expand All @@ -431,13 +409,12 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
<div
className={cx(`${prefixCls}-item`, {
[`${prefixCls}-item--active`]: activeId === item.id,
[`${prefixCls}-item--disabled`]: item.disabled
})}
onClick={() => {
if (clickMenu) {
clickMenu(item.id, item)
}
if (closePopper) {
closePopper(id)
if (!item.disabled) {
clickMenu?.(item.id, item)
closePopper?.(id)
}
}}
key={item.id}
Expand Down Expand Up @@ -476,7 +453,7 @@ if (__DEV__) {
}

const Arrow = ({ prefixCls, direction }: any) => {
let icon = null
let icon
switch (direction) {
case 'up':
icon = <UpOutlined />
Expand Down
36 changes: 36 additions & 0 deletions packages/ui/menu/src/styles/menu.scss
View file
Original file line number Diff line number Diff line change
@@ -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');
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -143,6 +157,10 @@ $prefix: '#{$component-prefix}-menu' !default;
height: 100%;
flex-shrink: 0;
}

&--disabled {
@include menu-item-disabled;
}
}

&__wrapper {
Expand Down Expand Up @@ -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;
}
}
}
}

Expand Down Expand Up @@ -309,6 +341,10 @@ $prefix: '#{$component-prefix}-menu' !default;
white-space: nowrap;
text-indent: 0.5px;
}

&--disabled {
@include menu-item-disabled;
}
}
}

Expand Down

0 comments on commit aa21320

Please sign in to comment.