|
|
|
@ -1,15 +1,14 @@
|
|
|
|
import { getComponentFromProp } from '../_util/props-util';
|
|
|
|
import { getComponentFromProp, initDefaultProps } from '../_util/props-util';
|
|
|
|
import KeyCode from '../_util/KeyCode';
|
|
|
|
import KeyCode from '../_util/KeyCode';
|
|
|
|
import contains from '../_util/Dom/contains';
|
|
|
|
import contains from '../_util/Dom/contains';
|
|
|
|
import LazyRenderBox from './LazyRenderBox';
|
|
|
|
import LazyRenderBox from './LazyRenderBox';
|
|
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
|
|
import getTransitionProps from '../_util/getTransitionProps';
|
|
|
|
import getTransitionProps from '../_util/getTransitionProps';
|
|
|
|
import getScrollBarSize from '../_util/getScrollBarSize';
|
|
|
|
import switchScrollingEffect from '../_util/switchScrollingEffect';
|
|
|
|
import getDialogPropTypes from './IDialogPropTypes';
|
|
|
|
import getDialogPropTypes from './IDialogPropTypes';
|
|
|
|
const IDialogPropTypes = getDialogPropTypes();
|
|
|
|
const IDialogPropTypes = getDialogPropTypes();
|
|
|
|
|
|
|
|
|
|
|
|
let uuid = 0;
|
|
|
|
let uuid = 0;
|
|
|
|
let openCount = 0;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* eslint react/no-is-mounted:0 */
|
|
|
|
/* eslint react/no-is-mounted:0 */
|
|
|
|
function noop() {}
|
|
|
|
function noop() {}
|
|
|
|
@ -46,23 +45,19 @@ function offset(el) {
|
|
|
|
pos.top += getScroll(w, true);
|
|
|
|
pos.top += getScroll(w, true);
|
|
|
|
return pos;
|
|
|
|
return pos;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const initDefaultProps = (propTypes, defaultProps) => {
|
|
|
|
|
|
|
|
return Object.keys(defaultProps).map(k => propTypes[k].def(defaultProps[k]));
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
mixins: [BaseMixin],
|
|
|
|
mixins: [BaseMixin],
|
|
|
|
props: {
|
|
|
|
props: initDefaultProps(IDialogPropTypes, {
|
|
|
|
...IDialogPropTypes,
|
|
|
|
mask: true,
|
|
|
|
...initDefaultProps(IDialogPropTypes, {
|
|
|
|
visible: false,
|
|
|
|
mask: true,
|
|
|
|
keyboard: true,
|
|
|
|
visible: false,
|
|
|
|
closable: true,
|
|
|
|
keyboard: true,
|
|
|
|
maskClosable: true,
|
|
|
|
closable: true,
|
|
|
|
destroyOnClose: false,
|
|
|
|
maskClosable: true,
|
|
|
|
prefixCls: 'rc-dialog',
|
|
|
|
destroyOnClose: false,
|
|
|
|
getOpenCount: () => null,
|
|
|
|
prefixCls: 'rc-dialog',
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
destroyPopup: false,
|
|
|
|
destroyPopup: false,
|
|
|
|
@ -97,12 +92,18 @@ export default {
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.updatedCallback(false);
|
|
|
|
this.updatedCallback(false);
|
|
|
|
|
|
|
|
// 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';
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
beforeDestroy() {
|
|
|
|
beforeDestroy() {
|
|
|
|
if (this.visible || this.inTransition) {
|
|
|
|
const { visible, getOpenCount } = this;
|
|
|
|
|
|
|
|
if ((visible || this.inTransition) && !getOpenCount()) {
|
|
|
|
this.removeScrollingEffect();
|
|
|
|
this.removeScrollingEffect();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
clearTimeout(this.timeoutId);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
updatedCallback(visible) {
|
|
|
|
updatedCallback(visible) {
|
|
|
|
@ -160,12 +161,23 @@ export default {
|
|
|
|
afterClose();
|
|
|
|
afterClose();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
onDialogMouseDown() {
|
|
|
|
|
|
|
|
this.dialogMouseDown = true;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMaskMouseUp() {
|
|
|
|
|
|
|
|
if (this.dialogMouseDown) {
|
|
|
|
|
|
|
|
this.timeoutId = setTimeout(() => {
|
|
|
|
|
|
|
|
this.dialogMouseDown = false;
|
|
|
|
|
|
|
|
}, 0);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
onMaskClick(e) {
|
|
|
|
onMaskClick(e) {
|
|
|
|
// android trigger click on open (fastclick??)
|
|
|
|
// android trigger click on open (fastclick??)
|
|
|
|
if (Date.now() - this.openTime < 300) {
|
|
|
|
if (Date.now() - this.openTime < 300) {
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (e.target === e.currentTarget) {
|
|
|
|
if (e.target === e.currentTarget && !this.dialogMouseDown) {
|
|
|
|
this.close(e);
|
|
|
|
this.close(e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -236,6 +248,7 @@ export default {
|
|
|
|
const closeIcon = getComponentFromProp(this, 'closeIcon');
|
|
|
|
const closeIcon = getComponentFromProp(this, 'closeIcon');
|
|
|
|
closer = (
|
|
|
|
closer = (
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
|
|
|
|
type="button"
|
|
|
|
key="close"
|
|
|
|
key="close"
|
|
|
|
onClick={this.close || noop}
|
|
|
|
onClick={this.close || noop}
|
|
|
|
aria-label="Close"
|
|
|
|
aria-label="Close"
|
|
|
|
@ -261,10 +274,9 @@ export default {
|
|
|
|
ref="dialog"
|
|
|
|
ref="dialog"
|
|
|
|
style={style}
|
|
|
|
style={style}
|
|
|
|
class={cls}
|
|
|
|
class={cls}
|
|
|
|
|
|
|
|
onMousedown={this.onDialogMouseDown}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div tabIndex={0} ref="sentinelStart" style={sentinelStyle}>
|
|
|
|
<div tabIndex={0} ref="sentinelStart" style={sentinelStyle} aria-hidden="true" />
|
|
|
|
sentinelStart
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class={`${prefixCls}-content`}>
|
|
|
|
<div class={`${prefixCls}-content`}>
|
|
|
|
{closer}
|
|
|
|
{closer}
|
|
|
|
{header}
|
|
|
|
{header}
|
|
|
|
@ -273,9 +285,7 @@ export default {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{footer}
|
|
|
|
{footer}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div tabIndex={0} ref="sentinelEnd" style={sentinelStyle}>
|
|
|
|
<div tabIndex={0} ref="sentinelEnd" style={sentinelStyle} aria-hidden="true" />
|
|
|
|
sentinelEnd
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</LazyRenderBox>
|
|
|
|
</LazyRenderBox>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
const dialogTransitionProps = getTransitionProps(transitionName, {
|
|
|
|
const dialogTransitionProps = getTransitionProps(transitionName, {
|
|
|
|
@ -344,65 +354,65 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return transitionName;
|
|
|
|
return transitionName;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
setScrollbar() {
|
|
|
|
// setScrollbar() {
|
|
|
|
if (this.bodyIsOverflowing && this.scrollbarWidth !== undefined) {
|
|
|
|
// if (this.bodyIsOverflowing && this.scrollbarWidth !== undefined) {
|
|
|
|
document.body.style.paddingRight = `${this.scrollbarWidth}px`;
|
|
|
|
// document.body.style.paddingRight = `${this.scrollbarWidth}px`;
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
addScrollingEffect() {
|
|
|
|
addScrollingEffect() {
|
|
|
|
openCount++;
|
|
|
|
const { getOpenCount } = this;
|
|
|
|
|
|
|
|
const openCount = getOpenCount();
|
|
|
|
if (openCount !== 1) {
|
|
|
|
if (openCount !== 1) {
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.checkScrollbar();
|
|
|
|
switchScrollingEffect();
|
|
|
|
this.setScrollbar();
|
|
|
|
|
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
// this.adjustDialog();
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
removeScrollingEffect() {
|
|
|
|
removeScrollingEffect() {
|
|
|
|
openCount--;
|
|
|
|
const { getOpenCount } = this;
|
|
|
|
|
|
|
|
const openCount = getOpenCount();
|
|
|
|
if (openCount !== 0) {
|
|
|
|
if (openCount !== 0) {
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
document.body.style.overflow = '';
|
|
|
|
document.body.style.overflow = '';
|
|
|
|
this.resetScrollbar();
|
|
|
|
switchScrollingEffect(true);
|
|
|
|
// this.resetAdjustments();
|
|
|
|
// this.resetAdjustments();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
close(e) {
|
|
|
|
close(e) {
|
|
|
|
this.__emit('close', e);
|
|
|
|
this.__emit('close', e);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
checkScrollbar() {
|
|
|
|
// checkScrollbar() {
|
|
|
|
let fullWindowWidth = window.innerWidth;
|
|
|
|
// let fullWindowWidth = window.innerWidth;
|
|
|
|
if (!fullWindowWidth) {
|
|
|
|
// if (!fullWindowWidth) {
|
|
|
|
// workaround for missing window.innerWidth in IE8
|
|
|
|
// // workaround for missing window.innerWidth in IE8
|
|
|
|
const documentElementRect = document.documentElement.getBoundingClientRect();
|
|
|
|
// const documentElementRect = document.documentElement.getBoundingClientRect();
|
|
|
|
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
|
|
|
|
// fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
|
|
|
|
// this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
|
|
|
|
if (this.bodyIsOverflowing) {
|
|
|
|
// if (this.bodyIsOverflowing) {
|
|
|
|
this.scrollbarWidth = getScrollBarSize();
|
|
|
|
// this.scrollbarWidth = getScrollBarSize();
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
resetScrollbar() {
|
|
|
|
// resetScrollbar() {
|
|
|
|
document.body.style.paddingRight = '';
|
|
|
|
// document.body.style.paddingRight = '';
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
adjustDialog() {
|
|
|
|
// adjustDialog() {
|
|
|
|
if (this.$refs.wrap && this.scrollbarWidth !== undefined) {
|
|
|
|
// if (this.$refs.wrap && this.scrollbarWidth !== undefined) {
|
|
|
|
const modalIsOverflowing =
|
|
|
|
// const modalIsOverflowing =
|
|
|
|
this.$refs.wrap.scrollHeight > document.documentElement.clientHeight;
|
|
|
|
// this.$refs.wrap.scrollHeight > document.documentElement.clientHeight;
|
|
|
|
this.$refs.wrap.style.paddingLeft = `${
|
|
|
|
// this.$refs.wrap.style.paddingLeft = `${
|
|
|
|
!this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : ''
|
|
|
|
// !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : ''
|
|
|
|
}px`;
|
|
|
|
// }px`;
|
|
|
|
this.$refs.wrap.style.paddingRight = `${
|
|
|
|
// this.$refs.wrap.style.paddingRight = `${
|
|
|
|
this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
|
|
|
|
// this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
|
|
|
|
}px`;
|
|
|
|
// }px`;
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
resetAdjustments() {
|
|
|
|
// resetAdjustments() {
|
|
|
|
if (this.$refs.wrap) {
|
|
|
|
// if (this.$refs.wrap) {
|
|
|
|
this.$refs.wrap.style.paddingLeft = this.$refs.wrap.style.paddingLeft = '';
|
|
|
|
// this.$refs.wrap.style.paddingLeft = this.$refs.wrap.style.paddingLeft = '';
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
},
|
|
|
|
},
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
const { prefixCls, maskClosable, visible, wrapClassName, title, wrapProps } = this;
|
|
|
|
const { prefixCls, maskClosable, visible, wrapClassName, title, wrapProps } = this;
|
|
|
|
@ -421,6 +431,7 @@ export default {
|
|
|
|
class={`${prefixCls}-wrap ${wrapClassName || ''}`}
|
|
|
|
class={`${prefixCls}-wrap ${wrapClassName || ''}`}
|
|
|
|
ref="wrap"
|
|
|
|
ref="wrap"
|
|
|
|
onClick={maskClosable ? this.onMaskClick : noop}
|
|
|
|
onClick={maskClosable ? this.onMaskClick : noop}
|
|
|
|
|
|
|
|
onMouseup={maskClosable ? this.onMaskMouseUp : noop}
|
|
|
|
role="dialog"
|
|
|
|
role="dialog"
|
|
|
|
aria-labelledby={title ? this.titleId : null}
|
|
|
|
aria-labelledby={title ? this.titleId : null}
|
|
|
|
style={style}
|
|
|
|
style={style}
|
|
|
|
|
tangjinzhou
5 years ago