amis 2.6.1-alpha.0 → 2.7.1

package/esm/renderers/Nav.js

@@ -1,14 +1,14 @@
 /**
- * amis v2.6.1-alpha.0
+ * amis v2.7.1
  * Copyright 2018-2023 baidu
  */
 
-import { __extends, __assign, __decorate, __metadata, __awaiter, __generator, __rest } from 'tslib';
+import { __extends, __awaiter, __generator, __assign, __decorate, __metadata, __rest } from 'tslib';
 import React from 'react';
 import { findDOMNode } from 'react-dom';
-import Overflow from 'rc-overflow';
-import { createObject, generateIcon, guid, isObject, autobind, themeable, someTree, filter, mapTree, getExprProperties, evalExpression, isUnfolded, spliceTree, findTreeIndex, isEffectiveApi, ScopedContext, Renderer } from 'amis-core';
-import { Badge, Icon, Spinner, PopOverContainer, getIcon, withRemoteConfig } from 'amis-ui';
+import { generateIcon, isObject, createObject, autobind, themeable, someTree, filter, mapTree, getExprProperties, guid, isUnfolded, findTree, spliceTree, resolveVariableAndFilter, findTreeIndex, isEffectiveApi, ScopedContext, Renderer, evalExpression } from 'amis-core';
+import { getIcon, Icon, Menu, Spinner, withRemoteConfig } from 'amis-ui';
+import isEqual from 'lodash/isEqual';
 
 var Navigation = /** @class */ (function (_super) {
     __extends(Navigation, _super);
@@ -21,19 +21,30 @@ var Navigation = /** @class */ (function (_super) {
         _this.state = {};
         return _this;
     }
-    Navigation.prototype.handleClick = function (link) {
-        var _a = this.props, env = _a.env, onSelect = _a.onSelect;
-        // 和 action 里命名一致方便分析
-        if (link && link.to) {
-            env === null || env === void 0 ? void 0 : env.tracker({
-                eventType: 'link',
-                eventData: {
-                    label: link.label,
-                    link: link.to
+    Navigation.prototype.handleClick = function (link, depth) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, env, onSelect, result;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, env = _a.env, onSelect = _a.onSelect;
+                        // 和 action 里命名一致方便分析
+                        if (link && link.to) {
+                            env === null || env === void 0 ? void 0 : env.tracker({
+                                eventType: 'link',
+                                eventData: {
+                                    label: link.label,
+                                    link: link.to
+                                }
+                            });
+                        }
+                        return [4 /*yield*/, (onSelect === null || onSelect === void 0 ? void 0 : onSelect(link, depth))];
+                    case 1:
+                        result = _b.sent();
+                        return [2 /*return*/, result];
                 }
             });
-        }
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(link);
+        });
     };
     Navigation.prototype.toggleLink = function (target, forceFold) {
         var _a, _b;
@@ -46,7 +57,7 @@ var Navigation = /** @class */ (function (_super) {
         var dragLink = (_a = this.dragNode) === null || _a === void 0 ? void 0 : _a.link;
         var top = rect.top, height = rect.height, width = rect.width;
         var clientY = e.clientY, clientX = e.clientX;
-        var left = depth * ((_b = parseInt(indentSize, 10)) !== null && _b !== void 0 ? _b : 24);
+        var left = depth * ((_b = parseInt(indentSize, 10)) !== null && _b !== void 0 ? _b : 16);
         var deltaX = left + width * 0.2;
         var position;
         if (clientY >= top + height / 2) {
@@ -70,13 +81,17 @@ var Navigation = /** @class */ (function (_super) {
         };
     };
     Navigation.prototype.updateDropIndicator = function (e) {
-        var _a, _b;
-        var dragOnSameLevel = this.props.dragOnSameLevel;
-        var target = e.target; // a标签
-        var targetId = target.getAttribute('data-id');
-        var targetDepth = Number(target.getAttribute('data-depth'));
+        var _a;
+        var _b = this.props, dragOnSameLevel = _b.dragOnSameLevel, overflow = _b.overflow;
+        // 因为使用了rc-menu 因此拖拽事件拿到的rc-menu的li
+        // id和depth在li里的a标签上
+        var target = e.target.querySelector('a');
+        var targetId = target === null || target === void 0 ? void 0 : target.getAttribute('data-id');
+        var targetDepth = Number(target === null || target === void 0 ? void 0 : target.getAttribute('data-depth'));
+        var wrapperComponent = overflow && overflow.enable ? overflow.wrapperComponent || 'ul' : 'ul';
         if (dragOnSameLevel &&
-            ((_a = this.dragNode) === null || _a === void 0 ? void 0 : _a.node.parentElement) !== ((_b = target.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement)) {
+            ((_a = this.dragNode) === null || _a === void 0 ? void 0 : _a.node.closest(wrapperComponent)) !==
+                (target === null || target === void 0 ? void 0 : target.closest(wrapperComponent))) {
             this.setState({ dropIndicator: undefined });
             this.dropInfo = null;
             return;
@@ -137,8 +152,8 @@ var Navigation = /** @class */ (function (_super) {
         if (!this.dragNode) {
             return;
         }
-        var target = e.target;
-        var id = target.getAttribute('data-id');
+        var target = e.target.querySelector('a');
+        var id = target === null || target === void 0 ? void 0 : target.getAttribute('data-id');
         if (!id) {
             return;
         }
@@ -153,6 +168,12 @@ var Navigation = /** @class */ (function (_super) {
         });
         var currentTarget = e.currentTarget;
         var id = currentTarget.getAttribute('data-id');
+        if (!id) {
+            var a = currentTarget.querySelector('a');
+            if (a) {
+                id = a.getAttribute('data-id');
+            }
+        }
         var nodeId = (_a = this.dropInfo) === null || _a === void 0 ? void 0 : _a.nodeId;
         if (!this.dropInfo || !nodeId || id === nodeId) {
             return;
@@ -163,104 +184,118 @@ var Navigation = /** @class */ (function (_super) {
         this.dragNode = null;
         this.dropInfo = null;
     };
-    Navigation.prototype.renderItem = function (link, index, depth) {
+    Navigation.prototype.normalizeNavigations = function (links, depth) {
         var _this = this;
-        var _a, _b;
-        if (depth === void 0) { depth = 1; }
-        if (link.hidden === true || link.visible === false) {
-            return null;
+        var _a = this.props, level = _a.level, stacked = _a.stacked, mode = _a.mode, itemActions = _a.itemActions, render = _a.render, cx = _a.classnames, data = _a.data;
+        if (!links) {
+            return [];
         }
-        var isActive = !!link.active;
-        var _c = this.props, disabled = _c.disabled, togglerClassName = _c.togglerClassName, cx = _c.classnames, indentSize = _c.indentSize, render = _c.render, itemActions = _c.itemActions, draggable = _c.draggable; _c.links; var itemBadge = _c.itemBadge, defaultData = _c.data;
-        var hasSub = (link.defer && !link.loaded) || (link.children && link.children.length);
-        return (React.createElement("li", { key: (_a = link.__id) !== null && _a !== void 0 ? _a : index, "data-id": link.__id, className: cx('Nav-item', link.className, {
-                'is-disabled': disabled || link.disabled || link.loading,
-                'is-active': isActive,
-                'is-unfolded': link.unfolded,
-                'has-sub': hasSub
-            }), onDragStart: this.handleDragStart(link) },
-            React.createElement(Badge, { classnames: cx, badge: itemBadge, data: createObject(defaultData, link) },
-                React.createElement("a", { "data-id": link.__id, "data-depth": depth, title: typeof (link === null || link === void 0 ? void 0 : link.label) === 'string' ? link === null || link === void 0 ? void 0 : link.label : undefined, onClick: this.handleClick.bind(this, link), style: {
-                        paddingLeft: depth * ((_b = parseInt(indentSize, 10)) !== null && _b !== void 0 ? _b : 24)
-                    } },
-                    !disabled && draggable ? (React.createElement("div", { className: cx('Nav-itemDrager'), draggable: true, onMouseDown: function (e) {
-                            _this.toggleLink(link, true);
-                            e.stopPropagation();
-                        } },
-                        React.createElement(Icon, { icon: "drag-bar", className: "icon" }))) : null,
-                    link.loading ? (React.createElement(Spinner, { size: "sm", show: true, icon: "reload", spinnerClassName: cx('Nav-spinner') })) : hasSub ? (React.createElement("span", { onClick: function (e) {
-                            _this.toggleLink(link);
-                            e.stopPropagation();
-                        }, className: cx('Nav-itemToggler', togglerClassName) },
-                        React.createElement(Icon, { icon: "caret", className: "icon" }))) : null,
-                    generateIcon(cx, link.icon, 'Nav-itemIcon'),
-                    link.label &&
-                        (typeof link.label === 'string'
-                            ? link.label
-                            : render('inline', link.label))),
-                // 更多操作
-                itemActions ? (React.createElement("div", { className: cx('Nav-item-atcions') }, render('inline', itemActions, {
-                    data: createObject(defaultData, link)
-                }))) : null,
-                Array.isArray(link.children) && link.children.length ? (React.createElement("ul", { className: cx('Nav-subItems') }, link.children.map(function (link, index) {
-                    return _this.renderItem(link, index, depth + 1);
-                }))) : null)));
-    };
-    Navigation.prototype.renderOverflowNavs = function (overflowConfig) {
-        var _this = this;
-        var _a = this.props, render = _a.render, cx = _a.classnames, className = _a.className, loading = _a.loading, _b = _a.links, links = _b === void 0 ? [] : _b;
-        var overflowClassName = overflowConfig.overflowClassName, overflowPopoverClassName = overflowConfig.overflowPopoverClassName, overflowListClassName = overflowConfig.overflowListClassName, overflowLabel = overflowConfig.overflowLabel, overflowIndicator = overflowConfig.overflowIndicator, _c = overflowConfig.itemWidth, itemWidth = _c === void 0 ? 160 : _c, overflowSuffix = overflowConfig.overflowSuffix, popOverContainer = overflowConfig.popOverContainer, style = overflowConfig.style, maxVisibleCount = overflowConfig.maxVisibleCount, _d = overflowConfig.wrapperComponent, wrapperComponent = _d === void 0 ? 'ul' : _d;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Spinner, { show: !!loading, overlay: true }),
-            React.createElement(Overflow, { className: cx('Nav-list--tabs', className), prefixCls: cx('Nav-list'), itemWidth: itemWidth, style: style, component: wrapperComponent, data: links, suffix: overflowSuffix
-                    ? render('nav-overflow-suffix', overflowSuffix)
-                    : null, renderRawItem: function (item, index) {
-                    return _this.renderItem(item, index);
-                }, renderRawRest: function (overFlowedItems) {
-                    return (React.createElement(PopOverContainer, { popOverContainer: popOverContainer, popOverClassName: cx('Nav-item-overflow-popover', overflowPopoverClassName), popOverRender: function (_a) {
-                            var onClose = _a.onClose;
-                            return (React.createElement("div", { className: cx('Nav-list', 'Nav-list--stacked', // 浮层菜单为垂直布局
-                                'Nav-list-overflow', overflowListClassName) }, overFlowedItems.map(function (item, index) {
-                                return React.cloneElement(_this.renderItem(item, index), {
-                                    onClick: onClose
-                                });
-                            })));
-                        } }, function (_a) {
-                        var _b;
-                        var onClick = _a.onClick, ref = _a.ref, isOpened = _a.isOpened;
-                        return (React.createElement("li", { ref: ref, className: cx('Nav-item', 'Nav-item-overflow', {
-                                'is-overflow-opened': isOpened
-                            }, overflowClassName), onClick: onClick },
-                            React.createElement("a", { "data-id": (_b = overflowConfig.__id) !== null && _b !== void 0 ? _b : guid(), "data-depth": 1 },
-                                getIcon(overflowIndicator) ? (React.createElement(Icon, { icon: overflowIndicator, className: "icon" })) : (generateIcon(cx, overflowIndicator, 'Nav-itemIcon')),
-                                overflowLabel && isObject(overflowLabel)
-                                    ? render('nav-overflow-label', overflowLabel)
-                                    : overflowLabel)));
-                    }));
-                }, maxCount: maxVisibleCount && Number.isInteger(maxVisibleCount)
-                    ? maxVisibleCount
-                    : 'responsive' })));
+        if (level && depth > level) {
+            return [];
+        }
+        return links.map(function (link) {
+            var beforeIcon = null;
+            var afterIcon = null;
+            if (Array.isArray(link.icon)) {
+                beforeIcon = link.icon
+                    .filter(function (item) { return item.position === 'before'; })
+                    .map(function (item) { return generateIcon(cx, item.icon); });
+                afterIcon = link.icon
+                    .filter(function (item) { return item.position === 'after'; })
+                    .map(function (item) { return generateIcon(cx, item.icon); });
+            }
+            else if (link.icon) {
+                beforeIcon = generateIcon(cx, link.icon);
+            }
+            var label = typeof link.label === 'string'
+                ? link.label
+                : React.isValidElement(link.label)
+                    ? React.cloneElement(link.label)
+                    : render('inline', link.label);
+            // 仅垂直内联模式支持
+            var isOverflow = stacked &&
+                mode !== 'float' &&
+                !link.expanded &&
+                link.overflow &&
+                isObject(link.overflow) &&
+                link.overflow.enable;
+            var children = link.children;
+            if (isOverflow) {
+                var _a = link.overflow, maxVisibleCount = _a.maxVisibleCount, _b = _a.overflowIndicator, overflowIndicator_1 = _b === void 0 ? 'fa fa-ellipsis' : _b, overflowLabel_1 = _a.overflowLabel, overflowClassName_1 = _a.overflowClassName;
+                // 默认展示5个
+                var maxCount_1 = maxVisibleCount || 2;
+                if (maxCount_1 < ((children === null || children === void 0 ? void 0 : children.length) || 0)) {
+                    children = children === null || children === void 0 ? void 0 : children.map(function (child, index) {
+                        return __assign(__assign({}, child), { label: index === maxCount_1 ? (React.createElement("span", { className: cx(overflowClassName_1) },
+                                getIcon(overflowIndicator_1) ? (React.createElement(Icon, { icon: overflowIndicator_1, className: "icon" })) : (generateIcon(cx, overflowIndicator_1, 'Nav-itemIcon')),
+                                overflowLabel_1 && isObject(overflowLabel_1)
+                                    ? render('nav-overflow-label', overflowLabel_1)
+                                    : overflowLabel_1)) : (child.label), hidden: index > maxCount_1 ? true : link.hidden, expandMore: index === maxCount_1 });
+                    });
+                }
+            }
+            return {
+                link: link,
+                label: label,
+                labelExtra: afterIcon ? (React.createElement("i", { className: cx('Nav-itemIconAfter') }, afterIcon)) : null,
+                icon: beforeIcon ? React.createElement("i", null, beforeIcon) : null,
+                children: children
+                    ? _this.normalizeNavigations(children, depth + 1)
+                    : [],
+                path: link.to,
+                open: link.unfolded,
+                extra: itemActions
+                    ? render('inline', itemActions, {
+                        data: createObject(data, link),
+                        popOverContainer: function () { return document.body; }
+                    })
+                    : null,
+                disabled: !!link.disabled,
+                disabledTip: link.disabledTip,
+                hidden: link.hidden,
+                className: link.className
+            };
+        });
     };
     Navigation.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, className = _a.className, style = _a.style, stacked = _a.stacked, cx = _a.classnames, links = _a.links, loading = _a.loading, overflow = _a.overflow, loadingConfig = _a.loadingConfig;
+        var _a = this.props, className = _a.className, style = _a.style, stacked = _a.stacked, mode = _a.mode, cx = _a.classnames, links = _a.links, loading = _a.loading, overflow = _a.overflow, loadingConfig = _a.loadingConfig, itemBadge = _a.itemBadge, badge = _a.badge, data = _a.data, location = _a.location, collapsed = _a.collapsed, expandIcon = _a.expandIcon, indentSize = _a.indentSize, accordion = _a.accordion, draggable = _a.draggable, expandPosition = _a.expandPosition, render = _a.render;
         var dropIndicator = this.state.dropIndicator;
-        return (React.createElement("div", { className: cx('Nav'), style: style }, overflow && isObject(overflow) && overflow.enable ? (this.renderOverflowNavs(__assign({ overflowIndicator: 'fa fa-ellipsis', wrapperComponent: 'ul', itemWidth: 160 }, overflow))) : (React.createElement(React.Fragment, null,
-            React.createElement("ul", { className: cx('Nav-list', className, stacked ? 'Nav-list--stacked' : 'Nav-list--tabs') },
-                Array.isArray(links)
-                    ? links.map(function (item, index) { return _this.renderItem(item, index); })
-                    : null,
+        var overflowedIndicator = null;
+        if (overflow && isObject(overflow) && overflow.enable) {
+            var _b = overflow.overflowIndicator, overflowIndicator = _b === void 0 ? 'fa fa-ellipsis' : _b, overflowLabel = overflow.overflowLabel, overflowClassName = overflow.overflowClassName;
+            overflowedIndicator = (React.createElement("span", { className: cx(overflowClassName) },
+                getIcon(overflowIndicator) ? (React.createElement(Icon, { icon: overflowIndicator, className: "icon" })) : (generateIcon(cx, overflowIndicator, 'Nav-itemIcon')),
+                overflowLabel && isObject(overflowLabel)
+                    ? render('nav-overflow-label', overflowLabel)
+                    : overflowLabel));
+        }
+        return (React.createElement("div", { className: cx('Nav'), style: style },
+            React.createElement(React.Fragment, null,
+                Array.isArray(links) ? (React.createElement(Menu, { className: className, navigations: this.normalizeNavigations(links, 1), isActive: function (link, prefix) {
+                        if (link.link && typeof link.link.active !== 'undefined') {
+                            return link.link.active;
+                        }
+                        var path = link.path;
+                        var ret = location.pathname === path;
+                        return !!ret;
+                    }, isOpen: function (item) { return !!item.open; }, stacked: !!stacked, mode: mode, location: location, onSelect: this.handleClick, onToggle: this.toggleLink, renderLink: function (link) { return link.link; }, badge: itemBadge || badge, collapsed: collapsed, overflowedIndicator: overflowedIndicator, overflowMaxCount: overflow === null || overflow === void 0 ? void 0 : overflow.maxVisibleCount, overflowedIndicatorPopupClassName: cx(overflow === null || overflow === void 0 ? void 0 : overflow.overflowPopoverClassName), overflowSuffix: (overflow === null || overflow === void 0 ? void 0 : overflow.overflowSuffix)
+                        ? render('nav-overflow-suffix', overflow === null || overflow === void 0 ? void 0 : overflow.overflowSuffix)
+                        : null, overflowItemWidth: overflow === null || overflow === void 0 ? void 0 : overflow.itemWidth, overflowComponent: overflow === null || overflow === void 0 ? void 0 : overflow.wrapperComponent, overflowStyle: overflow === null || overflow === void 0 ? void 0 : overflow.style, expandIcon: expandIcon
+                        ? typeof expandIcon === 'string'
+                            ? expandIcon
+                            : render('expand-icon', expandIcon)
+                        : null, expandBefore: expandPosition === 'after' ? false : true, inlineIndent: indentSize, accordion: accordion, draggable: draggable, data: data, onDragStart: this.handleDragStart })) : null,
                 React.createElement(Spinner, { show: !!loading, overlay: true, loadingConfig: loadingConfig })),
-            dropIndicator ? (React.createElement("div", { className: cx('Nav-dropIndicator'), style: dropIndicator })) : null))));
+            dropIndicator ? (React.createElement("div", { className: cx('Nav-dropIndicator'), style: dropIndicator })) : null));
     };
     Navigation.defaultProps = {
-        indentSize: 24
+        indentSize: 16
     };
     __decorate([
         autobind,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
+        __metadata("design:paramtypes", [Object, Number]),
+        __metadata("design:returntype", Promise)
     ], Navigation.prototype, "handleClick", null);
     __decorate([
         autobind,
@@ -301,6 +336,22 @@ var Navigation = /** @class */ (function (_super) {
     return Navigation;
 }(React.Component));
 var ThemedNavigation = themeable(Navigation);
+function getActiveItems(config, depth, level) {
+    if (depth > level) {
+        return [];
+    }
+    var activeItems = [];
+    config &&
+        config.forEach(function (item) {
+            if (item.active) {
+                activeItems.push(item);
+            }
+            if (item.children) {
+                activeItems = activeItems.concat(getActiveItems(item.children, depth + 1, level));
+            }
+        });
+    return activeItems;
+}
 var ConditionBuilderWithRemoteOptions = withRemoteConfig({
     adaptor: function (config, props) {
         var links = Array.isArray(config)
@@ -311,52 +362,114 @@ var ConditionBuilderWithRemoteOptions = withRemoteConfig({
         }
         return links;
     },
-    afterLoad: function (response, config, props) {
-        if (response.value && !someTree(config, function (item) { return item.active; })) {
-            var env = props.env;
-            env.jumpTo(filter(response.value, props.data));
-        }
-    },
+    afterLoad: function (response, config, props) { return __awaiter(void 0, void 0, void 0, function () {
+        var dispatchEvent, rendererEvent, env;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    dispatchEvent = props.dispatchEvent;
+                    return [4 /*yield*/, dispatchEvent('loaded', {
+                            data: response.value
+                        })];
+                case 1:
+                    rendererEvent = _a.sent();
+                    if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                        return [2 /*return*/];
+                    }
+                    if (response.value && !someTree(config, function (item) { return item.active; })) {
+                        env = props.env;
+                        env.jumpTo(filter(response.value, props.data));
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); },
     normalizeConfig: function (links, origin, props, motivation) {
         if (Array.isArray(links) && motivation !== 'toggle') {
-            var data_1 = props.data, env_1 = props.env, unfoldedField_1 = props.unfoldedField, foldedField_1 = props.foldedField;
-            links = mapTree(links, function (link) {
-                var _a;
-                var item = __assign(__assign(__assign({}, link), getExprProperties(link, data_1)), { active: (motivation !== 'location-change' && link.active) ||
+            var data_1 = props.data, env_1 = props.env, unfoldedField_1 = props.unfoldedField, foldedField_1 = props.foldedField, location_1 = props.location, level_1 = props.level, config = props.config, dispatchEvent_1 = props.dispatchEvent;
+            var isActive_1 = function (link, depth) {
+                return motivation !== 'location-change' &&
+                    typeof link.active !== 'undefined'
+                    ? link.active
+                    : (depth === level_1
+                        ? !!findTree(link.children || [], function (l) {
+                            return !!(l.hasOwnProperty('to') &&
+                                env_1 &&
+                                env_1.isCurrentUrl(filter(l.to, data_1)));
+                        })
+                        : false) ||
                         (link.activeOn
-                            ? evalExpression(link.activeOn, data_1)
+                            ? evalExpression(link.activeOn, data_1) ||
+                                evalExpression(link.activeOn, location_1)
                             : !!(link.hasOwnProperty('to') &&
                                 env_1 &&
-                                env_1.isCurrentUrl(filter(link.to, data_1)))), __id: (_a = link.__id) !== null && _a !== void 0 ? _a : guid() });
+                                env_1.isCurrentUrl(filter(link.to, data_1))));
+            };
+            links = mapTree(links, function (link, index, depth) {
+                var _a;
+                var item = __assign(__assign(__assign({}, link), getExprProperties(link, data_1)), { active: isActive_1(link, depth), __id: (_a = link.__id) !== null && _a !== void 0 ? _a : guid() });
                 item.unfolded =
                     isUnfolded(item, { unfoldedField: unfoldedField_1, foldedField: foldedField_1 }) ||
-                        (link.children && link.children.some(function (link) { return !!link.active; }));
+                        (link.children &&
+                            !!findTree(link.children, function (child, i, d) {
+                                return isActive_1(child, depth + d);
+                            }));
                 return item;
             }, 1, true);
+            var currentActiveItems_1 = getActiveItems(links, 1, level_1);
+            var prevActiveItems_1 = getActiveItems(config, 1, level_1);
+            setTimeout(function () {
+                if (!isEqual(currentActiveItems_1, prevActiveItems_1)) {
+                    dispatchEvent_1('change', { activeItems: currentActiveItems_1 });
+                }
+            }, 0);
         }
         return links;
     },
     beforeDeferLoad: function (item, indexes, links) {
         return spliceTree(links, indexes, 1, __assign(__assign({}, item), { loading: true }));
     },
-    afterDeferLoad: function (item, indexes, ret, links) {
-        var newItem = __assign(__assign({}, item), { loading: false, loaded: true, error: ret.ok ? undefined : ret.msg });
-        var children = Array.isArray(ret.data)
-            ? ret.data
-            : ret.data.links || ret.data.options || ret.data.items || ret.data.rows;
-        if (Array.isArray(children)) {
-            newItem.children = children.concat();
-            newItem.unfolded = true;
-        }
-        return spliceTree(links, indexes, 1, newItem);
+    afterDeferLoad: function (item, indexes, ret, links, props) {
+        return __awaiter(this, void 0, void 0, function () {
+            var dispatchEvent, rendererEvent, newItem, children;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        dispatchEvent = props.dispatchEvent;
+                        return [4 /*yield*/, dispatchEvent('loaded', {
+                                data: ret.data,
+                                item: __assign({}, item)
+                            })];
+                    case 1:
+                        rendererEvent = _a.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        newItem = __assign(__assign({}, item), { loading: false, loaded: true, error: ret.ok ? undefined : ret.msg });
+                        children = Array.isArray(ret.data)
+                            ? ret.data
+                            : ret.data.links || ret.data.options || ret.data.items || ret.data.rows;
+                        if (Array.isArray(children)) {
+                            newItem.children = children.concat();
+                            newItem.unfolded = true;
+                        }
+                        return [2 /*return*/, spliceTree(links, indexes, 1, newItem)];
+                }
+            });
+        });
     }
 })(/** @class */ (function (_super) {
     __extends(class_1, _super);
     function class_1(props) {
         var _this = _super.call(this, props) || this;
+        _this.state = {
+            currentKey: props.showKey || '',
+            collapsed: props.collapsed || false
+        };
         _this.toggleLink = _this.toggleLink.bind(_this);
         _this.handleSelect = _this.handleSelect.bind(_this);
         _this.dragUpdate = _this.dragUpdate.bind(_this);
+        props === null || props === void 0 ? void 0 : props.onRef(_this);
         return _this;
     }
     class_1.prototype.componentDidMount = function () {
@@ -364,26 +477,64 @@ var ConditionBuilderWithRemoteOptions = withRemoteConfig({
             this.props.updateConfig(this.props.links, 'mount');
         }
     };
-    class_1.prototype.componentDidUpdate = function (prevProps) {
-        if (this.props.location !== prevProps.location) {
+    class_1.prototype.getCurrentLink = function (key) {
+        var link = null;
+        var _a = this.props, config = _a.config, data = _a.data;
+        var id = resolveVariableAndFilter(key, data, '| raw');
+        if (key) {
+            link = findTree(config, function (item) { return item.label == id || item.key == id; });
+        }
+        return link;
+    };
+    class_1.prototype.componentDidUpdate = function (prevProps, prevState) {
+        if (!isEqual(this.props.location, prevProps.location)) {
             this.props.updateConfig(this.props.config, 'location-change');
         }
-        else if (this.props.links !== prevProps.links) {
+        else if (!isEqual(this.props.links, prevProps.links)) {
             this.props.updateConfig(this.props.links, 'update');
         }
-    };
-    class_1.prototype.toggleLink = function (target, forceFold) {
-        var _a = this.props, config = _a.config, updateConfig = _a.updateConfig, deferLoad = _a.deferLoad;
-        if (target.defer && !target.loaded) {
-            deferLoad(target);
+        if (prevProps.collapsed !== this.props.collapsed) {
+            this.setState({ collapsed: this.props.collapsed });
         }
-        else {
-            updateConfig(mapTree(config, function (link) {
-                return target === link
-                    ? __assign(__assign({}, link), { unfolded: forceFold ? false : !link.unfolded }) : link;
-            }), 'toggle');
+        if (prevState.collapsed !== this.state.collapsed) {
+            this.props.dispatchEvent('collapsed', {
+                collapsed: this.state.collapsed
+            });
         }
     };
+    class_1.prototype.toggleLink = function (target, forceFold) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, config, updateConfig, deferLoad, dispatchEvent, stacked, mode, accordion, isAccordion, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, config = _a.config, updateConfig = _a.updateConfig, deferLoad = _a.deferLoad, dispatchEvent = _a.dispatchEvent, stacked = _a.stacked, mode = _a.mode, accordion = _a.accordion;
+                        isAccordion = stacked && mode !== 'float' && accordion;
+                        return [4 /*yield*/, dispatchEvent('toggled', {
+                                item: __assign({}, target),
+                                open: typeof forceFold !== 'undefined' ? !forceFold : !target.unfolded
+                            })];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        if (target.defer && !target.loaded) {
+                            deferLoad(target);
+                        }
+                        else {
+                            updateConfig(mapTree(config, function (link) {
+                                return target === link
+                                    ? __assign(__assign({}, link), { unfolded: typeof forceFold !== 'undefined'
+                                            ? !forceFold
+                                            : !link.unfolded }) : __assign(__assign({}, link), { unfolded: isAccordion ? false : link.unfolded });
+                            }), 'toggle');
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     class_1.prototype.dragUpdate = function (dropInfo) {
         var _a, _b;
         return __awaiter(this, void 0, void 0, function () {
@@ -447,14 +598,14 @@ var ConditionBuilderWithRemoteOptions = withRemoteConfig({
                     case 0:
                         _a = this.props, saveOrderApi = _a.saveOrderApi, env = _a.env, data = _a.data, reload = _a.reload;
                         if (!(saveOrderApi && isEffectiveApi(saveOrderApi))) return [3 /*break*/, 2];
-                        return [4 /*yield*/, env.fetcher(saveOrderApi, createObject(data, { data: links }), { method: 'post' })];
+                        return [4 /*yield*/, (env === null || env === void 0 ? void 0 : env.fetcher(saveOrderApi, createObject(data, { data: links }), { method: 'post' }))];
                     case 1:
                         _b.sent();
                         reload();
                         return [3 /*break*/, 3];
                     case 2:
                         if (!this.props.onOrderChange) {
-                            env.alert('NAV saveOrderApi is required!');
+                            env === null || env === void 0 ? void 0 : env.alert('NAV saveOrderApi is required!');
                         }
                         _b.label = 3;
                     case 3: return [2 /*return*/];
@@ -462,22 +613,54 @@ var ConditionBuilderWithRemoteOptions = withRemoteConfig({
             });
         });
     };
-    class_1.prototype.handleSelect = function (link) {
-        var _a = this.props, onSelect = _a.onSelect, env = _a.env, data = _a.data;
-        if (onSelect && onSelect(link) === false) {
-            return;
-        }
-        if (!link.to &&
-            ((link.children && link.children.length) ||
-                (link.defer && !link.loaded))) {
-            this.toggleLink(link);
-            return;
-        }
-        env === null || env === void 0 ? void 0 : env.jumpTo(filter(link.to, data), link);
+    class_1.prototype.expandLink = function (target) {
+        var _a = this.props, config = _a.config, updateConfig = _a.updateConfig;
+        updateConfig(mapTree(config, function (link) {
+            if (findTree((link === null || link === void 0 ? void 0 : link.children) || [], function (item) { return item.__id === target.__id; })) {
+                return __assign(__assign({}, link), { expanded: true });
+            }
+            return __assign({}, link);
+        }), 'expand');
+    };
+    class_1.prototype.handleSelect = function (link, depth) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, onSelect, env, data, level, dispatchEvent, updateConfig, config, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, onSelect = _a.onSelect, env = _a.env, data = _a.data, level = _a.level, dispatchEvent = _a.dispatchEvent, updateConfig = _a.updateConfig, config = _a.config;
+                        return [4 /*yield*/, dispatchEvent('click', {
+                                item: __assign({}, link)
+                            })];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/, true];
+                        }
+                        if (onSelect && onSelect(link) === false) {
+                            return [2 /*return*/, true];
+                        }
+                        // 叶子节点点击也会默认选中
+                        if (depth === level) {
+                            updateConfig(mapTree(config, function (target) {
+                                return __assign(__assign({}, target), { active: target.__id === link.__id });
+                            }), 'select');
+                            return [2 /*return*/, true];
+                        }
+                        if (link.expandMore) {
+                            this.expandLink(link);
+                            return [2 /*return*/, false];
+                        }
+                        env === null || env === void 0 ? void 0 : env.jumpTo(filter(link.to, data), link);
+                        return [2 /*return*/, true];
+                }
+            });
+        });
     };
     class_1.prototype.render = function () {
         var _a = this.props, loading = _a.loading, config = _a.config; _a.deferLoad; _a.updateConfig; var rest = __rest(_a, ["loading", "config", "deferLoad", "updateConfig"]);
-        return (React.createElement(ThemedNavigation, __assign({}, rest, { loading: loading, links: config || [], disabled: loading, onSelect: this.handleSelect, onToggle: this.toggleLink, onDragUpdate: this.dragUpdate })));
+        var currentLink = this.getCurrentLink(this.state.currentKey);
+        return (React.createElement(ThemedNavigation, __assign({}, rest, { loading: loading, links: (currentLink === null || currentLink === void 0 ? void 0 : currentLink.children) || config, collapsed: this.state.collapsed, disabled: loading, onSelect: this.handleSelect, onToggle: this.toggleLink, onDragUpdate: this.dragUpdate })));
     };
     return class_1;
 }(React.Component)));
@@ -493,16 +676,62 @@ var ConditionBuilderWithRemoteOptions = withRemoteConfig({
     NavigationRenderer.prototype.remoteConfigRef = function (ref) {
         this.remoteRef = ref;
     };
+    NavigationRenderer.prototype.getRef = function (ref) {
+        this.navRef = ref;
+    };
     NavigationRenderer.prototype.componentWillUnmount = function () {
         var scoped = this.context;
         scoped.unRegisterComponent(this);
     };
+    NavigationRenderer.prototype.doAction = function (action, args) {
+        var actionType = action === null || action === void 0 ? void 0 : action.actionType;
+        if (actionType === 'updateItems') {
+            var children = [];
+            if (args.value) {
+                if (Array.isArray(args.value)) {
+                    // 只展示触发项的children属性
+                    // 多个的话 默认只展示第一个
+                    if (args.value.length > 0) {
+                        var item = args.value.find(function (item) { return item.children && item.children.length; });
+                        if (item) {
+                            var key = (item === null || item === void 0 ? void 0 : item.key) || (item === null || item === void 0 ? void 0 : item.label);
+                            if (this.navRef.state.currentKey !== key) {
+                                this.navRef.setState({ currentKey: (item === null || item === void 0 ? void 0 : item.key) || (item === null || item === void 0 ? void 0 : item.label) });
+                                children = item.children;
+                            }
+                        }
+                    }
+                }
+                else if (typeof args.value === 'string') {
+                    var currentLink = this.navRef.getCurrentLink(args.value);
+                    this.navRef.setState({
+                        currentKey: currentLink.key || currentLink.label
+                    });
+                    children = currentLink === null || currentLink === void 0 ? void 0 : currentLink.children;
+                }
+            }
+            if (children.length > 0) {
+                var _a = this.props, env_2 = _a.env, data_2 = _a.data;
+                var child = findTree(children, function (item) { return env_2 && env_2.isCurrentUrl(filter(item.to, data_2)); });
+                env_2 === null || env_2 === void 0 ? void 0 : env_2.jumpTo(filter(child ? child.to : children[0].to, data_2));
+            }
+        }
+        else if (actionType === 'collapse') {
+            var collapsed = args && typeof args.value !== 'undefined'
+                ? args.value
+                : !this.navRef.state.collapsed;
+            this.navRef.setState({ collapsed: collapsed });
+        }
+        else if (actionType === 'reset') {
+            this.navRef.setState({ currentKey: '' });
+        }
+    };
     NavigationRenderer.prototype.reload = function (target, query, values) {
         var _a;
         if (query) {
             return this.receive(query);
         }
-        var _b = this.props, data = _b.data; _b.env; _b.source; _b.translate;
+        var _b = this.props, data = _b.data; _b.translate;
         var finalData = values ? createObject(data, values) : data;
         (_a = this.remoteRef) === null || _a === void 0 ? void 0 : _a.loadConfig(finalData);
     };
@@ -511,7 +740,7 @@ var ConditionBuilderWithRemoteOptions = withRemoteConfig({
     };
     NavigationRenderer.prototype.render = function () {
         var rest = __rest(this.props, []);
-        return (React.createElement(ConditionBuilderWithRemoteOptions, __assign({}, rest, { reload: this.reload, remoteConfigRef: this.remoteConfigRef })));
+        return (React.createElement(ConditionBuilderWithRemoteOptions, __assign({}, rest, { onRef: this.getRef, reload: this.reload, remoteConfigRef: this.remoteConfigRef })));
     };
     NavigationRenderer.contextType = ScopedContext;
     __decorate([
@@ -520,6 +749,12 @@ var ConditionBuilderWithRemoteOptions = withRemoteConfig({
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], NavigationRenderer.prototype, "remoteConfigRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], NavigationRenderer.prototype, "getRef", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),