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;
        var _f = this.props, placement = _f.placement, activePlacement = _f.activePlacement, positionTop = _f.positionTop, positionLeft = _f.positionLeft, arrowOffsetLeft = _f.arrowOffsetLeft, arrowOffsetTop = _f.arrowOffsetTop, style = _f.style, children = _f.children, offset = _f.offset, overlay = _f.overlay, onHide = _f.onHide, ns = _f.classPrefix, cx = _f.classnames, className = _f.className, rest = (0, tslib_1.__rest)(_f, ["placement", "activePlacement", "positionTop", "positionLeft", "arrowOffsetLeft", "arrowOffsetTop", "style", "children", "offset", "overlay", "onHide", "classPrefix", "classnames", "className"]);
        var _g = this.state, xOffset = _g.xOffset, yOffset = _g.yOffset;
        var outerStyle = (0, tslib_1.__assign)({ display: 'block' }, style);
        if (this.wrapperRef.current) {
            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 - clientData.top <= clientData.height + 5;
            if (shell_1.Shell.hasShell()) {
                if (this.wrapperRef.current.closest(".ant-modal-body") || this.wrapperRef.current.closest("." + ns + "Modal-body")) {
                    if ((_b = this.props.className) === null || _b === void 0 ? void 0 : _b.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', 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 });
                    }
                }
                else {
                    if (this.wrapperRef.current.closest("." + ns + "Form--quickEdit")) {
                        outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({ display: 'block' }, style), { 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', top: (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 });
                    }
                }
            }
            else {
                if (this.wrapperRef.current.closest(".ant-modal-body")) {
                    outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, outerStyle), { 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 });
                }
                else if (this.wrapperRef.current.closest("." + ns + "Modal-body")) {
                    if ((_c = this.props.className) === null || _c === void 0 ? void 0 : _c.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 {
                        var modalData = (_d = this.wrapperRef.current.closest("." + ns + "Modal")) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect();
                        outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({ display: 'block' }, style), { position: 'fixed', top: 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) - ((_e = this.wrapperRef.current.closest("." + ns + "Modal-body")) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect().left) });
                    }
                }
                else {
                    if (this.wrapperRef.current.closest("." + ns + "Form--quickEdit")) {
                        outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({ display: 'block' }, style), { 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', top: (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 });
                    }
                }
            }
        }
        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) });
        }
        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", 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