amis-ui 3.5.2 → 3.6.0

package/lib/components/Modal.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.5.2
+ * amis-ui v3.6.0
  * Copyright 2018-2023 fex
  */
 
@@ -14,17 +14,30 @@ var Portal = require('react-overlays/Portal');
 var ModalManager = require('./ModalManager.js');
 var amisCore = require('amis-core');
 var icons = require('./icons.js');
+var Draggable = require('react-draggable');
+var isNumber = require('lodash/isNumber');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Transition__default = /*#__PURE__*/_interopDefaultLegacy(Transition);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
 
 var __react_jsx__ = require('react');
 var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
 (__react_jsx__["default"] || __react_jsx__).Fragment;
 var _a, _b;
+var getContainerWithFullscreen = function (container) { return function () {
+    var envContainer = typeof container === 'function' ? container() : container;
+    // 获取当前全屏元素
+    var fullscreenElement = document.fullscreenElement;
+    if (fullscreenElement &&
+        (!envContainer || !fullscreenElement.contains(envContainer))) {
+        return fullscreenElement;
+    }
+    return envContainer || null;
+}; };
 var fadeStyles = (_a = {},
     _a[Transition.ENTERING] = 'in',
     _a[Transition.ENTERED] = 'in',
@@ -40,6 +53,7 @@ var Modal = /** @class */ (function (_super) {
     function Modal() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.isRootClosed = false;
+        _this.state = { dragPos: undefined };
         _this.handleEnter = function () {
             document.body.classList.add("is-modalOpened");
             if (window.innerWidth - document.documentElement.clientWidth > 0 ||
@@ -79,6 +93,76 @@ var Modal = /** @class */ (function (_super) {
                 ModalManager.removeModal(_this);
             }
         };
+        // #region 处理dialog拖动
+        _this.handleDragStart = function (_event, uiData) {
+            var node = uiData.node;
+            var offsetParent = node.offsetParent;
+            if (!node || !offsetParent) {
+                return;
+            }
+            var _a = window.document.documentElement, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+            var nodeStyle = getComputedStyle(node);
+            var marginTop = parseInt(nodeStyle.marginTop, 10);
+            var nodeWidth = parseInt(nodeStyle.width, 10);
+            var nodeHeight = parseInt(nodeStyle.height, 10);
+            var bounds = {
+                left: 0,
+                right: clientWidth - nodeWidth,
+                top: -marginTop,
+                bottom: clientHeight - nodeHeight - marginTop
+            };
+            var parentRect = offsetParent.getBoundingClientRect();
+            var clientRect = node.getBoundingClientRect();
+            var cLeft = clientRect.left;
+            var pLeft = parentRect.left;
+            var cTop = clientRect.top;
+            var pTop = parentRect.top;
+            var left = cLeft - pLeft + offsetParent.scrollLeft;
+            var top = cTop - pTop + offsetParent.scrollTop - marginTop;
+            _this.setState({ dragPos: { x: left, y: top }, bounds: bounds });
+            // 阻止冒泡  存在弹窗里面套弹窗
+            _event.stopPropagation();
+        };
+        _this.handleDrag = function (e, _a) {
+            var deltaX = _a.deltaX, deltaY = _a.deltaY;
+            e.stopPropagation();
+            if (!_this.state.dragPos) {
+                return;
+            }
+            var _b = _this.state, _c = _b.dragPos, x = _c.x, y = _c.y, bounds = _b.bounds;
+            var calcY = y + deltaY;
+            var calcX = x + deltaX;
+            // 防止拖动到屏幕外 处理边界
+            if (isNumber__default["default"](bounds === null || bounds === void 0 ? void 0 : bounds.right)) {
+                calcX = Math.min(calcX, bounds.right);
+            }
+            if (isNumber__default["default"](bounds === null || bounds === void 0 ? void 0 : bounds.bottom)) {
+                calcY = Math.min(calcY, bounds.bottom);
+            }
+            if (isNumber__default["default"](bounds === null || bounds === void 0 ? void 0 : bounds.left)) {
+                calcX = Math.max(calcX, bounds.left);
+            }
+            if (isNumber__default["default"](bounds === null || bounds === void 0 ? void 0 : bounds.top)) {
+                calcY = Math.max(calcY, bounds.top);
+            }
+            _this.setState({ dragPos: { x: calcX, y: calcY } });
+        };
+        _this.handleDragStop = function (e) {
+            e.stopPropagation();
+        };
+        _this.getDragStyle = function () {
+            var draggable = _this.props.draggable;
+            var dragPos = _this.state.dragPos;
+            if (!dragPos || !draggable) {
+                return {};
+            }
+            var x = dragPos.x, y = dragPos.y;
+            return {
+                top: "".concat(y, "px"),
+                left: "".concat(x, "px"),
+                position: 'absolute'
+            };
+        };
         return _this;
     }
     Modal.prototype.componentDidMount = function () {
@@ -115,27 +199,30 @@ var Modal = /** @class */ (function (_super) {
         var onHide = this.props.onHide;
         this.isRootClosed && !e.defaultPrevented && onHide(e);
     };
+    // #endregion
     Modal.prototype.render = function () {
         var _this = this;
-        var _a = this.props, className = _a.className, contentClassName = _a.contentClassName, children = _a.children, container = _a.container, show = _a.show, size = _a.size, style = _a.style, overlay = _a.overlay, width = _a.width, height = _a.height, modalClassName = _a.modalClassName, modalMaskClassName = _a.modalMaskClassName, cx = _a.classnames;
+        var _a = this.props, className = _a.className, contentClassName = _a.contentClassName, children = _a.children, container = _a.container, show = _a.show, size = _a.size, style = _a.style, overlay = _a.overlay, width = _a.width, height = _a.height, modalClassName = _a.modalClassName, modalMaskClassName = _a.modalMaskClassName, cx = _a.classnames, mobileUI = _a.mobileUI, draggable = _a.draggable, classPrefix = _a.classPrefix;
         var _style = {
             width: (style === null || style === void 0 ? void 0 : style.width) ? style === null || style === void 0 ? void 0 : style.width : width,
             height: (style === null || style === void 0 ? void 0 : style.height) ? style === null || style === void 0 ? void 0 : style.height : height
         };
         return (_J$X_(Transition__default["default"], { mountOnEnter: true, unmountOnExit: true, appear: true, in: show, timeout: 500, onEnter: this.handleEnter, onExited: this.handleExited, onEntered: this.handleEntered }, function (status) {
             var _a;
-            return (_J$X_(Portal__default["default"], { container: container },
+            return (_J$X_(Portal__default["default"], { container: getContainerWithFullscreen(container) },
                 _J$X_("div", { ref: _this.modalRef, role: "dialog", className: cx("amis-dialog-widget Modal", (_a = {},
                         _a["Modal--".concat(size)] = size,
                         _a), className) },
                     overlay ? (_J$X_("div", { className: cx("Modal-overlay", fadeStyles[status], modalMaskClassName) })) : null,
-                    _J$X_("div", { className: cx("Modal-content", size === 'custom' ? 'Modal-content-custom' : '', contentClassName, modalClassName, contentFadeStyles[status]), style: _style }, status === Transition.EXITED ? null : children))));
+                    _J$X_(Draggable.DraggableCore, { disabled: !draggable || mobileUI, onStart: _this.handleDragStart, onDrag: _this.handleDrag, onStop: _this.handleDragStop, handle: ".".concat(classPrefix, "Modal-header") },
+                        _J$X_("div", { className: cx("Modal-content", draggable && !mobileUI ? 'Modal-draggable' : '', size === 'custom' ? 'Modal-content-custom' : '', contentClassName, modalClassName, contentFadeStyles[status]), style: tslib.__assign(tslib.__assign({}, _style), _this.getDragStyle()) }, status === Transition.EXITED ? null : children)))));
         }));
     };
     Modal.defaultProps = {
         container: document.body,
         size: '',
-        overlay: true
+        overlay: true,
+        draggable: false
     };
     Modal.Header = amisCore.themeable(amisCore.localeable(function (_a) {
         var cx = _a.classnames, className = _a.className, showCloseButton = _a.showCloseButton, onClose = _a.onClose, children = _a.children; _a.classPrefix; var __ = _a.translate; _a.forwardedRef; var rest = tslib.__rest(_a, ["classnames", "className", "showCloseButton", "onClose", "children", "classPrefix", "translate", "forwardedRef"]);
@@ -180,3 +267,4 @@ var FinalModal = amisCore.themeable(amisCore.localeable(Modal));
 
 exports.Modal = Modal;
 exports["default"] = FinalModal;
+exports.getContainerWithFullscreen = getContainerWithFullscreen;

package/lib/components/ModalManager.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.5.2
+ * amis-ui v3.6.0
  * Copyright 2018-2023 fex
  */