test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-04 21:08:55 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix: Nav组件父节点无法文档路由问题 (#6148)

Browse Source 
Co-authored-by: wanglinfang <wanglinfang@baidu.com>
This commit is contained in:
wanglinfang2014 2023-02-08 19:14:25 +08:00 committed by GitHub
parent 6e21fb2ceb
commit 495e2f9c6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 72 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/amis-ui/scss/components/_menu.scss
View File

@ -378,6 +378,20 @@
color: var(--Menu-light-fontColor-onActive) !important;
}
}
.#{$ns}Nav-Menu-submenu-actived {
> .#{$ns}Nav-Menu-submenu-title {
background-color: var(--Menu-light-backgroundColor-onHover);
@include selected-indicator(
var(--Menu-light-selectedIndicator-color)
);
.#{$ns}Nav-Menu-item-icon,
.#{$ns}Nav-Menu-item-label {
color: var(--Menu-light-fontColor-onActive) !important;
}
}
}
}
}
@ -617,6 +631,14 @@
@include popup-dark();
}
&-submenu-popup {
.#{$ns}Nav-Menu-vertical {
.#{$ns}Nav-Menu-submenu-arrow {
width: px2rem(32px);
}
}
}
.#{$ns}Nav-Menu-submenu-title,
.#{$ns}Nav-Menu-item {
cursor: pointer;
@ -823,7 +845,7 @@
position: absolute;
right: 0;
top: 0;
width: var(--Menu-Submenu-title-paddingX);
width: px2rem(18px);
line-height: var(--Menu-item-height--vertical);
transform: rotate(-90deg);
@ -865,11 +887,9 @@
}
}
&-vertical-right,
&-horizontal {
&-vertical-right {
.#{$ns}Nav-Menu-item {
padding: 0 var(--Menu-Submenu-title-paddingX) 0
calc(var(--Menu-Submenu-title-paddingX) - 1px);
padding: 0 var(--Menu-Submenu-item-paddingX);
}
}
@ -884,6 +904,7 @@
& .#{$ns}Nav-Menu-submenu-open > .#{$ns}Nav-Menu-submenu-title {
.#{$ns}Nav-Menu-submenu-arrow {
transform: rotate(180deg);
padding-bottom: px2rem(4px);
}
}
}
@ -895,14 +916,6 @@
}
}
// .#{$ns}Nav-Menu-submenu {
// .#{$ns}Nav-Menu-submenu-title {
// padding: 0 var(--Menu-Submenu-title-paddingX) 0
// calc(var(--Menu-Submenu-title-paddingX) - 1px);
// text-align: center;
// }
// }
.#{$ns}Nav-Menu-submenu-vertical.#{$ns}Nav-Menu-submenu {
.#{$ns}Nav-Menu-submenu-title {
padding: 0 var(--Menu-Submenu-title-paddingX) 0
@ -966,7 +979,7 @@
@mixin item-disabled {
cursor: not-allowed;
color: var(--Menu-fontColor-onDisabled) !important;
pointer-events: none;
// pointer-events: none;
}
.#{$ns}Nav-Menu-item-disabled,

12
packages/amis-ui/src/components/menu/SubMenu.tsx
View File

