choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
326 lines (281 loc) • 10.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Align from '../../align';
import Animate from '../../animate';
import PopupInner from './PopupInner';
import LazyRenderBox from './LazyRenderBox';
import { saveRef } from './utils';
var Popup = /*#__PURE__*/function (_Component) {
_inherits(Popup, _Component);
var _super = _createSuper(Popup);
function Popup(_props) {
var _this;
_classCallCheck(this, Popup);
_this = _super.call(this, _props);
_defineProperty(_assertThisInitialized(_this), "onAlign", function (popupDomNode, align) {
var props = _this.props;
var currentAlignClassName = props.getClassNameFromAlign(align); // FIX: https://github.com/react-component/trigger/issues/56
// FIX: https://github.com/react-component/tooltip/issues/79
if (_this.currentAlignClassName !== currentAlignClassName) {
_this.currentAlignClassName = currentAlignClassName;
popupDomNode.className = _this.getClassName(currentAlignClassName);
}
props.onAlign(popupDomNode, align);
});
_defineProperty(_assertThisInitialized(_this), "setStretchSize", function () {
var _this$props = _this.props,
stretch = _this$props.stretch,
getRootDomNode = _this$props.getRootDomNode,
visible = _this$props.visible;
var _this$state = _this.state,
stretchChecked = _this$state.stretchChecked,
targetHeight = _this$state.targetHeight,
targetWidth = _this$state.targetWidth;
if (!stretch || !visible) {
if (stretchChecked) {
_this.setState({
stretchChecked: false
});
}
return;
}
var $ele = getRootDomNode();
if (!$ele) return;
var height = $ele.offsetHeight;
var width = $ele.offsetWidth;
if (targetHeight !== height || targetWidth !== width || !stretchChecked) {
_this.setState({
stretchChecked: true,
targetHeight: height,
targetWidth: width
});
}
});
_defineProperty(_assertThisInitialized(_this), "getTargetElement", function () {
return _this.props.getRootDomNode();
});
_defineProperty(_assertThisInitialized(_this), "getAlignTarget", function () {
var point = _this.props.point;
if (point) {
return point;
}
return _this.getTargetElement;
});
_defineProperty(_assertThisInitialized(_this), "renderPopupInner", function (innerRef) {
var _assertThisInitialize = _assertThisInitialized(_this),
savePopupRef = _assertThisInitialize.savePopupRef;
var _this$state2 = _this.state,
stretchChecked = _this$state2.stretchChecked,
targetHeight = _this$state2.targetHeight,
targetWidth = _this$state2.targetWidth;
var _this$props2 = _this.props,
align = _this$props2.align,
prefixCls = _this$props2.prefixCls,
style = _this$props2.style,
getClassNameFromAlign = _this$props2.getClassNameFromAlign,
destroyPopupOnHide = _this$props2.destroyPopupOnHide,
stretch = _this$props2.stretch,
children = _this$props2.children,
onMouseEnter = _this$props2.onMouseEnter,
onMouseLeave = _this$props2.onMouseLeave;
var className = _this.getClassName(_this.currentAlignClassName || getClassNameFromAlign(align));
var hiddenClassName = "".concat(prefixCls, "-hidden");
var sizeStyle = {};
if (stretch) {
if (stretchChecked) {
// Stretch with target
if (stretch.indexOf('height') !== -1) {
sizeStyle.height = targetHeight;
} else if (stretch.indexOf('minHeight') !== -1) {
sizeStyle.minHeight = targetHeight;
}
if (stretch.indexOf('width') !== -1) {
sizeStyle.width = targetWidth;
} else if (stretch.indexOf('minWidth') !== -1) {
sizeStyle.minWidth = targetWidth;
}
} else {
sizeStyle.visibility = 'hidden';
setTimeout(function () {
if (_this.alignInstance) {
_this.alignInstance.forceAlign();
}
}, 0);
}
}
var newStyle = _objectSpread(_objectSpread(_objectSpread({}, sizeStyle), style), _this.getZIndexStyle());
var popupInnerProps = {
className: className,
prefixCls: prefixCls,
ref: savePopupRef,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
style: newStyle
};
if (!destroyPopupOnHide) {
popupInnerProps.hiddenClassName = hiddenClassName;
}
return /*#__PURE__*/React.createElement(PopupInner, _extends({
innerRef: innerRef
}, popupInnerProps), children);
});
_this.state = {
// Used for stretch
stretchChecked: false,
targetWidth: undefined,
targetHeight: undefined
};
_this.savePopupRef = saveRef.bind(_assertThisInitialized(_this), 'popupInstance');
_this.saveAlignRef = saveRef.bind(_assertThisInitialized(_this), 'alignInstance');
return _this;
}
_createClass(Popup, [{
key: "componentDidMount",
value: function componentDidMount() {
this.rootNode = this.getPopupDomNode();
this.setStretchSize();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.setStretchSize();
}
}, {
key: "getPopupDomNode",
value: function getPopupDomNode() {
return ReactDOM.findDOMNode(this.popupInstance);
}
}, {
key: "getMaskTransitionName",
value: function getMaskTransitionName() {
var props = this.props;
var transitionName = props.maskTransitionName;
var animation = props.maskAnimation;
if (!transitionName && animation) {
transitionName = "".concat(props.prefixCls, "-").concat(animation);
}
return transitionName;
}
}, {
key: "getTransitionName",
value: function getTransitionName() {
var props = this.props;
var transitionName = props.transitionName;
if (!transitionName && props.animation) {
transitionName = "".concat(props.prefixCls, "-").concat(props.animation);
}
return transitionName;
}
}, {
key: "getClassName",
value: function getClassName(currentAlignClassName) {
return "".concat(this.props.prefixCls, " ").concat(this.props.className, " ").concat(currentAlignClassName);
}
}, {
key: "getPopupElement",
value: function getPopupElement() {
var stretchChecked = this.state.stretchChecked;
var _this$props3 = this.props,
align = _this$props3.align,
visible = _this$props3.visible,
destroyPopupOnHide = _this$props3.destroyPopupOnHide,
stretch = _this$props3.stretch;
if (!visible) {
this.currentAlignClassName = null;
}
if (stretch && !stretchChecked) {
// Do nothing when stretch not ready
return null;
}
if (destroyPopupOnHide) {
return /*#__PURE__*/React.createElement(Animate, {
component: "",
exclusive: true,
transitionAppear: true,
transitionName: this.getTransitionName()
}, visible ? /*#__PURE__*/React.createElement(Align, {
target: this.getAlignTarget(),
key: "popup",
ref: this.saveAlignRef,
monitorWindowResize: true,
hidden: !visible,
childrenProps: {
hidden: 'hidden'
},
align: align,
onAlign: this.onAlign
}, this.renderPopupInner) : null);
}
return /*#__PURE__*/React.createElement(Animate, {
component: "",
exclusive: true,
transitionAppear: true,
transitionName: this.getTransitionName(),
hiddenProp: "hidden"
}, /*#__PURE__*/React.createElement(Align, {
target: this.getAlignTarget(),
key: "popup",
ref: this.saveAlignRef,
monitorWindowResize: true,
childrenProps: {
hidden: 'hidden'
},
hidden: !visible,
align: align,
onAlign: this.onAlign
}, this.renderPopupInner));
}
}, {
key: "getZIndexStyle",
value: function getZIndexStyle() {
var style = {};
var props = this.props;
if (props.zIndex !== undefined) {
style.zIndex = props.zIndex;
}
return style;
}
}, {
key: "getMaskElement",
value: function getMaskElement() {
var props = this.props;
var maskElement;
if (props.mask) {
var maskTransition = this.getMaskTransitionName();
maskElement = /*#__PURE__*/React.createElement(LazyRenderBox, {
style: this.getZIndexStyle(),
key: "mask",
className: "".concat(props.prefixCls, "-mask"),
hiddenClassName: "".concat(props.prefixCls, "-mask-hidden"),
hidden: !props.visible
});
if (maskTransition) {
maskElement = /*#__PURE__*/React.createElement(Animate, {
key: "mask",
hiddenProp: "hidden",
transitionAppear: true,
component: "",
transitionName: maskTransition
}, maskElement);
}
}
return maskElement;
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/React.createElement("div", null, this.getMaskElement(), this.getPopupElement());
}
}]);
return Popup;
}(Component);
export default Popup;
//# sourceMappingURL=Popup.js.map