diff --git a/packages/amis-ui/src/components/WithRemoteConfig.tsx b/packages/amis-ui/src/components/WithRemoteConfig.tsx index dafa4bdb4..159c6d03b 100644 --- a/packages/amis-ui/src/components/WithRemoteConfig.tsx +++ b/packages/amis-ui/src/components/WithRemoteConfig.tsx @@ -106,6 +106,7 @@ export interface OutterProps { | { loadConfig: (ctx?: any) => Promise | void; setConfig: (value: any) => void; + syncConfig: () => void; } | undefined ) => void; diff --git a/packages/amis-ui/src/components/menu/MenuItem.tsx b/packages/amis-ui/src/components/menu/MenuItem.tsx index f73403d4a..f1f8134fe 100644 --- a/packages/amis-ui/src/components/menu/MenuItem.tsx +++ b/packages/amis-ui/src/components/menu/MenuItem.tsx @@ -224,13 +224,20 @@ export class MenuItem extends React.Component { tooltipContainer, tooltipTrigger, depth, - hidden + hidden, + order, + overflowedIndicator, + overflowMaxCount } = this.props; const {collapsed, mode, stacked, themeColor, direction} = this.context; const showToolTip = stacked && mode === 'inline' && collapsed && depth === 1; + const isMaxOverflow = overflowedIndicator && overflowMaxCount; // 多套一层ul 是因为disabled情况下 RcItem触发不了tooltipwrapper的事件 + // 横向模式使用rc-overflow rc-overflow中会给li设置一个order属性 + // 这里的ul可能和rc-overflow里的li并列 就导致展示顺序不正确 因此给url也设置一个order属性 + // 当启用响应式收纳且设置了maxVisibleCount rc-overflow不会设置order属性 因此这种情况下ul也不需要设置 return hidden ? null : ( { trigger={tooltipTrigger} rootClose > -
    +
      { badge, data, isActive, - collapsed + collapsed, + overflowedIndicator, + overflowMaxCount } = this.props; return list.map((item: NavigationItem, index: number) => { @@ -598,6 +600,9 @@ export class Menu extends React.Component { badge={badge} data={data} depth={level || 1} + order={index} + overflowedIndicator={overflowedIndicator} + overflowMaxCount={overflowMaxCount} /> ); }); diff --git a/packages/amis/__tests__/renderers/__snapshots__/Nav.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Nav.test.tsx.snap index e37e3fa31..e6f31945e 100644 --- a/packages/amis/__tests__/renderers/__snapshots__/Nav.test.tsx.snap +++ b/packages/amis/__tests__/renderers/__snapshots__/Nav.test.tsx.snap @@ -14,6 +14,7 @@ exports[`Renderer:Nav 1`] = ` >
                    • @@ -243,6 +251,7 @@ exports[`Renderer:Nav with itemActions 1`] = ` >
                                @@ -1021,6 +1039,7 @@ exports[`Renderer:Nav with multi-level 1`] = ` >
                                            • @@ -1430,6 +1455,7 @@ exports[`Renderer:Nav with source 1`] = ` >
                                                        • @@ -1574,6 +1605,7 @@ exports[`Renderer:Nav with stacked 1`] = ` >
                                                                    • diff --git a/packages/amis/src/renderers/Nav.tsx b/packages/amis/src/renderers/Nav.tsx index 85f329828..15450eba4 100644 --- a/packages/amis/src/renderers/Nav.tsx +++ b/packages/amis/src/renderers/Nav.tsx @@ -1,11 +1,13 @@ import React from 'react'; import {findDOMNode} from 'react-dom'; +import isEqual from 'lodash/isEqual'; import { Renderer, RendererEnv, RendererProps, resolveVariableAndFilter, - ActionObject + ActionObject, + isPureVariable } from 'amis-core'; import {getExprProperties} from 'amis-core'; import {filter, evalExpression} from 'amis-core'; @@ -29,7 +31,6 @@ import {BadgeObject} from 'amis-ui'; import {RemoteOptionsProps, withRemoteConfig} from 'amis-ui'; import {Spinner, Menu} from 'amis-ui'; import {ScopedContext, IScopedContext} from 'amis-core'; -import isEqual from 'lodash/isEqual'; import type {NavigationItem} from 'amis-ui/lib/components/menu'; import type {MenuItemProps} from 'amis-ui/lib/components/menu/MenuItem'; @@ -813,8 +814,8 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({ location, level, defaultOpenLevel, - config, - dispatchEvent + dispatchEvent, + store } = props; const isActive = (link: Link, depth: number) => { @@ -874,11 +875,10 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({ ); const currentActiveItems = getActiveItems(links, 1, level); - const prevActiveItems = getActiveItems(config, 1, level); - + const prevActiveItems = getActiveItems(store.config, 1, level); setTimeout(() => { if (!isEqual(currentActiveItems, prevActiveItems)) { - dispatchEvent('change', {activeItems: currentActiveItems}); + dispatchEvent('change', {value: currentActiveItems}); } }, 0); } @@ -963,16 +963,6 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({ } } - getCurrentLink(key: string) { - let link = null; - const {config, data} = this.props; - const id = resolveVariableAndFilter(key, data, '| raw'); - if (key) { - link = findTree(config, item => item.label == id || item.key == id); - } - return link; - } - componentDidUpdate(prevProps: any, prevState: any) { if (!isEqual(this.props.location, prevProps.location)) { this.props.updateConfig(this.props.config, 'location-change'); @@ -996,6 +986,16 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({ } } + getCurrentLink(key: string) { + let link = null; + const {config, data} = this.props; + const id = resolveVariableAndFilter(key, data, '| raw'); + if (key) { + link = findTree(config, item => item.label == id || item.key == id); + } + return link; + } + async toggleLink(target: Link, depth: number, forceFold?: boolean) { const { config, @@ -1167,7 +1167,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({ return false; } - env?.jumpTo(filter(link.to as string, data), link as any); + !!link.to && env?.jumpTo(filter(link.to as string, data), link as any); return true; } @@ -1205,6 +1205,7 @@ export class NavigationRenderer extends React.Component { | { loadConfig: (ctx?: any) => Promise | void; setConfig: (value: any) => void; + syncConfig: () => void; } | undefined = undefined; @@ -1225,6 +1226,14 @@ export class NavigationRenderer extends React.Component { scoped.registerComponent(this); } + componentDidUpdate(prevProps: any) { + // 在saas中 source可能切换 需要实时更新source数据源 + // 仅支持source为变量情况下自动更新 如果source配置了api 需要配置trackExpression + if (this.remoteRef && this.props.source !== prevProps.source) { + this.remoteRef.syncConfig(); + } + } + componentWillUnmount() { const scoped = this.context as IScopedContext; scoped.unRegisterComponent(this); @@ -1237,14 +1246,15 @@ export class NavigationRenderer extends React.Component { } ) { const actionType = action?.actionType as any; + const value = args?.value || action.data.value; if (actionType === 'updateItems') { let children: Array = []; - if (args.value) { - if (Array.isArray(args.value)) { + if (value) { + if (Array.isArray(value)) { // 只展示触发项的children属性 // 多个的话 默认只展示第一个 - if (args.value.length > 0) { - const item = args.value.find( + if (value.length > 0) { + const item = value.find( item => item.children && item.children.length ); if (item) { @@ -1255,8 +1265,8 @@ export class NavigationRenderer extends React.Component { } } } - } else if (typeof args.value === 'string') { - const currentLink = this.navRef.getCurrentLink(args.value); + } else if (typeof value === 'string') { + const currentLink = this.navRef.getCurrentLink(value); this.navRef.setState({ currentKey: currentLink.key || currentLink.label }); @@ -1277,9 +1287,7 @@ export class NavigationRenderer extends React.Component { } } else if (actionType === 'collapse') { const collapsed = - args && typeof args.value !== 'undefined' - ? args.value - : !this.navRef.state.collapsed; + typeof value !== 'undefined' ? value : !this.navRef.state.collapsed; this.navRef.setState({collapsed}); } else if (actionType === 'reset') {