fastlion-amis
Version:
一种MIS页面生成工具
135 lines (134 loc) • 7.33 kB
JavaScript
;
/**
* @file PopUp
* @description
* @author fex
*/
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopUp = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var theme_1 = require("../theme");
var locale_1 = require("../locale");
var Transition_1 = tslib_1.__importStar(require("react-transition-group/Transition"));
var Portal_1 = (0, tslib_1.__importDefault)(require("react-overlays/Portal"));
var icons_1 = require("./icons");
var Button_1 = (0, tslib_1.__importDefault)(require("./Button"));
var helper_1 = require("../utils/helper");
var react_dom_1 = require("react-dom");
var fadeStyles = (_a = {},
_a[Transition_1.ENTERED] = '',
_a[Transition_1.EXITING] = 'out',
_a[Transition_1.EXITED] = '',
_a[Transition_1.ENTERING] = 'in',
_a);
var PopUp = /** @class */ (function (_super) {
(0, tslib_1.__extends)(PopUp, _super);
function PopUp() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.scrollTop = 0;
_this.state = {
more: false
};
_this.domRef = function (ref) {
_this.dom = ref;
};
return _this;
}
PopUp.prototype.componentDidMount = function () {
var _this = this;
var isShow = this.props.isShow;
if (isShow) {
this.handleOnTouchMove();
this.dom.addEventListener("scroll", function () { _this.handleOnTouchMove(); });
}
};
PopUp.prototype.componentDidUpdate = function () {
if (this.props.isShow) {
this.scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
document.body.style.overflow = 'hidden';
}
else {
document.body.style.overflow = 'auto';
document.body.scrollTop = this.scrollTop;
}
};
PopUp.prototype.componentWillUnmount = function () {
var _this = this;
var isShow = this.props.isShow;
document.body.style.overflow = 'auto';
document.body.scrollTop = this.scrollTop;
if (isShow) {
this.dom.removeEventListener("scroll", function () { _this.handleOnTouchMove(); });
}
};
PopUp.prototype.handleClick = function (e) {
e.stopPropagation();
};
PopUp.prototype.handleOnTouchMove = function () {
var _a;
var ns = this.props.classPrefix;
var PopUp = (0, react_dom_1.findDOMNode)(this);
var PopUpContent = PopUp === null || PopUp === void 0 ? void 0 : PopUp.querySelector("." + ns + "PopUp-content");
var scrollHeight = (_a = PopUpContent.firstElementChild) === null || _a === void 0 ? void 0 : _a.scrollHeight;
var clientHeight = PopUpContent.clientHeight;
var scrollTop = PopUpContent.scrollTop;
if (scrollHeight && clientHeight + scrollTop < scrollHeight) {
this.setState({ more: true });
}
else {
this.setState({ more: false });
}
};
PopUp.prototype.render = function () {
var _this = this;
var _a = this.props, style = _a.style, title = _a.title, children = _a.children, overlay = _a.overlay, onHide = _a.onHide, onConfirm = _a.onConfirm, ns = _a.classPrefix, cx = _a.classnames, className = _a.className, isShow = _a.isShow, container = _a.container, showConfirm = _a.showConfirm, __ = _a.translate, showClose = _a.showClose, header = _a.header, _b = _a.placement, placement = _b === void 0 ? 'center' : _b,
// Jay
closeOnOutside = _a.closeOnOutside, round = _a.round, rest = (0, tslib_1.__rest)(_a, ["style", "title", "children", "overlay", "onHide", "onConfirm", "classPrefix", "classnames", "className", "isShow", "container", "showConfirm", "translate", "showClose", "header", "placement", "closeOnOutside", "round"]);
var outerStyle = (0, tslib_1.__assign)({}, style);
delete outerStyle.top;
return (react_1.default.createElement(Portal_1.default, { container: container },
react_1.default.createElement(Transition_1.default, { mountOnEnter: true, unmountOnExit: true, in: isShow, timeout: 500, appear: true }, function (status) {
return (react_1.default.createElement("div", (0, tslib_1.__assign)({
// Jay
// className={cx(`${ns}PopUp`, className, fadeStyles[status])}
className: cx(ns + "PopUp", className, fadeStyles[status], round && 'round'), style: outerStyle }, rest, { onClick: _this.handleClick, onTouchMove: function () { _this.handleOnTouchMove(); } }),
overlay && (
// Jay
// <div className={`${ns}PopUp-overlay`} onClick={onHide} />
react_1.default.createElement("div", { className: ns + "PopUp-overlay", onClick: function (e) {
(!showClose || closeOnOutside) && (onHide === null || onHide === void 0 ? void 0 : onHide(e));
} })),
react_1.default.createElement("div", { className: cx(ns + "PopUp-inner") },
!showConfirm && showClose ? (react_1.default.createElement("div", { className: cx(ns + "PopUp-closeWrap") },
header,
react_1.default.createElement(icons_1.Icon, { icon: "close", className: cx('icon', ns + "PopUp-close"), onClick: onHide }))) : null,
showConfirm && (react_1.default.createElement("div", { className: cx(ns + "PopUp-toolbar") },
react_1.default.createElement(Button_1.default, { className: cx(ns + "PopUp-cancel"), level: "text", onClick: onHide }, __('cancel')),
title && (react_1.default.createElement("span", { className: cx(ns + "PopUp-title") }, title)),
react_1.default.createElement(Button_1.default, { className: cx(ns + "PopUp-confirm"), level: "text", onClick: onConfirm }, __('confirm')))),
react_1.default.createElement("div", { ref: _this.domRef, className: cx(ns + "PopUp-content", "justify-" + placement, (0, helper_1.isMobile)() && 'PopUp-scroll') },
isShow ? children : null,
(0, helper_1.isMobile)() && _this.state.more && react_1.default.createElement("div", { style: { width: "100%", height: 20, position: 'absolute', bottom: 0, left: 0, textAlign: 'center', fontSize: 20, lineHeight: '10px' } }, "...")),
react_1.default.createElement("div", { className: cx("PopUp-safearea") }))));
})));
};
PopUp.defaultProps = {
className: '',
overlay: true,
isShow: false,
container: document.body,
// Jay
// showClose: true,
showClose: false,
onConfirm: function () { },
// Jay
closeOnOutside: true,
};
return PopUp;
}(react_1.default.PureComponent));
exports.PopUp = PopUp;
exports.default = (0, theme_1.themeable)((0, locale_1.localeable)(PopUp));
//# sourceMappingURL=./components/PopUp.js.map