choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
343 lines (289 loc) • 11.5 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _align = _interopRequireDefault(require("../../align"));
var _animate = _interopRequireDefault(require("../../animate"));
var _PopupInner = _interopRequireDefault(require("./PopupInner"));
var _LazyRenderBox = _interopRequireDefault(require("./LazyRenderBox"));
var _utils = require("./utils");
var Popup = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(Popup, _Component);
var _super = (0, _createSuper2["default"])(Popup);
function Popup(_props) {
var _this;
(0, _classCallCheck2["default"])(this, Popup);
_this = _super.call(this, _props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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
});
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getTargetElement", function () {
return _this.props.getRootDomNode();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getAlignTarget", function () {
var point = _this.props.point;
if (point) {
return point;
}
return _this.getTargetElement;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderPopupInner", function (innerRef) {
var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_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 = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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["default"].createElement(_PopupInner["default"], (0, _extends2["default"])({
innerRef: innerRef
}, popupInnerProps), children);
});
_this.state = {
// Used for stretch
stretchChecked: false,
targetWidth: undefined,
targetHeight: undefined
};
_this.savePopupRef = _utils.saveRef.bind((0, _assertThisInitialized2["default"])(_this), 'popupInstance');
_this.saveAlignRef = _utils.saveRef.bind((0, _assertThisInitialized2["default"])(_this), 'alignInstance');
return _this;
}
(0, _createClass2["default"])(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["default"].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["default"].createElement(_animate["default"], {
component: "",
exclusive: true,
transitionAppear: true,
transitionName: this.getTransitionName()
}, visible ? /*#__PURE__*/_react["default"].createElement(_align["default"], {
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["default"].createElement(_animate["default"], {
component: "",
exclusive: true,
transitionAppear: true,
transitionName: this.getTransitionName(),
hiddenProp: "hidden"
}, /*#__PURE__*/_react["default"].createElement(_align["default"], {
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["default"].createElement(_LazyRenderBox["default"], {
style: this.getZIndexStyle(),
key: "mask",
className: "".concat(props.prefixCls, "-mask"),
hiddenClassName: "".concat(props.prefixCls, "-mask-hidden"),
hidden: !props.visible
});
if (maskTransition) {
maskElement = /*#__PURE__*/_react["default"].createElement(_animate["default"], {
key: "mask",
hiddenProp: "hidden",
transitionAppear: true,
component: "",
transitionName: maskTransition
}, maskElement);
}
}
return maskElement;
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/_react["default"].createElement("div", null, this.getMaskElement(), this.getPopupElement());
}
}]);
return Popup;
}(_react.Component);
var _default = Popup;
exports["default"] = _default;
//# sourceMappingURL=Popup.js.map