fastlion-amis/lib/components/PopOver.js

一种MIS页面生成工具

"use strict";
/**
 * @file PopOver
 * @description
 * @author fex
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopOver = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_dom_1 = require("react-dom");
var theme_1 = require("../theme");
var helper_1 = require("../utils/helper");
var shell_1 = require("../utils/shell");
var PopOver = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(PopOver, _super);
    function PopOver() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            xOffset: 0,
            yOffset: 0
        };
        _this.wrapperRef = react_1.default.createRef();
        return _this;
    }
    PopOver.prototype.componentDidMount = function () {
        this.mayUpdateOffset();
        var dom = (0, react_dom_1.findDOMNode)(this);
        this.parent = dom.parentNode;
        this.parent.classList.add('has-popover');
        if (this.wrapperRef && this.wrapperRef.current) {
            // https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#使用_passive_改善的滚屏性能
            this.wrapperRef.current.addEventListener('touchmove', helper_1.preventDefault, {
                passive: false,
                capture: false
            });
        }
    };
    PopOver.prototype.componentDidUpdate = function () {
        this.mayUpdateOffset();
    };
    PopOver.prototype.componentWillUnmount = function () {
        this.parent && this.parent.classList.remove('has-popover');
        if (this.wrapperRef && this.wrapperRef.current) {
            this.wrapperRef.current.removeEventListener('touchmove', helper_1.preventDefault);
        }
    };
    PopOver.prototype.mayUpdateOffset = function () {
        var _a, _b, _c, _d;
        var offset;
        var getOffset = this.props.offset;
        // 屏幕的宽度
        var bodyClient = document.documentElement.clientWidth;
        // 子元素的宽度
        var childWidth = (_a = this.wrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
        // 元素左边到浏览器左边的间距
        var parentLeft = (_b = this.parent) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().left;
        // 元素右边到浏览器左边的间距
        var parentRight = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().right;
        // 判断是否超出屏幕宽度
        var whether = (childWidth + parentLeft) > bodyClient;
        var moveleft = parentRight - parentLeft - childWidth;
        if ((_d = this.parent) === null || _d === void 0 ? void 0 : _d.className.includes("Modal-content")) {
            if (this.props.positionLeft > 0) {
                whether = (childWidth + this.props.positionLeft + parentLeft) > parentRight;
                moveleft = parentRight - childWidth - this.props.positionLeft - parentLeft;
            }
        }
        if (getOffset && typeof getOffset === 'function') {
            var _e = this.props, placement = _e.placement, y = _e.positionTop, x = _e.positionLeft;
            offset = getOffset((0, react_dom_1.findDOMNode)(this).getBoundingClientRect(), {
                x: x,
                y: y,
                placement: placement
            });
        }
        else {
            offset = getOffset;
        }
        this.setState({
            xOffset: whether ? moveleft : offset && offset.x ? offset.x : 0,
            yOffset: offset && offset.y ? offset.y : 0
        });
    };
    PopOver.prototype.render = function () {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
        var _u = this.props, placement = _u.placement, activePlacement = _u.activePlacement, positionTop = _u.positionTop, positionLeft = _u.positionLeft, arrowOffsetLeft = _u.arrowOffsetLeft, arrowOffsetTop = _u.arrowOffsetTop, style = _u.style, children = _u.children, offset = _u.offset, overlay = _u.overlay, onHide = _u.onHide, ns = _u.classPrefix, cx = _u.classnames, className = _u.className, multiple = _u.multiple, rest = (0, tslib_1.__rest)(_u, ["placement", "activePlacement", "positionTop", "positionLeft", "arrowOffsetLeft", "arrowOffsetTop", "style", "children", "offset", "overlay", "onHide", "classPrefix", "classnames", "className", "multiple"]);
        var _v = this.state, xOffset = _v.xOffset, yOffset = _v.yOffset;
        var outerStyle = (0, tslib_1.__assign)({ display: 'block' }, style);
        var overlayStyle = {};
        if (this.wrapperRef.current) {
            // 屏幕的宽度
            var bodyClient = document.documentElement.clientWidth;
            var clientData = this.wrapperRef.current.getBoundingClientRect();
            var formControlData = (_a = this.wrapperRef.current.closest("." + ns + "Form-control")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
            var isOverSize = document.documentElement.clientHeight - (formControlData === null || formControlData === void 0 ? void 0 : formControlData.bottom) <= clientData.height + 5;
            var wrapperRect = (_d = (_c = (_b = this.wrapperRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.closest('[class*="Field--quickEditable"]')) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect();
            var isCoverScreen = (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) + clientData.width > bodyClient;
            var tableActions = this.wrapperRef.current.closest("." + ns + "Table-actions") || this.wrapperRef.current.closest("." + ns + "Crud-toolbar-item");
            if (tableActions && this.wrapperRef.current.closest('.has-popover')) {
                var _w = this.wrapperRef.current.closest('.has-popover').getBoundingClientRect(), top = _w.top, height = _w.height, left = _w.left;
                outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({ display: 'block' }, style), { position: 'fixed', top: top + height, left: this.wrapperRef.current.closest("." + ns + "Crud-toolbar-item") ? left - 140 : left });
            }
            else {
                // 旧壳逻辑 - 估计是因为内核版本问题导致的这个差异
                if (shell_1.Shell.hasShell() && !window['AppShell'].openNewWin) {
                    if (this.wrapperRef.current.closest(".ant-modal-body") || this.wrapperRef.current.closest("." + ns + "Modal-body")) {
                        if ((_e = this.props.className) === null || _e === void 0 ? void 0 : _e.includes('batchEidtPopOver')) {
                            outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({ display: 'block' }, style), { position: 'absolute', top: positionTop + yOffset + (positionTop ? positionTop >= 0 ? 5 : -5 : 0), left: (positionLeft < 0 ? xOffset : positionLeft + xOffset) });
                        }
                        else {
                            outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, outerStyle), { position: 'fixed', width: 'unset', top: isOverSize ? (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) - clientData.height : (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) + (formControlData === null || formControlData === void 0 ? void 0 : formControlData.height), left: (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) + (isCoverScreen ? (bodyClient - (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) - clientData.width - 32) : 0) });
                        }
                    }
                    else {
                        outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, outerStyle), { position: 'fixed', width: 'unset', top: isOverSize ? (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) - clientData.height : (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) + (formControlData === null || formControlData === void 0 ? void 0 : formControlData.height), left: (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) + (isCoverScreen ? (bodyClient - (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) - clientData.width - 32) : 0) });
                    }
                }
                else {
                    if (this.wrapperRef.current.closest(".ant-modal-body")) {
                        if (this.wrapperRef.current.closest(".row-edit-form")) {
                            outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, outerStyle), { width: 'unset', position: 'fixed', top: isOverSize ? (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) - clientData.height - 55 : (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) + (formControlData === null || formControlData === void 0 ? void 0 : formControlData.height) - 45, left: this.wrapperRef.current.closest(".ant-drawer-body") ? formControlData === null || formControlData === void 0 ? void 0 : formControlData.left :
                                    (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) - ((_f = this.wrapperRef.current.closest("." + ns + "Modal-body")) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect().left) });
                        }
                        else {
                            outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, outerStyle), { width: 'unset', position: 'fixed', top: isOverSize ? (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) - clientData.height : (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) + (formControlData === null || formControlData === void 0 ? void 0 : formControlData.height), left: (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) + (isCoverScreen ? (bodyClient - (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) - clientData.width - 32) : 0) });
                        }
                    }
                    else if (this.wrapperRef.current.closest("." + ns + "Modal-body")) {
                        var batchEditBtnDom = (_g = this.wrapperRef.current.closest("." + ns + "TableCell-batchEditBtn")) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect();
                        // 又快速编辑 快速编辑优先
                        if ((_j = (_h = this.wrapperRef) === null || _h === void 0 ? void 0 : _h.current) === null || _j === void 0 ? void 0 : _j.closest('[class*="Field--quickEditable"]')) {
                            outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, outerStyle), { width: 'unset', position: 'fixed', top: 'unset', left: 'unset' });
                        }
                        else if ((_k = this.props.className) === null || _k === void 0 ? void 0 : _k.includes('batchEidtPopOver')) {
                            outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({ display: 'block' }, style), { width: 'unset', position: 'fixed', top: isOverSize ? (batchEditBtnDom === null || batchEditBtnDom === void 0 ? void 0 : batchEditBtnDom.top) - clientData.height : batchEditBtnDom.top + (batchEditBtnDom === null || batchEditBtnDom === void 0 ? void 0 : batchEditBtnDom.height), left: (batchEditBtnDom === null || batchEditBtnDom === void 0 ? void 0 : batchEditBtnDom.left) - ((_l = this.wrapperRef.current.closest("." + ns + "Modal-body")) === null || _l === void 0 ? void 0 : _l.getBoundingClientRect().left) });
                        }
                        else {
                            var modalData = (_m = this.wrapperRef.current.closest("." + ns + "Modal")) === null || _m === void 0 ? void 0 : _m.getBoundingClientRect();
                            outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({ display: 'block' }, style), { width: 'unset', position: 'fixed', top: multiple ? (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) - clientData.height - (modalData === null || modalData === void 0 ? void 0 : modalData.top) - 1 : isOverSize ? (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) - clientData.height - (modalData === null || modalData === void 0 ? void 0 : modalData.top) - 1 : (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) + (formControlData === null || formControlData === void 0 ? void 0 : formControlData.height) - (modalData === null || modalData === void 0 ? void 0 : modalData.top), left: (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) - ((_o = this.wrapperRef.current.closest("." + ns + "Modal-body")) === null || _o === void 0 ? void 0 : _o.getBoundingClientRect().left) + (isCoverScreen ? (bodyClient - (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) - clientData.width - 32) : 0) });
                        }
                    }
                    else {
                        // 又快速编辑 快速编辑优先
                        if ((_q = (_p = this.wrapperRef) === null || _p === void 0 ? void 0 : _p.current) === null || _q === void 0 ? void 0 : _q.closest('[class*="Field--quickEditable"]')) {
                            outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, outerStyle), { position: 'fixed', width: 'unset', top: ((wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.top) || 0) + ((wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.height) || 0), left: (wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.left) + (isCoverScreen ? (bodyClient - (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) - clientData.width - 16) : 0) });
                        }
                        else
                            outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, outerStyle), { position: 'fixed', width: 'unset', top: isOverSize ? (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) - clientData.height : (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) + (formControlData === null || formControlData === void 0 ? void 0 : formControlData.height), left: (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) + (isCoverScreen ? (bodyClient - (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) - clientData.width - 16) : 0) });
                    }
                }
            }
            // 查看是否在拖拽弹窗中，如果在拖拽弹窗中，需要在popover显示的时候，取拖拽弹窗的translate的负值
            var dragModal = (_r = this.wrapperRef.current) === null || _r === void 0 ? void 0 : _r.closest('.fl-modal.pc-dialog');
            var resizeContainer = dragModal === null || dragModal === void 0 ? void 0 : dragModal.querySelector('.resize-container.react-draggable');
            var resizeTranslate = resizeContainer === null || resizeContainer === void 0 ? void 0 : resizeContainer.style.transform;
            var translateValues = resizeTranslate === null || resizeTranslate === void 0 ? void 0 : resizeTranslate.match(/translate\(([^)]+)\)/);
            var translateX = '0';
            var translateY = '0';
            if (translateValues && translateValues.length > 1) {
                var _x = translateValues[1].split(','), x = _x[0], y = _x[1];
                translateX = "-" + ((_s = x === null || x === void 0 ? void 0 : x.trim()) !== null && _s !== void 0 ? _s : 0);
                translateY = "-" + ((_t = y === null || y === void 0 ? void 0 : y.trim()) !== null && _t !== void 0 ? _t : 0);
                outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, outerStyle), { transform: "translate(" + translateX + ", " + translateY + ")" });
                var left = outerStyle.left, top = outerStyle.top;
                var overlayWidth = resizeContainer === null || resizeContainer === void 0 ? void 0 : resizeContainer.offsetWidth;
                var overlayHeight = resizeContainer === null || resizeContainer === void 0 ? void 0 : resizeContainer.offsetHeight;
                var finalX = Number(((x === null || x === void 0 ? void 0 : x.trim().split('px')[0]) - left)) + 'px';
                var finalY = top * -1 + 'px';
                overlayStyle = {
                    width: (overlayWidth !== null && overlayWidth !== void 0 ? overlayWidth : 0) + "px",
                    height: (overlayHeight !== null && overlayHeight !== void 0 ? overlayHeight : 0) + "px",
                    transform: "translate(" + finalX + ", " + finalY + ")"
                };
            }
        }
        else {
            outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({ display: 'block' }, style), { 
                // Jay 增加间隙，优化样式
                // top: (positionTop as number) + yOffset,
                // left: (positionLeft as number) + xOffset,
                top: positionTop + yOffset + (positionTop ? positionTop >= 0 ? 5 : -5 : 0), left: (positionLeft < 0 ? xOffset : positionLeft + xOffset) });
        }
        if (outerStyle.position === 'fixed' && outerStyle.top < 0) {
            outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, outerStyle), { top: 10 });
        }
        return (react_1.default.createElement("div", (0, tslib_1.__assign)({ ref: this.wrapperRef, className: cx(ns + "PopOver", className, ns + "PopOver--" + (0, helper_1.camel)(activePlacement)), style: outerStyle }, rest),
            overlay ? (react_1.default.createElement("div", { className: ns + "PopOver-overlay", style: overlayStyle, onClick: onHide })) : null,
            children));
    };
    PopOver.defaultProps = {
        className: '',
        offset: {
            x: 0,
            y: 0
        },
        overlay: false,
        placement: 'auto'
    };
    return PopOver;
}(react_1.default.PureComponent));
exports.PopOver = PopOver;
exports.default = (0, theme_1.themeable)(PopOver);
//# sourceMappingURL=./components/PopOver.js.map