amis-ui 6.2.2 → 6.4.0

package/esm/components/ContextMenu.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.2.2
+ * amis-ui v6.4.0
  * Copyright 2018-2024 fex
  */
 
@@ -8,6 +8,7 @@ import { calculatePosition, autobind, themeable } from 'amis-core';
 import React__default from 'react';
 import { render } from 'react-dom';
 import Transition, { ENTERING, ENTERED, EXITING } from 'react-transition-group/Transition';
+import debounce from 'lodash/debounce';
 
 var _a;
 // import {createRoot} from 'react-dom/client';
@@ -24,12 +25,18 @@ var ContextMenu = /** @class */ (function (_super) {
             isOpened: false,
             menus: [],
             x: -99999,
-            y: -99999
+            y: -99999,
+            cursorX: -99999,
+            cursorY: -99999
         };
         _this.menuRef = React__default.createRef();
+        _this.contentRef = React__default.createRef();
         _this.unmount = false;
+        _this.menuEntered = false;
+        _this.resizeObserver = null;
         _this.originInstance = ContextMenu.instance;
         ContextMenu.instance = _this;
+        _this.debounceCalculatePosition = debounce(_this.autoCalculatePosition.bind(_this), 200);
         return _this;
     }
     ContextMenu.getInstance = function () {
@@ -59,24 +66,28 @@ var ContextMenu = /** @class */ (function (_super) {
     };
     ContextMenu.prototype.componentWillUnmount = function () {
         this.unmount = true;
+        this.debounceCalculatePosition.cancel();
         ContextMenu.instance = this.originInstance;
         document.body.removeEventListener('click', this.handleOutClick, true);
         document.removeEventListener('keydown', this.handleKeyDown);
         // @ts-ignore
         delete this.originInstance;
     };
-    ContextMenu.prototype.openContextMenus = function (info, menus, onClose) {
+    ContextMenu.prototype.openContextMenus = function (info, menus, onClose, options) {
         var _this = this;
         if (this.state.isOpened) {
             var _a = this.state, x = _a.x, y = _a.y;
+            var cursorX = x + (info.x - (this.prevInfo && this.prevInfo.x ? this.prevInfo.x : 0));
+            var cursorY = y + (info.y - (this.prevInfo && this.prevInfo.y ? this.prevInfo.y : 0));
             // 避免 二次触发未进行智能定位 导致遮挡问题
             this.setState({
-                x: x +
-                    (info.x - (this.prevInfo && this.prevInfo.x ? this.prevInfo.x : 0)),
-                y: y +
-                    (info.y - (this.prevInfo && this.prevInfo.y ? this.prevInfo.y : 0)),
+                x: cursorX,
+                y: cursorY,
+                cursorX: cursorX,
+                cursorY: cursorY,
                 menus: menus,
-                onClose: onClose
+                onClose: onClose,
+                contentClassName: options === null || options === void 0 ? void 0 : options.contentClassName
             }, function () {
                 _this.handleEnter(_this.menuRef.current);
             });
@@ -86,26 +97,36 @@ var ContextMenu = /** @class */ (function (_super) {
                 isOpened: true,
                 x: info.x,
                 y: info.y,
+                cursorX: info.x,
+                cursorY: info.y,
                 menus: menus,
-                onClose: onClose
+                onClose: onClose,
+                contentClassName: options === null || options === void 0 ? void 0 : options.contentClassName
             });
         }
         this.prevInfo = info;
     };
     ContextMenu.prototype.close = function () {
         var _this = this;
+        var _a;
+        this.menuEntered = false;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         var onClose = this.state.onClose;
         this.setState({
             isOpened: false,
             x: -99999,
             y: -99999,
-            menus: []
+            cursorX: -99999,
+            cursorY: -99999,
+            menus: [],
+            contentClassName: ''
         }, function () {
             onClose === null || onClose === void 0 ? void 0 : onClose(_this);
         });
     };
     ContextMenu.prototype.handleOutClick = function (e) {
-        if (!e.target ||
+        if (!this.menuEntered ||
+            !e.target ||
             !this.menuRef.current ||
             this.menuRef.current.contains(e.target)) {
             return;
@@ -124,6 +145,8 @@ var ContextMenu = /** @class */ (function (_super) {
                 isOpened: false,
                 x: -99999,
                 y: -99999,
+                cursorX: -99999,
+                cursorY: -99999,
                 menus: []
             }, function () {
                 var _a;
@@ -144,8 +167,23 @@ var ContextMenu = /** @class */ (function (_super) {
         item.disabled || !item.onHighlight || item.onHighlight(false, item.data);
     };
     ContextMenu.prototype.handleEnter = function (menu) {
+        this.autoCalculatePosition(menu);
+    };
+    ContextMenu.prototype.handleEntered = function (menu) {
+        var _this = this;
+        this.menuEntered = true;
+        if (!this.contentRef.current || !window.ResizeObserver) {
+            return;
+        }
+        // 监听菜单大小变化，并自动重新计算位置
+        this.resizeObserver = new ResizeObserver(function (entries) {
+            entries.length && _this.debounceCalculatePosition(menu);
+        });
+        this.resizeObserver.observe(this.contentRef.current);
+    };
+    ContextMenu.prototype.autoCalculatePosition = function (menu) {
         // 智能定位，选择一个合适的对齐方式。
-        var info = calculatePosition('auto', menu.lastChild, menu.children[1], document.body);
+        var info = calculatePosition('asContextMenu', menu.lastChild, menu.children[1], menu.children[0]);
         var align = info.positionLeft + 300 < window.innerWidth ? 'right' : 'left';
         this.setState({
             x: info.positionLeft,
@@ -177,19 +215,21 @@ var ContextMenu = /** @class */ (function (_super) {
     ContextMenu.prototype.render = function () {
         var _this = this;
         var _a = this.props, className = _a.className; _a.container; var cx = _a.classnames;
-        return (React__default.createElement(Transition, { mountOnEnter: true, unmountOnExit: true, onEnter: this.handleEnter, in: this.state.isOpened, timeout: 500 }, function (status) { return (React__default.createElement("div", { ref: _this.menuRef, role: "contextmenu", className: cx('ContextMenu', {
+        return (React__default.createElement(Transition, { mountOnEnter: true, unmountOnExit: true, onEnter: this.handleEnter, in: this.state.isOpened, timeout: 500, onEntered: this.handleEntered }, function (status) { return (React__default.createElement("div", { ref: _this.menuRef, role: "contextmenu", className: cx('ContextMenu', {
                 'ContextMenu--left': _this.state.align === 'left'
-            }, className), onContextMenu: _this.handleSelfContextMenu },
+            }, className, _this.state.contentClassName), onContextMenu: _this.handleSelfContextMenu },
             React__default.createElement("div", { className: cx("ContextMenu-overlay", fadeStyles[status]) }),
-            React__default.createElement("div", { className: cx("ContextMenu-cursor"), style: { left: "".concat(_this.state.x, "px"), top: "".concat(_this.state.y, "px") } }),
-            React__default.createElement("div", { style: { left: "".concat(_this.state.x, "px"), top: "".concat(_this.state.y, "px") }, className: cx("ContextMenu-menu", fadeStyles[status]) },
-                React__default.createElement("ul", { className: cx('ContextMenu-list') }, _this.renderMenus(_this.state.menus))))); }));
+            React__default.createElement("div", { className: cx("ContextMenu-cursor"), style: {
+                    left: "".concat(_this.state.cursorX, "px"),
+                    top: "".concat(_this.state.cursorY, "px")
+                } }),
+            React__default.createElement("div", { ref: _this.contentRef, style: { left: "".concat(_this.state.x, "px"), top: "".concat(_this.state.y, "px") }, className: cx("ContextMenu-menu", fadeStyles[status]) }, typeof _this.state.menus === 'function' ? (_this.state.menus()) : (React__default.createElement("ul", { className: cx('ContextMenu-list') }, _this.renderMenus(_this.state.menus)))))); }));
     };
     ContextMenu.instance = null;
     __decorate([
         autobind,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object, Array, Function]),
+        __metadata("design:paramtypes", [Object, Array, Function, Object]),
         __metadata("design:returntype", void 0)
     ], ContextMenu.prototype, "openContextMenus", null);
     __decorate([
@@ -216,6 +256,18 @@ var ContextMenu = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [HTMLElement]),
         __metadata("design:returntype", void 0)
     ], ContextMenu.prototype, "handleEnter", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [HTMLElement]),
+        __metadata("design:returntype", void 0)
+    ], ContextMenu.prototype, "handleEntered", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [HTMLElement]),
+        __metadata("design:returntype", void 0)
+    ], ContextMenu.prototype, "autoCalculatePosition", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),
@@ -225,11 +277,11 @@ var ContextMenu = /** @class */ (function (_super) {
     return ContextMenu;
 }(React__default.Component));
 var ThemedContextMenu = themeable(ContextMenu);
-function openContextMenus(info, menus, onClose) {
+function openContextMenus(info, menus, onClose, options) {
     return __awaiter(this, void 0, void 0, function () {
         return __generator(this, function (_a) {
             return [2 /*return*/, ContextMenu.getInstance().then(function (instance) {
-                    return instance.openContextMenus(info, menus, onClose);
+                    return instance.openContextMenus(info, menus, onClose, options);
                 })];
         });
     });