415 lines
13 KiB
JavaScript
415 lines
13 KiB
JavaScript
'use strict';
|
||
|
||
Object.defineProperty(exports, "__esModule", {
|
||
value: true
|
||
});
|
||
|
||
var _typeof2 = require('babel-runtime/helpers/typeof');
|
||
|
||
var _typeof3 = _interopRequireDefault(_typeof2);
|
||
|
||
var _extends2 = require('babel-runtime/helpers/extends');
|
||
|
||
var _extends3 = _interopRequireDefault(_extends2);
|
||
|
||
var _vueTypes = require('../_util/vue-types');
|
||
|
||
var _vueTypes2 = _interopRequireDefault(_vueTypes);
|
||
|
||
var _vcAlign = require('../vc-align');
|
||
|
||
var _vcAlign2 = _interopRequireDefault(_vcAlign);
|
||
|
||
var _PopupInner = require('./PopupInner');
|
||
|
||
var _PopupInner2 = _interopRequireDefault(_PopupInner);
|
||
|
||
var _LazyRenderBox = require('./LazyRenderBox');
|
||
|
||
var _LazyRenderBox2 = _interopRequireDefault(_LazyRenderBox);
|
||
|
||
var _cssAnimation = require('../_util/css-animation');
|
||
|
||
var _cssAnimation2 = _interopRequireDefault(_cssAnimation);
|
||
|
||
var _BaseMixin = require('../_util/BaseMixin');
|
||
|
||
var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
|
||
|
||
var _propsUtil = require('../_util/props-util');
|
||
|
||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||
|
||
exports['default'] = {
|
||
name: 'VCTriggerPopup',
|
||
mixins: [_BaseMixin2['default']],
|
||
props: {
|
||
visible: _vueTypes2['default'].bool,
|
||
getClassNameFromAlign: _vueTypes2['default'].func,
|
||
getRootDomNode: _vueTypes2['default'].func,
|
||
align: _vueTypes2['default'].any,
|
||
destroyPopupOnHide: _vueTypes2['default'].bool,
|
||
prefixCls: _vueTypes2['default'].string,
|
||
getContainer: _vueTypes2['default'].func,
|
||
transitionName: _vueTypes2['default'].string,
|
||
animation: _vueTypes2['default'].any,
|
||
maskAnimation: _vueTypes2['default'].string,
|
||
maskTransitionName: _vueTypes2['default'].string,
|
||
mask: _vueTypes2['default'].bool,
|
||
zIndex: _vueTypes2['default'].number,
|
||
popupClassName: _vueTypes2['default'].any,
|
||
popupStyle: _vueTypes2['default'].object.def(function () {
|
||
return {};
|
||
}),
|
||
stretch: _vueTypes2['default'].string,
|
||
point: _vueTypes2['default'].shape({
|
||
pageX: _vueTypes2['default'].number,
|
||
pageY: _vueTypes2['default'].number
|
||
})
|
||
},
|
||
data: function data() {
|
||
this.domEl = null;
|
||
return {
|
||
// Used for stretch
|
||
stretchChecked: false,
|
||
targetWidth: undefined,
|
||
targetHeight: undefined
|
||
};
|
||
},
|
||
mounted: function mounted() {
|
||
var _this = this;
|
||
|
||
this.$nextTick(function () {
|
||
_this.rootNode = _this.getPopupDomNode();
|
||
_this.setStretchSize();
|
||
});
|
||
},
|
||
|
||
// 如添加会导致动画失效，如放开会导致快速输入时闪动 https://github.com/vueComponent/ant-design-vue/issues/1327，
|
||
// 目前方案是保留动画，闪动问题(动画多次执行)进一步定位
|
||
// beforeUpdate() {
|
||
// if (this.domEl && this.domEl.rcEndListener) {
|
||
// this.domEl.rcEndListener();
|
||
// this.domEl = null;
|
||
// }
|
||
// },
|
||
updated: function updated() {
|
||
var _this2 = this;
|
||
|
||
this.$nextTick(function () {
|
||
_this2.setStretchSize();
|
||
});
|
||
},
|
||
beforeDestroy: function beforeDestroy() {
|
||
if (this.$el.parentNode) {
|
||
this.$el.parentNode.removeChild(this.$el);
|
||
} else if (this.$el.remove) {
|
||
this.$el.remove();
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
onAlign: function onAlign(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);
|
||
}
|
||
var listeners = (0, _propsUtil.getListeners)(this);
|
||
listeners.align && listeners.align(popupDomNode, align);
|
||
},
|
||
|
||
|
||
// Record size if stretch needed
|
||
setStretchSize: function setStretchSize() {
|
||
var _$props = this.$props,
|
||
stretch = _$props.stretch,
|
||
getRootDomNode = _$props.getRootDomNode,
|
||
visible = _$props.visible;
|
||
var _$data = this.$data,
|
||
stretchChecked = _$data.stretchChecked,
|
||
targetHeight = _$data.targetHeight,
|
||
targetWidth = _$data.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
|
||
});
|
||
}
|
||
},
|
||
getPopupDomNode: function getPopupDomNode() {
|
||
return this.$refs.popupInstance ? this.$refs.popupInstance.$el : null;
|
||
},
|
||
getTargetElement: function getTargetElement() {
|
||
return this.$props.getRootDomNode();
|
||
},
|
||
|
||
|
||
// `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
|
||
getAlignTarget: function getAlignTarget() {
|
||
var point = this.$props.point;
|
||
|
||
if (point) {
|
||
return point;
|
||
}
|
||
return this.getTargetElement;
|
||
},
|
||
getMaskTransitionName: function getMaskTransitionName() {
|
||
var props = this.$props;
|
||
var transitionName = props.maskTransitionName;
|
||
var animation = props.maskAnimation;
|
||
if (!transitionName && animation) {
|
||
transitionName = props.prefixCls + '-' + animation;
|
||
}
|
||
return transitionName;
|
||
},
|
||
getTransitionName: function getTransitionName() {
|
||
var props = this.$props;
|
||
var transitionName = props.transitionName;
|
||
var animation = props.animation;
|
||
if (!transitionName) {
|
||
if (typeof animation === 'string') {
|
||
transitionName = '' + animation;
|
||
} else if (animation && animation.props && animation.props.name) {
|
||
transitionName = animation.props.name;
|
||
}
|
||
}
|
||
return transitionName;
|
||
},
|
||
getClassName: function getClassName(currentAlignClassName) {
|
||
return this.$props.prefixCls + ' ' + this.$props.popupClassName + ' ' + currentAlignClassName;
|
||
},
|
||
getPopupElement: function getPopupElement() {
|
||
var _this3 = this;
|
||
|
||
var h = this.$createElement;
|
||
var props = this.$props,
|
||
$slots = this.$slots,
|
||
getTransitionName = this.getTransitionName;
|
||
var _$data2 = this.$data,
|
||
stretchChecked = _$data2.stretchChecked,
|
||
targetHeight = _$data2.targetHeight,
|
||
targetWidth = _$data2.targetWidth;
|
||
var align = props.align,
|
||
visible = props.visible,
|
||
prefixCls = props.prefixCls,
|
||
animation = props.animation,
|
||
popupStyle = props.popupStyle,
|
||
getClassNameFromAlign = props.getClassNameFromAlign,
|
||
destroyPopupOnHide = props.destroyPopupOnHide,
|
||
stretch = props.stretch;
|
||
|
||
var className = this.getClassName(this.currentAlignClassName || getClassNameFromAlign(align));
|
||
// const hiddenClassName = `${prefixCls}-hidden`
|
||
if (!visible) {
|
||
this.currentAlignClassName = null;
|
||
}
|
||
var sizeStyle = {};
|
||
if (stretch) {
|
||
// Stretch with target
|
||
if (stretch.indexOf('height') !== -1) {
|
||
sizeStyle.height = typeof targetHeight === 'number' ? targetHeight + 'px' : targetHeight;
|
||
} else if (stretch.indexOf('minHeight') !== -1) {
|
||
sizeStyle.minHeight = typeof targetHeight === 'number' ? targetHeight + 'px' : targetHeight;
|
||
}
|
||
if (stretch.indexOf('width') !== -1) {
|
||
sizeStyle.width = typeof targetWidth === 'number' ? targetWidth + 'px' : targetWidth;
|
||
} else if (stretch.indexOf('minWidth') !== -1) {
|
||
sizeStyle.minWidth = typeof targetWidth === 'number' ? targetWidth + 'px' : targetWidth;
|
||
}
|
||
// Delay force align to makes ui smooth
|
||
if (!stretchChecked) {
|
||
// sizeStyle.visibility = 'hidden'
|
||
setTimeout(function () {
|
||
if (_this3.$refs.alignInstance) {
|
||
_this3.$refs.alignInstance.forceAlign();
|
||
}
|
||
}, 0);
|
||
}
|
||
}
|
||
var popupInnerProps = {
|
||
props: {
|
||
prefixCls: prefixCls,
|
||
visible: visible
|
||
// hiddenClassName,
|
||
},
|
||
'class': className,
|
||
on: (0, _propsUtil.getListeners)(this),
|
||
ref: 'popupInstance',
|
||
style: (0, _extends3['default'])({}, sizeStyle, popupStyle, this.getZIndexStyle())
|
||
};
|
||
var transitionProps = {
|
||
props: {
|
||
appear: true,
|
||
css: false
|
||
}
|
||
};
|
||
var transitionName = getTransitionName();
|
||
var useTransition = !!transitionName;
|
||
var transitionEvent = {
|
||
beforeEnter: function beforeEnter() {
|
||
// el.style.display = el.__vOriginalDisplay
|
||
// this.$refs.alignInstance.forceAlign();
|
||
},
|
||
enter: function enter(el, done) {
|
||
// render 后 vue 会移除通过animate动态添加的 class导致动画闪动，延迟两帧添加动画class，可以进一步定位或者重写 transition 组件
|
||
_this3.$nextTick(function () {
|
||
if (_this3.$refs.alignInstance) {
|
||
_this3.$refs.alignInstance.$nextTick(function () {
|
||
_this3.domEl = el;
|
||
(0, _cssAnimation2['default'])(el, transitionName + '-enter', done);
|
||
});
|
||
} else {
|
||
done();
|
||
}
|
||
});
|
||
},
|
||
beforeLeave: function beforeLeave() {
|
||
_this3.domEl = null;
|
||
},
|
||
leave: function leave(el, done) {
|
||
(0, _cssAnimation2['default'])(el, transitionName + '-leave', done);
|
||
}
|
||
};
|
||
|
||
if ((typeof animation === 'undefined' ? 'undefined' : (0, _typeof3['default'])(animation)) === 'object') {
|
||
useTransition = true;
|
||
|
||
var _animation$on = animation.on,
|
||
on = _animation$on === undefined ? {} : _animation$on,
|
||
_animation$props = animation.props,
|
||
_props = _animation$props === undefined ? {} : _animation$props;
|
||
|
||
transitionProps.props = (0, _extends3['default'])({}, transitionProps.props, _props);
|
||
transitionProps.on = (0, _extends3['default'])({}, transitionEvent, on);
|
||
} else {
|
||
transitionProps.on = transitionEvent;
|
||
}
|
||
if (!useTransition) {
|
||
transitionProps = {};
|
||
}
|
||
if (destroyPopupOnHide) {
|
||
return h(
|
||
'transition',
|
||
transitionProps,
|
||
[visible ? h(
|
||
_vcAlign2['default'],
|
||
{
|
||
attrs: {
|
||
target: this.getAlignTarget(),
|
||
|
||
monitorWindowResize: true,
|
||
align: align
|
||
},
|
||
key: 'popup',
|
||
ref: 'alignInstance', on: {
|
||
'align': this.onAlign
|
||
}
|
||
},
|
||
[h(
|
||
_PopupInner2['default'],
|
||
popupInnerProps,
|
||
[$slots['default']]
|
||
)]
|
||
) : null]
|
||
);
|
||
}
|
||
return h(
|
||
'transition',
|
||
transitionProps,
|
||
[h(
|
||
_vcAlign2['default'],
|
||
{
|
||
directives: [{
|
||
name: 'show',
|
||
value: visible
|
||
}],
|
||
attrs: {
|
||
target: this.getAlignTarget(),
|
||
|
||
monitorWindowResize: true,
|
||
disabled: !visible,
|
||
align: align
|
||
},
|
||
key: 'popup',
|
||
ref: 'alignInstance', on: {
|
||
'align': this.onAlign
|
||
}
|
||
},
|
||
[h(
|
||
_PopupInner2['default'],
|
||
popupInnerProps,
|
||
[$slots['default']]
|
||
)]
|
||
)]
|
||
);
|
||
},
|
||
getZIndexStyle: function getZIndexStyle() {
|
||
var style = {};
|
||
var props = this.$props;
|
||
if (props.zIndex !== undefined) {
|
||
style.zIndex = props.zIndex;
|
||
}
|
||
return style;
|
||
},
|
||
getMaskElement: function getMaskElement() {
|
||
var h = this.$createElement;
|
||
|
||
var props = this.$props;
|
||
var maskElement = null;
|
||
if (props.mask) {
|
||
var maskTransition = this.getMaskTransitionName();
|
||
maskElement = h(_LazyRenderBox2['default'], {
|
||
directives: [{
|
||
name: 'show',
|
||
value: props.visible
|
||
}],
|
||
|
||
style: this.getZIndexStyle(),
|
||
key: 'mask',
|
||
'class': props.prefixCls + '-mask',
|
||
attrs: { visible: props.visible
|
||
}
|
||
});
|
||
if (maskTransition) {
|
||
maskElement = h(
|
||
'transition',
|
||
{
|
||
attrs: { appear: true, name: maskTransition }
|
||
},
|
||
[maskElement]
|
||
);
|
||
}
|
||
}
|
||
return maskElement;
|
||
}
|
||
},
|
||
|
||
render: function render() {
|
||
var h = arguments[0];
|
||
var getMaskElement = this.getMaskElement,
|
||
getPopupElement = this.getPopupElement;
|
||
|
||
return h('div', [getMaskElement(), getPopupElement()]);
|
||
}
|
||
}; |