Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hotfix/menu(#2618) #2620

Merged
merged 7 commits into from
Oct 20, 2023
Merged

Hotfix/menu(#2618) #2620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
43fedf3
fix(menu): #2618
Oct 10, 2023
e790773
fix(menu): #2618
Oct 10, 2023
6a15028
fix(menu): #2618 修改if判断为可选链
Oct 16, 2023
1f82d70
fix(menu): #2618 修改样式，解决hover状态菜单向下跳动问题
Oct 17, 2023
863bcde
fix(menu): #2618 增加changset
Oct 18, 2023
dca2329
fix(menu): #2618 修改changset描述文案
Oct 19, 2023
3757fed
fix(badge): #2618 格式化代码
Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/pink-jokes-flow.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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