fastlion-amis
Version:
一种MIS页面生成工具
854 lines (853 loc) • 50.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var antd_1 = require("antd");
require("./dragDialog.scss");
var helper_1 = require("../../utils/helper");
var icons_1 = require("../icons");
// import { inject, observer } from 'mobx-react';
var icons_2 = require("@ant-design/icons");
var react_rnd_1 = require("react-rnd");
var types_1 = require("../../types");
var lodash_1 = require("lodash");
// const FLModal: React.FC<IDialogProps> = (props) => {
// const FLModal: React.FC<IDialogProps> = inject('modalStore')(observer(({ modalStore, ...props }) => {
var FLModal = function (_a) {
var _b;
var props = tslib_1.__rest(_a, []);
// 默认属性
var defaultProps = {
okText: '确定',
cancelText: '取消',
title: '弹窗',
centered: true,
resizeable: false,
drag: true,
maskClosable: false,
mode: 'pc',
closable: true,
mask: true,
keyboard: true,
minWidth: 400,
bounds: 'window'
};
var _c = tslib_1.__assign(tslib_1.__assign({}, defaultProps), props), drag = _c.drag, title = _c.title, className = _c.className, mode = _c.mode, closable = _c.closable, hideTitle = _c.hideTitle, canClickBelowDom = _c.canClickBelowDom, dialogVisible = _c.dialogVisible, hide = _c.hide, keyHandle = _c.keyHandle, popConfirm = _c.popConfirm, children = _c.children, _d = _c.minHeight, minHeight = _d === void 0 ? 300 : _d, minWidth = _c.minWidth, resizeable = _c.resizeable, keyboard = _c.keyboard, _e = _c.cacheConfigKey, cacheConfigKey = _e === void 0 ? '' : _e, _f = _c.miniTitleWrapperClassName, miniTitleWrapperClassName = _f === void 0 ? '' : _f, forceShowFixModal = _c.forceShowFixModal, hiddenBtn = _c.hiddenBtn, fullHeightOnInit = _c.fullHeightOnInit, forceCalcOnResize = _c.forceCalcOnResize, pinRight = _c.pinRight, _g = _c.bounds, bounds = _g === void 0 ? 'window' : _g, _h = _c.defaultMaxSize, defaultMaxSize = _h === void 0 ? false : _h, boundDirection = _c.boundDirection, heightFitContent = _c.heightFitContent, modalZIndex = _c.modalZIndex, initOffset = _c.initOffset, viceTitle = _c.viceTitle, afterMaxSize = _c.afterMaxSize;
var _j = (0, react_1.useState)(false), maxSize = _j[0], setMaxSize = _j[1];
var _k = (0, react_1.useState)(props.width), resizableWidth = _k[0], setResizableWidth = _k[1];
var _l = (0, react_1.useState)(props.height), resizableHeight = _l[0], _setResizableHeight = _l[1];
var _m = (0, react_1.useState)({ x: 0, y: 0 }), position = _m[0], setPosition = _m[1];
// const [modalId] = useState(`${Date.now()}`);
var _o = (0, react_1.useState)(false), fixRight = _o[0], setFixRight = _o[1];
var _p = (0, react_1.useState)(false), pinToRight = _p[0], setPinToRight = _p[1];
var _q = (0, react_1.useState)(false), stickyRight = _q[0], setStickyRight = _q[1];
// const [dragModalZIndex, setModalZIndex] = useState(getLagerThanMaxZindex());
var _r = (0, react_1.useState)(modalZIndex !== null && modalZIndex !== void 0 ? modalZIndex : 999), dragModalZIndex = _r[0], setModalZIndex = _r[1];
var _s = (0, react_1.useState)(''), pageContentId = _s[0], setPageContentId = _s[1];
var modalUniqueLabel = (0, react_1.useState)("modal_".concat(Date.now()))[0];
var isFixRight = (0, react_1.useRef)(false);
var domRef = (0, react_1.useRef)(undefined);
var minTitleDomRef = (0, react_1.useRef)(null);
var titleDomHigh = (0, react_1.useRef)(0);
var titleDom = (0, react_1.useRef)(null);
var dragModalRef = (0, react_1.useRef)(null);
var dragTimer = (0, react_1.useRef)();
/** 拖拽容器主体ref */
var rndMainRef = (0, react_1.useRef)();
var _t = (0, react_1.useState)(false), dialogOpen = _t[0], setDialogOpen = _t[1];
(0, react_1.useEffect)(function () {
if (dialogVisible) {
setDialogOpen(dialogVisible && !hide);
}
else {
setDialogOpen(false);
}
// return dialogVisible && !hide
}, [dialogVisible, hide]);
var fixRightStyleRef = (0, react_1.useRef)({
position: 'fixed',
top: '0',
// height: '100vh',
right: '0',
});
var maxSizeStyleRef = (0, react_1.useRef)({
position: 'fixed',
top: '0',
// height: '100vh',
right: '0',
});
var titleMinDom = (0, react_1.useRef)(null);
// footer的高度固定53px
var footerHeight = props.footer ? 43 : 0;
var setResizableHeight = function (high) {
_setResizableHeight(high);
};
// const moving = useRef(false);
var lastX = (0, react_1.useRef)(0);
var lastY = (0, react_1.useRef)(0);
/** 最后模态框的定位 */
var lastPosition = (0, react_1.useRef)({ x: 0, y: 0 });
var originModalStyleRef = (0, react_1.useRef)({});
var manualFix = (0, react_1.useRef)(false);
var isMiniTitleDragging = false;
// 获取dom实例
var contentRef = (0, react_1.useCallback)(function (ref) {
var _a, _b, _c;
// 重置一下偏移位置
setPosition({ x: 0, y: 0 });
// 重置实例的时候 （重置/初始化）titleDom实例高度
if (!titleDomHigh.current && titleDom.current) {
titleDomHigh.current = (_a = titleDom.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
}
if (ref) {
// 如果配置默认全屏，则切换全屏
if (defaultMaxSize) {
toggleMaxSize();
}
var pageContentDom = helper_1.domUtils.closest(ref, '.main-page-content');
var pageContentIdMatch = (_b = pageContentDom === null || pageContentDom === void 0 ? void 0 : pageContentDom.className.split(' ').find(function (item) { return item.includes('page-content-id_'); })) !== null && _b !== void 0 ? _b : '';
setPageContentId(pageContentIdMatch);
domRef.current = (_c = helper_1.domUtils.closest(ref, '.ant-modal-content')) === null || _c === void 0 ? void 0 : _c.parentElement;
// 如果允许点击下层按钮 把root的事件置为none
if (canClickBelowDom) {
var rootDom = helper_1.domUtils.closest(ref, '.ant-modal-wrap.drag-dialog');
if (rootDom) {
rootDom.style.pointerEvents = 'none';
// rootDom.style.zIndex = dragModalZIndex
}
}
var cachedConfig = localStorage.getItem(cacheConfigKey);
// 没有缓存的配置的话，则走初始化配置
cacheConfigKey ? generateCachedModalPosition(cachedConfig) : generateModalPosition();
/** 初始化mini-title操作框的位置 */
if (props.showMinTitle) {
var x = getClientWidth() - 100;
var y = 100;
minTitleDomRef.current.updatePosition({ x: x, y: y });
}
// 广播一下变化事件
disPatchResize();
}
}, []);
// enter 键盘事件监听 弹窗内置快捷键
var onKeyDown = (0, react_1.useCallback)(function (e) {
e.stopPropagation();
if (e.key == 'Escape') {
btnCancel(e);
}
if (e.key === 'Enter' && props.preventEnter) {
btnOk(e);
}
}, []);
var btnOk = (0, react_1.useCallback)(function (e) {
var onOk = props.onOk;
onOk && onOk(e);
}, []);
var footDom = (0, react_1.useCallback)(function () {
var okText = props.okText, cancelText = props.cancelText, onCancel = props.onCancel, onOk = props.onOk;
return (react_1.default.createElement("div", { className: "foot-mb" },
react_1.default.createElement("div", { onClick: function (e) { return onCancel && onCancel(e); } }, cancelText),
react_1.default.createElement("div", { onClick: function (e) { return onOk && onOk(e); } }, okText)));
}, []);
// 记录原来窗体信息
var recordOriginSize = function (Modalbody) {
var _a, _b, _c;
// 记录原来的偏移量
originModalStyleRef.current.transform = (_a = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _a === void 0 ? void 0 : _a.style.transform;
// 记录原来的宽度
originModalStyleRef.current.width = (_b = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _b === void 0 ? void 0 : _b.style.width;
originModalStyleRef.current.clientWidth = (_c = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth;
// 记录原来的弹窗高度
originModalStyleRef.current.height = Modalbody.getBoundingClientRect().height;
originModalStyleRef.current.maxHeight = Modalbody.style.maxHeight;
originModalStyleRef.current.maxWidth = Modalbody.style.maxWidth;
originModalStyleRef.current.offsetLeft = Modalbody.getBoundingClientRect().left;
};
var toggleMaxSize = function () {
// 全屏的时候需要将原先固定至右侧的占用给去除
if (pinRight && (pinToRight || isFixRight.current)) {
handlePinRightSize(true);
setPinToRight(false);
toggleDialogFixRight();
}
setMaxSize(function (isMaxSize) {
var _a, _b, _c, _d, _e, _f;
var Modalbody = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.ant-modal-body');
if (Modalbody === null || Modalbody === void 0 ? void 0 : Modalbody.style) {
// 变为原有大小的时候
if (isMaxSize) {
if (defaultMaxSize) {
generateModalPosition();
}
else {
if ((_b = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _b === void 0 ? void 0 : _b.style) {
setPosition(lastPosition.current);
setResizableWidth(originModalStyleRef.current.width);
setResizableHeight(originModalStyleRef.current.height + titleDomHigh.current + footerHeight);
domRef.current.style.transform = originModalStyleRef.current.transform;
domRef.current.style.width = originModalStyleRef.current.width;
}
Modalbody.style.height = "".concat(originModalStyleRef.current.height, "px");
Modalbody.style.maxHeight = originModalStyleRef.current.maxHeight;
Modalbody.style.maxWidth = originModalStyleRef.current.maxWidth;
}
}
else {
// 设置全屏, 需要减去导航栏高度
var tabsContentHeight = (_d = (_c = helper_1.domUtils.closest(domRef.current, '.tabs-content')) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 45;
var domHeight = getClientHeight() - tabsContentHeight;
var left = ((_e = domRef.current) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect()).left;
lastPosition.current = { x: left, y: tabsContentHeight };
// Modalbody.style.width = `${domRef.current?.clientWidth}px`;
Modalbody.style.height = "".concat(domHeight - titleDomHigh.current - footerHeight, "px");
Modalbody.style.maxHeight = 'unset';
Modalbody.style.maxWidth = 'unset';
recordOriginSize(Modalbody);
// 如果有resize 把body也resize了
if ((_f = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _f === void 0 ? void 0 : _f.style) {
// 重置定位
domRef.current.style.transform = "translate(0, ".concat(tabsContentHeight, ")");
domRef.current.style.width = '100vw';
}
setPosition({ x: 0, y: tabsContentHeight });
setResizableWidth('100vw');
setResizableHeight(domHeight);
}
}
afterMaxSize === null || afterMaxSize === void 0 ? void 0 : afterMaxSize(!isMaxSize);
return !isMaxSize;
});
};
/** 切换是否固定到右侧 */
var toggleDialogFixRight = function (e) {
setFixRight(function (e) {
var _a, _b, _c, _d, _e, _f;
var Modalbody = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.ant-modal-body');
if (Modalbody === null || Modalbody === void 0 ? void 0 : Modalbody.style) {
// 变为不固定的时候
if (e) {
isFixRight.current = false;
if ((_b = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _b === void 0 ? void 0 : _b.style) {
// 非点击按钮触发解除固定 ，如果是手动拖拽触发，则强制从最右侧开始
if (!manualFix.current) {
setPosition({
x: lastPosition.current.x,
y: 0
});
setResizableHeight(originModalStyleRef.current.height);
// domRef.current.style.transform = originModalStyleRef.current.transform;
Modalbody.style.height = "".concat(originModalStyleRef.current.height - titleDomHigh.current - footerHeight, "px");
}
else {
if (!pinRight) {
var y = lastPosition.current.y;
var originHeight = originModalStyleRef.current.height + titleDomHigh.current + footerHeight;
var diffHeight = getClientHeight() - originHeight;
if (y > diffHeight) {
lastPosition.current = tslib_1.__assign(tslib_1.__assign({}, lastPosition.current), { y: diffHeight });
}
setPosition(lastPosition.current);
setResizableHeight(originHeight);
Modalbody.style.height = "".concat(originModalStyleRef.current.height, "px");
}
// domRef.current.style.transform = originModalStyleRef.current.transform
}
}
Modalbody.style.maxHeight = originModalStyleRef.current.maxHeight;
Modalbody.style.maxWidth = originModalStyleRef.current.maxWidth;
}
else {
// 调整为固定到右侧
var offsetX = getClientWidth() - 450;
var _g = (_c = domRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect(), left = _g.left, top = _g.top;
var tabsContentHeight = (_e = (_d = helper_1.domUtils.closest(domRef.current, '.tabs-content')) === null || _d === void 0 ? void 0 : _d.clientHeight) !== null && _e !== void 0 ? _e : 45;
// const resizeDom = mainPage?.querySelector('.resize-container') as HTMLElement;
var realHeight = getClientHeight() - tabsContentHeight;
lastPosition.current = { x: left, y: top };
// if (pinRight) {
setPosition({
x: offsetX,
y: tabsContentHeight
});
setResizableWidth(450);
setResizableHeight(realHeight);
// 将modalBody样式重置
if ((_f = domRef.current) === null || _f === void 0 ? void 0 : _f.style) {
domRef.current.style.width = '450px';
}
Modalbody.style.height = "".concat(realHeight - titleDomHigh.current - footerHeight, "px");
Modalbody.classList.remove('isMinWidth');
// }
// else {
// setPosition({
// x: offsetX,
// y: 0
// });
// // 将modalBody样式重置
// Modalbody.style.height = `calc(100vh - ${titleDomHigh.current}px)`;
// setResizableHeight('100vh');
// }
recordOriginSize(Modalbody);
isFixRight.current = true;
// onTitleMouseEnter()
}
}
return !e;
});
setStickyRight(false);
};
var dispatchTimer = (0, react_1.useRef)();
var disPatchResize = function () {
clearTimeout(dispatchTimer.current);
// 动画帧的变化会造成高度计算不对 变化时间是.3s 故按照3s计算
dispatchTimer.current = setTimeout(function () {
document.body.dispatchEvent(new Event(types_1.ResizeEvent.DIALOGRESIZEENDEVENT));
}, 250);
};
// 固定解除 最大最小调整 的时候触发重绘
(0, react_1.useEffect)(function () {
disPatchResize();
}, [fixRight, maxSize]);
// 销毁定时器等
(0, react_1.useEffect)(function () {
window.addEventListener('resize', handleWindowResize);
document.body.addEventListener(types_1.ResizeEvent.RESET_HEIGHT_FIT_CONTENT, handleResetHeightFitContent);
document.body.addEventListener(types_1.ResizeEvent.RESET_HEIGHT_FIT_CONTENT_ON_DECREASE, handleResetHeightFitContentOnDecrease);
return function () {
clearTimeout(dragTimer.current);
clearTimeout(dispatchTimer.current);
dragTimer.current = null;
dispatchTimer.current = null;
window.removeEventListener('resize', handleWindowResize);
document.body.removeEventListener(types_1.ResizeEvent.RESET_HEIGHT_FIT_CONTENT, handleResetHeightFitContent);
document.body.removeEventListener(types_1.ResizeEvent.RESET_HEIGHT_FIT_CONTENT_ON_DECREASE, handleResetHeightFitContentOnDecrease);
};
}, []);
(0, react_1.useEffect)(function () {
if (dialogVisible && !props.hide) {
disPatchResize();
handleResetHeightFitContent();
}
}, [props.hide, dialogVisible]);
(0, react_1.useEffect)(function () {
/** 仅在固定在右侧的时候，手动触发显示 */
if (forceShowFixModal && dialogVisible && (!pinRight && (fixRight || isFixRight.current))) {
onTitleMouseEnter();
}
}, [forceShowFixModal]);
/** 监听浏览器窗口大小改变 */
var handleWindowResize = (0, lodash_1.throttle)(function () {
var _a, _b, _c, _d, _e, _f;
var Modalbody = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.ant-modal-body');
if (pinRight) {
// 如果已经固定到右侧，则将始终保持贴在容器中
if (pinToRight || isFixRight.current) {
// 调整为固定到右侧
var offsetX = getClientWidth() - ((_c = (_b = domRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0);
var _g = (_d = domRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect(), left = _g.left, top = _g.top;
var tabsContentHeight = (_f = (_e = helper_1.domUtils.closest(domRef.current, '.tabs-content')) === null || _e === void 0 ? void 0 : _e.clientHeight) !== null && _f !== void 0 ? _f : 45;
// const resizeDom = mainPage?.querySelector('.resize-container') as HTMLElement;
var realHeight = getClientHeight() - tabsContentHeight;
lastPosition.current = { x: left, y: top };
setPosition({
x: offsetX,
// y: getClientHeight() - realHeight
y: tabsContentHeight
});
setResizableHeight(realHeight);
// resizeDom!.style!.height = `${realHeight}px`;
// 将modalBody样式重置
Modalbody.style.height = "".concat(realHeight - titleDomHigh.current, "px");
}
}
}, 300);
/** 隐藏模态框 */
var hideDialog = function (e) {
// 最小化以后重置这些状态
setFixRight(false);
isFixRight.current = false;
// 全屏状态下，触发隐藏模态框不清空状态
// setMaxSize(false);
if (!maxSize || fixRight) {
originModalStyleRef.current = {};
}
var onHide = props.onHide;
setPinToRight(false);
handlePinRightSize(true);
onHide && onHide(e);
};
/** 显示模态框 */
var showDialog = (0, react_1.useCallback)(function (e) {
var onShow = props.onShow;
onShow && onShow(e);
}, []);
/** 关闭模态框 */
var btnCancel = function (e) {
setFixRight(false);
setMaxSize(false);
isFixRight.current = false;
originModalStyleRef.current = {};
setPinToRight(false);
handlePinRightSize(true);
var onCancel = props.onCancel;
onCancel && onCancel(e);
};
// 获取偏移量
var getMoveDistance = (0, react_1.useCallback)(function (e) {
var _a;
var body = document.body;
var pos = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
if (!pos)
return { moveX: 0, moveY: 0 };
var maxWidth = body.clientWidth;
var maxHeight = body.clientHeight + 0.75 * pos.height;
var minWidth = -0.75 * pos.width;
var minHeight = 0; // 顶部不能超过
if (lastX.current !== null && lastY.current !== null) {
var dx = e.clientX - lastX.current;
var dy = e.clientY - lastY.current;
var newDX = dx;
var newDY = dy;
if (pos.left + pos.width >= maxWidth && dx > 0) {
newDX = 0;
}
else if (pos.left + pos.width + dx >= maxWidth) {
newDX = maxWidth - pos.left - pos.width;
}
else if ((pos.left < minWidth && dx < 0) || pos.left + dx < minWidth) {
newDX = 0;
}
if (pos.top + pos.height >= maxHeight && dy > 0) {
newDY = 0;
}
else if (pos.top + pos.height + dy >= maxHeight) {
newDY = maxHeight - pos.top - pos.height;
}
else if ((pos.top < minHeight && dy < 0) || pos.top + dy < minHeight) {
newDY = 0;
}
return { moveX: newDX, moveY: newDY };
}
else {
return { moveX: 0, moveY: 0 };
}
}, []);
/** 当模态框持续拖拽时触发 */
var onDrag = (0, react_1.useCallback)(function (e, d) {
if (props.setFixRight) {
var node = d.node;
var offsetRight = node.getBoundingClientRect().right;
var documentClientWidth = getClientWidth();
var isStickyRight = documentClientWidth - offsetRight < 10;
setStickyRight(isStickyRight);
if (isFixRight.current) {
toggleDialogFixRight();
}
}
}, []);
var toggleDialogPointEvent = (0, react_1.useCallback)(function (event) {
if (event === void 0) { event = 'none'; }
if (canClickBelowDom) {
var rootDom = document.documentElement.querySelector('.ant-modal-wrap.drag-dialog');
if (rootDom)
rootDom.style.pointerEvents = event;
}
}, []);
/** 当开始拖拽的时候，给模态框添加dragging样式 */
var onTitleDragStart = function () {
var _a, _b, _c;
isMiniTitleDragging = true;
if (!((_a = dragModalRef.current) === null || _a === void 0 ? void 0 : _a.classList.contains('isDragging'))) {
(_c = (_b = dragModalRef.current) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.add('isDragging');
}
};
/** 当结束拖拽的时候，给模态框去除dragging样式 */
var onTitleDragStop = function () {
var _a, _b, _c;
clearTimeout(dragTimer.current);
dragTimer.current = setTimeout(function () {
isMiniTitleDragging = false;
}, 250);
(_b = (_a = dragModalRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('isDragging');
if (window.getSelection) {
(_c = window.getSelection()) === null || _c === void 0 ? void 0 : _c.removeAllRanges();
}
};
/** 当模态框开始拖拽时 - 暂停覆盖zIndex */
var onDragStart = function (e, d) {
/** 将当前选中的模态框赋予最高zIndex */
var node = d.node;
var newIndex = (0, helper_1.getLagerThanMaxZindex)();
var finalIndex = newIndex - 1 <= dragModalZIndex ? dragModalZIndex : newIndex;
var rootDom = helper_1.domUtils.closest(node, '.ant-modal-wrap.drag-dialog');
if (rootDom) {
rootDom.style.zIndex = finalIndex;
setModalZIndex(finalIndex);
}
};
/** 当模态框停止拖拽时触发 */
var onDragStop = (0, react_1.useCallback)(function (e, d) {
var _a;
toggleDialogPointEvent();
// 停止拖拽的同时 会有选中文本的后摇，把所有选中的文本都移除
if (window.getSelection) {
(_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
}
var node = d.node, x = d.x, y = d.y;
var currentPosition = { x: x, y: y };
// 缓存最后的位置
if (boundDirection === null || boundDirection === void 0 ? void 0 : boundDirection.length) {
// 如果有配置边界，则判断边界位置。调整x，y.目前先支持top
// 如果配置上边界，y不能超过0
if (boundDirection.includes('top')) {
if (y < 0) {
currentPosition.y = 0;
}
}
}
// 配置坐标
setPosition(currentPosition);
lastPosition.current = currentPosition;
var documentClientWidth = getClientWidth();
var _b = node.getBoundingClientRect(), offsetRight = _b.right, offsetLeft = _b.left;
var isStickyRight = props.setFixRight ? documentClientWidth - offsetRight < 10 : 0;
if (props.setFixRight) {
if (isStickyRight) {
var height = getClientHeight();
setPosition({ x: offsetLeft, y: 0 });
// 将modalBody样式重置
var modalBody = node.querySelector('.ant-modal-body');
recordOriginSize(modalBody);
modalBody.style.height = "calc(100vh - ".concat(titleDomHigh.current, "px)");
setResizableHeight(height);
}
setFixRight(isStickyRight);
// 用useState获取到的值都是false，先用ref的值一起判断
isFixRight.current = isStickyRight;
}
var configs = {
x: x,
y: y,
width: node.clientWidth,
height: node.clientHeight
};
// 2025-04 先注释
requestAnimationFrame(function () {
// if (props.setFixRight) {
// setStickyRight(false);
// }
// if (!isStickyRight) {
// configs['transform'] = domRef.current?.style.transform ?? '';
// }
cacheModalConfig(configs);
});
}, []);
var onResize = (0, lodash_1.throttle)(function (e, direction, refEl, d, position) {
var clientWidth = refEl.clientWidth, clientHeight = refEl.clientHeight;
setResizableWidth(clientWidth);
setResizableHeight(clientHeight);
if (forceCalcOnResize) {
var modalBody = refEl.querySelector('.ant-modal-body');
// const isMinWidth = clientWidth === minWidth;
if (modalBody.style) {
modalBody.style.height = (clientHeight - titleDomHigh.current - footerHeight) + 'px';
// modalBody.classList[isMinWidth ? 'add' : 'remove']?.('isMinWidth');
}
}
}, 300);
var onResizeStop = function (e, direction, refEl, d, position) {
var _a, _b;
var offsetWidth = refEl.offsetWidth, offsetHeight = refEl.offsetHeight, clientWidth = refEl.clientWidth, clientHeight = refEl.clientHeight, style = refEl.style;
setPosition(position);
if ((fixRight || isFixRight.current) && (!pinToRight || !pinRight)) {
onTitleMouseEnter();
}
else if (pinRight && (pinToRight || isFixRight.current) || !fixRight && !isFixRight.current) {
// lastPosition.current = position;
var cacheConfigs = tslib_1.__assign(tslib_1.__assign({}, position), { width: clientWidth, height: clientHeight, transform: style.transform });
cacheModalConfig(cacheConfigs);
}
// rndMainRef.current!.updatePosition(position);
var isMinWidth = clientWidth === minWidth;
var modalBody = refEl.querySelector('.ant-modal-body');
if (modalBody.style) {
modalBody.style.height = (clientHeight - titleDomHigh.current - footerHeight) + 'px';
(_b = (_a = modalBody.classList)[isMinWidth ? 'add' : 'remove']) === null || _b === void 0 ? void 0 : _b.call(_a, 'isMinWidth');
}
disPatchResize();
pinRight && pinToRight && handlePinRightSize(false);
};
var getFixedHoverTitle = (0, react_1.useCallback)(function () {
var _a;
return (_a = titleDom.current) === null || _a === void 0 ? void 0 : _a.querySelector('.fixed-hover-title');
}, []);
/** 当鼠标离开Modal本体，将自身隐藏 - 暂时不引用 */
var onMouseLeave = (0, react_1.useCallback)(function (e) {
var _a;
if (isFixRight.current) {
(_a = getFixedHoverTitle()) === null || _a === void 0 ? void 0 : _a.classList.add('show');
domRef.current.style.transform = "translate(".concat(getClientWidth(), "px, 0)");
}
// modalStore?.defineModalId?.('');
}, []);
// 鼠标从固定在右侧的标题进入时，将显示整个Modal，并将自身隐藏
var onTitleMouseEnter = (0, react_1.useCallback)(function () {
requestAnimationFrame(function () {
var _a, _b;
var offsetL = getClientWidth() - ((_b = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0);
domRef.current.style.transform = "translate(".concat(offsetL, "px, 0)");
});
}, []);
var getClientHeight = function () {
return document.documentElement.clientHeight;
};
var getClientWidth = function () {
return document.documentElement.clientWidth;
};
// 重置模态框居中位置
var generateModalPosition = function () {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
// 如果配置居中，则调整left, top
var documentElementWidth = document.documentElement.clientWidth;
var documentElementHeight = document.documentElement.clientHeight;
var tabsContentHeight = (_b = (_a = helper_1.domUtils.closest(domRef.current, '.tabs-content')) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 45;
var Modalbody = (_c = domRef.current) === null || _c === void 0 ? void 0 : _c.querySelector('.ant-modal-body');
var mainPageHeight = getClientHeight() - tabsContentHeight;
// fullHeightOnInit
// 如果传的是number，则默认是按px为单位
var domWidth = typeof props.width === 'number' ? ((_d = props.width) !== null && _d !== void 0 ? _d : ((_f = (_e = domRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : documentElementWidth)) : props.width;
if (typeof domWidth === 'string') {
var matchUnit = ((_g = ['%', 'vw'].filter(function (item) { return domWidth.includes(item); })[0]) !== null && _g !== void 0 ? _g : '');
var _m = domWidth.split(matchUnit), ratio = _m[0], unit = _m[1];
domWidth = documentElementWidth * Number(ratio) * 0.01;
}
// 如果配置了初始化占满，则初始化的时候占满高度
var domHeight = minHeight;
if (fullHeightOnInit) {
domHeight = mainPageHeight;
}
else {
domHeight = (((_h = domRef.current) === null || _h === void 0 ? void 0 : _h.clientHeight) < (domWidth !== null && domWidth !== void 0 ? domWidth : 0)) ? minHeight : ((_k = (_j = domRef.current) === null || _j === void 0 ? void 0 : _j.clientHeight) !== null && _k !== void 0 ? _k : documentElementHeight);
}
if ((Modalbody === null || Modalbody === void 0 ? void 0 : Modalbody.style) && resizeable) {
Modalbody.style.height = "".concat(domHeight - titleDomHigh.current - footerHeight, "px");
}
var left = (documentElementWidth - (domWidth !== null && domWidth !== void 0 ? domWidth : 0)) / 2;
var top = (documentElementHeight - domHeight) / 2;
var leftOffset = left < 0 ? 0 : ((initOffset === null || initOffset === void 0 ? void 0 : initOffset.x) ? initOffset.x : left);
var topOffset = fullHeightOnInit ? tabsContentHeight : (top < 0 ? 0 : ((initOffset === null || initOffset === void 0 ? void 0 : initOffset.y) ? initOffset.y : top > domHeight ? (top / 2) : top));
if ((_l = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _l === void 0 ? void 0 : _l.style) {
// domRef.current.style.transform = ''
domRef.current.style.width = "".concat(domWidth, "px");
}
setPosition({ x: leftOffset, y: topOffset });
// const BoundClientRect = domRef.current?.getBoundingClientRect()
setResizableWidth(domWidth);
setResizableHeight(domHeight);
if (cacheConfigKey) {
// 缓存弹窗配置
requestAnimationFrame(function () {
var configs = {
x: leftOffset,
y: topOffset,
width: domWidth,
height: domHeight,
};
configs['transform'] = domRef.current.style.transform;
cacheModalConfig(configs);
});
}
};
// 配置缓存模态框
var generateCachedModalPosition = function (configs) {
var _a, _b, _c;
if (configs === void 0) { configs = ''; }
try {
var parsedConfigs = JSON.parse(configs);
var _d = parsedConfigs, x = _d.x, y = _d.y, width = _d.width, height = _d.height, _e = _d.transform, transform_1 = _e === void 0 ? '' : _e;
setPosition({ x: x, y: y < 0 ? 0 : y });
var Modalbody = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.ant-modal-body');
var isMinWidth = width === minWidth;
if ((Modalbody === null || Modalbody === void 0 ? void 0 : Modalbody.style) && resizeable) {
Modalbody.style.height = "".concat(height - titleDomHigh.current, "px");
(_c = (_b = Modalbody.classList)[isMinWidth ? 'add' : 'remove']) === null || _c === void 0 ? void 0 : _c.call(_b, 'isMinWidth');
}
// const BoundClientRect = domRef.current?.getBoundingClientRect()
setResizableWidth(width);
setResizableHeight((props.minHeight && ((height < props.minHeight) ? props.minHeight : height) + footerHeight));
requestAnimationFrame(function () {
if (transform_1 === null || transform_1 === void 0 ? void 0 : transform_1.length) {
domRef.current.style.transform = transform_1;
}
});
}
catch (_f) {
// 如果无法初始化成功，则初始化配置
generateModalPosition();
}
};
// 缓存模态框配置
var cacheModalConfig = function (configs) {
if (cacheConfigKey === null || cacheConfigKey === void 0 ? void 0 : cacheConfigKey.length) {
localStorage.setItem(cacheConfigKey, JSON.stringify(configs));
}
};
var extOpt = (0, react_1.useMemo)(function () {
if ((0, helper_1.isMobile)() && mode == 'mobile') {
return { footer: footDom() };
}
else {
return {};
}
}, [(0, helper_1.isMobile)(), mode]);
var getIsDragDisabled = (0, react_1.useMemo)(function () {
// const result = (drag && ((pinRight && pinToRight) || isFixRight.current || fixRight || maxSize || modalStore.modalId !== modalId)) || !drag;
var result = (drag && ((pinRight && pinToRight) || isFixRight.current || fixRight || maxSize)) || !drag;
return result;
// }, [modalStore.modalId, isFixRight.current, fixRight, maxSize, pinToRight]);
}, [isFixRight.current, fixRight, maxSize, pinToRight]);
var handleReShowDialog = function (e) {
if (isMiniTitleDragging)
return;
showDialog(e);
};
var handlePinRightSize = function (pin) {
document.body.dispatchEvent(new Event(pin ? types_1.ResizeEvent.RESET_MAIN_PAGE_WIDTH + pageContentId : types_1.ResizeEvent.STOP_RESIZE_AFTER_PIN + pageContentId));
};
var handlePinRight = function () {
var modalDom = helper_1.domUtils.closest(domRef.current, '.ant-modal-wrap.drag-dialog');
var mainPage = helper_1.domUtils.closest(domRef.current, '.main-page-content');
if (modalDom) {
var finalIndex = 999;
modalDom.style.zIndex = finalIndex;
setModalZIndex(finalIndex);
}
manualFix.current = true;
// setResizableWidth(450);
setPinToRight(function (pin) {
// 如果一个主页面有多个表格存在固定在右侧的弹窗，则不做恢复宽度处理
if (mainPage && pin) {
var hasNotReset = mainPage.querySelectorAll('.resize-container.dialog-pin-right').length > 1;
if (!hasNotReset) {
handlePinRightSize(pin);
}
}
else {
handlePinRightSize(pin);
}
return !pin;
});
toggleDialogFixRight();
setMaxSize(false);
};
var handleResetHeightFitContentOnDecrease = function () {
handleResetHeightFitContent(true);
};
// 配置模态框高度适配内容高度
var handleResetHeightFitContent = function (isDecrease) {
requestAnimationFrame(function () {
var _a, _b;
var decrease = typeof isDecrease === 'boolean' ? isDecrease : false;
var ModalBody = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.ant-modal-body');
// const resizeTranslate = domRef.current?.style.transform;
// const translateValues = resizeTranslate?.match(/translate\(([^)]+)\)/);
// console.log('debug-scrollHeight', ModalBody?.scrollHeight);
// if (translateValues && translateValues.length > 1) {
// let translateX = 0;
// let translateY = 0;
// const [x, y] = translateValues[1].split(',');
// translateX = Number(`${x?.trim() ?? 0}`.replaceAll('px', ''));
// translateY = Number(`${y?.trim() ?? 0}`.replaceAll('px', ''));
// // setPosition({x: translateX - 60, y: translateY - 60});
// }
if (ModalBody === null || ModalBody === void 0 ? void 0 : ModalBody.scrollHeight) {
var finalHeight = ModalBody.scrollHeight + titleDomHigh.current + footerHeight;
var top = (_b = (lastPosition.current.y || (initOffset === null || initOffset === void 0 ? void 0 : initOffset.y))) !== null && _b !== void 0 ? _b : 0;
setResizableHeight(finalHeight > (getClientHeight() - top) ? (getClientHeight() - top) : finalHeight);
ModalBody.style.height = (finalHeight > (getClientHeight() - top) ? (getClientHeight() - top - titleDomHigh.current - footerHeight) + 'px' : (decrease ? 'auto' : ModalBody.scrollHeight + 'px'));
}
});
};
if (!dialogVisible && !props.hide)
return react_1.default.createElement(react_1.default.Fragment, null);
return (react_1.default.createElement("div", { className: "fl-dialog-wrapper", onContextMenu: function (e) { e.stopPropagation(); }, onKeyDown: function (e) {
if (keyboard) {
if (keyHandle) {
keyHandle(e);
}
else {
onKeyDown(e);
}
}
} },
react_1.default.createElement("div", { ref: function (ref) { return dragModalRef.current = ref; }, className: 'fl-dialog-box' },
(props.showMinTitle ? (react_1.default.createElement("div", { className: 'mini-dialog-wrap', style: { zIndex: (0, helper_1.getLagerThanMaxZindex)() } },
react_1.default.createElement(react_rnd_1.Rnd, { ref: function (ref) { return minTitleDomRef.current = ref; }, className: ['mini-dialog-drag-box', props.hide ? 'show' : ''].join(' '), enableResizing: false, disableDragging: !miniTitleWrapperClassName, enableUserSelectHack: false, bounds: "window", onDrag: onTitleDragStart, onDragStop: onTitleDragStop, dragHandleClassName: miniTitleWrapperClassName },
react_1.default.createElement("div", { className: ['min-dialog', miniTitleWrapperClassName].join(' '), ref: titleMinDom },
react_1.default.createElement("div", { className: "disabled-move-title" }, title || '弹窗'),
react_1.default.createElement("div", { className: "tools-bar" },
props.onHide ? react_1.default.createElement("div", { onClick: handleReShowDialog, className: 'btn-hide tool-btn' }, hiddenBtn !== null && hiddenBtn !== void 0 ? hiddenBtn : react_1.default.createElement(icons_1.Icon, { icon: "window-restore", className: "tool-btn" })) : null,
((mode === 'mobile' || hideTitle) ? false : closable) ? react_1.default.createElement("div", { onClick: btnCancel, className: 'btn-close tool-btn' },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "tool-btn" })) : null))))) : null),
react_1.default.createElement(antd_1.Modal, tslib_1.__assign({}, props, extOpt, { wrapClassName: 'drag-dialog', style: tslib_1.__assign(tslib_1.__assign({}, ((_b = props.style) !== null && _b !== void 0 ? _b : {})), { zIndex: dragModalZIndex }), closeIcon: null, className: ['fl-modal', className, mode === 'mobile' ? 'mb-dialog' : 'pc-dialog', modalUniqueLabel].join(' '), getContainer: props.getContainer || document.body, width: mode == 'mobile' ? '75%' : props.width, closable: false, onCancel: btnCancel, keyboard: keyboard,
// open={dialogVisible && !props.hide}
visible: dialogOpen, open: dialogOpen, destroyOnClose: false, footer: react_1.default.createElement(react_1.default.Fragment, null, props.footer ? (react_1.default.createElement("div", { className: "drag-modal" },
" ",
props.footer,
" ")) : null), maskClosable: false, modalRender: function (modal) {
var _a;
// const PortalWrapper = ({ children }) => {
// const portalRoot = document?.querySelector(`.fl-modal.${modalUniqueLabel}`);
// const portalTarget = portalRoot?.querySelector('.ant-modal-body');
// return portalTarget ? ReactDOM.createPortal(children, portalTarget) : null;
// }
return (react_1.default.createElement(react_rnd_1.Rnd, { ref: function (ref) { return rndMainRef.current = ref; }, className: ["resize-container", fixRight ? 'dialog-fix-right' : '', !resizeable ? 'height-auto' : '', stickyRight ? 'sticky-right' : '', pinToRight ? 'dialog-pin-right' : ''].join(' '), style: tslib_1.__assign(tslib_1.__assign({ 'pointerEvents': resizeable ? 'auto' : 'none' }, (fixRight && !pinRight ? fixRightStyleRef.current : {})), maxSize ? maxSizeStyleRef.current : {}), enableResizing: ((fixRight && !pinRight) || maxSize) ? false : pinRight && (pinToRight || isFixRight.current) ? {
top: false,
right: false,
bottom: false,
left: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false,
} : resizeable ? {
top: true,
right: true,
bottom: true,
left: true,
topRight: true,
bottomRight: true,
bottomLeft: true,
topLeft: true,
} : false, disableDragging: getIsDragDisabled, minWidth: minWidth || 200, maxWidth: maxSize ? '100vw' : ((_a = props.maxWidth) !== null && _a !== void 0 ? _a : getClientWidth()),
// 这个时算上了标题
minHeight: minHeight, enableUserSelectHack: false, maxHeight: maxSize ? 'calc(100vh - 45px)' : getClientHeight(), bounds: bounds, dragHandleClassName: "dialog-title", resizeHandleWrapperClass: "handle-box",
// 拖拽弹窗只有改这个才有用
size: { width: resizableWidth, height: resizableHeight }, position: position,
// onDragStart={onDragStart}
// onDrag={onDrag}
onDragStop: onDragStop, onResize: onResize, onResizeStop: onResizeStop }, modal));
}, title: hideTitle ? null : (react_1.default.createElement("div", { style: { cursor: (maxSize || fixRight) ? 'auto' : undefined }, className: "dialog-title",
// onMouseEnter={() => {
// modalStore?.defineModalId?.(modalId)
// }}
onDragOver: function (e) { return e.preventDefault(); }, onDoubleClick: function (e) {
e.preventDefault();
toggleMaxSize();
}, ref: titleDom },
react_1.default.createElement("div", { className: "disabled-move-title" }, title),
react_1.default.createElement("div", { className: "vice-title" }, viceTitle),
react_1.default.createElement("div", { className: "tools-bar", onMouseDown: function (e) { return e.stopPropagation(); } },
react_1.default.createElement("div", null,
(props.pinRight) ? (pinToRight ? react_1.default.createElement(icons_2.PushpinFilled, { onClick: handlePinRight }) : react_1.default.createElement(icons_2.PushpinOutlined, { onClick: handlePinRight })) : null,
(props.setFixRight && !maxSize) ? (fixRight ? react_1.default.createElement(icons_2.VerticalRightOutlined, { onClick: function (e) { manualFix.current = true; toggleDialogFixRight(); }, style: { cursor: 'pointer' } }) : react_1.default.createElement(icons_2.VerticalLeftOutlined, { onClick: function (e) { manualFix.current = true; toggleDialogFixRight(); }, style: { cursor: 'pointer' } })) : null),
(props.setMaxSize) ? (react_1.default.createElement("div", null,
" ",
maxSize ? (react_1.default.createElement(icons_1.Icon, { className: "icon tool-btn", icon: "compress-alt", onClick: toggleMaxSize })) : react_1.default.createElement(icons_1.Icon, { className: "icon tool-btn", onClick: toggleMaxSize, icon: "expand-alt" }))) : null,
react_1.default.createElement("div", null, props.onHide ? react_1.default.createElement(icons_2.MinusOutlined, { onClick: hideDialog, style: { cursor: 'pointer' } }) : null),
((mode === 'mobile' || hideTitle) ? false : closable) ? react_1.default.createElement("div", { onClick: btnCancel, style: { cursor: 'pointer' } },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon tool-btn" })) : null))) }),
react_1.default.createElement("div", { ref: contentRef, style: { height: '100%', width: '100%' } }, children)))));
};
exports.default = FLModal;
//# sourceMappingURL=./components/DragModal/index.js.map