2020-06-09 18:30:18 +08:00
|
|
|
|
import { Transition } from 'vue';
|
2019-01-12 11:33:27 +08:00
|
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
|
import Align from '../vc-align';
|
|
|
|
|
import PopupInner from './PopupInner';
|
|
|
|
|
import LazyRenderBox from './LazyRenderBox';
|
|
|
|
|
import animate from '../_util/css-animation';
|
|
|
|
|
import BaseMixin from '../_util/BaseMixin';
|
2020-06-29 18:43:43 +08:00
|
|
|
|
import { saveRef } from './utils';
|
|
|
|
|
import { getListeners, splitAttrs, findDOMNode } from '../_util/props-util';
|
2017-12-22 18:43:28 +08:00
|
|
|
|
|
|
|
|
|
export default {
|
2020-03-07 19:45:13 +08:00
|
|
|
|
name: 'VCTriggerPopup',
|
2018-12-25 12:00:39 +08:00
|
|
|
|
mixins: [BaseMixin],
|
2020-06-09 18:30:18 +08:00
|
|
|
|
inheritAttrs: false,
|
2017-12-22 18:43:28 +08:00
|
|
|
|
props: {
|
|
|
|
|
visible: PropTypes.bool,
|
|
|
|
|
getClassNameFromAlign: PropTypes.func,
|
|
|
|
|
getRootDomNode: PropTypes.func,
|
|
|
|
|
align: PropTypes.any,
|
|
|
|
|
destroyPopupOnHide: PropTypes.bool,
|
|
|
|
|
prefixCls: PropTypes.string,
|
2017-12-25 18:08:36 +08:00
|
|
|
|
getContainer: PropTypes.func,
|
2017-12-26 19:04:28 +08:00
|
|
|
|
transitionName: PropTypes.string,
|
|
|
|
|
animation: PropTypes.any,
|
|
|
|
|
maskAnimation: PropTypes.string,
|
|
|
|
|
maskTransitionName: PropTypes.string,
|
|
|
|
|
mask: PropTypes.bool,
|
|
|
|
|
zIndex: PropTypes.number,
|
2018-01-03 18:30:12 +08:00
|
|
|
|
popupClassName: PropTypes.any,
|
2020-03-07 19:45:13 +08:00
|
|
|
|
popupStyle: PropTypes.object.def(() => ({})),
|
2018-09-05 21:28:54 +08:00
|
|
|
|
stretch: PropTypes.string,
|
|
|
|
|
point: PropTypes.shape({
|
|
|
|
|
pageX: PropTypes.number,
|
|
|
|
|
pageY: PropTypes.number,
|
|
|
|
|
}),
|
2017-12-22 18:43:28 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
data() {
|
2019-10-25 00:04:47 +08:00
|
|
|
|
this.domEl = null;
|
2020-06-10 18:20:57 +08:00
|
|
|
|
this.currentAlignClassName = undefined;
|
2020-06-29 18:43:43 +08:00
|
|
|
|
this.savePopupRef = saveRef.bind(this, 'popupInstance');
|
|
|
|
|
this.saveAlignRef = saveRef.bind(this, 'alignInstance');
|
2017-12-27 16:13:26 +08:00
|
|
|
|
return {
|
2018-09-05 21:28:54 +08:00
|
|
|
|
// Used for stretch
|
|
|
|
|
stretchChecked: false,
|
|
|
|
|
targetWidth: undefined,
|
|
|
|
|
targetHeight: undefined,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
2017-12-27 16:13:26 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
mounted() {
|
2018-09-05 21:28:54 +08:00
|
|
|
|
this.$nextTick(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
this.rootNode = this.getPopupDomNode();
|
|
|
|
|
this.setStretchSize();
|
|
|
|
|
});
|
2018-09-05 21:28:54 +08:00
|
|
|
|
},
|
2020-04-21 16:13:17 +08:00
|
|
|
|
// 如添加会导致动画失效,如放开会导致快速输入时闪动 https://github.com/vueComponent/ant-design-vue/issues/1327,
|
|
|
|
|
// 目前方案是保留动画,闪动问题(动画多次执行)进一步定位
|
|
|
|
|
// beforeUpdate() {
|
|
|
|
|
// if (this.domEl && this.domEl.rcEndListener) {
|
|
|
|
|
// this.domEl.rcEndListener();
|
|
|
|
|
// this.domEl = null;
|
|
|
|
|
// }
|
|
|
|
|
// },
|
2019-01-12 11:33:27 +08:00
|
|
|
|
updated() {
|
2018-09-05 21:28:54 +08:00
|
|
|
|
this.$nextTick(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
this.setStretchSize();
|
|
|
|
|
});
|
2018-09-05 21:28:54 +08:00
|
|
|
|
},
|
2020-06-29 18:43:43 +08:00
|
|
|
|
// beforeUnmount() {
|
|
|
|
|
// if (this.$el.parentNode) {
|
|
|
|
|
// this.$el.parentNode.removeChild(this.$el);
|
|
|
|
|
// } else if (this.$el.remove) {
|
|
|
|
|
// this.$el.remove();
|
|
|
|
|
// }
|
|
|
|
|
// },
|
2017-12-22 18:43:28 +08:00
|
|
|
|
methods: {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
onAlign(popupDomNode, align) {
|
|
|
|
|
const props = this.$props;
|
|
|
|
|
const currentAlignClassName = props.getClassNameFromAlign(align);
|
2018-09-05 21:28:54 +08:00
|
|
|
|
// FIX: https://github.com/react-component/trigger/issues/56
|
|
|
|
|
// FIX: https://github.com/react-component/tooltip/issues/79
|
|
|
|
|
if (this.currentAlignClassName !== currentAlignClassName) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
this.currentAlignClassName = currentAlignClassName;
|
|
|
|
|
popupDomNode.className = this.getClassName(currentAlignClassName);
|
2018-09-05 21:28:54 +08:00
|
|
|
|
}
|
2020-01-18 21:34:23 +08:00
|
|
|
|
const listeners = getListeners(this);
|
|
|
|
|
listeners.align && listeners.align(popupDomNode, align);
|
2017-12-22 18:43:28 +08:00
|
|
|
|
},
|
|
|
|
|
|
2018-09-05 21:28:54 +08:00
|
|
|
|
// Record size if stretch needed
|
2019-01-12 11:33:27 +08:00
|
|
|
|
setStretchSize() {
|
|
|
|
|
const { stretch, getRootDomNode, visible } = this.$props;
|
|
|
|
|
const { stretchChecked, targetHeight, targetWidth } = this.$data;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
|
|
|
|
|
if (!stretch || !visible) {
|
|
|
|
|
if (stretchChecked) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
this.setState({ stretchChecked: false });
|
2018-09-05 21:28:54 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
}
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const $ele = getRootDomNode();
|
|
|
|
|
if (!$ele) return;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const height = $ele.offsetHeight;
|
|
|
|
|
const width = $ele.offsetWidth;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
|
|
|
|
|
if (targetHeight !== height || targetWidth !== width || !stretchChecked) {
|
|
|
|
|
this.setState({
|
|
|
|
|
stretchChecked: true,
|
|
|
|
|
targetHeight: height,
|
|
|
|
|
targetWidth: width,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
});
|
2018-09-05 21:28:54 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
getPopupDomNode() {
|
2020-06-29 18:43:43 +08:00
|
|
|
|
return findDOMNode(this.popupInstance);
|
2017-12-22 18:43:28 +08:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
getTargetElement() {
|
|
|
|
|
return this.$props.getRootDomNode();
|
2017-12-22 18:43:28 +08:00
|
|
|
|
},
|
|
|
|
|
|
2018-09-05 21:28:54 +08:00
|
|
|
|
// `target` on `rc-align` can accept as a function to get the bind element or a point.
|
|
|
|
|
// ref: https://www.npmjs.com/package/rc-align
|
2019-01-12 11:33:27 +08:00
|
|
|
|
getAlignTarget() {
|
|
|
|
|
const { point } = this.$props;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
if (point) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return point;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return this.getTargetElement;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
getMaskTransitionName() {
|
|
|
|
|
const props = this.$props;
|
|
|
|
|
let transitionName = props.maskTransitionName;
|
|
|
|
|
const animation = props.maskAnimation;
|
2017-12-22 18:43:28 +08:00
|
|
|
|
if (!transitionName && animation) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
transitionName = `${props.prefixCls}-${animation}`;
|
2017-12-22 18:43:28 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return transitionName;
|
2017-12-22 18:43:28 +08:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
getTransitionName() {
|
|
|
|
|
const props = this.$props;
|
|
|
|
|
let transitionName = props.transitionName;
|
|
|
|
|
const animation = props.animation;
|
2018-01-17 16:12:53 +08:00
|
|
|
|
if (!transitionName) {
|
|
|
|
|
if (typeof animation === 'string') {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
transitionName = `${animation}`;
|
2018-02-07 23:03:47 +08:00
|
|
|
|
} else if (animation && animation.props && animation.props.name) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
transitionName = animation.props.name;
|
2018-01-17 16:12:53 +08:00
|
|
|
|
}
|
2017-12-22 18:43:28 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return transitionName;
|
2017-12-22 18:43:28 +08:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
getClassName(currentAlignClassName) {
|
2020-06-10 18:20:57 +08:00
|
|
|
|
return `${this.$props.prefixCls} ${this.$attrs.class || ''} ${
|
|
|
|
|
this.$props.popupClassName
|
|
|
|
|
} ${currentAlignClassName}`;
|
2017-12-22 18:43:28 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
getPopupElement() {
|
2020-06-29 18:43:43 +08:00
|
|
|
|
const { savePopupRef } = this;
|
2020-06-10 18:20:57 +08:00
|
|
|
|
const { $props: props, $attrs, $slots, getTransitionName } = this;
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const { stretchChecked, targetHeight, targetWidth } = this.$data;
|
2020-06-10 18:20:57 +08:00
|
|
|
|
const { style = {} } = $attrs;
|
|
|
|
|
const onEvents = splitAttrs($attrs).onEvents;
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const {
|
|
|
|
|
align,
|
|
|
|
|
visible,
|
|
|
|
|
prefixCls,
|
|
|
|
|
animation,
|
|
|
|
|
popupStyle,
|
|
|
|
|
getClassNameFromAlign,
|
|
|
|
|
destroyPopupOnHide,
|
|
|
|
|
stretch,
|
|
|
|
|
} = props;
|
|
|
|
|
const className = this.getClassName(
|
|
|
|
|
this.currentAlignClassName || getClassNameFromAlign(align),
|
|
|
|
|
);
|
2017-12-27 16:13:26 +08:00
|
|
|
|
// const hiddenClassName = `${prefixCls}-hidden`
|
2018-09-05 21:28:54 +08:00
|
|
|
|
if (!visible) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
this.currentAlignClassName = null;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const sizeStyle = {};
|
2018-09-05 21:28:54 +08:00
|
|
|
|
if (stretch) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
// Stretch with target
|
2018-09-05 21:28:54 +08:00
|
|
|
|
if (stretch.indexOf('height') !== -1) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
sizeStyle.height = typeof targetHeight === 'number' ? `${targetHeight}px` : targetHeight;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
} else if (stretch.indexOf('minHeight') !== -1) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
sizeStyle.minHeight =
|
|
|
|
|
typeof targetHeight === 'number' ? `${targetHeight}px` : targetHeight;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
}
|
|
|
|
|
if (stretch.indexOf('width') !== -1) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
sizeStyle.width = typeof targetWidth === 'number' ? `${targetWidth}px` : targetWidth;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
} else if (stretch.indexOf('minWidth') !== -1) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
sizeStyle.minWidth = typeof targetWidth === 'number' ? `${targetWidth}px` : targetWidth;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
}
|
|
|
|
|
// Delay force align to makes ui smooth
|
|
|
|
|
if (!stretchChecked) {
|
2018-12-25 12:00:39 +08:00
|
|
|
|
// sizeStyle.visibility = 'hidden'
|
2018-09-05 21:28:54 +08:00
|
|
|
|
setTimeout(() => {
|
2020-06-29 18:43:43 +08:00
|
|
|
|
if (this.alignInstance) {
|
|
|
|
|
this.alignInstance.forceAlign();
|
2018-09-05 21:28:54 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
}, 0);
|
2018-09-05 21:28:54 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2017-12-22 18:43:28 +08:00
|
|
|
|
const popupInnerProps = {
|
2020-06-10 18:20:57 +08:00
|
|
|
|
prefixCls,
|
|
|
|
|
visible,
|
|
|
|
|
// hiddenClassName,
|
2018-01-19 18:01:43 +08:00
|
|
|
|
class: className,
|
2020-06-10 18:20:57 +08:00
|
|
|
|
...onEvents,
|
2020-06-29 18:43:43 +08:00
|
|
|
|
ref: savePopupRef,
|
2020-06-10 18:20:57 +08:00
|
|
|
|
style: { ...sizeStyle, ...popupStyle, ...style, ...this.getZIndexStyle() },
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
2018-02-09 18:42:19 +08:00
|
|
|
|
let transitionProps = {
|
2020-06-10 18:20:57 +08:00
|
|
|
|
appear: true,
|
|
|
|
|
css: false,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
|
|
|
|
const transitionName = getTransitionName();
|
|
|
|
|
let useTransition = !!transitionName;
|
2018-01-15 17:33:34 +08:00
|
|
|
|
const transitionEvent = {
|
2020-06-10 18:20:57 +08:00
|
|
|
|
onBeforeEnter: () => {
|
2018-02-27 12:17:53 +08:00
|
|
|
|
// el.style.display = el.__vOriginalDisplay
|
2020-06-29 18:43:43 +08:00
|
|
|
|
// this.alignInstance.forceAlign();
|
2018-01-15 17:33:34 +08:00
|
|
|
|
},
|
2020-06-10 18:20:57 +08:00
|
|
|
|
onEnter: (el, done) => {
|
2019-10-25 19:38:04 +08:00
|
|
|
|
// render 后 vue 会移除通过animate动态添加的 class导致动画闪动,延迟两帧添加动画class,可以进一步定位或者重写 transition 组件
|
2018-02-22 17:19:47 +08:00
|
|
|
|
this.$nextTick(() => {
|
2020-06-29 18:43:43 +08:00
|
|
|
|
if (this.alignInstance) {
|
|
|
|
|
this.alignInstance.$nextTick(() => {
|
2019-10-25 00:04:47 +08:00
|
|
|
|
this.domEl = el;
|
2019-01-29 22:58:52 +08:00
|
|
|
|
animate(el, `${transitionName}-enter`, done);
|
|
|
|
|
});
|
2020-04-21 16:13:17 +08:00
|
|
|
|
} else {
|
|
|
|
|
done();
|
2019-01-29 22:58:52 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
});
|
2018-01-15 17:33:34 +08:00
|
|
|
|
},
|
2020-06-10 18:20:57 +08:00
|
|
|
|
onBeforeLeave: () => {
|
2019-10-25 00:04:47 +08:00
|
|
|
|
this.domEl = null;
|
2019-10-25 19:38:04 +08:00
|
|
|
|
},
|
2020-06-10 18:20:57 +08:00
|
|
|
|
onLeave: (el, done) => {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
animate(el, `${transitionName}-leave`, done);
|
2018-01-15 17:33:34 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
2020-06-10 18:20:57 +08:00
|
|
|
|
transitionProps = { ...transitionProps, ...transitionEvent };
|
2018-01-15 17:33:34 +08:00
|
|
|
|
if (typeof animation === 'object') {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
useTransition = true;
|
2020-06-10 18:20:57 +08:00
|
|
|
|
transitionProps = { ...transitionProps, ...animation };
|
2018-01-04 19:06:54 +08:00
|
|
|
|
}
|
2018-02-09 18:42:19 +08:00
|
|
|
|
if (!useTransition) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
transitionProps = {};
|
2018-02-09 18:42:19 +08:00
|
|
|
|
}
|
2018-09-05 21:28:54 +08:00
|
|
|
|
if (destroyPopupOnHide) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return (
|
2020-06-09 18:30:18 +08:00
|
|
|
|
<Transition {...transitionProps}>
|
2019-01-12 11:33:27 +08:00
|
|
|
|
{visible ? (
|
|
|
|
|
<Align
|
|
|
|
|
target={this.getAlignTarget()}
|
|
|
|
|
key="popup"
|
2020-06-29 18:43:43 +08:00
|
|
|
|
ref={this.saveAlignRef}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
monitorWindowResize
|
|
|
|
|
align={align}
|
|
|
|
|
onAlign={this.onAlign}
|
2018-09-05 21:28:54 +08:00
|
|
|
|
>
|
2020-06-10 18:20:57 +08:00
|
|
|
|
<PopupInner {...popupInnerProps}>{$slots.default && $slots.default()}</PopupInner>
|
2019-01-12 11:33:27 +08:00
|
|
|
|
</Align>
|
|
|
|
|
) : null}
|
2020-06-09 18:30:18 +08:00
|
|
|
|
</Transition>
|
2019-01-12 11:33:27 +08:00
|
|
|
|
);
|
2018-09-05 21:28:54 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return (
|
2020-06-09 18:30:18 +08:00
|
|
|
|
<Transition {...transitionProps}>
|
2019-01-12 11:33:27 +08:00
|
|
|
|
<Align
|
|
|
|
|
v-show={visible}
|
|
|
|
|
target={this.getAlignTarget()}
|
|
|
|
|
key="popup"
|
2020-06-29 18:43:43 +08:00
|
|
|
|
ref={this.saveAlignRef}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
monitorWindowResize
|
|
|
|
|
disabled={!visible}
|
|
|
|
|
align={align}
|
|
|
|
|
onAlign={this.onAlign}
|
2017-12-22 18:43:28 +08:00
|
|
|
|
>
|
2020-06-20 10:08:45 +08:00
|
|
|
|
<PopupInner {...popupInnerProps}>{$slots.default?.()}</PopupInner>
|
2019-01-12 11:33:27 +08:00
|
|
|
|
</Align>
|
2020-06-09 18:30:18 +08:00
|
|
|
|
</Transition>
|
2019-01-12 11:33:27 +08:00
|
|
|
|
);
|
2017-12-22 18:43:28 +08:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
getZIndexStyle() {
|
|
|
|
|
const style = {};
|
|
|
|
|
const props = this.$props;
|
2017-12-22 18:43:28 +08:00
|
|
|
|
if (props.zIndex !== undefined) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
style.zIndex = props.zIndex;
|
2017-12-22 18:43:28 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return style;
|
2017-12-22 18:43:28 +08:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
getMaskElement() {
|
|
|
|
|
const props = this.$props;
|
|
|
|
|
let maskElement = null;
|
2017-12-22 18:43:28 +08:00
|
|
|
|
if (props.mask) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const maskTransition = this.getMaskTransitionName();
|
2017-12-22 18:43:28 +08:00
|
|
|
|
maskElement = (
|
|
|
|
|
<LazyRenderBox
|
2017-12-27 16:13:26 +08:00
|
|
|
|
v-show={props.visible}
|
2017-12-22 18:43:28 +08:00
|
|
|
|
style={this.getZIndexStyle()}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
key="mask"
|
2017-12-22 18:43:28 +08:00
|
|
|
|
class={`${props.prefixCls}-mask`}
|
|
|
|
|
visible={props.visible}
|
|
|
|
|
/>
|
2019-01-12 11:33:27 +08:00
|
|
|
|
);
|
2017-12-22 18:43:28 +08:00
|
|
|
|
if (maskTransition) {
|
|
|
|
|
maskElement = (
|
2020-06-09 18:30:18 +08:00
|
|
|
|
<Transition appear name={maskTransition}>
|
2017-12-22 18:43:28 +08:00
|
|
|
|
{maskElement}
|
2020-06-09 18:30:18 +08:00
|
|
|
|
</Transition>
|
2019-01-12 11:33:27 +08:00
|
|
|
|
);
|
2017-12-22 18:43:28 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return maskElement;
|
2017-12-22 18:43:28 +08:00
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
render() {
|
|
|
|
|
const { getMaskElement, getPopupElement } = this;
|
2017-12-22 18:43:28 +08:00
|
|
|
|
return (
|
2018-02-03 19:48:03 +08:00
|
|
|
|
<div>
|
2018-02-27 12:17:53 +08:00
|
|
|
|
{getMaskElement()}
|
2018-09-05 21:28:54 +08:00
|
|
|
|
{getPopupElement()}
|
2017-12-22 18:43:28 +08:00
|
|
|
|
</div>
|
2019-01-12 11:33:27 +08:00
|
|
|
|
);
|
2017-12-22 18:43:28 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|