ant-design-vue/components/vc-dialog/Dialog.jsx

446 lines
13 KiB
Vue
Raw Normal View History

2019-08-29 22:50:53 +08:00
import { getComponentFromProp, initDefaultProps } from '../_util/props-util';
2019-01-12 11:33:27 +08:00
import KeyCode from '../_util/KeyCode';
import contains from '../_util/Dom/contains';
import LazyRenderBox from './LazyRenderBox';
import BaseMixin from '../_util/BaseMixin';
import getTransitionProps from '../_util/getTransitionProps';
2019-08-29 22:50:53 +08:00
import switchScrollingEffect from '../_util/switchScrollingEffect';
2019-01-12 11:33:27 +08:00
import getDialogPropTypes from './IDialogPropTypes';
const IDialogPropTypes = getDialogPropTypes();
2018-03-05 19:05:23 +08:00
2019-01-12 11:33:27 +08:00
let uuid = 0;
2018-03-05 19:05:23 +08:00
/* eslint react/no-is-mounted:0 */
2019-01-12 11:33:27 +08:00
function noop() {}
function getScroll(w, top) {
let ret = w[`page${top ? 'Y' : 'X'}Offset`];
const method = `scroll${top ? 'Top' : 'Left'}`;
2018-03-05 19:05:23 +08:00
if (typeof ret !== 'number') {
2019-01-12 11:33:27 +08:00
const d = w.document;
ret = d.documentElement[method];
2018-03-05 19:05:23 +08:00
if (typeof ret !== 'number') {
2019-01-12 11:33:27 +08:00
ret = d.body[method];
2018-03-05 19:05:23 +08:00
}
}
2019-01-12 11:33:27 +08:00
return ret;
2018-03-05 19:05:23 +08:00
}
2019-01-12 11:33:27 +08:00
function setTransformOrigin(node, value) {
2018-03-05 19:05:23 +08:00
const style = node.style;
2019-01-12 11:33:27 +08:00
['Webkit', 'Moz', 'Ms', 'ms'].forEach(prefix => {
style[`${prefix}TransformOrigin`] = value;
});
style[`transformOrigin`] = value;
2018-03-05 19:05:23 +08:00
}
2019-01-12 11:33:27 +08:00
function offset(el) {
const rect = el.getBoundingClientRect();
2018-03-05 19:05:23 +08:00
const pos = {
left: rect.left,
top: rect.top,
2019-01-12 11:33:27 +08:00
};
const doc = el.ownerDocument;
const w = doc.defaultView || doc.parentWindow;
pos.left += getScroll(w);
pos.top += getScroll(w, true);
return pos;
2018-03-05 19:05:23 +08:00
}
2019-08-29 22:50:53 +08:00
2018-03-05 19:05:23 +08:00
export default {
mixins: [BaseMixin],
2019-08-29 22:50:53 +08:00
props: initDefaultProps(IDialogPropTypes, {
mask: true,
visible: false,
keyboard: true,
closable: true,
maskClosable: true,
destroyOnClose: false,
prefixCls: 'rc-dialog',
getOpenCount: () => null,
}),
2019-01-12 11:33:27 +08:00
data() {
2018-03-06 19:14:41 +08:00
return {
destroyPopup: false,
2019-01-12 11:33:27 +08:00
};
2018-03-06 19:14:41 +08:00
},
2018-03-05 19:05:23 +08:00
2019-02-01 17:23:00 +08:00
watch: {
visible(val) {
if (val) {
this.destroyPopup = false;
}
this.$nextTick(() => {
this.updatedCallback(!val);
});
},
},
2018-03-05 19:05:23 +08:00
// private inTransition: boolean;
// private titleId: string;
// private openTime: number;
// private lastOutSideFocusNode: HTMLElement | null;
// private wrap: HTMLElement;
// private dialog: any;
// private sentinel: HTMLElement;
// private bodyIsOverflowing: boolean;
// private scrollbarWidth: number;
2019-01-12 11:33:27 +08:00
beforeMount() {
this.inTransition = false;
this.titleId = `rcDialogTitle${uuid++}`;
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
mounted() {
2018-03-05 19:05:23 +08:00
this.$nextTick(() => {
2019-01-12 11:33:27 +08:00
this.updatedCallback(false);
2019-08-29 22:50:53 +08:00
// if forceRender is true, set element style display to be none;
if ((this.forceRender || (this.getContainer === false && !this.visible)) && this.$refs.wrap) {
this.$refs.wrap.style.display = 'none';
}
2019-01-12 11:33:27 +08:00
});
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
beforeDestroy() {
2019-08-29 22:50:53 +08:00
const { visible, getOpenCount } = this;
if ((visible || this.inTransition) && !getOpenCount()) {
2019-01-12 11:33:27 +08:00
this.removeScrollingEffect();
2018-03-05 19:05:23 +08:00
}
2019-08-29 22:50:53 +08:00
clearTimeout(this.timeoutId);
2018-03-05 19:05:23 +08:00
},
methods: {
2019-01-12 11:33:27 +08:00
updatedCallback(visible) {
const mousePosition = this.mousePosition;
2018-03-05 19:05:23 +08:00
if (this.visible) {
2019-01-12 11:33:27 +08:00
// first show
2018-03-05 19:05:23 +08:00
if (!visible) {
2019-01-12 11:33:27 +08:00
this.openTime = Date.now();
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
// this.lastOutSideFocusNode = document.activeElement
2019-01-12 11:33:27 +08:00
this.addScrollingEffect();
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
// this.$refs.wrap.focus()
2019-01-12 11:33:27 +08:00
this.tryFocus();
const dialogNode = this.$refs.dialog.$el;
2018-03-05 19:05:23 +08:00
if (mousePosition) {
2019-01-12 11:33:27 +08:00
const elOffset = offset(dialogNode);
setTransformOrigin(
dialogNode,
`${mousePosition.x - elOffset.left}px ${mousePosition.y - elOffset.top}px`,
);
2018-03-05 19:05:23 +08:00
} else {
2019-01-12 11:33:27 +08:00
setTransformOrigin(dialogNode, '');
2018-03-05 19:05:23 +08:00
}
}
} else if (visible) {
2019-01-12 11:33:27 +08:00
this.inTransition = true;
2018-03-05 19:05:23 +08:00
if (this.mask && this.lastOutSideFocusNode) {
try {
2019-01-12 11:33:27 +08:00
this.lastOutSideFocusNode.focus();
2018-03-05 19:05:23 +08:00
} catch (e) {
2019-01-12 11:33:27 +08:00
this.lastOutSideFocusNode = null;
2018-03-05 19:05:23 +08:00
}
2019-01-12 11:33:27 +08:00
this.lastOutSideFocusNode = null;
2018-03-05 19:05:23 +08:00
}
}
},
2019-01-12 11:33:27 +08:00
tryFocus() {
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
if (!contains(this.$refs.wrap, document.activeElement)) {
2019-01-12 11:33:27 +08:00
this.lastOutSideFocusNode = document.activeElement;
this.$refs.sentinelStart.focus();
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
}
},
2019-01-12 11:33:27 +08:00
onAnimateLeave() {
const { afterClose, destroyOnClose } = this;
2018-03-05 19:05:23 +08:00
// need demo?
// https://github.com/react-component/dialog/pull/28
if (this.$refs.wrap) {
2019-01-12 11:33:27 +08:00
this.$refs.wrap.style.display = 'none';
2018-03-05 19:05:23 +08:00
}
2018-03-06 19:14:41 +08:00
if (destroyOnClose) {
2019-01-12 11:33:27 +08:00
this.destroyPopup = true;
2018-03-06 19:14:41 +08:00
}
2019-01-12 11:33:27 +08:00
this.inTransition = false;
this.removeScrollingEffect();
2018-03-05 19:05:23 +08:00
if (afterClose) {
2019-01-12 11:33:27 +08:00
afterClose();
2018-03-05 19:05:23 +08:00
}
},
2019-08-29 22:50:53 +08:00
onDialogMouseDown() {
this.dialogMouseDown = true;
},
onMaskMouseUp() {
if (this.dialogMouseDown) {
this.timeoutId = setTimeout(() => {
this.dialogMouseDown = false;
}, 0);
}
},
2019-01-12 11:33:27 +08:00
onMaskClick(e) {
// android trigger click on open (fastclick??)
2018-03-05 19:05:23 +08:00
if (Date.now() - this.openTime < 300) {
2019-01-12 11:33:27 +08:00
return;
2018-03-05 19:05:23 +08:00
}
2019-08-29 22:50:53 +08:00
if (e.target === e.currentTarget && !this.dialogMouseDown) {
2019-01-12 11:33:27 +08:00
this.close(e);
2018-03-05 19:05:23 +08:00
}
},
2019-01-12 11:33:27 +08:00
onKeydown(e) {
const props = this.$props;
2018-03-05 19:05:23 +08:00
if (props.keyboard && e.keyCode === KeyCode.ESC) {
2019-01-12 11:33:27 +08:00
e.stopPropagation();
this.close(e);
return;
2018-03-05 19:05:23 +08:00
}
// keep focus inside dialog
if (props.visible) {
if (e.keyCode === KeyCode.TAB) {
2019-01-12 11:33:27 +08:00
const activeElement = document.activeElement;
const sentinelStart = this.$refs.sentinelStart;
2018-03-05 19:05:23 +08:00
if (e.shiftKey) {
if (activeElement === sentinelStart) {
2019-01-12 11:33:27 +08:00
this.$refs.sentinelEnd.focus();
2018-03-05 19:05:23 +08:00
}
} else if (activeElement === this.$refs.sentinelEnd) {
2019-01-12 11:33:27 +08:00
sentinelStart.focus();
2018-03-05 19:05:23 +08:00
}
}
}
},
2019-01-12 11:33:27 +08:00
getDialogElement() {
const {
closable,
prefixCls,
width,
height,
title,
footer: tempFooter,
bodyStyle,
visible,
bodyProps,
} = this;
const dest = {};
2018-03-06 19:14:41 +08:00
if (width !== undefined) {
2019-01-12 11:33:27 +08:00
dest.width = typeof width === 'number' ? `${width}px` : width;
2018-03-05 19:05:23 +08:00
}
2018-03-06 19:14:41 +08:00
if (height !== undefined) {
2019-01-12 11:33:27 +08:00
dest.height = typeof height === 'number' ? `${height}px` : height;
2018-03-05 19:05:23 +08:00
}
2019-01-12 11:33:27 +08:00
let footer;
2018-03-06 19:14:41 +08:00
if (tempFooter) {
2018-03-05 19:05:23 +08:00
footer = (
2019-01-12 11:33:27 +08:00
<div key="footer" class={`${prefixCls}-footer`} ref="footer">
2018-03-06 19:14:41 +08:00
{tempFooter}
2018-03-05 19:05:23 +08:00
</div>
2019-01-12 11:33:27 +08:00
);
2018-03-05 19:05:23 +08:00
}
2019-01-12 11:33:27 +08:00
let header;
2018-03-06 19:14:41 +08:00
if (title) {
2018-03-05 19:05:23 +08:00
header = (
2019-01-12 11:33:27 +08:00
<div key="header" class={`${prefixCls}-header`} ref="header">
2018-03-05 19:05:23 +08:00
<div class={`${prefixCls}-title`} id={this.titleId}>
2018-03-06 19:14:41 +08:00
{title}
2018-03-05 19:05:23 +08:00
</div>
</div>
2019-01-12 11:33:27 +08:00
);
2018-03-05 19:05:23 +08:00
}
2019-01-12 11:33:27 +08:00
let closer;
2018-03-05 19:05:23 +08:00
if (closable) {
2019-01-12 11:33:27 +08:00
const closeIcon = getComponentFromProp(this, 'closeIcon');
2018-03-05 19:05:23 +08:00
closer = (
<button
2019-08-29 22:50:53 +08:00
type="button"
2019-01-12 11:33:27 +08:00
key="close"
2018-03-06 22:53:32 +08:00
onClick={this.close || noop}
2019-01-12 11:33:27 +08:00
aria-label="Close"
2018-03-05 19:05:23 +08:00
class={`${prefixCls}-close`}
>
{closeIcon || <span class={`${prefixCls}-close-x`} />}
2019-01-12 11:33:27 +08:00
</button>
);
2018-03-05 19:05:23 +08:00
}
2019-01-12 11:33:27 +08:00
const style = { ...this.dialogStyle, ...dest };
const sentinelStyle = { width: 0, height: 0, overflow: 'hidden' };
2018-03-06 19:14:41 +08:00
const cls = {
[prefixCls]: true,
...this.dialogClass,
2019-01-12 11:33:27 +08:00
};
const transitionName = this.getTransitionName();
2018-03-05 19:05:23 +08:00
const dialogElement = (
<LazyRenderBox
2018-03-06 19:14:41 +08:00
v-show={visible}
2019-01-12 11:33:27 +08:00
key="dialog-element"
role="document"
ref="dialog"
2018-03-05 19:05:23 +08:00
style={style}
2018-03-06 19:14:41 +08:00
class={cls}
2019-08-29 22:50:53 +08:00
onMousedown={this.onDialogMouseDown}
2018-03-05 19:05:23 +08:00
>
2019-08-29 22:50:53 +08:00
<div tabIndex={0} ref="sentinelStart" style={sentinelStyle} aria-hidden="true" />
2018-03-05 19:05:23 +08:00
<div class={`${prefixCls}-content`}>
{closer}
{header}
2019-01-12 11:33:27 +08:00
<div key="body" class={`${prefixCls}-body`} style={bodyStyle} ref="body" {...bodyProps}>
2018-03-05 19:05:23 +08:00
{this.$slots.default}
</div>
{footer}
</div>
2019-08-29 22:50:53 +08:00
<div tabIndex={0} ref="sentinelEnd" style={sentinelStyle} aria-hidden="true" />
2018-03-05 19:05:23 +08:00
</LazyRenderBox>
2019-01-12 11:33:27 +08:00
);
2018-03-05 19:05:23 +08:00
const dialogTransitionProps = getTransitionProps(transitionName, {
afterLeave: this.onAnimateLeave,
2019-01-12 11:33:27 +08:00
});
2018-03-05 19:05:23 +08:00
return (
2019-01-12 11:33:27 +08:00
<transition key="dialog" {...dialogTransitionProps}>
{visible || !this.destroyPopup ? dialogElement : null}
2018-03-05 19:05:23 +08:00
</transition>
2019-01-12 11:33:27 +08:00
);
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
getZIndexStyle() {
const style = {};
const props = this.$props;
2018-03-05 19:05:23 +08:00
if (props.zIndex !== undefined) {
2019-01-12 11:33:27 +08:00
style.zIndex = props.zIndex;
2018-03-05 19:05:23 +08:00
}
2019-01-12 11:33:27 +08:00
return style;
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
getWrapStyle() {
return { ...this.getZIndexStyle(), ...this.wrapStyle };
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
getMaskStyle() {
return { ...this.getZIndexStyle(), ...this.maskStyle };
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
getMaskElement() {
const props = this.$props;
let maskElement;
2018-03-05 19:05:23 +08:00
if (props.mask) {
2019-01-12 11:33:27 +08:00
const maskTransition = this.getMaskTransitionName();
2018-03-05 19:05:23 +08:00
maskElement = (
<LazyRenderBox
v-show={props.visible}
style={this.getMaskStyle()}
2019-01-12 11:33:27 +08:00
key="mask"
2018-03-05 19:05:23 +08:00
class={`${props.prefixCls}-mask`}
{...props.maskProps}
/>
2019-01-12 11:33:27 +08:00
);
2018-03-05 19:05:23 +08:00
if (maskTransition) {
2019-01-12 11:33:27 +08:00
const maskTransitionProps = getTransitionProps(maskTransition);
2018-03-05 19:05:23 +08:00
maskElement = (
2019-01-12 11:33:27 +08:00
<transition key="mask" {...maskTransitionProps}>
2018-03-05 19:05:23 +08:00
{maskElement}
</transition>
2019-01-12 11:33:27 +08:00
);
2018-03-05 19:05:23 +08:00
}
}
2019-01-12 11:33:27 +08:00
return maskElement;
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
getMaskTransitionName() {
const props = this.$props;
let transitionName = props.maskTransitionName;
const animation = props.maskAnimation;
2018-03-05 19:05:23 +08:00
if (!transitionName && animation) {
2019-01-12 11:33:27 +08:00
transitionName = `${props.prefixCls}-${animation}`;
2018-03-05 19:05:23 +08:00
}
2019-01-12 11:33:27 +08:00
return transitionName;
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
getTransitionName() {
const props = this.$props;
let transitionName = props.transitionName;
const animation = props.animation;
2018-03-05 19:05:23 +08:00
if (!transitionName && animation) {
2019-01-12 11:33:27 +08:00
transitionName = `${props.prefixCls}-${animation}`;
2018-03-05 19:05:23 +08:00
}
2019-01-12 11:33:27 +08:00
return transitionName;
2018-03-05 19:05:23 +08:00
},
2019-08-29 22:50:53 +08:00
// setScrollbar() {
// if (this.bodyIsOverflowing && this.scrollbarWidth !== undefined) {
// document.body.style.paddingRight = `${this.scrollbarWidth}px`;
// }
// },
2019-01-12 11:33:27 +08:00
addScrollingEffect() {
2019-08-29 22:50:53 +08:00
const { getOpenCount } = this;
const openCount = getOpenCount();
2018-03-05 19:05:23 +08:00
if (openCount !== 1) {
2019-01-12 11:33:27 +08:00
return;
2018-03-05 19:05:23 +08:00
}
2019-08-29 22:50:53 +08:00
switchScrollingEffect();
2019-01-12 11:33:27 +08:00
document.body.style.overflow = 'hidden';
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
removeScrollingEffect() {
2019-08-29 22:50:53 +08:00
const { getOpenCount } = this;
const openCount = getOpenCount();
2018-03-05 19:05:23 +08:00
if (openCount !== 0) {
2019-01-12 11:33:27 +08:00
return;
2018-03-05 19:05:23 +08:00
}
2019-01-12 11:33:27 +08:00
document.body.style.overflow = '';
2019-08-29 22:50:53 +08:00
switchScrollingEffect(true);
2019-01-12 11:33:27 +08:00
// this.resetAdjustments();
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
close(e) {
this.__emit('close', e);
2018-03-05 19:05:23 +08:00
},
2019-08-29 22:50:53 +08:00
// checkScrollbar() {
// let fullWindowWidth = window.innerWidth;
// if (!fullWindowWidth) {
// // workaround for missing window.innerWidth in IE8
// const documentElementRect = document.documentElement.getBoundingClientRect();
// fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
// }
// this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
// if (this.bodyIsOverflowing) {
// this.scrollbarWidth = getScrollBarSize();
// }
// },
// resetScrollbar() {
// document.body.style.paddingRight = '';
// },
// adjustDialog() {
// if (this.$refs.wrap && this.scrollbarWidth !== undefined) {
// const modalIsOverflowing =
// this.$refs.wrap.scrollHeight > document.documentElement.clientHeight;
// this.$refs.wrap.style.paddingLeft = `${
// !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : ''
// }px`;
// this.$refs.wrap.style.paddingRight = `${
// this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
// }px`;
// }
// },
// resetAdjustments() {
// if (this.$refs.wrap) {
// this.$refs.wrap.style.paddingLeft = this.$refs.wrap.style.paddingLeft = '';
// }
// },
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
render() {
const { prefixCls, maskClosable, visible, wrapClassName, title, wrapProps } = this;
const style = this.getWrapStyle();
2018-03-05 19:05:23 +08:00
// clear hide display
// and only set display after async anim, not here for hide
if (visible) {
2019-01-12 11:33:27 +08:00
style.display = null;
2018-03-05 19:05:23 +08:00
}
return (
<div>
{this.getMaskElement()}
<div
tabIndex={-1}
onKeydown={this.onKeydown}
class={`${prefixCls}-wrap ${wrapClassName || ''}`}
2019-01-12 11:33:27 +08:00
ref="wrap"
2018-03-06 22:53:32 +08:00
onClick={maskClosable ? this.onMaskClick : noop}
2019-08-29 22:50:53 +08:00
onMouseup={maskClosable ? this.onMaskMouseUp : noop}
2019-01-12 11:33:27 +08:00
role="dialog"
2018-03-05 19:05:23 +08:00
aria-labelledby={title ? this.titleId : null}
style={style}
{...wrapProps}
>
{this.getDialogElement()}
</div>
</div>
2019-01-12 11:33:27 +08:00
);
2018-03-05 19:05:23 +08:00
},
2019-01-12 11:33:27 +08:00
};