@ -228,17 +228,23 @@ export class SubMenu extends React.Component<SubMenuProps> {
}
render() {
const {className, popupClassName, classnames: cx, hidden} = this.props;
const {
className,
popupClassName,
classnames: cx,
hidden,
active
} = this.props;
const isDarkTheme = this.context.themeColor === 'dark';
return hidden ? null : (
<RcSubMenu
{...pick(this.props, this.internalProps)}
className={cx(
'Nav-Menu-submenu',
{
['Nav-Menu-submenu-dark']: isDarkTheme
['Nav-Menu-submenu-dark']: isDarkTheme,
['Nav-Menu-submenu-actived']: active
},
className
)}

48
packages/amis-ui/src/components/menu/index.tsx
View File

@ -180,10 +180,10 @@ export interface MenuProps extends Omit<RcMenuProps, 'mode'> {
*/
onToggleExpand?: (keys: String[]) => void;
// (link: any, depty: number) => boolean
// (link: any, depth: number) => boolean
onSelect?: any;
onToggle: (link: any, forceFold?: boolean) => void;
onToggle: (link: any, depth: number, forceFold?: boolean) => void;
onDragStart?: (
link: any
@ -239,7 +239,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
mode: 'inline',
direction: 'ltr',
prefix: '',
triggerSubMenuAction: 'click',
triggerSubMenuAction: 'hover',
inlineIndent: 15,
popOverContainer: () => document.body,
renderLink: (link: MenuItemProps) => {
@ -310,8 +310,8 @@ export class Menu extends React.Component<MenuProps, MenuState> {
normalizeNavigations(props: MenuProps) {
const {navigations, prefix, isActive, isOpen, stacked} = props;
let id = 1;
const activeKey: Array<string> = [];
const openKey: Array<string> = [];
const activeKeys: Array<string> = [];
const openKeys: Array<string> = [];
const transformedNav = mapTree(
filterTree(
@ -333,17 +333,13 @@ export class Menu extends React.Component<MenuProps, MenuState> {
// 如果没有传入key，则为导航加一个自增key
const navId = (item.id || item.key || id++).toString();
if (!activeKey.find(key => key === navId) && isActive(item, prefix)) {
activeKey?.push(navId);
if (!activeKeys.find(key => key === navId) && isActive(item, prefix)) {
activeKeys?.push(navId);
}
const open = isOpen(item as NavigationItem);
if (
!openKey.find(key => key === navId) &&
!activeKey.find(key => key === navId) &&
open
) {
openKey.push(navId);
if (!openKeys.find(key => key === navId) && open) {
openKeys.push(navId);
}
return {
@ -359,27 +355,19 @@ export class Menu extends React.Component<MenuProps, MenuState> {
);
let activeKeyPaths: Array<string> = [];
activeKey.forEach(key => {
activeKeys.forEach(key => {
activeKeyPaths = [
...activeKeyPaths,
...this.getKeyPaths(transformedNav, key),
key
];
});
let openKeyPaths: Array<string> = [];
openKey.forEach(key => {
openKeyPaths = [
...openKeyPaths,
...this.getKeyPaths(transformedNav, key),
key
];
});
return {
transformedNav,
activeKey: activeKeyPaths,
activeKey: activeKeys,
defaultOpenKeys: activeKeyPaths,
openKeys: openKeyPaths
openKeys
};
}
@ -446,11 +434,11 @@ export class Menu extends React.Component<MenuProps, MenuState> {
let openKeys = this.state.openKeys.concat();
const isOpen = openKeys.includes(key);
const keyPaths = this.getKeyPaths(navigations, key);
if (isOpen) {
openKeys = openKeys.filter(item => item !== key);
} else {
if (isVericalInline && accordion) {
const keyPaths = this.getKeyPaths(navigations, key);
openKeys = [...keyPaths, key];
} else {
openKeys = [...openKeys, key];
@ -459,7 +447,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
const currentItem = findTree(navigations, item => item.id === key);
// 因为Nav里只处理当前菜单项 因此新增一个onToggle事件
onToggle?.(currentItem?.link, isOpen);
onToggle?.(currentItem?.link, keyPaths.length, isOpen);
onToggleExpand?.(uniq(openKeys));
}
@ -477,6 +465,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
const {disabled, eventKey, isOpen, isSubMenu} = ctx;
let openKeys = this.state.openKeys.concat();
const isVericalInline = stacked && mode === 'inline' && !collapsed;
const keyPaths = this.getKeyPaths(navigations, eventKey);
if (isSubMenu && !disabled) {
// isOpen是当前菜单的展开状态
@ -485,7 +474,6 @@ export class Menu extends React.Component<MenuProps, MenuState> {
} else {
// 手风琴模式 仅展开
if (isVericalInline && accordion) {
const keyPaths = this.getKeyPaths(navigations, eventKey);
openKeys = [...keyPaths, eventKey];
} else {
openKeys.push(eventKey);
@ -493,7 +481,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
}
const currentItem = findTree(navigations, item => item.id === eventKey);
// 因为Nav里只处理当前菜单项 因此新增一个onToggle事件
onToggle?.(currentItem?.link, isOpen);
onToggle?.(currentItem?.link, keyPaths.length, isOpen);
onToggleExpand?.(uniq(openKeys));
}
}
@ -535,7 +523,8 @@ export class Menu extends React.Component<MenuProps, MenuState> {
themeColor,
disabled,
badge,
data
data,
isActive
} = this.props;
return list.map(item => {
@ -552,6 +541,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
{...item}
key={item.id}
disabled={itemDisabled || link.loading}
active={isActive(item)}
badge={badge}
renderLink={renderLink}
>

4
packages/amis/src/renderers/DropDownButton.tsx
View File

@ -192,7 +192,7 @@ export default class DropDownButton extends React.Component<
});
}
close() {
close(e?: React.MouseEvent<any>) {
this.timer = setTimeout(() => {
this.props.dispatchEvent(
'mouseleave',
@ -202,6 +202,8 @@ export default class DropDownButton extends React.Component<
isOpened: false
});
}, 200);
// PopOver hide会直接调用close方法
e && e.preventDefault();
}
keepOpen() {

19
packages/amis/src/renderers/Nav.tsx
View File

@ -286,7 +286,7 @@ export interface NavigationProps
Omit<NavSchema, 'type' | 'className'>,
SpinnerExtraProps {
onSelect?: (item: Link, depth: number) => void | false;
onToggle?: (item: Link, forceFold?: boolean) => void;
onToggle?: (item: Link, depth: number, forceFold?: boolean) => void;
onDragUpdate?: (dropInfo: IDropInfo) => void;
onOrderChange?: (res: Link[]) => void;
togglerClassName?: string;
@ -349,8 +349,8 @@ export class Navigation extends React.Component<
}
@autobind
toggleLink(target: Link, forceFold?: boolean) {
this.props.onToggle?.(target, forceFold);
toggleLink(target: Link, depth: number, forceFold?: boolean) {
this.props.onToggle?.(target, depth, forceFold);
}
@autobind
@ -783,6 +783,9 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
} = props;
const isActive = (link: Link, depth: number) => {
if (!!link.disabled) {
return false;
}
return motivation !== 'location-change' &&
typeof link.active !== 'undefined'
? link.active
@ -948,7 +951,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
}
}
async toggleLink(target: Link, forceFold?: boolean) {
async toggleLink(target: Link, depth: number, forceFold?: boolean) {
const {
config,
updateConfig,
@ -985,12 +988,18 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
}
: {
...link,
unfolded: isAccordion ? false : link.unfolded
unfolded: isAccordion
? !!findTree(link.children || [], item => item === target)
: link.unfolded
}
),
'toggle'
);
}
// 如果父菜单项也配置了链接 同样要支持跳转
if (target.to) {
this.handleSelect(target, depth);
}
}
async dragUpdate(dropInfo: IDropInfo) {