choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
280 lines (240 loc) • 8.98 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _regeneratorRuntime from "@babel/runtime/regenerator";
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = _getPrototypeOf(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
import { __decorate } from "tslib";
import React from 'react';
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';
import omit from 'lodash/omit';
import shallowEqual from 'lodash/isEqual';
import noop from 'lodash/noop';
import isElement from 'lodash/isElement';
import Align from '../../../es/align';
import { getProPrefixCls } from '../../../es/configure';
import Animate from '../animate';
import ViewComponent from '../core/ViewComponent';
import PopupInner from './PopupInner';
import autobind from '../_util/autobind';
/**
* 记录ID生成器
*/
var PopupKeyGen =
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee(start) {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (!true) {
_context.next = 5;
break;
}
_context.next = 3;
return "popup-key-".concat(start++);
case 3:
_context.next = 0;
break;
case 5:
case "end":
return _context.stop();
}
}
}, _callee);
})(1);
var Popup =
/*#__PURE__*/
function (_ViewComponent) {
_inherits(Popup, _ViewComponent);
var _super = _createSuper(Popup);
function Popup() {
var _this;
_classCallCheck(this, Popup);
_this = _super.apply(this, arguments);
_this.contentRendered = false;
_this.popupKey = PopupKeyGen.next().value;
_this.saveRef = function (align) {
return _this.align = align;
};
return _this;
}
_createClass(Popup, [{
key: "getOtherProps",
value: function getOtherProps() {
var otherProps = omit(_get(_getPrototypeOf(Popup.prototype), "getOtherProps", this).call(this), ['align', 'transitionName', 'getRootDomNode', 'getPopupContainer', 'getClassNameFromAlign', 'getStyleFromAlign', 'onAlign', 'onAnimateAppear', 'onAnimateEnter', 'onAnimateLeave', 'onAnimateEnd']);
return otherProps;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var popupContainer = this.popupContainer;
if (popupContainer && popupContainer !== Popup.popupContainer && popupContainer.parentNode) {
popupContainer.parentNode.removeChild(popupContainer);
}
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
hidden = _this$props.hidden,
align = _this$props.align,
transitionName = _this$props.transitionName,
getRootDomNode = _this$props.getRootDomNode,
children = _this$props.children,
_this$props$onAnimate = _this$props.onAnimateAppear,
onAnimateAppear = _this$props$onAnimate === void 0 ? noop : _this$props$onAnimate,
_this$props$onAnimate2 = _this$props.onAnimateEnter,
onAnimateEnter = _this$props$onAnimate2 === void 0 ? noop : _this$props$onAnimate2,
_this$props$onAnimate3 = _this$props.onAnimateLeave,
onAnimateLeave = _this$props$onAnimate3 === void 0 ? noop : _this$props$onAnimate3,
_this$props$onAnimate4 = _this$props.onAnimateEnd,
onAnimateEnd = _this$props$onAnimate4 === void 0 ? noop : _this$props$onAnimate4;
if (!hidden) {
this.contentRendered = true;
}
var container = this.getContainer();
return container && this.contentRendered ? createPortal(React.createElement(Animate, {
component: "",
exclusive: true,
transitionAppear: true,
transitionName: transitionName,
hiddenProp: "hidden",
onAppear: onAnimateAppear,
onEnter: onAnimateEnter,
onLeave: onAnimateLeave,
onEnd: onAnimateEnd
}, React.createElement(Align, {
ref: this.saveRef,
key: "align",
childrenProps: {
hidden: 'hidden'
},
align: align,
onAlign: this.onAlign,
target: getRootDomNode,
hidden: hidden,
monitorWindowResize: true
}, React.createElement(PopupInner, _extends({}, omit(this.getMergedProps(), ['ref'])), children))), container, this.popupKey) : null;
}
}, {
key: "getContainer",
value: function getContainer() {
if (typeof window === 'undefined') {
return undefined;
}
var _this$props2 = this.props,
getPopupContainer = _this$props2.getPopupContainer,
_this$props2$getRootD = _this$props2.getRootDomNode,
getRootDomNode = _this$props2$getRootD === void 0 ? noop : _this$props2$getRootD;
var globalContainer = Popup.popupContainer;
if (getPopupContainer) {
var container = this.popupContainer;
if (container) {
return container;
}
} else if (globalContainer) {
return globalContainer;
}
var doc = window.document;
var popupContainer = doc.createElement('div');
popupContainer.className = getProPrefixCls('popup-container');
var root = doc.body;
if (getPopupContainer) {
var mountNode = getPopupContainer(getRootDomNode());
if (mountNode === root) {
if (globalContainer) {
this.popupContainer = globalContainer;
return globalContainer;
}
Popup.popupContainer = popupContainer;
}
(isElement(mountNode) ? mountNode : root).appendChild(popupContainer);
this.popupContainer = popupContainer;
} else {
root.appendChild(popupContainer);
Popup.popupContainer = popupContainer;
}
return popupContainer;
}
}, {
key: "onAlign",
value: function onAlign(source, align, target, translate) {
var _this$props3 = this.props,
_this$props3$getClass = _this$props3.getClassNameFromAlign,
getClassNameFromAlign = _this$props3$getClass === void 0 ? noop : _this$props3$getClass,
_this$props3$getStyle = _this$props3.getStyleFromAlign,
getStyleFromAlign = _this$props3$getStyle === void 0 ? noop : _this$props3$getStyle,
_this$props3$onAlign = _this$props3.onAlign,
onAlign = _this$props3$onAlign === void 0 ? noop : _this$props3$onAlign;
var currentAlignClassName = getClassNameFromAlign(align);
if (this.currentAlignClassName !== currentAlignClassName) {
this.currentAlignClassName = currentAlignClassName;
source.className = this.getMergedClassNames(currentAlignClassName);
}
var currentAlignStyle = getStyleFromAlign(target, align);
if (!shallowEqual(this.currentAlignStyle, currentAlignStyle)) {
this.currentAlignStyle = currentAlignStyle;
_extends(source.style, currentAlignStyle);
}
onAlign(source, align, target, translate);
}
}, {
key: "forceAlign",
value: function forceAlign() {
if (this.align) {
this.align.forceAlign();
}
}
}]);
return Popup;
}(ViewComponent);
export { Popup as default };
Popup.displayName = 'Popup';
Popup.propTypes = _objectSpread({
align: PropTypes.object,
onAlign: PropTypes.func,
getRootDomNode: PropTypes.func,
getPopupContainer: PropTypes.func,
transitionName: PropTypes.string,
onAnimateAppear: PropTypes.func,
onAnimateEnter: PropTypes.func,
onAnimateLeave: PropTypes.func,
onAnimateEnd: PropTypes.func,
getStyleFromAlign: PropTypes.func,
getClassNameFromAlign: PropTypes.func
}, ViewComponent.propTypes);
Popup.defaultProps = {
suffixCls: 'popup',
transitionName: 'zoom'
};
__decorate([autobind], Popup.prototype, "onAlign", null);
//# sourceMappingURL=Popup.js.map