github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update dialog to 7.5.5

pull/1150/head
tangjinzhou 2019-08-29 22:50:53 +08:00
parent 154e24687c
commit acbc6158b8
9 changed files with 114 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/_util/switchScrollingEffect.js
View File

@ -1,8 +1,8 @@
import getScrollBarSize from './getScrollBarSize';
export default (close) => {
const bodyIsOverflowing = document.body.scrollHeight >
(window.innerHeight || document.documentElement.clientHeight) &&
export default close => {
const bodyIsOverflowing =
document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) &&
window.innerWidth > document.body.offsetWidth;
if (!bodyIsOverflowing) {
return;

6
components/_util/warning.js
View File

@ -19,11 +19,7 @@ export function resetWarned() {
warned = {};
}
export function call(
method,
valid,
message,
) {
export function call(method, valid, message) {
if (!valid && !warned[message]) {
method(false, message);
warned[message] = true;

1
components/config-provider/index.jsx
View File

@ -14,7 +14,6 @@ function getWatch(keys = []) {
return watch;
}
const ConfigProvider = {
name: 'AConfigProvider',
props: {

18
components/modal/__tests__/__snapshots__/Modal.test.js.snap
View File

@ -8,14 +8,14 @@ exports[`Modal render correctly 1`] = `
<div class="ant-modal-mask"></div>
<div tabindex="-1" role="dialog" class="ant-modal-wrap ">
<div role="document" class="ant-modal" style="width: 520px;">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinelStart</div>
<div class="ant-modal-content"><button aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><i aria-label="icon: close" class="ant-modal-close-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
<div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;"></div>
<div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><i aria-label="icon: close" class="ant-modal-close-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
<div class="ant-modal-body">Here is content of Modal</div>
<div class="ant-modal-footer">
<div><button type="button" class="ant-btn ant-btn-default"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary"><span>OK</span></button></div>
</div>
</div>
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinelEnd</div>
<div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;"></div>
</div>
</div>
</div>
@ -33,14 +33,14 @@ exports[`Modal render correctly 2`] = `
<div class="ant-modal-mask"></div>
<div tabindex="-1" role="dialog" class="ant-modal-wrap ">
<div role="document" class="ant-modal" style="width: 520px;">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinelStart</div>
<div class="ant-modal-content"><button aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><i aria-label="icon: close" class="ant-modal-close-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
<div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;"></div>
<div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><i aria-label="icon: close" class="ant-modal-close-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
<div class="ant-modal-body">Here is content of Modal</div>
<div class="ant-modal-footer">
<div><button type="button" class="ant-btn ant-btn-default"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary"><span>OK</span></button></div>
</div>
</div>
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinelEnd</div>
<div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;"></div>
</div>
</div>
</div>
@ -58,11 +58,11 @@ exports[`Modal render without footer 1`] = `
<div class="ant-modal-mask"></div>
<div tabindex="-1" role="dialog" class="ant-modal-wrap ">
<div role="document" class="ant-modal" style="width: 520px;">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinelStart</div>
<div class="ant-modal-content"><button aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><i aria-label="icon: close" class="ant-modal-close-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
<div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;"></div>
<div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><i aria-label="icon: close" class="ant-modal-close-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
<div class="ant-modal-body">Here is content of Modal</div>
</div>
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinelEnd</div>
<div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;"></div>
</div>
</div>
</div>

149
components/vc-dialog/Dialog.jsx
View File

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

4
components/vc-dialog/IDialogPropTypes.js
View File

@ -31,10 +31,12 @@ function IDialogPropTypes() {
bodyProps: PropTypes.any,
maskProps: PropTypes.any,
wrapProps: PropTypes.any,
getContainer: PropTypes.func,
getContainer: PropTypes.any,
dialogStyle: PropTypes.object.def({}),
dialogClass: PropTypes.object.def({}),
closeIcon: PropTypes.any,
forceRender: PropTypes.bool,
getOpenCount: PropTypes.func,
};
}

2
components/vc-dialog/LazyRenderBox.jsx
View File

@ -8,6 +8,6 @@ const ILazyRenderBoxPropTypes = {
export default {
props: ILazyRenderBoxPropTypes,
render() {
return <div>{this.$slots.default}</div>;
return <div {...{ on: this.$listeners }}>{this.$slots.default}</div>;
},
};

17
components/vc-dialog/demo/ant-design.vue
View File

@ -18,8 +18,9 @@ export default {
width: 600,
destroyOnClose: false,
center: false,
mousePosition: {},
mousePosition: undefined,
useIcon: false,
forceRender: false,
};
},
methods: {
@ -55,6 +56,10 @@ export default {
this.destroyOnClose = e.target.checked;
},
onForceRenderChange (e) {
this.forceRender = e.target.checked;
},
changeWidth () {
this.width = this.width === 600 ? 800 : 600;
},
@ -87,6 +92,7 @@ export default {
mousePosition={this.mousePosition}
destroyOnClose={this.destroyOnClose}
closeIcon={this.useIcon ? this.getSvg(clearPath, {}, true) : undefined}
forceRender={this.forceRender}
>
<input autoFocus/>
<p>basic modal</p>
@ -132,6 +138,15 @@ export default {
onChange={this.handleCenter}
/>
</label>
&nbsp;
<label>
force render
<input
type="checkbox"
checked={this.forceRender}
onChange={this.onForceRenderChange}
/>
</label>
</p>
{dialog}
</div>

2
components/vc-dialog/index.js
View File

@ -1,3 +1,3 @@
// based on vc-dialog 7.2.1
// based on vc-dialog 7.5.5
import DialogWrap from './DialogWrap';
export default DialogWrap;