fastlion-amis
Version:
一种MIS页面生成工具
162 lines (161 loc) • 9.41 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,
hide: false,
};
_this.canHide = false;
_this.domRef = function (ref) {
_this.dom = ref;
};
return _this;
}
PopUp.prototype.componentDidMount = function () {
var _this = this;
var _a;
var isShow = this.props.isShow;
if (isShow) {
this.handleOnTouchMove();
this.dom.addEventListener("scroll", function () { _this.handleOnTouchMove(); });
}
if (!((_a = this.props) === null || _a === void 0 ? void 0 : _a.isShowHide)) {
this.setState({ hide: true });
}
setTimeout(function () { _this.canHide = true; }, 500);
};
PopUp.prototype.componentDidUpdate = function (prevProps) {
var _this = this;
var props = this.props;
// 在from表单上因为有下拉刷新的组件导致会点击两次，暂时不知道为啥，目前只有Upload上不可编辑下会这样，就在这种情况下延迟500毫米跳过不知道为啥的第二次点击
if (props.isShowHide) {
if (prevProps.isShow !== props.isShow && props.isShow == true) {
setTimeout(function () {
_this.setState({ hide: true });
}, 500);
}
else if (prevProps.isShow !== props.isShow && props.isShow == false) {
if (this.state.hide) {
this.setState({ hide: false });
}
}
}
if (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, onActonClick = _a.onActonClick, 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, multiple = _a.multiple, _b = _a.placement, placement = _b === void 0 ? 'center' : _b,
// Jay
closeOnOutside = _a.closeOnOutside, round = _a.round, tableRotate = _a.tableRotate, footer = _a.footer, popOverHeatClassName = _a.popOverHeatClassName, rest = (0, tslib_1.__rest)(_a, ["style", "title", "children", "overlay", "onHide", "onConfirm", "onActonClick", "classPrefix", "classnames", "className", "isShow", "container", "showConfirm", "translate", "showClose", "header", "multiple", "placement", "closeOnOutside", "round", "tableRotate", "footer", "popOverHeatClassName"]);
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", _this.props.updateChanged && 'updateChanged', className, fadeStyles[status], round && 'round', tableRotate && 'pop-rotate'), 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) {
if (!_this.canHide)
return;
_this.state.hide && (!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", popOverHeatClassName) },
(0, helper_1.isMobile)() && header,
(0, helper_1.isMobile)() && onActonClick && react_1.default.createElement(Button_1.default, { className: cx(ns + "PopUp-cancel-danger"), onClick: function () { return onActonClick && onActonClick([]); } }, __('clear')),
react_1.default.createElement("span", { className: cx(ns + "PopUp-closeWrap-icon") },
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,
multiple && !footer && (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' } }, "...")),
(footer && (0, helper_1.isMobile)()) && react_1.default.createElement("div", { className: cx("PopUp-footer") }, footer),
(0, helper_1.isMobile)() && 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