Hotfix/menu(#2618)

packages/ui/menu/src/MenuItem.tsx

@@ -90,11 +90,11 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
             })}
             onClick={() => {
               if (isArrayNonEmpty(children)) {
-                if (clickSubMenu) {
+                if (!disabled && clickSubMenu) {
                   clickSubMenu(id)
                 }
               } else {
-                if (clickMenu) {
+                if (!disabled && clickMenu) {
                   // @ts-ignore
                   clickMenu(id, raw)
                 }
@@ -121,7 +121,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" />
@@ -144,7 +144,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" />
@@ -156,7 +156,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
@@ -323,15 +323,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 && clickMenu(item.id, item)
+                                closePopper && closePopper(id)
                               }
                             }}
                             className={cx(`${prefixCls}-item`, {
                               [`${prefixCls}-item--active`]: activeId === item.id,
+                              [`${prefixCls}-item--disabled`]: item.disabled
                             })}
                             key={item.id}
                           >
@@ -431,13 +430,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 && clickMenu(item.id, item)
+                                closePopper && closePopper(id)
                               }
                             }}
                             key={item.id}

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: var(--hi-v4-color-gray-400, #c9ced6) !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,18 @@ $prefix: '#{$component-prefix}-menu' !default;
         white-space: nowrap;
         max-width: none;
       }
+
+      &--disabled {
+        @include menu-item-disabled;
+
+        .#{$prefix}-item__inner.#{$prefix}-item__inner {
+          border-bottom: 0;
+
+          .#{$prefix}-item__content {
+            color: $disabled-color;
+          }
+        }
+      }
     }
   }
 
@@ -309,6 +339,10 @@ $prefix: '#{$component-prefix}-menu' !default;
         white-space: nowrap;
         text-indent: 0.5px;
       }
+
+      &--disabled {
+        @include menu-item-disabled;
+      }
     }
   }