amis-ui 3.1.1 → 3.3.0

package/lib/components/ContextMenu.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -18,7 +18,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Transition__default = /*#__PURE__*/_interopDefaultLegacy(Transition);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var _a;
+// import {createRoot} from 'react-dom/client';
 var fadeStyles = (_a = {},
     _a[Transition.ENTERING] = 'in',
     _a[Transition.ENTERED] = 'in',
@@ -40,13 +44,25 @@ var ContextMenu = /** @class */ (function (_super) {
         return _this;
     }
     ContextMenu.getInstance = function () {
-        if (!ContextMenu.instance) {
-            var container = document.body;
-            var div = document.createElement('div');
-            container.appendChild(div);
-            ReactDOM.render(React__default["default"].createElement(ThemedContextMenu, null), div);
-        }
-        return ContextMenu.instance;
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var container, div;
+            return tslib.__generator(this, function (_a) {
+                if (!ContextMenu.instance) {
+                    container = document.body;
+                    div = document.createElement('div');
+                    container.appendChild(div);
+                    // if (parseInt(version.split('.')[0], 10) >= 18) {
+                    //   const root = createRoot(div);
+                    //   await new Promise<void>(resolve =>
+                    //     root.render(<ThemedContextMenu ref={() => resolve()} />)
+                    //   );
+                    // } else {
+                    ReactDOM.render(_J$X_(ThemedContextMenu, null), div);
+                    // }
+                }
+                return [2 /*return*/, ContextMenu.instance];
+            });
+        });
     };
     ContextMenu.prototype.componentDidMount = function () {
         document.body.addEventListener('click', this.handleOutClick, true);
@@ -151,29 +167,29 @@ var ContextMenu = /** @class */ (function (_super) {
         var cx = this.props.classnames;
         return menus.map(function (item, index) {
             if (item === '|') {
-                return React__default["default"].createElement("li", { key: index, className: cx('ContextMenu-divider') });
+                return _J$X_("li", { key: index, className: cx('ContextMenu-divider') });
             }
             var hasChildren = Array.isArray(item.children) && item.children.length;
-            return (React__default["default"].createElement("li", { key: "".concat(item.label, "-").concat(index), className: cx('ContextMenu-item', item.className, {
+            return (_J$X_("li", { key: "".concat(item.label, "-").concat(index), className: cx('ContextMenu-item', item.className, {
                     'has-child': hasChildren,
                     'is-disabled': item.disabled
                 }) },
-                React__default["default"].createElement("a", { onClick: _this.handleClick.bind(_this, item), onMouseEnter: _this.handleMouseEnter.bind(_this, item), onMouseLeave: _this.handleMouseLeave.bind(_this, item) },
-                    item.icon ? (React__default["default"].createElement("span", { className: cx('ContextMenu-itemIcon', item.icon) })) : null,
+                _J$X_("a", { onClick: _this.handleClick.bind(_this, item), onMouseEnter: _this.handleMouseEnter.bind(_this, item), onMouseLeave: _this.handleMouseLeave.bind(_this, item) },
+                    item.icon ? (_J$X_("span", { className: cx('ContextMenu-itemIcon', item.icon) })) : null,
                     item.label),
-                hasChildren ? (React__default["default"].createElement("ul", { className: cx('ContextMenu-subList') }, _this.renderMenus(item.children))) : null));
+                hasChildren ? (_J$X_("ul", { className: cx('ContextMenu-subList') }, _this.renderMenus(item.children))) : null));
         });
     };
     ContextMenu.prototype.render = function () {
         var _this = this;
         var _a = this.props, className = _a.className; _a.container; var cx = _a.classnames;
-        return (React__default["default"].createElement(Transition__default["default"], { mountOnEnter: true, unmountOnExit: true, onEnter: this.handleEnter, in: this.state.isOpened, timeout: 500 }, function (status) { return (React__default["default"].createElement("div", { ref: _this.menuRef, role: "contextmenu", className: cx('ContextMenu', {
+        return (_J$X_(Transition__default["default"], { mountOnEnter: true, unmountOnExit: true, onEnter: this.handleEnter, in: this.state.isOpened, timeout: 500 }, function (status) { return (_J$X_("div", { ref: _this.menuRef, role: "contextmenu", className: cx('ContextMenu', {
                 'ContextMenu--left': _this.state.align === 'left'
             }, className), onContextMenu: _this.handleSelfContextMenu },
-            React__default["default"].createElement("div", { className: cx("ContextMenu-overlay", fadeStyles[status]) }),
-            React__default["default"].createElement("div", { className: cx("ContextMenu-cursor"), style: { left: "".concat(_this.state.x, "px"), top: "".concat(_this.state.y, "px") } }),
-            React__default["default"].createElement("div", { style: { left: "".concat(_this.state.x, "px"), top: "".concat(_this.state.y, "px") }, className: cx("ContextMenu-menu", fadeStyles[status]) },
-                React__default["default"].createElement("ul", { className: cx('ContextMenu-list') }, _this.renderMenus(_this.state.menus))))); }));
+            _J$X_("div", { className: cx("ContextMenu-overlay", fadeStyles[status]) }),
+            _J$X_("div", { className: cx("ContextMenu-cursor"), style: { left: "".concat(_this.state.x, "px"), top: "".concat(_this.state.y, "px") } }),
+            _J$X_("div", { style: { left: "".concat(_this.state.x, "px"), top: "".concat(_this.state.y, "px") }, className: cx("ContextMenu-menu", fadeStyles[status]) },
+                _J$X_("ul", { className: cx('ContextMenu-list') }, _this.renderMenus(_this.state.menus))))); }));
     };
     ContextMenu.instance = null;
     tslib.__decorate([
@@ -216,7 +232,9 @@ var ContextMenu = /** @class */ (function (_super) {
 }(React__default["default"].Component));
 var ThemedContextMenu = amisCore.themeable(ContextMenu);
 function openContextMenus(info, menus, onClose) {
-    return ContextMenu.getInstance().openContextMenus(info, menus, onClose);
+    return ContextMenu.getInstance().then(function (instance) {
+        return instance.openContextMenus(info, menus, onClose);
+    });
 }
 
 exports.ContextMenu = ContextMenu;