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'; import getScrollBarSize from './getScrollBarSize';
export default (close) => { export default close => {
const bodyIsOverflowing = document.body.scrollHeight > const bodyIsOverflowing =
(window.innerHeight || document.documentElement.clientHeight) && document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) &&
window.innerWidth > document.body.offsetWidth; window.innerWidth > document.body.offsetWidth;
if (!bodyIsOverflowing) { if (!bodyIsOverflowing) {
return; return;

6
components/_util/warning.js
View File

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

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

@ -14,7 +14,6 @@ function getWatch(keys = []) {
return watch; return watch;
} }
const ConfigProvider = { const ConfigProvider = {
name: 'AConfigProvider', name: 'AConfigProvider',
props: { 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 class="ant-modal-mask"></div>
<div tabindex="-1" role="dialog" class="ant-modal-wrap "> <div tabindex="-1" role="dialog" class="ant-modal-wrap ">
<div role="document" class="ant-modal" style="width: 520px;"> <div role="document" class="ant-modal" style="width: 520px;">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinelStart</div> <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;"></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 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-body">Here is content of Modal</div>
<div class="ant-modal-footer"> <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><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> </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> </div>
</div> </div>
@ -33,14 +33,14 @@ exports[`Modal render correctly 2`] = `
<div class="ant-modal-mask"></div> <div class="ant-modal-mask"></div>
<div tabindex="-1" role="dialog" class="ant-modal-wrap "> <div tabindex="-1" role="dialog" class="ant-modal-wrap ">
<div role="document" class="ant-modal" style="width: 520px;"> <div role="document" class="ant-modal" style="width: 520px;">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinelStart</div> <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;"></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 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-body">Here is content of Modal</div>
<div class="ant-modal-footer"> <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><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> </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> </div>
</div> </div>
@ -58,11 +58,11 @@ exports[`Modal render without footer 1`] = `
<div class="ant-modal-mask"></div> <div class="ant-modal-mask"></div>
<div tabindex="-1" role="dialog" class="ant-modal-wrap "> <div tabindex="-1" role="dialog" class="ant-modal-wrap ">
<div role="document" class="ant-modal" style="width: 520px;"> <div role="document" class="ant-modal" style="width: 520px;">
<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinelStart</div> <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;"></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 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-body">Here is content of Modal</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> </div>
</div> </div>

133
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 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,14 +45,10 @@ 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,
...initDefaultProps(IDialogPropTypes, {
mask: true, mask: true,
visible: false, visible: false,
keyboard: true, keyboard: true,
@ -61,8 +56,8 @@ export default {
maskClosable: true, maskClosable: true,
destroyOnClose: false, destroyOnClose: false,
prefixCls: 'rc-dialog', prefixCls: 'rc-dialog',
getOpenCount: () => null,
}), }),
},
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}

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

@ -31,10 +31,12 @@ function IDialogPropTypes() {
bodyProps: PropTypes.any, bodyProps: PropTypes.any,
maskProps: PropTypes.any, maskProps: PropTypes.any,
wrapProps: PropTypes.any, wrapProps: PropTypes.any,
getContainer: PropTypes.func, getContainer: PropTypes.any,
dialogStyle: PropTypes.object.def({}), dialogStyle: PropTypes.object.def({}),
dialogClass: PropTypes.object.def({}), dialogClass: PropTypes.object.def({}),
closeIcon: PropTypes.any, 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 { export default {
props: ILazyRenderBoxPropTypes, props: ILazyRenderBoxPropTypes,
render() { 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, width: 600,
destroyOnClose: false, destroyOnClose: false,
center: false, center: false,
mousePosition: {}, mousePosition: undefined,
useIcon: false, useIcon: false,
forceRender: false,
}; };
}, },
methods: { methods: {
@ -55,6 +56,10 @@ export default {
this.destroyOnClose = e.target.checked; this.destroyOnClose = e.target.checked;
}, },
onForceRenderChange (e) {
this.forceRender = e.target.checked;
},
changeWidth () { changeWidth () {
this.width = this.width === 600 ? 800 : 600; this.width = this.width === 600 ? 800 : 600;
}, },
@ -87,6 +92,7 @@ export default {
mousePosition={this.mousePosition} mousePosition={this.mousePosition}
destroyOnClose={this.destroyOnClose} destroyOnClose={this.destroyOnClose}
closeIcon={this.useIcon ? this.getSvg(clearPath, {}, true) : undefined} closeIcon={this.useIcon ? this.getSvg(clearPath, {}, true) : undefined}
forceRender={this.forceRender}
> >
<input autoFocus/> <input autoFocus/>
<p>basic modal</p> <p>basic modal</p>
@ -132,6 +138,15 @@ export default {
onChange={this.handleCenter} onChange={this.handleCenter}
/> />
</label> </label>
&nbsp;
<label>
force render
<input
type="checkbox"
checked={this.forceRender}
onChange={this.onForceRenderChange}
/>
</label>
</p> </p>
{dialog} {dialog}
</div> </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'; import DialogWrap from './DialogWrap';
export default DialogWrap; export default DialogWrap;